Merge pull request #280 from dnum-mi/tech/migrate-to-vitest

laruiss · web-flow · commit 2038a7962b45 · 2022-03-21T15:08:14.000+01:00
refacto: ♻️ Use Vitest instead of Jest
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "README.md"
   ],
   "engines": {
-    "node": "16.x.x",
+    "node": "17.x.x",
     "npm": "8.x.x"
   },
   "types": "./types",
@@ -32,8 +32,10 @@
     "build:css": "node build-css.mjs",
     "build:js": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "demo-app": "vite",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage",
     "test": "run-s test:unit test:ct-ci",
-    "test:unit": "jest",
+    "test:unit": "vitest run",
     "test:ct": "cypress open-ct",
     "test:ct-ci": "cypress run-ct",
     "format": "npm run lint -- --fix",
@@ -96,11 +98,11 @@
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "@vue/tsconfig": "^0.1.3",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
     "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-import-meta": "^2.1.1",
     "chalk": "^5.0.1",
+    "c8": "^7.11.0",
     "copyfiles": "^2.4.1",
     "core-js": "^3.21.1",
     "cross-env": "^7.0.3",
@@ -115,9 +117,6 @@
     "eslint-plugin-vue": "^8.5.0",
     "globby": "^13.1.1",
     "inquirer": "^8.2.1",
-    "jest": "^27.5.1",
-    "jest-svg-transformer": "^1.0.0",
-    "jest-transform-stub": "^2.0.0",
     "jsdom": "^19.0.0",
     "lint-staged": "^12.3.6",
     "mkdirp": "^1.0.4",
@@ -139,7 +138,6 @@
     "semantic-release": "^19.0.2",
     "start-server-and-test": "^1.14.0",
     "storybook-builder-vite": "^0.1.20",
-    "ts-jest": "^27.1.3",
     "tsd-jsdoc": "^2.5.0",
     "typescript": "^4.6.2",
     "vite": "^2.8.6",
@@ -154,6 +152,9 @@
   "peerDependencies": {
     "vue-router": "^4.0.14"
   },
+  "optionalDependencies": {
+    "esbuild-linux-64": "^0.14.27"
+  },
   "gitHooks": {
     "pre-commit": "lint-staged",
     "pre-push": "npm test"
diff --git a/src/components/DsfrAccordion/DsfrAccordion.spec.js b/src/components/DsfrAccordion/DsfrAccordion.spec.js
@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/vue'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrAccordion from './DsfrAccordion.vue'
 
@@ -19,8 +19,8 @@ describe('DsfrAccordion', () => {
       },
       props: {
         title,
-        id: 1,
-        expandedId: 1,
+        id: '1',
+        expandedId: '1',
       },
       slots: {
         default: content,
diff --git a/src/components/DsfrAlert/DsfrAlert.spec.js b/src/components/DsfrAlert/DsfrAlert.spec.js
@@ -2,6 +2,8 @@ import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrAlert from './DsfrAlert.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrAlert', () => {
   it('should mount DsfrAlert with right content', () => {
     // Given
@@ -10,6 +12,11 @@ describe('DsfrAlert', () => {
 
     // When
     const { getByText } = render(DsfrAlert, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         title: alertTitle,
         description: alertDescription,
@@ -35,6 +42,11 @@ describe('DsfrAlert', () => {
 
     // When
     const { emitted, getByTitle } = render(DsfrAlert, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         title: alertTitle,
         description: alertDescription,
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.spec.js b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.spec.js
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrBreadcrumb from './DsfrBreadcrumb.vue'
 
diff --git a/src/components/DsfrButton/DsfrButton.spec.js b/src/components/DsfrButton/DsfrButton.spec.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/vue'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrButton from './DsfrButton.vue'
 
diff --git a/src/components/DsfrButton/DsfrButtonGroup.spec.js b/src/components/DsfrButton/DsfrButtonGroup.spec.js
@@ -1,7 +1,8 @@
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
+import { spy } from '@/../tests/unit/test-utils.js'
 
 import DsfrButtonGroup from './DsfrButtonGroup.vue'
 
@@ -12,8 +13,8 @@ describe('DsfrButtonGroup', () => {
     // Given
     const labelPrimary = 'Button primary'
     const labelSecondary = 'Button secondary'
-    const onClickFirst = jest.fn()
-    const onClickSecond = jest.fn()
+    const onClickFirst = spy()
+    const onClickSecond = spy()
     const buttonsProps = [
       {
         label: labelPrimary,
@@ -52,8 +53,8 @@ describe('DsfrButtonGroup', () => {
     expect(wrapper).toHaveClass('extra-class')
     expect(wrapper).not.toHaveClass('fr-btns-group--right')
     expect(wrapper).not.toHaveClass('fr-btns-group--inline-sm')
-    expect(onClickFirst).toHaveBeenCalled()
-    expect(onClickSecond).toHaveBeenCalled()
+    expect(onClickFirst.callCount).toBe(1)
+    expect(onClickSecond.callCount).toBe(1)
   })
 
   it('should mount small DsfrButtonGroup right-aligned content', async () => {
diff --git a/src/components/DsfrCallout/DsfrCallout.spec.js b/src/components/DsfrCallout/DsfrCallout.spec.js
@@ -1,6 +1,8 @@
 import { fireEvent, render } from '@testing-library/vue'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+import { spy } from '@/../tests/unit/test-utils.js'
+
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrCallout from './DsfrCallout.vue'
 
@@ -31,7 +33,7 @@ describe('DsfrCallout', () => {
   })
 
   it('should display a callout with button and icon', async () => {
-    const onClick = jest.fn()
+    const onClick = spy()
     const label = 'Label bouton'
     const title = 'Titre de la mise en avant'
     const icon = 'ri-information-line'
diff --git a/src/components/DsfrHeader/DsfrHeader.spec.js b/src/components/DsfrHeader/DsfrHeader.spec.js
@@ -2,7 +2,7 @@ import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrHeader from './DsfrHeader.vue'
 
diff --git a/src/components/DsfrHeader/DsfrHeader.vue b/src/components/DsfrHeader/DsfrHeader.vue
@@ -104,6 +104,9 @@ export default defineComponent({
                   data-testid="header-logo"
                 />
               </div>
+              <div class="fr-header__operator">
+                <slot name="operator" />
+              </div>
               <div
                 v-if="isWithSlotOperator"
                 class="fr-header__operator"
diff --git a/src/components/DsfrModal/DsfrModal.spec.js b/src/components/DsfrModal/DsfrModal.spec.js
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrModal from './DsfrModal.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigation.spec.js b/src/components/DsfrNavigation/DsfrNavigation.spec.js
@@ -1,7 +1,9 @@
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
+
+import { spy } from '@/../tests/unit/test-utils.js'
 
 import DsfrNavigation from './DsfrNavigation.vue'
 
@@ -161,7 +163,7 @@ describe('DsfrNavigation', () => {
     const label = 'Navigation ppale'
     const menuItemText = 'menu item text'
 
-    const mySpy = jest.fn()
+    const mySpy = spy()
     navItems[1].links[0].onClick = mySpy
     navItems[1].links[0].text = menuItemText
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationItem.spec.js b/src/components/DsfrNavigation/DsfrNavigationItem.spec.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/vue'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.js b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.spec.js b/src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMegaMenuCategory from './DsfrNavigationMegaMenuCategory.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenu.spec.js b/src/components/DsfrNavigation/DsfrNavigationMenu.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMenu from './DsfrNavigationMenu.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuItem.spec.js b/src/components/DsfrNavigation/DsfrNavigationMenuItem.spec.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/vue'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMenuItem from './DsfrNavigationMenuItem.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js b/src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 
diff --git a/src/components/DsfrPagination/DsfrPagination.spec.js b/src/components/DsfrPagination/DsfrPagination.spec.js
@@ -31,9 +31,7 @@ describe('DsfrPagination', () => {
     })
 
     const thirdLink = getByTitle('Page 3')
-    console.log('Current page is #' + currentPage.value)
     await fireEvent.click(thirdLink)
-    console.log('Current page is #' + currentPage.value)
 
     // Then
     expect(emitted()['update:currentPage']).toBeTruthy()
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.spec.js b/src/components/DsfrSearchBar/DsfrSearchBar.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import SearchBar from './DsfrSearchBar.vue'
 
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.vue b/src/components/DsfrSearchBar/DsfrSearchBar.vue
@@ -64,7 +64,7 @@ export default defineComponent({
       type="search"
       :placeholder="placeholder"
       :model-value="modelValue"
-      :label-visible="labelVisible"
+      :label-visible="false"
       :label="label"
       @update:modelValue="$emit('update:modelValue', $event)"
       @keydown.enter="$emit('search')"
diff --git a/src/components/DsfrSideMenu/DsfrSideMenu.spec.js b/src/components/DsfrSideMenu/DsfrSideMenu.spec.js
@@ -8,6 +8,7 @@ describe('DsfrSideMenu', () => {
 
     const { getByRole, getByText } = render(DsfrSideMenu, {
       props: {
+        id: 'id',
         headingTitle,
       },
     })
diff --git a/src/components/DsfrSideMenu/DsfrSideMenu.vue b/src/components/DsfrSideMenu/DsfrSideMenu.vue
@@ -52,6 +52,7 @@ defineEmits(['toggle-expand'])
         <!-- @slot Slot par défaut du contenu du menu latéral -->
         <slot>
           <DsfrSideMenuList
+            :id="getRandomId('sidemenu', 'list')"
             :menu-items="menuItems"
             @toggle-expand="$emit('toggle-expand', $event)"
           />
diff --git a/src/components/DsfrTable/DsfrTableCell.spec.js b/src/components/DsfrTable/DsfrTableCell.spec.js
@@ -3,6 +3,8 @@ import { fireEvent, render } from '@testing-library/vue'
 import DsfrTableCell from './DsfrTableCell.vue'
 import DsfrTag from '../DsfrTag/DsfrTag.vue'
 
+import { spy } from '@/../tests/unit/test-utils.js'
+
 const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
 
 describe('DsfrTableCell', () => {
@@ -86,7 +88,7 @@ describe('DsfrTableCell', () => {
   it('should render a cell with an onClick', async () => {
     // Given
     const field = 'Contenu'
-    const onClick = jest.fn()
+    const onClick = spy()
 
     // When
     const { container } = render(DsfrTableCell, {
diff --git a/src/components/DsfrTable/DsfrTableHeader.spec.js b/src/components/DsfrTable/DsfrTableHeader.spec.js
@@ -2,6 +2,8 @@ import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrTableHeader from './DsfrTableHeader.vue'
 
+import { spy } from '@/../tests/unit/test-utils.js'
+
 const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
 
 describe('DsfrTableHeader', () => {
@@ -26,7 +28,7 @@ describe('DsfrTableHeader', () => {
 
   it('should render header cell with headerAttrs', async () => {
     const headerText = 'En-tête'
-    const onClick = jest.fn()
+    const onClick = spy()
 
     const { container } = render(DsfrTableHeader, {
       global: {
diff --git a/src/components/DsfrTable/DsfrTableHeaders.spec.js b/src/components/DsfrTable/DsfrTableHeaders.spec.js
@@ -2,12 +2,14 @@ import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
 
+import { spy } from '@/../tests/unit/test-utils.js'
+
 const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
 
 describe('DsfrTableHeaders', () => {
   it('should render simple header row', async () => {
     // Given
-    const onClick = jest.fn()
+    const onClick = spy()
     const headers = [
       'Nom',
       'Prenom',
diff --git a/src/components/DsfrTable/DsfrTableRow.spec.js b/src/components/DsfrTable/DsfrTableRow.spec.js
@@ -2,6 +2,8 @@ import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrTableRow from './DsfrTableRow.vue'
 
+import { spy } from '@/../tests/unit/test-utils.js'
+
 describe('DsfrTableRow', () => {
   it('should render simple row', () => {
     // Given
@@ -22,7 +24,7 @@ describe('DsfrTableRow', () => {
   it('should render row with a click', async () => {
     // Given
     const rowData = ['bla', 'ble', 'bli']
-    const onClick = jest.fn()
+    const onClick = spy()
 
     // When
     const { container } = render(DsfrTableRow, {
diff --git a/src/components/DsfrTabs/DsfrTabs.spec.js b/src/components/DsfrTabs/DsfrTabs.spec.js
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 
-import '@gouvfr/dsfr/dist/core/core.module.js'
+// import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrTabs from './DsfrTabs.vue'
 
diff --git a/src/components/DsfrTag/DsfrTag.spec.js b/src/components/DsfrTag/DsfrTag.spec.js
diff --git a/src/components/DsfrTile/DsfrTile.spec.js b/src/components/DsfrTile/DsfrTile.spec.js
diff --git a/src/components/DsfrTile/DsfrTile.vue b/src/components/DsfrTile/DsfrTile.vue
diff --git a/src/components/DsfrTile/DsfrTiles.spec.js b/src/components/DsfrTile/DsfrTiles.spec.js
diff --git a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.spec.js b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.spec.js
diff --git a/tests/unit/test-utils.js b/tests/unit/test-utils.js
diff --git a/tests/unit/vitest-setup.js b/tests/unit/vitest-setup.js
diff --git a/vitest.config.js b/vitest.config.js
