From 8253f3ef3bbfa67ac0024f3c58e9eb5b7bafac25 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 26 May 2021 01:11:17 +0800 Subject: [PATCH] fix: pass tests --- __tests__/cases/pjax.general.ts | 13 ++++++++-- __tests__/cases/pjax.internal.ts | 5 +++- __tests__/cases/project-page.gitako.ts | 10 ++++++- __tests__/utils.ts | 23 +++++++++++++--- src/components/SideBar.tsx | 36 ++++++++++++++++---------- src/containers/ConfigsContext.tsx | 2 +- 6 files changed, 68 insertions(+), 21 deletions(-) diff --git a/__tests__/cases/pjax.general.ts b/__tests__/cases/pjax.general.ts index 1d8522c..d915bc1 100644 --- a/__tests__/cases/pjax.general.ts +++ b/__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() diff --git a/__tests__/cases/pjax.internal.ts b/__tests__/cases/pjax.internal.ts index c16412f..b70f5fd 100644 --- a/__tests__/cases/pjax.internal.ts +++ b/__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 diff --git a/__tests__/cases/project-page.gitako.ts b/__tests__/cases/project-page.gitako.ts index f9982e0..fcd79fe 100644 --- a/__tests__/cases/project-page.gitako.ts +++ b/__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')) diff --git a/__tests__/utils.ts b/__tests__/utils.ts index 65b41c7..56e422b 100644 --- a/__tests__/utils.ts +++ b/__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) +} diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 54c9516..97bf0e7 100644 --- a/src/components/SideBar.tsx +++ b/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} /> @@ -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} >
@@ -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], ), ) } diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx index 90c39b1..4710a83 100644 --- a/src/containers/ConfigsContext.tsx +++ b/src/containers/ConfigsContext.tsx @@ -23,7 +23,7 @@ export function ConfigsContextWrapper(props: React.PropsWithChildren) { ) if (configs === null) return null return ( - + {props.children} )