chore(tests): add js validation tests

These are the first javascript unit tests. Added them to the CI worflow.
Closes #2930

.github/workflows/javascript-tests.yml

@@ -0,0 +1,45 @@
+name: Javascript Tests
+
+on:
+  push:
+    paths:
+      - 'web/**'
+  pull_request:
+    paths:
+      - 'web/**'
+
+jobs:
+  jest-run:
+    runs-on: ubuntu-latest
+    steps:
+      - id: skip_check
+        uses: fkirc/skip-duplicate-actions@v5
+        with:
+          concurrent_skipping: 'same_content_newer'
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.9.0
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules-javascript-tests
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('web/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install Dependencies
+        working-directory: ./web
+        run: npm install
+
+      - name: Run tests
+        working-directory: ./web
+        run: npm test

web/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
+    jest: true,
   },
   extends: [
     'plugin:react/recommended',

web/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  transform: { '^.+\\.ts?$': 'ts-jest' },
+  testEnvironment: 'node',
+  testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

web/package.json

@@ -9,7 +9,8 @@
 		"lint": "eslint --ext .js,.ts,.tsx types/ pages/ components/ stories/",
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook",
-		"build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -"
+		"build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -",
+		"test": "jest"
 	},
 	"dependencies": {
 		"@ant-design/icons": "4.8.0",
@@ -78,6 +79,7 @@
 		"@svgr/webpack": "7.0.0",
 		"@types/chart.js": "2.9.37",
 		"@types/classnames": "2.3.1",
+		"@types/jest": "^29.5.0",
 		"@types/markdown-it": "12.2.3",
 		"@types/node": "18.15.11",
 		"@types/prop-types": "15.7.5",
@@ -118,6 +120,7 @@
 		"storybook-preset-less": "1.1.3",
 		"style-dictionary": "3.7.2",
 		"style-loader": "3.3.2",
+		"ts-jest": "^29.1.0",
 		"typescript": "4.9.5"
 	}
 }

web/tests/validation.test.ts

@@ -0,0 +1,42 @@
+import { isValidUrl, isValidAccount, isValidMatrixAccount } from '../utils/validators';
+
+describe('test url validation', () => {
+  const validURL = 'https://example.com';
+  const invalidURL = 'example.jfks';
+
+  test('should succeed', () => {
+    expect(isValidUrl(validURL)).toBe(true);
+  });
+
+  test('should fail', () => {
+    expect(isValidUrl(invalidURL)).toBe(false);
+  });
+});
+
+describe('test xmpp account validation', () => {
+  const validAccount = 'xmpp:something@test.biz';
+  const invalidAccount = 'something.invalid@something';
+
+  test('should succeed', () => {
+    expect(isValidAccount(validAccount, 'xmpp')).toBe(true);
+  });
+
+  test('should fail', () => {
+    expect(isValidAccount(invalidAccount, 'xmpp')).toBe(false);
+  });
+});
+
+describe('test matrix account validation', () => {
+  const validMatrixAccount = '@me:matrix.org';
+  const validMatrixAccountWithProtocol = 'matrix:@me:matrix.org';
+  const invalidMatrixAccount = 'something.invalid@something';
+
+  test('should succeed', () => {
+    expect(isValidMatrixAccount(validMatrixAccount)).toBe(true);
+    expect(isValidMatrixAccount(validMatrixAccountWithProtocol)).toBe(true);
+  });
+
+  test('should fail', () => {
+    expect(isValidMatrixAccount(invalidMatrixAccount)).toBe(false);
+  });
+});