Merge branch 'next' into develop

Author: EnixCoda

.env.example

@@ -1,5 +1,5 @@
-# The client ID you received from GitHub for your GitHub App.
 GITHUB_OAUTH_CLIENT_ID=GITHUB_OAUTH_CLIENT_ID
-
-# The client secret you received from GitHub for your GitHub App.
 GITHUB_OAUTH_CLIENT_SECRET=GITHUB_OAUTH_CLIENT_SECRET
+
+SENTRY_PUBLIC_KEY=SENTRY_PUBLIC_KEY
+SENTRY_PROJECT_ID=SENTRY_PROJECT_ID

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - name: Cache deps
+      - name: Cache Dependencies
         uses: actions/cache@v1
         id: yarn-cache
         with:
@@ -38,7 +38,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Install deps
+      - name: Install Dependencies
         env:
           PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
         run: |
@@ -48,7 +48,11 @@ jobs:
         run: |
           make build
 
-      - name: Test
+      - name: Unit Test
+        run: |
+          yarn jest src
+
+      - name: E2E Test
         uses: mujo-code/puppeteer-headful@master
         env:
           CI: 'true'

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged --quiet

.prettierignore

@@ -1,3 +1,4 @@
 *-profile/
 dist/
 vscode-icons/
+Safari

__tests__/cases/non-parallel/pjax.commits-page.ts

@@ -1,4 +1,4 @@
-import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../../utils'
+import { expectToFind, expectToNotFind, sleep, waitForRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/commits/develop'))
@@ -10,7 +10,7 @@ describe(`in Gitako project page`, () => {
       )
       if (commitLinks.length < 2) throw new Error(`No enough commits`)
       commitLinks[i].click()
-      await waitForLegacyPJAXRedirect()
+      await waitForRedirect()
       await expectToFind('div.commit')
       await sleep(1000)
 

__tests__/cases/non-parallel/pjax.files-page.ts

@@ -1,4 +1,8 @@
-import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../../utils'
+import {
+  expectToFind,
+  expectToNotFind,
+  sleep, waitForRedirect
+} from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
@@ -9,7 +13,7 @@ describe(`in Gitako project page`, () => {
         `.js-details-container div[role="row"] div[role="rowheader"] a[title*="."]`,
       )
       if (commitLinks.length < 2) throw new Error(`No enough files`)
-      await waitForLegacyPJAXRedirect(async () => {
+      await waitForRedirect(async () => {
         await commitLinks[i].click()
       })
       await expectToFind('table.js-file-line-container')

__tests__/cases/non-parallel/pjax.general.ts

@@ -3,8 +3,7 @@ import {
   expandFloatModeSidebar,
   patientClick,
   selectFileTreeItem,
-  sleep,
-  waitForLegacyPJAXRedirect
+  sleep, waitForRedirect
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
@@ -15,14 +14,14 @@ describe(`in Gitako project page`, () => {
 
     await expandFloatModeSidebar()
     await patientClick(selectFileTreeItem('src/analytics.ts'))
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
     await collapseFloatModeSidebar()
 
     await page.click('a[data-selected-links^="repo_issues "]')
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     await page.click('a[data-selected-links^="repo_pulls "]')
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     page.goBack()
     await sleep(1000)

__tests__/cases/non-parallel/pjax.internal.ts

@@ -4,8 +4,7 @@ import {
   expectToNotFind,
   patientClick,
   selectFileTreeItem,
-  sleep,
-  waitForLegacyPJAXRedirect
+  sleep, waitForRedirect
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
@@ -16,12 +15,12 @@ describe(`in Gitako project page`, () => {
 
     await expandFloatModeSidebar()
     await patientClick(selectFileTreeItem('.babelrc'))
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     // The selector for file content
     await expectToFind('table.js-file-line-container')
 
-    await waitForLegacyPJAXRedirect(async () => {
+    await waitForRedirect(async () => {
       await sleep(1000) // This prevents failing in some cases due to some mystery scheduling issue of puppeteer or jest
       page.goBack()
     })

__tests__/cases/non-parallel/project-page.gitako.ts

@@ -7,7 +7,9 @@ import {
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
-  beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/test/200-changed-files-200-lines-each'))
+  beforeAll(() =>
+    page.goto('https://github.com/EnixCoda/Gitako/tree/test/200-changed-files-200-lines-each'),
+  )
 
   it('should render Gitako', async () => {
     await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
@@ -26,7 +28,7 @@ describe(`in Gitako project page`, () => {
     const box = await filesEle?.boundingBox()
     if (box) {
       await page.mouse.move(box.x + 40, box.y + 40)
-      await scroll({ totalDistance: 7000, stepDistance: 100 })
+      await scroll({ totalDistance: 10000, stepDistance: 100 })
 
       // node of tsconfig.json should be rendered now
       await expectToFind(selectFileTreeItem('tsconfig.json'))

__tests__/cases/parallel/expand-to-target.ts

@@ -1,14 +1,9 @@
-import {
-  expectToFind,
-  selectFileTreeItem,
-  sleep,
-  waitForLegacyPJAXRedirect
-} from '../../utils'
+import { expectToFind, selectFileTreeItem, sleep, waitForRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
 
-  it('expand to target on load and after PJAX', async () => {
+  it('expand to target on load and after redirect', async () => {
     await sleep(3000)
 
     // Expect Gitako sidebar to have expanded src to see contents
@@ -17,7 +12,7 @@ describe(`in Gitako project page`, () => {
     await page.click(
       `.js-details-container div[role="row"] div[role="rowheader"] [title="components"]`,
     )
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     // Expect Gitako sidebar to have expanded components and see contents
     await expectToFind(selectFileTreeItem('src/components/Gitako.tsx'))

__tests__/utils.ts

@@ -40,7 +40,7 @@ export async function listenTo<Args extends any[] = any[]>(
     (event, target, callbackName, oneTime) => {
       const t = target === 'document' ? document : window
       const onEvent = (...args: any[]): void => {
-        ;((window[callbackName as any] as any) as (...args: any[]) => void)(...args)
+        ;(window[callbackName as any] as any as (...args: any[]) => void)(...args)
         if (oneTime) t.removeEventListener(event, onEvent)
       }
       t.addEventListener(event, onEvent)
@@ -71,6 +71,24 @@ export async function waitForLegacyPJAXRedirect(action?: () => void | Promise<vo
   return promise
 }
 
+export async function waitForTurboRedirect(action?: () => void | Promise<void>) {
+  const promise = once('turbo:load', 'document')
+  await action?.()
+  return promise
+}
+
+export async function waitForRedirect(action?: () => void | Promise<void>) {
+  let fired = false
+  const $action =
+    action &&
+    (() => {
+      if (fired) return
+      fired = true
+      return action()
+    })
+  return Promise.race([waitForLegacyPJAXRedirect($action), waitForTurboRedirect($action)])
+}
+
 export function selectFileTreeItem(path: string): string {
   return `.gitako-side-bar .files a[title="${path}"]`
 }
@@ -81,7 +99,9 @@ export async function patientClick(selector: string) {
 }
 
 export async function expandFloatModeSidebar() {
-  const rect = await (await page.$('.gitako-toggle-show-button'))?.evaluate(button => {
+  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 }

jest.config.js

@@ -130,7 +130,7 @@ module.exports = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // testEnvironment: 'node',
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},