Configure des tests Ts + WebComponents

.github/workflows/deploy-branches-and-prs.yml

@@ -10,6 +10,17 @@ on:
       - "*"
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.12"
+      - run: npm ci
+      - run: npm test -- --ci
+
   deploy-dev:
     # This workflow is only of value to the CovidTrackerFr/vitemadose-front repository and
     # would always fail in forks, so we limit this job to CovidTrackerFr/vitemadose-front

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      { targets: { node: 'current' } },
+    ],
+  ]
+};

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-babel',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
+  moduleNameMapper: {
+    "\\.(css|less|sass|scss)$": "<rootDir>/test-utils/styleMock.ts",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(testing-library__dom|@open-wc|lit-html|lit-element|pure-lit|lit-element-state-decoupler)/)"
+  ],
+};

package.json

@@ -12,6 +12,8 @@
   ],
   "scripts": {
     "dev": "vite",
+    "test": "jest",
+    "tdd": "jest --watchAll --notify",
     "build": "tsc && vite build",
     "build-dev": "tsc && vite --base dev/ build"
   },
@@ -20,12 +22,21 @@
     "not IE 11"
   ],
   "devDependencies": {
+    "@babel/preset-env": "^7.14.1",
+    "@open-wc/testing-helpers": "^1.8.12",
+    "@testing-library/dom": "^7.30.4",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/user-event": "^13.1.8",
+    "@types/jest": "^26.0.23",
     "@types/leaflet": "1.7.0",
     "@types/leaflet.markercluster": "1.4.4",
     "@types/page": "1.11.2",
     "@vitejs/plugin-legacy": "1.3.3",
     "autoprefixer": "10.2.5",
+    "jest": "^26.6.3",
     "sass": "1.32.8",
+    "testing-library__dom": "^7.29.4-beta.1",
+    "ts-jest": "^26.5.5",
     "typescript": "4.2.3",
     "vite": "2.1.5"
   },

src/components/vmd-button-switch.component.spec.ts

@@ -0,0 +1,52 @@
+import '@testing-library/jest-dom'
+import { html } from 'lit-html'
+import { screen } from "testing-library__dom";
+import userEvent from "@testing-library/user-event"
+import { fixture } from "@open-wc/testing-helpers";
+import './vmd-button-switch.component'
+
+describe("<vmd-button-switch>", () => {
+  const options = [
+    { code: 'y', libelle: 'oui' },
+    { code: 'n', libelle: 'non' }
+  ]
+  let onChanged = jest.fn()
+  beforeEach(async () => {
+    onChanged = jest.fn()
+    await fixture(html`
+      <vmd-button-switch
+        .codeSelectionne="${'y'}"
+        .options="${options}"
+        @changed="${onChanged}"
+      />`)
+  })
+
+  it('displays a group of options', () =>{
+    expect(screen.getByRole('group')).toBeDefined()
+  })
+
+  it('displays the current selected option as pressed', () => {
+    expect(screen.getByRole('button', { pressed: true })).toHaveTextContent('oui')
+  })
+  it('displays the other option as unpressed', () => {
+    expect(screen.getByRole('button', { pressed: false })).toHaveTextContent('non')
+  })
+  describe('when clicking the inactive option', () => {
+    it("triggers the 'changed' event", async () => {
+      await userEvent.click(screen.getByText('non'))
+      expect(onChanged).toHaveBeenCalledTimes(1)
+      expect(onChanged.mock.calls[0][0].detail).toEqual({ value: 'n' })
+    })
+    it("updates the pressed buttons", async () => {
+      await userEvent.click(screen.getByText('non'))
+      expect(screen.getByRole('button', { pressed: true })).toHaveTextContent('non')
+      expect(screen.getByRole('button', { pressed: false })).toHaveTextContent('oui')
+    })
+  })
+  describe('when clicking the active option', () => {
+    it("doesn't trigger an event", async () => {
+      await userEvent.click(screen.getByText('oui'))
+      expect(onChanged).toHaveBeenCalledTimes(0)
+    })
+  })
+})

src/components/vmd-button-switch.component.ts

@@ -36,8 +36,9 @@ export class VmdButtonSwitchComponent extends LitElement {
         return html`
           <div class="btn-group" role="group">
               ${repeat(this.options, option => option.code, option => html`
-                <button type="button" 
-                        class="option ${classMap({ 'active': option.code===this.codeSelectionne })}" 
+                <button type="button"
+                        aria-pressed="${this.codeSelectionne === option.code}"
+                        class="option ${classMap({ 'active': option.code===this.codeSelectionne })}"
                         @click="${() => this.valeurSelectionnee(option.code)}">
                   ${option.libelle}
                 </button>
@@ -47,8 +48,11 @@ export class VmdButtonSwitchComponent extends LitElement {
     }
 
     valeurSelectionnee(codeSelectionne: string) {
+        if (this.codeSelectionne === codeSelectionne) {
+          return
+        }
         this.codeSelectionne = codeSelectionne;
-        this.dispatchEvent(new CustomEvent<{value: string|undefined}>('changed'!, {
+        this.dispatchEvent(new CustomEvent<{value: string|undefined}>('changed', {
             detail: {
                 value: (this.codeSelectionne === "")?undefined:codeSelectionne
             }

test-utils/styleMock.ts

@@ -0,0 +1,2 @@
+const empty = ""
+export default empty

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ES6",
     "module": "esnext",
     "lib": ["es2017", "dom", "dom.iterable"],
     "types": ["vite/client"],