Add testing

Signed-off-by: Ryan Nowak <[email protected]>

.github/workflows/build.yaml

@@ -34,3 +34,7 @@ jobs:
         run: yarn workspaces foreach -A run build:all
       - name: Build Storybook
         run: yarn workspace rad-components run build-storybook
+      - name: Run Tests
+        run: yarn run test:all
+      - name: Run E2E Tests
+        run: yarn run test:e2e

.gitignore

@@ -35,6 +35,7 @@ node_modules/
 dist/
 dist-types/
 storybook-static/
+logs/
 
 # Temporary change files created by Vim
 *.swp

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "orta.vscode-jest"]
 }

.vscode/settings.json

@@ -17,5 +17,10 @@
   },
   "[typescriptreact]": {
     "editor.tabSize": 2
-  }
+  },
+  "jest.jestCommandLine": "yarn run test:all",
+  "jest.virtualFolders": [
+    { "name": "unit-tests", "jestCommandLine": "yarn run test:all" },
+    { "name": "e2e-tests", "jestCommandLine": "yarn run test:e2e" }
+  ]
 }

README.md

@@ -58,6 +58,20 @@ yarn workspace rad-components run storybook
 
 This will launch Storybook at `http://localhost:6006`
 
+## Testing
+
+**Run tests:**
+
+```
+yarn run test:all
+```
+
+**Run E2E tests:**
+
+```
+yarn run test:e2e
+```
+
 ## Linting
 
 This project is configured to use `eslint` for linting, along with recommended rules for React and TypeScript. This is checked as part of the pull-request process.

packages/app/package.json

@@ -44,6 +44,7 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "history": "^5.0.0",
+    "jest-canvas-mock": "^2.5.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^6.3.0",

packages/app/src/setupTests.ts

@@ -1 +1,2 @@
 import '@testing-library/jest-dom';
+import 'jest-canvas-mock';

playwright.config.ts

@@ -28,33 +28,29 @@ export default defineConfig({
   },
 
   // Run your local dev server before starting the tests
-  webServer: process.env.CI
-    ? []
-    : [
-        {
-          command: 'yarn start',
-          port: 3000,
-          reuseExistingServer: true,
-          timeout: 60_000,
-        },
-      ],
+  webServer: {
+    command: 'yarn start',
+    port: 3000,
+    reuseExistingServer: true,
+    timeout: 60_000,
+  },
 
   forbidOnly: !!process.env.CI,
 
   retries: process.env.CI ? 2 : 0,
 
-  reporter: [['html', { open: 'never', outputFolder: 'e2e-test-report' }]],
+  reporter: [
+    ['html', { open: 'never', outputFolder: './logs/e2e-test-report' }],
+  ],
 
   use: {
     actionTimeout: 0,
-    baseURL:
-      process.env.PLAYWRIGHT_URL ??
-      (process.env.CI ? 'http://localhost:7007' : 'http://localhost:3000'),
+    baseURL: process.env.PLAYWRIGHT_URL ?? 'http://localhost:3000',
     screenshot: 'only-on-failure',
     trace: 'on-first-retry',
   },
 
-  outputDir: 'node_modules/.cache/e2e-test-results',
+  outputDir: './logs/e2e-test-results',
 
   projects: generateProjects(), // Find all packages with e2e-test folders
 });

plugins/plugin-radius/src/components/ApplicationPageComponent/ApplicationPageComponent.test.tsx

@@ -22,6 +22,8 @@ describe('ApplicationPageComponent', () => {
 
   it('should render', async () => {
     await renderInTestApp(<ApplicationPageComponent />);
-    expect(screen.getByText('Welcome to radius!')).toBeInTheDocument();
+    expect(
+      screen.getByText('Displaying deployed applications.'),
+    ).toBeInTheDocument();
   });
 });

yarn.lock

@@ -14681,6 +14681,7 @@ __metadata:
     "@types/react-dom": "npm:*"
     cross-env: "npm:^7.0.0"
     history: "npm:^5.0.0"
+    jest-canvas-mock: "npm:^2.5.2"
     react: "npm:^17.0.2"
     react-dom: "npm:^17.0.2"
     react-router: "npm:^6.3.0"
@@ -16509,7 +16510,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
@@ -17374,6 +17375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssfontparser@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "cssfontparser@npm:1.2.1"
+  checksum: ceb9b2976d503dbff3ac2aff0229b263affb4fb221a6947b357682cd8a952f6995253646ca5f820020d2fe05b5e29b56dbdd2343388c32203e8dd0ed15bdc1ca
+  languageName: node
+  linkType: hard
+
 "cssnano-preset-default@npm:^5.2.14":
   version: 5.2.14
   resolution: "cssnano-preset-default@npm:5.2.14"
@@ -23077,6 +23085,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-canvas-mock@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "jest-canvas-mock@npm:2.5.2"
+  dependencies:
+    cssfontparser: "npm:^1.2.1"
+    moo-color: "npm:^1.0.2"
+  checksum: 6a4190354b1e9aedcb3045273f13f6f1d2d1efb00cfe6458707fae538a8f91f6afdf72b9e201b653666863054edc783428bdc0c1a2c71d66d9ac364b4893f6d6
+  languageName: node
+  linkType: hard
+
 "jest-changed-files@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-changed-files@npm:29.7.0"
@@ -26228,6 +26246,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moo-color@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "moo-color@npm:1.0.3"
+  dependencies:
+    color-name: "npm:^1.1.4"
+  checksum: 778c82f67f638c03a1d0fa78dcd6ea376a9f17b5e78e349c7e34a290b496dbdb43fd0b1c38070e2062d5e784bcf08e57f499015fcbcf52b3a1887d7825ebb80d
+  languageName: node
+  linkType: hard
+
 "moo@npm:^0.5.0":
   version: 0.5.2
   resolution: "moo@npm:0.5.2"