diff --git a/.github/workflows/ui-tests.js.yml b/.github/workflows/ui-tests.js.yml index 83676c185..13e9511b4 100644 --- a/.github/workflows/ui-tests.js.yml +++ b/.github/workflows/ui-tests.js.yml @@ -19,7 +19,7 @@ env: CY_PASS: ${{ secrets.CYPRESS_PASSWORD }} jobs: build: - runs-on: ubuntu-latest + runs-on: ubuntu-22.04 name: Visual Testing defaults: run: @@ -35,6 +35,14 @@ jobs: uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} + - name: Cache node modules + uses: actions/cache@v1 + with: + path: frontend/node_modules + key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.OS }}-build- + ${{ runner.OS }}- - name: Setup env run: | echo "NODE_ENV=development" >> .env @@ -68,8 +76,9 @@ jobs: run: npx wait-on http://0.0.0.0:3333 - name: (Chrome) Run visual tests run: yarn cy:test - - name: (Firefox) Run visual tests - run: yarn cy:test-firefox +# firefox have different viewport somehow +# - name: (Firefox) Run visual tests +# run: yarn cy:test-firefox - name: (Edge) Run visual tests run: yarn cy:test-edge - name: Upload Debug diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx index 783d45bf7..6c34fdec7 100644 --- a/frontend/app/components/Session/WebPlayer.tsx +++ b/frontend/app/components/Session/WebPlayer.tsx @@ -88,7 +88,7 @@ function WebPlayer(props: any) { contextValue.player.pause() contextValue.player.scaleFullPage() setTimeout(() => { contextValue.player.showClickmap(insights) }, 250) - }, 500) + }, 1500) } return () => { isPlayerReady && contextValue.player.showClickmap(null) diff --git a/frontend/app/player/player/Animator.ts b/frontend/app/player/player/Animator.ts index c2ddbc415..ab759bd50 100644 --- a/frontend/app/player/player/Animator.ts +++ b/frontend/app/player/player/Animator.ts @@ -54,7 +54,11 @@ export default class Animator { private animationFrameRequestId: number = 0 - constructor(private store: Store, private mm: Moveable) {} + constructor(private store: Store, private mm: Moveable) { + + // @ts-ignore + window.playerJump = this.jump.bind(this) + } private setTime(time: number) { this.store.update({ @@ -131,8 +135,8 @@ export default class Animator { } play() { - if (this.store.get().freeze) return; - if (!this.store.get().ready) { + if (this.store.get().freeze) return this.pause() + if (this.store.get().ready) { cancelAnimationFrame(this.animationFrameRequestId) this.store.update({ playing: true }) this.startAnimation() @@ -154,7 +158,7 @@ export default class Animator { setTimeout(() => { this.store.update({ freeze: true }) this.pause() - }, 1000) + }, 250) } else { setTimeout(() => this.freeze(), 500) } diff --git a/frontend/cypress/e2e/replayer.cy.ts b/frontend/cypress/e2e/replayer.cy.ts index a1ed5978f..c29b7fbc9 100644 --- a/frontend/cypress/e2e/replayer.cy.ts +++ b/frontend/cypress/e2e/replayer.cy.ts @@ -16,17 +16,22 @@ describe('Replayer visual match test', { cy.get(':nth-child(2) > .relative > .p-2').type(Cypress.env('password').replaceAll("\"", '')) cy.get('.justify-center > .h-10').click() cy.wait('@getAccount') + cy.wait(2000) cy.visit('3/session/7585361734083637?jumpto=5000&freeze=true') cy.wait('@getFirstMob') cy.wait('@getSecondMob') - cy.wait(5000) + cy.wait(2000) + cy.window().then(win => { + win.playerJump(5000) + }) + cy.wait(4000) cy.matchImageSnapshot('1st-breakpoint'); - cy.visit('3/session/7585361734083637?jumpto=20000&freeze=true') - cy.wait('@getFirstMob') - cy.wait('@getSecondMob') - cy.wait(5000) + cy.window().then(win => { + win.playerJump(21000) + }) + cy.wait(4000) cy.matchImageSnapshot('2nd-breakpoint'); diff --git a/frontend/cypress/snapshots/1st-breakpoint.snap.png b/frontend/cypress/snapshots/1st-breakpoint.snap.png index 228b73148..b044001fc 100644 Binary files a/frontend/cypress/snapshots/1st-breakpoint.snap.png and b/frontend/cypress/snapshots/1st-breakpoint.snap.png differ diff --git a/frontend/cypress/snapshots/2nd-breakpoint.snap.png b/frontend/cypress/snapshots/2nd-breakpoint.snap.png index b5f55882e..41fa5d8bb 100644 Binary files a/frontend/cypress/snapshots/2nd-breakpoint.snap.png and b/frontend/cypress/snapshots/2nd-breakpoint.snap.png differ diff --git a/frontend/cypress/snapshots/Network-Events.snap.png b/frontend/cypress/snapshots/Network-Events.snap.png index f59b8b107..a7da182f3 100644 Binary files a/frontend/cypress/snapshots/Network-Events.snap.png and b/frontend/cypress/snapshots/Network-Events.snap.png differ diff --git a/frontend/cypress/snapshots/User-Events.snap.png b/frontend/cypress/snapshots/User-Events.snap.png index 31aad18e8..61c2ba7b0 100644 Binary files a/frontend/cypress/snapshots/User-Events.snap.png and b/frontend/cypress/snapshots/User-Events.snap.png differ diff --git a/frontend/cypress/snapshots/replayer.cy.ts/2nd-breakpoint.snap.png b/frontend/cypress/snapshots/replayer.cy.ts/2nd-breakpoint.snap.png index cc842c601..9c8b0bf90 100644 Binary files a/frontend/cypress/snapshots/replayer.cy.ts/2nd-breakpoint.snap.png and b/frontend/cypress/snapshots/replayer.cy.ts/2nd-breakpoint.snap.png differ diff --git a/frontend/cypress/snapshots/replayer.cy.ts/Network-Events.snap.png b/frontend/cypress/snapshots/replayer.cy.ts/Network-Events.snap.png index a2dbe380a..0bc8893b8 100644 Binary files a/frontend/cypress/snapshots/replayer.cy.ts/Network-Events.snap.png and b/frontend/cypress/snapshots/replayer.cy.ts/Network-Events.snap.png differ diff --git a/frontend/cypress/snapshots/replayer.cy.ts/User-Events.snap.png b/frontend/cypress/snapshots/replayer.cy.ts/User-Events.snap.png index b46ad5ccd..c184da701 100644 Binary files a/frontend/cypress/snapshots/replayer.cy.ts/User-Events.snap.png and b/frontend/cypress/snapshots/replayer.cy.ts/User-Events.snap.png differ