test: update selectors

This commit is contained in:
EnixCoda 2023-08-10 23:48:55 +08:00
parent e82637ce9a
commit e31731fead
10 changed files with 59 additions and 47 deletions

View file

@ -1,3 +1,4 @@
import { selectors } from '../../selectors'
import { getTextContent, sleep } from '../../utils'
describe(`in Gitako project page`, () => {
@ -6,7 +7,7 @@ describe(`in Gitako project page`, () => {
it('should render error message', async () => {
await sleep(5000)
expect(await getTextContent('#gitako-logo-mount-point .error-message')).toBe(
expect(await getTextContent(selectors.gitako.errorMessage)).toBe(
'This project seems to be empty.',
)
})

View file

@ -1,3 +1,4 @@
import { selectors } from '../../selectors'
import { expectToFind, expectToNotFind, sleep, waitForRedirect } from '../../utils'
jest.retryTimes(3)
@ -7,19 +8,17 @@ describe(`in Gitako project page`, () => {
it('should not break go back in history', async () => {
for (let i = 0; i < 3; i++) {
const commitLinks = await page.$$(
`main .TimelineItem-body ol li > div:nth-child(1) a[href*="/commit/"]`,
)
const commitLinks = await page.$$(selectors.github.commitLinks)
if (commitLinks.length < 2) throw new Error(`No enough commits`)
commitLinks[i].click()
await waitForRedirect()
await expectToFind('div.commit')
await expectToFind(selectors.github.commitSummary)
await sleep(1000)
page.goBack()
await sleep(1000)
// The selector for file content
await expectToNotFind('div.commit')
await expectToNotFind(selectors.github.commitSummary)
}
})
})

View file

@ -1,3 +1,4 @@
import { selectors } from '../../selectors'
import { expectToFind, expectToNotFind, sleep, waitForRedirect } from '../../utils'
jest.retryTimes(3)
@ -7,20 +8,20 @@ describe(`in Gitako project page`, () => {
it('should not break go back in history', async () => {
for (let i = 0; i < 3; i++) {
const commitLinks = await page.$$(
`.js-details-container div[role="row"] div[role="rowheader"] a[title*="."]`,
)
if (commitLinks.length < 2) throw new Error(`No enough files`)
const fileItems = await page.$$(selectors.github.fileListItemFileLinks)
if (fileItems.length < 2) throw new Error(`No enough files`)
await waitForRedirect(async () => {
await commitLinks[i].click()
await fileItems[i].click()
})
await expectToFind('table.js-file-line-container')
await expectToFind(selectors.github.fileContent)
await sleep(1000)
page.goBack()
await sleep(1000)
// The selector for file content
await expectToNotFind('table.js-file-line-container')
await expectToNotFind(selectors.github.fileContent)
}
})
})

View file

@ -1,9 +1,9 @@
import { selectors } from '../../selectors'
import {
collapseFloatModeSidebar,
expandFloatModeSidebar,
getTextContent,
patientClick,
selectFileTreeItem,
sleep,
waitForRedirect,
} from '../../utils'
@ -17,14 +17,14 @@ describe(`in Gitako project page`, () => {
await sleep(3000)
await expandFloatModeSidebar()
await patientClick(selectFileTreeItem('src/analytics.ts'))
await patientClick(selectors.gitako.fileItemOf('src/analytics.ts'))
await waitForRedirect()
await collapseFloatModeSidebar()
await page.click('a[data-selected-links^="repo_issues "]')
await page.click(selectors.github.navBarItemIssues)
await waitForRedirect()
await page.click('a[data-selected-links^="repo_pulls "]')
await page.click(selectors.github.navBarItemPulls)
await waitForRedirect()
page.goBack()
@ -33,6 +33,6 @@ describe(`in Gitako project page`, () => {
page.goBack()
await sleep(1000)
expect(await getTextContent('.final-path')).toBe('analytics.ts')
expect(await getTextContent(selectors.github.breadcrumbFileName)).toBe('analytics.ts')
})
})

View file

@ -1,9 +1,9 @@
import { selectors } from '../../selectors'
import {
expandFloatModeSidebar,
expectToFind,
expectToNotFind,
patientClick,
selectFileTreeItem,
sleep,
waitForRedirect,
} from '../../utils'
@ -17,11 +17,10 @@ describe(`in Gitako project page`, () => {
await sleep(3000)
await expandFloatModeSidebar()
await patientClick(selectFileTreeItem('.babelrc'))
await patientClick(selectors.gitako.fileItemOf('.babelrc'))
await waitForRedirect()
// The selector for file content
await expectToFind('table.js-file-line-container')
await expectToFind(selectors.github.fileContent)
await waitForRedirect(async () => {
await sleep(1000) // This prevents failing in some cases due to some mystery scheduling issue of puppeteer or jest
@ -29,6 +28,6 @@ describe(`in Gitako project page`, () => {
})
// The selector for file content
await expectToNotFind('table.js-file-line-container')
await expectToNotFind(selectors.github.fileContent)
})
})

View file

@ -1,10 +1,5 @@
import {
expandFloatModeSidebar,
expectToFind,
expectToNotFind,
scroll,
selectFileTreeItem,
} from '../../utils'
import { selectors } from '../../selectors'
import { expandFloatModeSidebar, expectToFind, expectToNotFind, scroll } from '../../utils'
jest.retryTimes(3)
@ -14,26 +9,26 @@ describe(`in Gitako project page`, () => {
)
it('should render Gitako', async () => {
await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
await expectToFind(selectors.gitako.bodyWrapper)
})
it('should render file list', async () => {
await expectToFind('.gitako-side-bar .files .node-item')
await expectToFind(selectors.gitako.fileItem)
})
it('should render while scroll', async () => {
await expandFloatModeSidebar()
const filesEle = await page.waitForSelector('.gitako-side-bar .files')
const filesEle = await page.waitForSelector(selectors.gitako.files)
// node of tsconfig.json should NOT be rendered before scroll down
await expectToNotFind(selectFileTreeItem('tsconfig.json'))
await expectToNotFind(selectors.gitako.fileItemOf('tsconfig.json'))
const box = await filesEle?.boundingBox()
if (box) {
await page.mouse.move(box.x + 40, box.y + 40)
await scroll({ totalDistance: 10000, stepDistance: 100 })
// node of tsconfig.json should be rendered now
await expectToFind(selectFileTreeItem('tsconfig.json'))
await expectToFind(selectors.gitako.fileItemOf('tsconfig.json'))
}
})
})

View file

@ -1,4 +1,5 @@
import { expectToFind, selectFileTreeItem, sleep, waitForRedirect } from '../../utils'
import { selectors } from '../../selectors'
import { expectToFind, sleep, waitForRedirect } from '../../utils'
describe(`in Gitako project page`, () => {
beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
@ -7,14 +8,12 @@ describe(`in Gitako project page`, () => {
await sleep(3000)
// Expect Gitako sidebar to have expanded src to see contents
await expectToFind(selectFileTreeItem('src/components'))
await expectToFind(selectors.gitako.fileItemOf('src/components'))
await page.click(
`.js-details-container div[role="row"] div[role="rowheader"] [title="components"]`,
)
await page.click(selectors.github.fileListItem('components'))
await waitForRedirect()
// Expect Gitako sidebar to have expanded components and see contents
await expectToFind(selectFileTreeItem('src/components/Gitako.tsx'))
await expectToFind(selectors.gitako.fileItemOf('src/components/Gitako.tsx'))
})
})

View file

@ -1,13 +1,14 @@
import { selectors } from '../../selectors'
import { expectToFind } from '../../utils'
describe(`in Gitako project page`, () => {
beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/pull/71'))
it('should render Gitako', async () => {
await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
await expectToFind(selectors.gitako.bodyWrapper)
})
it('should render file list', async () => {
await expectToFind('.gitako-side-bar .files .node-item')
await expectToFind(selectors.gitako.fileItem)
})
})

21
__tests__/selectors.ts Normal file
View file

@ -0,0 +1,21 @@
export const selectors = {
github: {
breadcrumbFileName: `[data-testid="breadcrumbs-filename"] #file-name-id`,
fileContent: 'textarea[aria-label="file content"]',
commitLinks: `main .TimelineItem-body ol li > div:nth-child(1) a[href*="/commit/"]`,
// assume title contains `.` is file item
fileListItemFileLinks: `#repo-content-turbo-frame [aria-labelledby="folders-and-files"] tr.react-directory-row .react-directory-filename-column .react-directory-truncate[title*="."] a`,
fileListItem: (name: string) =>
`#repo-content-turbo-frame [aria-labelledby="folders-and-files"] tr.react-directory-row [title="${name}"]`,
commitSummary: 'div.commit',
navBarItemIssues: 'a[data-selected-links^="repo_issues "]',
navBarItemPulls: 'a[data-selected-links^="repo_pulls "]',
},
gitako: {
fileItem: '.gitako-side-bar .files .node-item',
fileItemOf: (path: string) => `.gitako-side-bar .files .node-item[title="${path}"]`,
errorMessage: '#gitako-logo-mount-point .error-message',
files: '.gitako-side-bar .files',
bodyWrapper: '.gitako-side-bar .gitako-side-bar-body-wrapper',
},
}

View file

@ -90,10 +90,6 @@ export async function waitForRedirect(action?: () => void | Promise<void>) {
return Promise.race([waitForLegacyPJAXRedirect($action), waitForTurboRedirect($action)])
}
export function selectFileTreeItem(path: string): string {
return `.gitako-side-bar .files a[title="${path}"]`
}
export async function patientClick(selector: string) {
await page.waitForSelector(selector)
await page.click(selector)