Devxt 1653 - Add login controls

.dockerignore

@@ -13,4 +13,6 @@ examples
 *.git
 **/.swc
 e2e-test-report
-.husky
+.husky
+*.test.tsx
+*.test.ts

.github/workflows/test.yaml

@@ -0,0 +1,42 @@
+name: Run Unit Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # from https://github.com/actions/cache/blob/main/examples.md#node---yarn
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(./.yarn/releases/yarn-1.22.19.cjs cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        run: ./.yarn/releases/yarn-1.22.19.cjs install --frozen-lockfile
+
+      - name: Run Unit Tests
+        run: ./.yarn/releases/yarn-1.22.19.cjs test

README.md

@@ -1,8 +1,9 @@
 # Developer Portal
 
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE)
-[![Package Status](https://github.com/bcgov/developer-portal/actions/workflows/update-gitops.yaml/badge.svg)](https://github.com/bcgov/developer-portal/actions/workflows/update-gitops.yaml)
+[![Build and update gitops repo](https://github.com/bcgov/developer-portal/actions/workflows/build-update-gitops.yaml/badge.svg)](https://github.com/bcgov/developer-portal/actions/workflows/build-update-gitops.yaml)
 [![CodeQL](https://github.com/bcgov/developer-portal/workflows/CodeQL/badge.svg)](https://github.com/bcgov/developer-portal/actions/workflows/github-code-scanning/codeql)
+[![Run Unit Tests](https://github.com/bcgov/developer-portal/actions/workflows/test.yaml/badge.svg)](https://github.com/bcgov/developer-portal/actions/workflows/test.yaml)
 
 This is the [developer portal for the Province of British Columbia](https://developer.gov.bc.ca) built using [Backstage](https://backstage.io).
 
@@ -28,6 +29,20 @@ $ yarn install
 $ yarn dev
 ```
 
+### Testing
+
+End to end tests are in the [packages/app/e2e-tests](./packages/app/e2e-tests/) directory.
+
+To run locally:
+
+- start a local instance
+- `yarn test:e2e`
+
+To run against a dev instance:
+
+- Set the `PLAYWRIGHT_URL` to your dev instance when running the test
+- `PLAYWRIGHT_URL=https://dev.example.org yarn test:e2e`
+
 ### Dockerfile
 
 Note: The dockerfile is based on the [Janus showcase project](https://github.com/janus-idp/backstage-showcase/)

packages/app/e2e-tests/app.test.ts

@@ -14,11 +14,107 @@
  * limitations under the License.
  */
 import { test, expect } from '@playwright/test';
-test('App should render the welcome page', async ({ page }) => {
-  await page.goto('/');
-  const enterButton = page.getByRole('button', { name: 'Enter' });
-  await expect(enterButton).toBeVisible();
-  await enterButton.click();
-
-  await expect(page.getByText('My Company Catalog')).toBeVisible();
-});
+
+test.describe.configure({ mode: 'parallel' });
+
+/**
+ * All pages in this section are accessible without the need to login first.
+ * A default guest user is used behind the scenes.
+ */
+test.describe('Login not needed to access non-protected pages', () => {
+  test('homepage is available', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByText('Documentation library')).toBeVisible();
+  });
+
+  test('techdocs are available', async ({ page }) => {
+    await page.goto('/docs');
+    await expect(
+      page.getByText('Documentation available in BCDevExchange'),
+    ).toBeVisible();
+    await page.getByRole('link', { name: 'Mobile development guide' }).click();
+    await expect(
+      page.getByRole('heading', { name: 'Mobile app development' }),
+    ).toBeVisible({ timeout: 20_000 }); // give this extra time to load, it seems slow sometimes and fails
+  });
+
+  test('search is available', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('textbox').fill('Vault');
+    await page.keyboard.press('Enter');
+    await expect(page.getByText('Search')).toBeVisible();
+  });
+
+  test('api-docs are available', async ({ page }) => {
+    await page.goto('/api-docs');
+    await expect(
+      page.getByRole('heading', { name: 'All apis (0)' }),
+    ).toBeVisible();
+  });
+
+  test('tech-radar is available', async ({ page }) => {
+    await page.goto('/tech-radar');
+    await expect(page.getByText('Tech Radar')).toBeVisible();
+  });
+});
+
+/**
+ * All pages in this section are behind a login screen
+ */
+test.describe('Login needed to access protected pages', () => {
+  test('login needed for wizards', async ({ page }) => {
+    await page.goto('/create');
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+
+  test('login needed for settings', async ({ page }) => {
+    await page.goto('/settings');
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+
+  test('login needed for catalog', async ({ page }) => {
+    await page.goto('/catalog');
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+
+  test('login needed for catalog when it has params', async ({ page }) => {
+    await page.goto(
+      '/catalog?filters%5Bkind%5D=component&filters%5Buser%5D=owned&limit=20',
+    );
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+
+  test('login needed going directly to catalog entity', async ({ page }) => {
+    await page.goto('/catalog/default/component/mobile-developer-guide');
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+
+  test('login needed for catalog-graph', async ({ page }) => {
+    await page.goto('/catalog-graph');
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+
+  test('login needed for catalog-import', async ({ page }) => {
+    await page.goto('/catalog-import');
+    await expect(page.getByRole('button', { name: /Sign In/i })).toBeVisible();
+  });
+});
+
+/**
+ * Redirected pages. None of these are behind the login screen
+ */
+test.describe('redirects are available', () => {
+  test('redirected pages are available', async ({ page }) => {
+    await page.goto('/Design-System/About-the-Design-System');
+    await page.waitForURL('**/docs/**');
+    expect(page.url()).toContain('/docs/default/component/'); // redirect to techdocs
+
+    await page.goto('/Data-and-APIs/API-Guidelines');
+    await page.waitForURL('**/docs/**');
+    expect(page.url()).toContain('/docs/default/component/'); // redirect to techdocs
+
+    await page.goto('/API-Guidelines');
+    await page.waitForURL('**/docs/**');
+    expect(page.url()).toContain('/docs/default/component/'); // redirect to techdocs
+  });
+});

packages/app/package.json

@@ -16,6 +16,9 @@
   "dependencies": {
     "@app/plugin-expandable-toc": "0.0.0",
     "@app/plugin-toc-fix2": "0.0.0",
+    "@backstage-community/plugin-github-actions": "^0.6.16",
+    "@backstage-community/plugin-stack-overflow": "^0.1.30",
+    "@backstage-community/plugin-tech-radar": "^0.7.4",
     "@backstage/app-defaults": "^1.5.12",
     "@backstage/catalog-model": "^1.7.0",
     "@backstage/cli": "^0.28.2",
@@ -58,10 +61,7 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.2.4",
-    "styled-components": "^6.0.0-rc.3",
-    "@backstage-community/plugin-github-actions": "^0.6.16",
-    "@backstage-community/plugin-stack-overflow": "^0.1.30",
-    "@backstage-community/plugin-tech-radar": "^0.7.4"
+    "styled-components": "^6.0.0-rc.3"
   },
   "devDependencies": {
     "@backstage/test-utils": "^1.7.0",
@@ -70,7 +70,8 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/react-dom": "*",
-    "cross-env": "^7.0.0"
+    "cross-env": "^7.0.0",
+    "msw": "^1.0.0"
   },
   "browserslist": {
     "production": [