From 38e80e8f53b99fb60d1ce3e32a6690810abfc07f Mon Sep 17 00:00:00 2001 From: Matt Hillsdon <44397098+microbit-matt-hillsdon@users.noreply.github.com> Date: Mon, 30 Jan 2023 17:42:47 +0000 Subject: [PATCH] e2e tweaks to help debug. (#1098) Aligns with other Foundation projects. --- package-lock.json | 28 ++++++++++++++++++++++++++++ package.json | 5 +++-- src/e2e/accessibility.test.ts | 2 +- src/e2e/app.ts | 10 ++++++---- src/e2e/autocomplete.test.ts | 2 +- src/e2e/connect.test.ts | 2 +- src/e2e/documentation.test.ts | 2 +- src/e2e/edits.test.ts | 2 +- src/e2e/migration.test.ts | 2 +- src/e2e/multiple-files.test.ts | 2 +- src/e2e/open.test.ts | 2 +- src/e2e/reset.test.ts | 4 ++-- src/e2e/save.test.ts | 2 +- src/e2e/settings.test.ts | 2 +- src/e2e/simulator.test.ts | 2 +- 15 files changed, 50 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 389f6bc9f..d695caec8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,6 +65,7 @@ "@testing-library/user-event": "^12.8.3", "@types/file-saver": "^2.0.3", "@types/jest": "^26.0.24", + "cross-env": "^7.0.3", "pptr-testing-library": "^0.7.0", "prettier": "2.3.2", "puppeteer": "^13.4.0", @@ -9141,6 +9142,24 @@ "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" }, + "node_modules/cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.1" + }, + "bin": { + "cross-env": "src/bin/cross-env.js", + "cross-env-shell": "src/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=10.14", + "npm": ">=6", + "yarn": ">=1" + } + }, "node_modules/cross-fetch": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", @@ -30642,6 +30661,15 @@ "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" }, + "cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.1" + } + }, "cross-fetch": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", diff --git a/package.json b/package.json index c1d4cc772..cf8450668 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@testing-library/user-event": "^12.8.3", "@types/file-saver": "^2.0.3", "@types/jest": "^26.0.24", + "cross-env": "^7.0.3", "pptr-testing-library": "^0.7.0", "prettier": "2.3.2", "puppeteer": "^13.4.0", @@ -84,8 +85,8 @@ "serve": "npx serve --no-clipboard -l 3000 -- build/", "typecheck": "tsc --noEmit", "test:all": "craco test --testTimeout 15000", - "test:e2e": "craco test --testPathPattern e2e -w 1 --testTimeout 15000", - "test:e2e:headless": "CI=true npm run test:e2e", + "test:e2e": "cross-env E2E_HEADLESS=0 craco test --testPathPattern e2e -w 1 --testTimeout 15000", + "test:e2e:headless": "cross-env E2E_HEADLESS=1 craco test --testPathPattern e2e -w 1 --testTimeout 15000", "ci:update-version": "update-ci-version", "deploy": "website-deploy-aws", "invalidate": "aws cloudfront create-invalidation --distribution-id $(printenv ${STAGE}_CLOUDFRONT_DISTRIBUTION_ID) --paths \"/*\"", diff --git a/src/e2e/accessibility.test.ts b/src/e2e/accessibility.test.ts index db2b77c56..cad343f4f 100644 --- a/src/e2e/accessibility.test.ts +++ b/src/e2e/accessibility.test.ts @@ -5,7 +5,7 @@ */ import { App } from "./app"; -describe("Browser - accessibility", () => { +describe("accessibility", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/app.ts b/src/e2e/app.ts index cba967069..4bfb7c307 100644 --- a/src/e2e/app.ts +++ b/src/e2e/app.ts @@ -75,7 +75,11 @@ export class App { constructor(options: Options = {}) { this.url = this.optionsToURL(options); - this.browser = puppeteer.launch(); + this.browser = puppeteer.launch({ + headless: process.env.E2E_HEADLESS !== "0", + // Needs to be large enough to display Reference + Simulator or tests need to show/hide them. + defaultViewport: { width: 1920, height: 1440 }, + }); this.page = this.createPage(); } @@ -116,8 +120,6 @@ export class App { ]); const page = await context.newPage(); - // Needs to be large enough to display Reference + Simulator or tests need to show/hide them. - await page.setViewport({ width: 1920, height: 1440 }); await page.setCookie({ // See corresponding code in App.tsx. name: "mockDevice", @@ -1095,7 +1097,7 @@ export class App { tabName: "Project" | "API" | "Reference" | "Ideas" ): Promise> { const document = await this.document(); - const tab = await document.getByRole("tab", { + const tab = await document.findByRole("tab", { name: tabName, }); await tab.click(); diff --git a/src/e2e/autocomplete.test.ts b/src/e2e/autocomplete.test.ts index daad7aa89..a6683abce 100644 --- a/src/e2e/autocomplete.test.ts +++ b/src/e2e/autocomplete.test.ts @@ -8,7 +8,7 @@ import { App } from "./app"; const showFullSignature = "show(image, delay=400, wait=True, loop=False, clear=False)"; -describe("Browser - autocomplete and signature help tests", () => { +describe("autocomplete", () => { // Enable flags to allow testing the toolkit interactions. const app = new App(); beforeEach(app.reset.bind(app)); diff --git a/src/e2e/connect.test.ts b/src/e2e/connect.test.ts index 5bae2569c..0f8f503dc 100644 --- a/src/e2e/connect.test.ts +++ b/src/e2e/connect.test.ts @@ -10,7 +10,7 @@ const traceback = `Traceback (most recent call last): SyntaxError: invalid syntax `; // Needs trailing newline! -describe("Browser - WebUSB (mocked)", () => { +describe("connect", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/documentation.test.ts b/src/e2e/documentation.test.ts index c2f7c41fb..f02bef869 100644 --- a/src/e2e/documentation.test.ts +++ b/src/e2e/documentation.test.ts @@ -5,7 +5,7 @@ */ import { App } from "./app"; -describe("Browser - toolkit tabs", () => { +describe("documentaion", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/edits.test.ts b/src/e2e/edits.test.ts index f698ee39a..ede3894ec 100644 --- a/src/e2e/edits.test.ts +++ b/src/e2e/edits.test.ts @@ -5,7 +5,7 @@ */ import { App } from "./app"; -describe("Browser - edits", () => { +describe("edits", () => { const app = new App(); beforeEach(app.reset.bind(app)); // We intentionally close the page so can't screenshot here. diff --git a/src/e2e/migration.test.ts b/src/e2e/migration.test.ts index 9833caf98..f07e34211 100644 --- a/src/e2e/migration.test.ts +++ b/src/e2e/migration.test.ts @@ -11,7 +11,7 @@ const heartMigrationFragment = const sunlightSensorMigrationFragment = "#project:XQAAgAByAQAAAAAAAAA9iImmlGSt1R++5LD+ZJ36cRz46B+lhYtNRoWF0nijpaVyZlK7ACfSpeoQpgfk21st4ty06R4PEOW6kOsIEMK7SL0Qco7jgsHFKZXfjv/XcHWvXG9qyz1a/a3NUulFDj/FDJxVAIV+WZLpRoo4E6MbW70FOgIfBPWP2hDVsojpoLc7ZfKI8SHxv54FSfB5bkbzaAKO+8CO73t6Odtv691JGjJ9MExFighY6GxyM/DoNInDDpAjFeaqCWrYdwENX7ZVM3we8f4swI71tL28N7sg588aB//A78AA"; -describe("Browser - migration", () => { +describe("migration", () => { const app = new App({ fragment: heartMigrationFragment, }); diff --git a/src/e2e/multiple-files.test.ts b/src/e2e/multiple-files.test.ts index 25a4278e4..1b9ce925a 100644 --- a/src/e2e/multiple-files.test.ts +++ b/src/e2e/multiple-files.test.ts @@ -5,7 +5,7 @@ */ import { App, LoadDialogType } from "./app"; -describe("Browser - multiple and missing file cases", () => { +describe("multiple-files", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/open.test.ts b/src/e2e/open.test.ts index 6623ce484..351646ba7 100644 --- a/src/e2e/open.test.ts +++ b/src/e2e/open.test.ts @@ -5,7 +5,7 @@ */ import { App, LoadDialogType } from "./app"; -describe("Browser - open", () => { +describe("open", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/reset.test.ts b/src/e2e/reset.test.ts index 251105550..d497b6fb5 100644 --- a/src/e2e/reset.test.ts +++ b/src/e2e/reset.test.ts @@ -3,9 +3,9 @@ * * SPDX-License-Identifier: MIT */ -import { App, LoadDialogType } from "./app"; +import { App } from "./app"; -describe("Browser - reset", () => { +describe("reset", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/save.test.ts b/src/e2e/save.test.ts index cca0015d2..ca0aebc4b 100644 --- a/src/e2e/save.test.ts +++ b/src/e2e/save.test.ts @@ -5,7 +5,7 @@ */ import { App, LoadDialogType } from "./app"; -describe("Browser - save", () => { +describe("save", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app)); diff --git a/src/e2e/settings.test.ts b/src/e2e/settings.test.ts index 070e69114..06476297b 100644 --- a/src/e2e/settings.test.ts +++ b/src/e2e/settings.test.ts @@ -5,7 +5,7 @@ */ import { App } from "./app"; -describe("Browser - settings", () => { +describe("settings", () => { const app = new App(); beforeEach(() => { app.setOptions({}); diff --git a/src/e2e/simulator.test.ts b/src/e2e/simulator.test.ts index d2ae6af57..bb038db6b 100644 --- a/src/e2e/simulator.test.ts +++ b/src/e2e/simulator.test.ts @@ -16,7 +16,7 @@ const gestureTest = const sliderTest = "from microbit import *\nwhile True:\nif temperature() == -5:\ndisplay.show(Image.NO)"; -describe("Browser - simulator", () => { +describe("simulator", () => { const app = new App(); beforeEach(app.reset.bind(app)); afterEach(app.screenshot.bind(app));