Browse Source

[fronten] add user-event library and update test example

Björn Alm 3 years ago
parent
commit
cc268646b0

+ 13 - 7
desktop/core/src/desktop/js/reactComponents/ReactExampleGlobal/ReactExampleGlobal.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import React from 'react';
@@ -10,26 +11,31 @@ describe('ReactExampleGlobal', () => {
 
   afterEach(() => consoleSpy.mockClear());
 
-  test('disables after click', () => {
+  test('disables after click', async () => {
+    // It is recommended to call userEvent.setup per test
+    const user = userEvent.setup();
     render(<ReactExampleGlobal />);
     const btn = screen.getByRole('button', { name: 'ReactExampleGlobal - Like me' });
     expect(btn).not.toBeDisabled();
-    fireEvent.click(btn);
+
+    await user.click(btn);
     expect(btn).toBeDisabled();
   });
 
-  test('provides click callback', () => {
+  test('provides click callback', async () => {
+    const user = userEvent.setup();
     const clickCallback = jest.fn();
     render(<ReactExampleGlobal onClick={clickCallback} />);
     const btn = screen.getByRole('button', { name: 'ReactExampleGlobal - Like me' });
-    fireEvent.click(btn);
+    await user.click(btn);
     expect(clickCallback).toHaveBeenCalled();
   });
 
-  test('prints to console.info on click', () => {
+  test('prints to console.info on click', async () => {
+    const user = userEvent.setup();
     render(<ReactExampleGlobal version="1" myObj={{ id: 'a' }} />);
     const btn = screen.getByRole('button', { name: 'ReactExampleGlobal - Like me' });
-    fireEvent.click(btn);
+    await user.click(btn);
     expect(consoleSpy).toHaveBeenCalledWith('ReactExampleGlobal clicked  1 a');
   });
 });

+ 21 - 0
package-lock.json

@@ -66,6 +66,7 @@
         "@babel/preset-typescript": "7.13.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/file-saver": "^2.0.1",
         "@types/jest": "27.0.2",
         "@types/jquery": "3.5.0",
@@ -3160,6 +3161,19 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.4.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
+      "integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -19981,6 +19995,13 @@
         "@types/react-dom": "^18.0.0"
       }
     },
+    "@testing-library/user-event": {
+      "version": "14.4.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
+      "integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==",
+      "dev": true,
+      "requires": {}
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",

+ 2 - 1
package.json

@@ -87,6 +87,7 @@
     "@babel/preset-typescript": "7.13.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/file-saver": "^2.0.1",
     "@types/jest": "27.0.2",
     "@types/jquery": "3.5.0",
@@ -130,9 +131,9 @@
     "postcss-less": "6.0.0",
     "postcss-scss": "4.0.3",
     "prettier": "2.3.0",
-    "snarkdown": "2.0.0",
     "sass": "1.34.0",
     "sass-loader": "11.1.1",
+    "snarkdown": "2.0.0",
     "source-map-loader": "3.0.0",
     "style-loader": "2.0.0",
     "stylelint": "14.3.0",