From 3e6eb2c893bf08af8ed46f7e58d8850fefed337d Mon Sep 17 00:00:00 2001 From: NuttyShrimp Date: Thu, 5 Sep 2024 14:49:11 +0200 Subject: [PATCH 01/18] feat(loama): setup playwright + basic tests --- .gitignore | 1 + css/config/seeds.json | 36 +- loama/.github/workflows/playwright.yml | 27 + loama/.gitignore | 4 + loama/README.md | 11 + loama/package.json | 4 +- loama/playwright.config.ts | 79 + .../explorer/ExplorerBreadcrumbs.vue | 2 +- loama/src/components/explorer/NewSubject.vue | 2 +- .../src/components/explorer/SelectedEntry.vue | 4 +- loama/tests/auth.setup.ts | 25 + loama/tests/login.spec.ts | 35 + loama/tests/permission-table.spec.ts | 39 + loama/tests/resource-explorer.spec.ts | 14 + loama/tsconfig.app.json | 30 +- package.json | 38 +- yarn.lock | 4138 ++++++++++++++++- 17 files changed, 4403 insertions(+), 86 deletions(-) create mode 100644 loama/.github/workflows/playwright.yml create mode 100644 loama/playwright.config.ts create mode 100644 loama/tests/auth.setup.ts create mode 100644 loama/tests/login.spec.ts create mode 100644 loama/tests/permission-table.spec.ts create mode 100644 loama/tests/resource-explorer.spec.ts diff --git a/.gitignore b/.gitignore index b9263d5..ca189d7 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ node_modules/ dist/ build/ .env +pods/ .nx/cache .nx/workspace-data diff --git a/css/config/seeds.json b/css/config/seeds.json index 7523e6d..b6541b9 100644 --- a/css/config/seeds.json +++ b/css/config/seeds.json @@ -1,17 +1,23 @@ [ - { - "email": "hello@example.com", - "password": "abc123", - "pods": [ - { "name": "pod1" } - ] - }, - { - "email": "hello2@example.com", - "password": "123abc", - "pods": [ - { "name": "pod2" }, - { "name": "pod3" } - ] - } + { + "email": "hello@example.com", + "password": "abc123", + "pods": [ + { + "name": "pod1" + } + ] + }, + { + "email": "hello2@example.com", + "password": "123abc", + "pods": [ + { + "name": "pod2" + }, + { + "name": "pod3" + } + ] + } ] diff --git a/loama/.github/workflows/playwright.yml b/loama/.github/workflows/playwright.yml new file mode 100644 index 0000000..f7f7c1c --- /dev/null +++ b/loama/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm install -g yarn && yarn + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/loama/.gitignore b/loama/.gitignore index 8ee54e8..25f857b 100644 --- a/loama/.gitignore +++ b/loama/.gitignore @@ -28,3 +28,7 @@ coverage *.sw? *.tsbuildinfo +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/loama/README.md b/loama/README.md index 091b5cf..23cc3bf 100644 --- a/loama/README.md +++ b/loama/README.md @@ -22,6 +22,17 @@ yarn build ``` +## How to test this project + +- Make sure your are in the `loama` subdirectory +- Run `yarn build && yarn preview` this will spinup a production like server on `http://localhost:4173` +- Open a new terminal and go to the root of this repo +- Spin-up a CSS pod with some predefined data: `yarn pods:start`. It is recommended to run `yarn pods:reset && yarn pods:start` when you've ran the tests before. This will clear the pods data folder so you are sure the test run with a clean sheet +- Now you are ready to run the test suite `yarn test` + +> [!NOTE] +> These test are created with the assumption that the solid server adds some basic files to the pods like the README and profile/card + ### How to manually test this project - Login with a valid IDP - Select a file (I've mostly used the README file) diff --git a/loama/package.json b/loama/package.json index 289064c..490561c 100644 --- a/loama/package.json +++ b/loama/package.json @@ -10,7 +10,8 @@ "type-check": "vue-tsc --build --force", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/", - "lint:ci": "eslint . --config .eslintrc.cjs --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --format node_modules/eslint-formatter-markdown/markdown.js" + "lint:ci": "eslint . --config .eslintrc.cjs --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --format node_modules/eslint-formatter-markdown/markdown.js", + "test": "playwright test" }, "engines": { "node": ">=20" @@ -30,6 +31,7 @@ "vue-router": "^4.3.3" }, "devDependencies": { + "@playwright/test": "1.40.0", "@rushstack/eslint-patch": "^1.8.0", "@tsconfig/node20": "^20.1.4", "@types/node": "^20.14.5", diff --git a/loama/playwright.config.ts b/loama/playwright.config.ts new file mode 100644 index 0000000..21ac659 --- /dev/null +++ b/loama/playwright.config.ts @@ -0,0 +1,79 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './tests', + /* 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', + baseURL: 'http://localhost:4173' + }, + + /* 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/loama/src/components/explorer/ExplorerBreadcrumbs.vue b/loama/src/components/explorer/ExplorerBreadcrumbs.vue index 4fcdaf1..2014035 100644 --- a/loama/src/components/explorer/ExplorerBreadcrumbs.vue +++ b/loama/src/components/explorer/ExplorerBreadcrumbs.vue @@ -1,5 +1,5 @@