diff --git a/frontend/packages/data-portal/.gitignore b/frontend/packages/data-portal/.gitignore new file mode 100644 index 000000000..68c5d18f0 --- /dev/null +++ b/frontend/packages/data-portal/.gitignore @@ -0,0 +1,5 @@ +node_modules/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/frontend/packages/data-portal/package.json b/frontend/packages/data-portal/package.json index 295c7dd05..750c61e9c 100644 --- a/frontend/packages/data-portal/package.json +++ b/frontend/packages/data-portal/package.json @@ -13,6 +13,8 @@ "dev:codegen": "pnpm build:codegen -w", "dev:remix": "remix dev --manual -c 'node --loader ts-node/esm --watch-path server.ts --watch server.ts'", "dev:tcm": "pnpm build:tcm -w", + "e2e": "playwright test", + "e2e:debug": "playwright test --ui", "lint": "pnpm build:codegen && run-p -l 'lint:!(fix)'", "lint:fix": "run-p -l 'lint:*:fix'", "lint:eslint": "eslint --report-unused-disable-directives --max-warnings 0 .", @@ -88,6 +90,7 @@ }, "devDependencies": { "@parcel/watcher": "^2.3.0", + "@playwright/test": "^1.41.1", "@remix-run/dev": "^2.0.1", "@tailwindcss/typography": "^0.5.10", "@testing-library/jest-dom": "^6.1.4", @@ -110,6 +113,7 @@ "eslint-plugin-cryoet-data-portal": "*", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", + "playwright": "^1.41.1", "postcss": "^8.4.31", "postcss-nesting": "^12.0.1", "stylelint": "^15.10.3", diff --git a/frontend/packages/data-portal/playwright.config.ts b/frontend/packages/data-portal/playwright.config.ts new file mode 100644 index 000000000..ce09f8ef3 --- /dev/null +++ b/frontend/packages/data-portal/playwright.config.ts @@ -0,0 +1,78 @@ +import { defineConfig, devices } from '@playwright/test' + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +// eslint-disable-next-line import/no-default-export +export default defineConfig({ + testDir: './e2e', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + // baseURL: 'http://127.0.0.1:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}) diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 256532243..ffbe6a491 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -198,6 +198,9 @@ importers: '@parcel/watcher': specifier: ^2.3.0 version: 2.3.0 + '@playwright/test': + specifier: ^1.41.1 + version: 1.41.1 '@remix-run/dev': specifier: ^2.0.1 version: 2.0.1(@types/node@20.8.4)(ts-node@10.9.1)(typescript@5.2.2) @@ -264,6 +267,9 @@ importers: jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 + playwright: + specifier: ^1.41.1 + version: 1.41.1 postcss: specifier: ^8.4.31 version: 8.4.31 @@ -3438,6 +3444,14 @@ packages: tslib: 2.6.2 dev: false + /@playwright/test@1.41.1: + resolution: {integrity: sha512-9g8EWTjiQ9yFBXc6HjCWe41msLpxEX0KhmfmPl9RPLJdfzL4F0lg2BdJ91O9azFdl11y1pmpwdjBiSxvqc+btw==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright: 1.41.1 + dev: true + /@popperjs/core@2.11.8: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false @@ -6965,6 +6979,14 @@ packages: /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + /fsevents@2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + dev: true + optional: true + /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -10294,6 +10316,22 @@ packages: pathe: 1.1.1 dev: true + /playwright-core@1.41.1: + resolution: {integrity: sha512-/KPO5DzXSMlxSX77wy+HihKGOunh3hqndhqeo/nMxfigiKzogn8kfL0ZBDu0L1RKgan5XHCPmn6zXd2NUJgjhg==} + engines: {node: '>=16'} + hasBin: true + dev: true + + /playwright@1.41.1: + resolution: {integrity: sha512-gdZAWG97oUnbBdRL3GuBvX3nDDmUOuqzV/D24dytqlKt+eI5KbwusluZRGljx1YoJKZ2NRPaeWiFTeGZO7SosQ==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright-core: 1.41.1 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /postcss-discard-duplicates@5.1.0(postcss@8.4.31): resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==} engines: {node: ^10 || ^12 || >=14.0}