Merge pull request #359 from systemli/add-first-tests

✅ Add first tests

.github/workflows/integration.yml

@@ -7,9 +7,34 @@ on:
   pull_request:
 
 jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "yarn"
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Test
+        run: yarn run test --coverage
+
+      - name: Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
   build:
     name: Build
     runs-on: ubuntu-20.04
+    needs: [test]
     strategy:
       matrix:
         node-version: ["16", "18", "current"]

jest-setup.ts

@@ -0,0 +1,10 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'
+import fetchMock from 'jest-fetch-mock'
+
+fetchMock.enableMocks()
+
+process.env.REACT_APP_API_URL = 'http://localhost:8080/v1'

jest.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from '@jest/types'
+
+const config: Config.InitialOptions = {
+  verbose: false,
+  testEnvironment: 'jsdom',
+  preset: 'ts-jest',
+  moduleNameMapper: {
+    'react-markdown': '<rootDir>/src/__mocks_/react-markdown.js',
+    '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-markdown/)'],
+  setupFilesAfterEnv: ['./jest-setup.ts'],
+}
+export default config

package.json

@@ -2,6 +2,7 @@
   "name": "ticker-admin",
   "scripts": {
     "start": "webpack serve --config webpack.dev.config.ts",
+    "test": "jest",
     "build": "webpack --config webpack.prod.config.ts",
     "postinstall": "semantic-ui-css-patch"
   },
@@ -31,6 +32,8 @@
     "@babel/preset-env": "^7.19.0",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/jest": "^29.1.1",
     "@types/jwt-decode": "^3.1.0",
     "@types/leaflet": "^1.7.11",
     "@types/leaflet-draw": "^1.0.5",
@@ -62,6 +65,11 @@
     "eslint-webpack-plugin": "^3.2.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
+    "jest": "^29.1.2",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom": "^29.1.2",
+    "jest-fetch-mock": "^3.0.3",
+    "jest-transform-stub": "^2.0.0",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
     "postcss-remove-google-fonts": "^1.2.0",
@@ -73,6 +81,7 @@
     "semantic-ui-react": "^2.1.3",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.3",
+    "ts-jest": "^29.0.3",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.2",

src/api/Auth.test.ts

@@ -0,0 +1,42 @@
+import { login } from './Auth'
+
+describe('Auth', function () {
+  beforeEach(() => {
+    fetchMock.resetMocks()
+    fetchMock.doMock()
+  })
+
+  test('login failed', function () {
+    fetchMock.mockResponse(
+      JSON.stringify({
+        data: {},
+        status: 'error',
+        error: { code: 1002, message: 'not found' },
+      }),
+      { status: 401 }
+    )
+
+    expect(login('[email protected]', 'password')).rejects.toThrow(
+      'Login failed'
+    )
+  })
+
+  test('server error', function () {
+    fetchMock.mockReject()
+
+    expect(login('[email protected]', 'password')).rejects.toThrow(
+      'Login failed'
+    )
+  })
+
+  test('login successful', function () {
+    const response = {
+      code: 200,
+      expire: '2022-10-01T18:22:37+02:00',
+      token: 'token',
+    }
+    fetchMock.mockResponse(JSON.stringify(response), { status: 200 })
+
+    expect(login('[email protected]', 'password')).resolves.toEqual(response)
+  })
+})

src/api/Auth.ts

@@ -19,7 +19,6 @@ export function login(
     body: JSON.stringify({ username, password }),
   })
     .then(response => {
-      if (response.status === 401) throw new Error('Authentication failed')
       if (!response.ok) throw new Error('Login failed')
 
       return response.json()

src/lib/helper.test.ts

@@ -0,0 +1,41 @@
+import { replaceMagic } from './helper'
+
+describe('helper', function () {
+  test('replace links', function () {
+    const text = 'https://www.systemli.org'
+
+    expect(replaceMagic(text)).toBe(
+      '<a href="https://www.systemli.org" target="_blank" rel="noopener noreferrer">www.systemli.org</a>'
+    )
+  })
+
+  test('replace twitter hashtag', function () {
+    const text = '#hashtag'
+
+    expect(replaceMagic(text)).toBe(
+      '<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/search?q=%23hashtag">#hashtag</a>'
+    )
+  })
+
+  test('replace twitter user handle', function () {
+    const text = '/cc @systemli'
+
+    expect(replaceMagic(text)).toBe(
+      '/cc <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/systemli">@systemli</a>'
+    )
+  })
+
+  test('replace email address', function () {
+    const text = 'sent mail to [email protected]'
+
+    expect(replaceMagic(text)).toBe(
+      'sent mail to <a href="mailto:[email protected]">[email protected]</a>'
+    )
+  })
+
+  test('replace newline with <br/> tag', function () {
+    const text = 'newline\nnewtext\r\n'
+
+    expect(replaceMagic(text)).toBe('newline<br/>newtext<br/>')
+  })
+})