diff --git a/.github/workflows/tests-cli-e2e-tests.yml b/.github/workflows/tests-cli-e2e-tests.yml index 4759c1ae46..efb91fbd1f 100644 --- a/.github/workflows/tests-cli-e2e-tests.yml +++ b/.github/workflows/tests-cli-e2e-tests.yml @@ -38,7 +38,8 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v3 with: - node-version: 18 + node-version-file: '.nvmrc' + cache: npm - name: Set Chrome executable path run: | diff --git a/.github/workflows/tests-extension-e2e-tests.yml b/.github/workflows/tests-extension-e2e-tests.yml index dd519c41f3..0ea364a33c 100644 --- a/.github/workflows/tests-extension-e2e-tests.yml +++ b/.github/workflows/tests-extension-e2e-tests.yml @@ -44,7 +44,8 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v3 with: - node-version: 18 + node-version-file: '.nvmrc' + cache: npm - name: Set Chrome executable path run: | diff --git a/package-lock.json b/package-lock.json index 902a24909e..44955c1803 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2877,29 +2877,6 @@ "node": ">=12.4.0" } }, - "node_modules/@p5-wrapper/react": { - "version": "5.0.0-rc.3", - "license": "MIT", - "dependencies": { - "microdiff": "^1.5.0", - "react-error-boundary": "^6.0.0" - }, - "peerDependencies": { - "p5": ">= 1.11.3", - "react": ">= 19.0.0", - "react-dom": ">= 19.0.0" - } - }, - "node_modules/@p5-wrapper/react/node_modules/react-error-boundary": { - "version": "6.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.5" - }, - "peerDependencies": { - "react": ">=16.13.1" - } - }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "dev": true, @@ -21641,7 +21618,7 @@ "@google-psat/explorable-explanations": "*", "@google-psat/i18n": "*", "@google-psat/report": "*", - "@p5-wrapper/react": "^5.0.0-rc.2", + "@p5-wrapper/react": "5.0.0-rc.2", "@types/elliptic": "^6.4.18", "@types/lodash-es": "^4.17.12", "classnames": "^2.3.2", @@ -21677,6 +21654,33 @@ "vite": "^6.3.5" } }, + "packages/extension/node_modules/@p5-wrapper/react": { + "version": "5.0.0-rc.2", + "resolved": "https://registry.npmjs.org/@p5-wrapper/react/-/react-5.0.0-rc.2.tgz", + "integrity": "sha512-3uhaCHWUE4PqCvEd71h80pyT9JQRPEwUpvZoKHTynmi6TkYFxq7cKNndYx8yQP3KwuDfVB3gzZpzza18or9cEw==", + "license": "MIT", + "dependencies": { + "microdiff": "^1.5.0", + "react-error-boundary": "^5.0.0" + }, + "peerDependencies": { + "p5": ">= 1.11.3", + "react": ">= 19.0.0", + "react-dom": ">= 19.0.0" + } + }, + "packages/extension/node_modules/@p5-wrapper/react/node_modules/react-error-boundary": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-5.0.0.tgz", + "integrity": "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "packages/extension/node_modules/devtools-protocol": { "version": "0.0.1345247", "dev": true, diff --git a/packages/ee-workflow/src/main.ts b/packages/ee-workflow/src/main.ts index ddf3a99ce1..8f1d16924e 100644 --- a/packages/ee-workflow/src/main.ts +++ b/packages/ee-workflow/src/main.ts @@ -171,6 +171,7 @@ export class Main { * @param position.y - The y-coordinate of the canvas. * @param figureToStart - The figure to start from. * @param preloader - The preloader function to run before setup. + * @param paused - Whether to start the canvas in a paused state. * @param performanceCheck - Whether to enable performance check. */ constructor( @@ -183,6 +184,7 @@ export class Main { position: { x: number; y: number } = { x: 0, y: 0 }, private figureToStart?: string, private preloader?: (p: p5) => void, + paused = false, performanceCheck = false ) { this.p5 = new p5((p: p5) => this.init(p, position), this.container); @@ -195,6 +197,12 @@ export class Main { this.stats.dom.style.top = '0'; document.body.appendChild(this.stats.dom); } + + if (paused) { + if (!this.figureToStart) { + this.togglePause(true); + } + } } /** @@ -524,12 +532,18 @@ export class Main { this.runner(true); } - while ( - this.figureToStart && - this.stepsQueue.length > 0 && - !this.instantQueue.length - ) { - this.runner(false, false, true); + if (this.figureToStart) { + while ( + this.figureToStart && + this.stepsQueue.length > 0 && + !this.instantQueue.length + ) { + this.runner(false, false, true); + } + + if (!this.figureToStart) { + this.togglePause(true); + } } this.stats?.end(); diff --git a/packages/extension/package.json b/packages/extension/package.json index 7ad996394d..f7283ea51f 100644 --- a/packages/extension/package.json +++ b/packages/extension/package.json @@ -28,9 +28,9 @@ "@google-psat/explorable-explanations": "*", "@google-psat/i18n": "*", "@google-psat/report": "*", - "@p5-wrapper/react": "^5.0.0-rc.2", - "@types/lodash-es": "^4.17.12", + "@p5-wrapper/react": "5.0.0-rc.2", "@types/elliptic": "^6.4.18", + "@types/lodash-es": "^4.17.12", "classnames": "^2.3.2", "d3": "^7.9.0", "elliptic": "^6.6.1", diff --git a/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/canvas/index.ts b/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/canvas/index.ts index 108f7ec2ef..172e3ad6fd 100644 --- a/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/canvas/index.ts +++ b/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/canvas/index.ts @@ -250,7 +250,9 @@ export const initializeCanvas = ( flowContainer, undefined, undefined, - idToStartWith + idToStartWith, + undefined, + true ); const componentFigureFactory = new FigureFactory( diff --git a/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/store/provider.tsx b/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/store/provider.tsx index 2e0cff6034..a2eae25568 100644 --- a/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/store/provider.tsx +++ b/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/store/provider.tsx @@ -35,7 +35,7 @@ import { scenarios } from './scenarios'; const Provider = ({ children }: PropsWithChildren) => { const [canvas, setCanvas] = useState
(); - const [play, setPlay] = useState(true); + const [play, setPlay] = useState(false); const [speed, _setSpeed] = useState(1.5); const [currentScenarioKey, setCurrentScenarioKey] = useState( ScenarioKeys.REGISTRATION diff --git a/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/tests/index.tsx b/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/tests/index.tsx index 84105cc0f8..a9d0951d50 100644 --- a/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/tests/index.tsx +++ b/packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/tests/index.tsx @@ -43,10 +43,10 @@ describe('Index file', () => { const playPauseButton = screen.getByTestId('play-pause-button'); expect(playPauseButton).toBeInTheDocument(); - expect(playPauseButton).toHaveAccessibleDescription('Pause'); + expect(playPauseButton).toHaveAccessibleDescription('Play'); fireEvent.click(playPauseButton!); - expect(playPauseButton).toHaveAccessibleDescription('Play'); + expect(playPauseButton).toHaveAccessibleDescription('Pause'); const permissionsNode = screen.getByText('5. Permissions'); expect(permissionsNode).toBeInTheDocument();