fix: pass tests

__tests__/cases/pjax.general.ts

@@ -1,4 +1,11 @@
-import { patientClick, selectFileTreeItem, sleep, waitForLegacyPJAXRedirect } from '../utils'
+import {
+  collapseFloatModeSidebar,
+  expandFloatModeSidebar,
+  patientClick,
+  selectFileTreeItem,
+  sleep,
+  waitForLegacyPJAXRedirect,
+} from '../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
@@ -6,8 +13,10 @@ describe(`in Gitako project page`, () => {
   it('should work with PJAX', async () => {
     await sleep(3000)
 
-    await patientClick(page, selectFileTreeItem('src/analytics.ts'))
+    await expandFloatModeSidebar()
+    await patientClick(selectFileTreeItem('src/analytics.ts'))
     await waitForLegacyPJAXRedirect()
+    await collapseFloatModeSidebar()
 
     await page.click('a[data-selected-links^="repo_issues "]')
     await waitForLegacyPJAXRedirect()

__tests__/cases/pjax.internal.ts

@@ -1,4 +1,5 @@
 import {
+  expandFloatModeSidebar,
   expectToFind,
   expectToNotFind,
   patientClick,
@@ -12,7 +13,9 @@ describe(`in Gitako project page`, () => {
 
   it('should work with PJAX', async () => {
     await sleep(3000)
-    await patientClick(page, selectFileTreeItem('.babelrc'))
+
+    await expandFloatModeSidebar()
+    await patientClick(selectFileTreeItem('.babelrc'))
     await waitForPJAXAPIRedirect()
 
     // The selector for file content

__tests__/cases/project-page.gitako.ts

@@ -1,4 +1,10 @@
-import { expectToFind, expectToNotFind, scroll, selectFileTreeItem } from '../utils'
+import {
+  expandFloatModeSidebar,
+  expectToFind,
+  expectToNotFind,
+  scroll,
+  selectFileTreeItem,
+} from '../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako'))
@@ -12,6 +18,8 @@ describe(`in Gitako project page`, () => {
   })
 
   it('should render while scroll', async () => {
+    await expandFloatModeSidebar()
+
     const filesEle = await page.waitForSelector('.gitako-side-bar .files')
     // node of tsconfig.json should NOT be rendered before scroll down
     await expectToNotFind(selectFileTreeItem('tsconfig.json'))

__tests__/utils.ts

@@ -1,5 +1,3 @@
-import { Page } from 'puppeteer'
-
 export async function expectToFind(selector: string) {
   await expect(page.waitForSelector(selector)).resolves.not.toBeNull()
 }
@@ -82,7 +80,26 @@ export function selectFileTreeItem(path: string): string {
   return `.gitako-side-bar .files a[title="${path}"]`
 }
 
-export async function patientClick(page: Page, selector: string) {
+export async function patientClick(selector: string) {
   await page.waitForSelector(selector)
   await page.click(selector)
 }
+
+export async function expandFloatModeSidebar() {
+  const rect = await (await page.$('.gitako-toggle-show-button'))?.evaluate(button => {
+    const { x, y, width, height } = button.getBoundingClientRect()
+    // pass required properties to avoid serialization issues
+    return { x, y, width, height }
+  })
+  if (rect) {
+    await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2)
+    await sleep(500)
+  }
+}
+
+export async function collapseFloatModeSidebar() {
+  await page.mouse.move(600, 600, {
+    steps: 100,
+  })
+  await sleep(500)
+}

src/components/SideBar.tsx

@@ -55,7 +55,12 @@ export function SideBar() {
   const $shouldShow = useStateIO(false)
   const shouldShow = $shouldShow.value
   React.useEffect(() => {
-    DOMHelper.setBodyIndent(shouldShow && sidebarToggleMode === 'persistent')
+    if (sidebarToggleMode === 'persistent') {
+      DOMHelper.setBodyIndent(shouldShow)
+    } else {
+      DOMHelper.setBodyIndent(false)
+    }
+
     if (shouldShow) {
       DOMHelper.focusFileExplorer() // TODO: verify if it works
     }
@@ -76,14 +81,21 @@ export function SideBar() {
     if (error && shouldShow) {
       $shouldShow.onChange(false)
     }
-  }, [error, shouldShow])
+  }, [error])
+
+  const setShowSideBar = React.useCallback(
+    (show: typeof $shouldShow.value) => {
+      if (!error) $shouldShow.onChange(show)
+    },
+    [error],
+  )
 
   const toggleShowSideBar = React.useCallback(() => {
     if (!error) $shouldShow.onChange(show => !show)
   }, [error])
   useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
 
-  useSetShouldShowOnPJAXDone(intelligentToggle, $shouldShow.onChange)
+  useSetShouldShowOnPJAXDone(setShowSideBar)
 
   useGitHubAttachCopyFileButton(configContext.value.copyFileButton)
   useGitHubAttachCopySnippetButton(configContext.value.copySnippetButton)
@@ -96,7 +108,7 @@ export function SideBar() {
     intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
   React.useEffect(() => {
     if (hideSidebarOnInvalidToken) {
-      $shouldShow.onChange(false)
+      setShowSideBar(false)
     }
   }, [hideSidebarOnInvalidToken])
 
@@ -109,7 +121,7 @@ export function SideBar() {
             className={cx({
               hidden: shouldShow,
             })}
-            onHover={sidebarToggleMode === 'float' ? () => $shouldShow.onChange(true) : undefined}
+            onHover={sidebarToggleMode === 'float' ? () => setShowSideBar(true) : undefined}
             onClick={toggleShowSideBar}
           />
         </Portal>
@@ -118,7 +130,7 @@ export function SideBar() {
             collapsed: error || !shouldShow,
           })}
           baseSize={baseSize}
-          onLeave={sidebarToggleMode === 'float' ? () => $shouldShow.onChange(false) : undefined}
+          onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
         >
           <div className={'gitako-side-bar-body'}>
             <div className={'close-side-bar-button-position'}>
@@ -171,18 +183,16 @@ export function SideBar() {
   )
 }
 
-function useSetShouldShowOnPJAXDone(
-  intelligentToggle: boolean | null,
-  set: (value: boolean) => void,
-) {
+function useSetShouldShowOnPJAXDone(setShouldShow: (value: boolean) => void) {
+  const { intelligentToggle, sidebarToggleMode } = useConfigs().value
   useOnPJAXDone(
     React.useCallback(
       function updateSideBarVisibility() {
-        if (intelligentToggle === null) {
-          set(platform.shouldShow())
+        if (intelligentToggle === null && sidebarToggleMode === 'persistent') {
+          setShouldShow(platform.shouldShow())
         }
       },
-      [intelligentToggle],
+      [intelligentToggle, sidebarToggleMode],
     ),
   )
 }

src/containers/ConfigsContext.tsx

@@ -23,7 +23,7 @@ export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
   )
   if (configs === null) return null
   return (
-    <ConfigsContext.Provider value={{ value: configs, onChange: onChange }}>
+    <ConfigsContext.Provider value={{ value: configs, onChange }}>
       {props.children}
     </ConfigsContext.Provider>
   )