➕(frontend) add testing-library packages

- add testing-library packages to all our apps and packages - upgrade - adapt the modules with the new restrictions
openfun · Jun 8, 2023 · 230bfc6 · 230bfc6
1 parent efe2962
commit 230bfc6
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 82 deletions.
diff --git a/src/frontend/apps/lti_site/package.json b/src/frontend/apps/lti_site/package.json
@@ -32,10 +32,10 @@
  "@babel/preset-react": "7.22.3",
  "@babel/preset-typescript": "7.21.5",
  "@formatjs/cli": "6.1.1",
- "@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/clipboard": "2.0.1",
  "@types/faker": "5.5.9",
  "@types/fetch-mock": "7.3.5",

diff --git a/src/frontend/apps/standalone_site/package.json b/src/frontend/apps/standalone_site/package.json
@@ -4,6 +4,10 @@
  "license": "MIT",
  "private": true,
  "devDependencies": {
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/fetch-mock": "7.3.5",
  "@types/jest": "29.5.2",
  "@types/node": "18.16.16",

diff --git a/src/frontend/apps/standalone_site/src/components/Assets/LoadSVG.spec.tsx b/src/frontend/apps/standalone_site/src/components/Assets/LoadSVG.spec.tsx
@@ -23,7 +23,7 @@ describe('<LoadSVG />', () => {
  />,
  );
 
- const mySvg = screen.getByRole(/img/i, { name: /svg-menu-favorites/i });
+ const mySvg = screen.getByRole('img', { name: /svg-menu-favorites/i });
 
  expect(mySvg).toBeInTheDocument();
  expect(mySvg).toHaveAttribute('width', '30');
@@ -43,7 +43,7 @@ describe('<LoadSVG />', () => {
  />,
  );
 
- const mySvg = screen.getByRole(/img/i, { name: /svg-menu-favorites/i });
+ const mySvg = screen.getByRole('img', { name: /svg-menu-favorites/i });
  expect(mySvg).toHaveAttribute('width', '40');
  expect(mySvg).toHaveAttribute('height', '40');
  });

diff --git a/src/frontend/apps/standalone_site/src/features/App/App.spec.tsx b/src/frontend/apps/standalone_site/src/features/App/App.spec.tsx
@@ -78,7 +78,7 @@ describe('<App />', () => {
 
  expect(await screen.findByText(/John Doe/i)).toBeInTheDocument();
  expect(
- screen.getByRole(/menuitem/i, { name: /My playlists/i }),
+ screen.getByRole('menuitem', { name: /My playlists/i }),
  ).toBeInTheDocument();
  expect(consoleWarn).toHaveBeenCalled();
  expect(
@@ -111,7 +111,7 @@ describe('<App />', () => {
 
  expect(await screen.findByText(/John Doe/i)).toBeInTheDocument();
  expect(
- screen.getByRole(/menuitem/i, { name: /Mon Tableau de bord/i }),
+ screen.getByRole('menuitem', { name: /Mon Tableau de bord/i }),
  ).toBeInTheDocument();
  expect(
  await screen.findByText(/some welcome classroom/i),

diff --git a/src/frontend/apps/standalone_site/src/features/App/AppRoutes.spec.tsx b/src/frontend/apps/standalone_site/src/features/App/AppRoutes.spec.tsx
@@ -127,7 +127,7 @@ describe('<AppRoutes />', () => {
  });
  expect(await screen.findByText('My HeaderLight')).toBeInTheDocument();
  expect(
- screen.queryByRole(/menuitem/i, { name: /Dashboard/i }),
+ screen.queryByRole('menuitem', { name: /Dashboard/i }),
  ).not.toBeInTheDocument();
  expect(screen.getByText('My ContentsRouter Page')).toBeInTheDocument();
  expect(screen.getByText('My Footer')).toBeInTheDocument();
@@ -142,7 +142,7 @@ describe('<AppRoutes />', () => {
  expect(await screen.findByText('My HeaderLightLink')).toBeInTheDocument();
  expect(await screen.findByText('My PagesApi')).toBeInTheDocument();
  expect(
- screen.queryByRole(/menuitem/i, { name: /Dashboard/i }),
+ screen.queryByRole('menuitem', { name: /Dashboard/i }),
  ).not.toBeInTheDocument();
  expect(screen.getByText('My Footer')).toBeInTheDocument();
  });
@@ -152,7 +152,7 @@ describe('<AppRoutes />', () => {
  test('renders AppRoutes', async () => {
  render(<AppRoutes />);
  expect(
- await screen.findByRole(/menuitem/i, { name: /Dashboard/i }),
+ await screen.findByRole('menuitem', { name: /Dashboard/i }),
  ).toBeInTheDocument();
  expect(screen.getByText(/My Header/i)).toBeInTheDocument();
  expect(await screen.findByText(/My HomePage/i)).toBeInTheDocument();
@@ -164,11 +164,11 @@ describe('<AppRoutes />', () => {
 
  expect(await screen.findByText(/My HomePage/i)).toBeInTheDocument();
 
- userEvent.click(screen.getByRole(/menuitem/i, { name: /My playlists/i }));
+ userEvent.click(screen.getByRole('menuitem', { name: /My playlists/i }));
 
  expect(await screen.findByText(/My Playlist Page/i)).toBeInTheDocument();
 
- userEvent.click(screen.getByRole(/menuitem/i, { name: /My Contents/i }));
+ userEvent.click(screen.getByRole('menuitem', { name: /My Contents/i }));
 
  await waitFor(() => {
  expect(screen.getByText(/My ContentsRouter Page/i)).toBeInTheDocument();
@@ -185,7 +185,7 @@ describe('<AppRoutes />', () => {
  });
  expect(await screen.findByText('My PagesApi')).toBeInTheDocument();
  expect(
- screen.getByRole(/menuitem/i, { name: /Dashboard/i }),
+ screen.getByRole('menuitem', { name: /Dashboard/i }),
  ).toBeInTheDocument();
  expect(screen.getByText('My Footer')).toBeInTheDocument();
  });

diff --git a/src/frontend/apps/standalone_site/src/features/Header/Header.spec.tsx b/src/frontend/apps/standalone_site/src/features/Header/Header.spec.tsx
@@ -19,14 +19,14 @@ describe('<Header />', () => {
  }),
  });
  render(<Header />);
- expect(screen.getByRole(/menubar/i)).toBeInTheDocument();
+ expect(screen.getByRole('menubar')).toBeInTheDocument();
  expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
  });
 
  test('scroll and update background', () => {
  render(<Header />);
 
- const menuBar = screen.getByRole(/menubar/i);
+ const menuBar = screen.getByRole('menubar');
  expect(menuBar).toBeInTheDocument();
  expect(menuBar).toHaveStyle('background: transparent');
  fireEvent.scroll(window, { target: { scrollY: 100 } });

diff --git a/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.spec.tsx b/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.spec.tsx
@@ -11,7 +11,7 @@ jest.mock('assets/svg/logo_marsha.svg', () => ({
 describe('<HeaderLight />', () => {
  test('renders HeaderLight', () => {
  render(<HeaderLight />);
- expect(screen.getByRole(/menubar/i)).toBeInTheDocument();
+ expect(screen.getByRole('menubar')).toBeInTheDocument();
  expect(screen.getByText(/My LogoIcon/i)).toBeInTheDocument();
  expect(
  screen.queryByRole('link', {
@@ -22,7 +22,7 @@ describe('<HeaderLight />', () => {
 
  test('renders HeaderLightLink', () => {
  render(<HeaderLightLink />);
- expect(screen.getByRole(/menubar/i)).toBeInTheDocument();
+ expect(screen.getByRole('menubar')).toBeInTheDocument();
  expect(
  screen.getByRole('link', {
  name: /My LogoIcon/i,

diff --git a/src/frontend/apps/standalone_site/src/features/Menu/components/Burger/Burger.spec.tsx b/src/frontend/apps/standalone_site/src/features/Menu/components/Burger/Burger.spec.tsx
@@ -6,13 +6,13 @@ import Burger from './Burger';
 describe('<Burger />', () => {
  test('renders Burger', () => {
  render(<Burger />);
- expect(screen.getByRole(/button/i)).toBeInTheDocument();
+ expect(screen.getByRole('button')).toBeInTheDocument();
  });
 
  test('Burger interaction', () => {
  render(<Burger />);
 
- const burger = screen.getByRole(/button/i);
+ const burger = screen.getByRole('button');
  expect(burger).toBeInTheDocument();
  expect(burger.classList.contains('open')).toBeTruthy();
  fireEvent.click(burger);

diff --git a/src/frontend/apps/standalone_site/src/features/Menu/components/Menu.spec.tsx b/src/frontend/apps/standalone_site/src/features/Menu/components/Menu.spec.tsx
@@ -24,13 +24,13 @@ describe('<Menu />', () => {
 
  render(<Menu />, { testingLibraryOptions: { wrapper: BrowserRouter } });
  expect(
- screen.getByRole(/menuitem/i, { name: /My playlists/i }),
+ screen.getByRole('menuitem', { name: /My playlists/i }),
  ).toBeInTheDocument();
  expect(
- screen.getByRole(/menuitem/i, { name: /My Contents/i }),
+ screen.getByRole('menuitem', { name: /My Contents/i }),
  ).toBeInTheDocument();
  expect(
- screen.getByRole(/menuitem/i, { name: /Classrooms/i }),
+ screen.getByRole('menuitem', { name: /Classrooms/i }),
  ).toBeInTheDocument();
  });
 
@@ -45,7 +45,7 @@ describe('<Menu />', () => {
 
  const menu = screen.getByRole('menu');
  expect(menu).not.toHaveStyle('margin-left: -18.75rem;');
- fireEvent.click(screen.getByRole(/button/i));
+ fireEvent.click(screen.getByRole('button'));
  expect(menu).toHaveStyle('margin-left: -18.75rem;');
  });
 

diff --git a/src/frontend/apps/standalone_site/src/features/Menu/components/MenuItem.spec.tsx b/src/frontend/apps/standalone_site/src/features/Menu/components/MenuItem.spec.tsx
@@ -16,11 +16,11 @@ describe('<MenuItem />', () => {
  testingLibraryOptions: { wrapper: BrowserRouter },
  });
  expect(
- screen.getByRole(/img/i, { name: /svg-menu-homepage/i }),
+ screen.getByRole('img', { name: /svg-menu-homepage/i }),
  ).toBeInTheDocument();
  expect(screen.getByText(/My Content/i)).toBeInTheDocument();
  expect(
- screen.getByRole(/menuitem/i, { name: /Dashboard/i }),
+ screen.getByRole('menuitem', { name: /Dashboard/i }),
  ).toBeInTheDocument();
  });
 
@@ -34,11 +34,11 @@ describe('<MenuItem />', () => {
  </Router>,
  );
 
- expect(screen.getByRole(/menuitem/i, { name: /Dashboard/i })).toHaveStyle({
+ expect(screen.getByRole('menuitem', { name: /Dashboard/i })).toHaveStyle({
  backgroundColor: normalizeColor('bg-menu-hover', theme),
  });
  expect(
- screen.getByRole(/menuitem/i, { name: /Favorites/i }),
+ screen.getByRole('menuitem', { name: /Favorites/i }),
  ).not.toHaveStyle({
  backgroundColor: normalizeColor('bg-menu-hover', theme),
  });
@@ -52,11 +52,11 @@ describe('<MenuItem />', () => {
  );
 
  expect(
- screen.getByRole(/menuitem/i, { name: /Dashboard/i }),
+ screen.getByRole('menuitem', { name: /Dashboard/i }),
  ).not.toHaveStyle({
  backgroundColor: normalizeColor('bg-menu-hover', theme),
  });
- expect(screen.getByRole(/menuitem/i, { name: /Favorites/i })).toHaveStyle({
+ expect(screen.getByRole('menuitem', { name: /Favorites/i })).toHaveStyle({
  backgroundColor: normalizeColor('bg-menu-hover', theme),
  });
  });

diff --git a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.spec.tsx b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.spec.tsx
@@ -22,9 +22,7 @@ describe('<PagesApi />', () => {
 
  render(<PagesApi />);
 
- expect(
- screen.getByRole(/alert/i, { name: /spinner/i }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument();
 
  deferred.resolve({
  status: 200,

diff --git a/src/frontend/apps/standalone_site/testSetup.js b/src/frontend/apps/standalone_site/testSetup.js
@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom';
+
 global.use_jwt_persistence = true;
 const { useJwt } = require('lib-components');
 

diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -40,6 +40,10 @@
  "@codemirror/language-data": "6.3.1",
  "@codemirror/state": "6.2.1",
  "@codemirror/view": "6.13.0",
+ "@testing-library/jest-dom": "5.16.5",
+ "@testing-library/react": "14.0.0",
+ "@testing-library/react-hooks": "8.0.1",
+ "@testing-library/user-event": "14.4.3",
  "@types/mdast": "3.0.11",
  "@types/react": "18.2.8",
  "@types/react-dom": "18.2.4",

diff --git a/src/frontend/packages/lib_classroom/package.json b/src/frontend/packages/lib_classroom/package.json
@@ -33,10 +33,10 @@
  "@babel/preset-env": "7.22.4",
  "@babel/preset-typescript": "7.21.5",
  "@formatjs/cli": "6.1.1",
- "@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/clipboard": "2.0.1",
  "@types/faker": "5.5.9",
  "@types/jest": "29.5.2",

diff --git a/src/frontend/packages/lib_components/package.json b/src/frontend/packages/lib_components/package.json
@@ -32,10 +32,10 @@
  "@babel/preset-env": "7.22.4",
  "@babel/preset-typescript": "7.21.5",
  "@formatjs/cli": "6.1.1",
- "@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/clipboard": "2.0.1",
  "@types/faker": "5.5.9",
  "@types/iframe-resizer": "3.5.9",

diff --git a/src/frontend/packages/lib_markdown/package.json b/src/frontend/packages/lib_markdown/package.json
@@ -33,10 +33,10 @@
  "@babel/preset-env": "7.22.4",
  "@babel/preset-typescript": "7.21.5",
  "@formatjs/cli": "6.1.1",
- "@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/clipboard": "2.0.1",
  "@types/dompurify": "3.0.2",
  "@types/faker": "5.5.9",

diff --git a/src/frontend/packages/lib_tests/package.json b/src/frontend/packages/lib_tests/package.json
@@ -28,10 +28,10 @@
  "@babel/preset-env": "7.22.4",
  "@babel/preset-typescript": "7.21.5",
  "@formatjs/cli": "6.1.1",
- "@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/clipboard": "2.0.1",
  "@types/faker": "5.5.9",
  "@types/jest": "29.5.2",

diff --git a/src/frontend/packages/lib_video/package.json b/src/frontend/packages/lib_video/package.json
@@ -36,10 +36,10 @@
  "@babel/preset-typescript": "7.21.5",
  "@formatjs/cli": "6.1.1",
  "@formatjs/intl": "2.7.2",
- "@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
+ "@testing-library/jest-dom": "*",
+ "@testing-library/react": "*",
+ "@testing-library/react-hooks": "*",
+ "@testing-library/user-event": "*",
  "@types/clipboard": "2.0.1",
  "@types/faker": "5.5.9",
  "@types/iframe-resizer": "3.5.9",