diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml deleted file mode 100644 index 6747e85..0000000 --- a/.github/workflows/cd.yml +++ /dev/null @@ -1,111 +0,0 @@ -name: Loama CD - -on: - push: - branches: [ "root" ] - -permissions: - contents: read - pages: write - id-token: write - -concurrency: - group: 'pages' - cancel-in-progress: true - -jobs: - controller-build: - name: 'Controller Build' - runs-on: ubuntu-latest - defaults: - run: - working-directory: controller - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Install Node.js - uses: actions/setup-node@v4 - - uses: pnpm/action-setup@v4 - name: Install PNPM - with: - version: latest - run_install: false - - name: Get pnpm store directory - shell: bash - id: cache - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup PNPM cache - env: - STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }} - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - name: Insall dependencies - run: pnpm install --frozen-lockfile - - name: Run Typescript Check - run: pnpm run build >> $GITHUB_STEP_SUMMARY - - name: Save distribution files - uses: actions/upload-artifact@v4 - with: - name: controller-dist - path: ${{github.workspace}}/controller/dist - - build: - name: 'Deploy App' - runs-on: ubuntu-latest - needs: controller-build - defaults: - run: - working-directory: loama - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Download controller dist - uses: actions/download-artifact@v4 - with: - name: controller-dist - path: ${{github.workspace}}/controller/dist - - name: Install Node.js - uses: actions/setup-node@v4 - - uses: pnpm/action-setup@v4 - name: Install PNPM - with: - version: latest - run_install: false - - name: Get pnpm store directory - shell: bash - id: cache - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup PNPM cache - env: - STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }} - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - name: Install dependencies of controller - working-directory: controller - run: pnpm install --frozen-lockfile - - name: Install dependencies of loama - run: pnpm install --frozen-lockfile - - name: Build applicaion - run: pnpm run build - - name: 'Dup `index.html` to `404.html` for redirects' - run: cp dist/index.html dist/404.html - - name: Setup Pages - uses: actions/configure-pages@v4 - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - # Upload dist folder - path: ${{github.workspace}}/loama/dist - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 \ No newline at end of file diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml deleted file mode 100644 index ce339c8..0000000 --- a/.github/workflows/ci.yml +++ /dev/null @@ -1,166 +0,0 @@ -name: Loama CI - -on: - push: - branches: [ "root" ] - pull_request: - branches: [ "root" ] - -jobs: - eslint: - name: 'ESLint' - runs-on: ubuntu-latest - defaults: - run: - working-directory: loama - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Install Node.js - uses: actions/setup-node@v4 - - uses: pnpm/action-setup@v4 - name: Install PNPM - with: - version: latest - run_install: false - - name: Get pnpm store directory - shell: bash - id: cache - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup PNPM cache - env: - STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }} - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - name: Insall dependencies - run: pnpm install --frozen-lockfile - - name: Run Eslint - run: pnpm run lint:ci >> $GITHUB_STEP_SUMMARY - controller-tsc: - name: 'TSC (Controller)' - runs-on: ubuntu-latest - defaults: - run: - working-directory: controller - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Install Node.js - uses: actions/setup-node@v4 - - uses: pnpm/action-setup@v4 - name: Install PNPM - with: - version: latest - run_install: false - - name: Get pnpm store directory - shell: bash - id: cache - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup PNPM cache - env: - STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }} - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - name: Insall dependencies - run: pnpm install --frozen-lockfile - - name: Run Typescript Check - run: pnpm run build >> $GITHUB_STEP_SUMMARY - - name: Save distribution files - uses: actions/upload-artifact@v4 - with: - name: controller-dist - path: ${{github.workspace}}/controller/dist - - vue-tsc: - name: 'TSC (Loama)' - runs-on: ubuntu-latest - needs: controller-tsc - defaults: - run: - working-directory: loama - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Download controller dist - uses: actions/download-artifact@v4 - with: - name: controller-dist - path: ${{github.workspace}}/controller/dist - - name: Install Node.js - uses: actions/setup-node@v4 - - uses: pnpm/action-setup@v4 - name: Install PNPM - with: - version: latest - run_install: false - - name: Get pnpm store directory - shell: bash - id: cache - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup PNPM cache - env: - STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }} - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - name: Insall dependencies - run: pnpm install --frozen-lockfile - - name: Run Typescript Check - run: pnpm run type-check >> $GITHUB_STEP_SUMMARY - build: - name: 'Build (Loama)' - runs-on: ubuntu-latest - needs: controller-tsc - defaults: - run: - working-directory: loama - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Download controller dist - uses: actions/download-artifact@v4 - with: - name: controller-dist - path: ${{github.workspace}}/controller/dist - - name: Install Node.js - uses: actions/setup-node@v4 - - uses: pnpm/action-setup@v4 - name: Install PNPM - with: - version: latest - run_install: false - - name: Get pnpm store directory - shell: bash - id: cache - run: | - echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup PNPM cache - env: - STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }} - with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - name: Install dependencies of controller - working-directory: controller - run: pnpm install --frozen-lockfile - - name: Install dependencies of loama - run: pnpm install --frozen-lockfile - - name: Run Typescript Check - run: pnpm run build-only >> $GITHUB_STEP_SUMMARY \ No newline at end of file diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..797f1f6 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,44 @@ +name: Playwright Tests +on: + push: + branches: [ development ] + pull_request: + branches: [ development ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + container: + image: mcr.microsoft.com/playwright:v1.47.0-jammy + steps: + - uses: actions/checkout@v4 + - name: Set Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: yarn + - name: Run install + uses: borales/actions-yarn@v5 + with: + cmd: install + - run: cd loama + - name: Build repo + uses: borales/actions-yarn@v5 + with: + cmd: build + - name: Install Playwright Browsers + uses: borales/actions-yarn@v5 + with: + cmd: playwright install --with-deps + dir: loama + - name: Run playwright tests + uses: borales/actions-yarn@v5 + with: + cmd: test + dir: loama + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: loama/playwright-report/ + retention-days: 30 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/CHANGELOG.md b/CHANGELOG.md index b6d7c4d..0c8ed28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Add automated UI tests on ./loama +- Add Github action to run UI tests on PR to default branch + ## [0.1.0] - 2025-02-20 ### Added diff --git a/README.md b/README.md index 9d61372..fbdd266 100644 --- a/README.md +++ b/README.md @@ -96,3 +96,9 @@ Now you can find loama at , or in a URL with a path, if y 2. `docker compose up -d --wait` This will spin up a Community Solid Server on port 3000. + +### Automated tests + +The `./loama` subproject contains automated tests and these are added to the github workflow. + +See the local [README](./loama/README.md) for details to execute these tests locally. 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..15e3241 100644 --- a/loama/README.md +++ b/loama/README.md @@ -22,6 +22,19 @@ yarn build ``` +## How to test this project + +- First do a full build of the repo + - Open a terminal in the root of this repo + - Run `yarn` to install all dependencies + - Run `yarn build` to build all dependencies +- Make sure your are in the `loama` subdirectory +- Run `yarn playwright install --with-deps` to install the headless browsers + system dependencies +- Now you are ready to run the test suite `yarn test`, this will spin-up a preview server on port 4173 & a CSS on port 8080. Make sure nothing else is running on these ports as playwright will otherwise think those services are the services it tries to start + +> [!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 52833c4..17f2ba2 100644 --- a/loama/package.json +++ b/loama/package.json @@ -10,7 +10,11 @@ "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", + "test:interactive": "playwright test --ui", + "pods:start": "community-solid-server -c @css:config/file.json --seedConfig ../css/config/seeds.json -f pods -p 8080", + "pods:reset": "rimraf pods" }, "engines": { "node": ">=20" @@ -19,18 +23,19 @@ "@inrupt/solid-client": "^2.1.0", "@inrupt/solid-client-authn-browser": "^2.2.4", "@phosphor-icons/vue": "^2.2.1", - "@primevue/themes": "^4.0.5", + "@primevue/themes": "^4.1.1", "@vueform/multiselect": "^2.6.9", "loama-app": "^1.0.0", "loama-common": "^1.0.0", "loama-controller": "^1.0.0", "pinia": "^2.2.2", - "primevue": "^4.0.5", + "primevue": "^4.1.1", "vite-svg-loader": "^5.1.0", "vue": "^3.4.29", "vue-router": "^4.3.3" }, "devDependencies": { + "@playwright/test": "^1.50.1", "@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..137fe47 --- /dev/null +++ b/loama/playwright.config.ts @@ -0,0 +1,57 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './tests', + /* Run tests in files in parallel */ + fullyParallel: false, + /* 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, + // Always use 1 worker so we don't create unwanted env's by running 2 tests at the same time + // It forces to only run 1 test in 1 browser at a time + workers: 1, + /* 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: { + 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'] }, + // }, + ], + + webServer: [ + { + command: 'yarn build && yarn preview', + url: 'http://localhost:4173', + timeout: 120 * 1000, + reuseExistingServer: !process.env.CI, + }, + { + command: 'yarn pods:reset && yarn pods:start', + url: 'http://localhost:8080', + timeout: 120 * 1000, + 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 @@