deps: remove deprecated packages HP-2436

City-of-Helsinki · May 23, 2024 · 4735110 · 4735110
1 parent 17d6d5d
commit 4735110
Show file tree

Hide file tree

Showing 13 changed files with 571 additions and 1,142 deletions.
diff --git a/package.json b/package.json
@@ -6,17 +6,15 @@
   "dependencies": {
     "@apollo/client": "^3.9.6",
     "@datapunt/matomo-tracker-react": "^0.5.1",
-    "@digitak/esrun": "^3.2.26",
     "@react-aria/visually-hidden": "^3.2.1",
     "@sentry/react": "^7.103.0",
     "@sinonjs/fake-timers": "^8.1.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/dompurify": "^2.2.2",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/file-saver": "^2.0.1",
     "@types/lodash": "^4.14.170",
     "@types/node": "^20.11.18",
@@ -35,9 +33,6 @@
     "date-fns": "^2.9.0",
     "dompurify": "^2.2.9",
     "dotenv": "^16.4.5",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.8",
-    "enzyme-to-json": "^3.5.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
@@ -46,6 +41,7 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-sonarjs": "^0.13.0",
     "eslint-plugin-vitest-globals": "^1.4.0",
+    "esrun": "^3.2.26",
     "file-saver": "^2.0.2",
     "formik": "^2.0.4",
     "graphql": "^15.8.0",
@@ -78,7 +74,7 @@
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.5.2",
+    "vitest": "^1.6.0",
     "vitest-fetch-mock": "^0.2.2",
     "yup": "^0.32.5"
   },
@@ -115,7 +111,7 @@
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/typescript": "^4.0.6",
     "@graphql-codegen/typescript-operations": "^4.2.0",
-    "@vitest/coverage-istanbul": "^1.3.1",
+    "@vitest/coverage-istanbul": "^1.6.0",
     "cross-env": "^7.0.3",
     "helsinki-utils": "City-of-Helsinki/helsinki-utils-js#0.1.0",
     "husky": "^9.0.11",

diff --git a/src/BrowserApp.test.tsx b/src/BrowserApp.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import { Mock } from 'vitest';
 
 import BrowserApp from './BrowserApp';
@@ -12,9 +12,28 @@ describe('BrowserApp', () => {
       push: pushTracker,
     };
   });
+
+  beforeEach(() => {
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+  });
+
   it('renders without crashing and commands tracker to wait for consent', () => {
-    shallow(<BrowserApp />);
+    render(<BrowserApp />);
+
     const calls = getMockCallArgs(pushTracker) as string[];
-    expect(calls).toEqual([['requireCookieConsent'], ['requireConsent']]);
+
+    expect(calls).toEqual([
+      ['requireCookieConsent'],
+      ['requireConsent'],
+      ['forgetCookieConsentGiven'],
+      ['forgetConsentGiven'],
+      ['setCustomUrl', 'http://localhost:3000/'],
+      ['setDocumentTitle', 'Profiili - Profiili'],
+      ['trackPageView'],
+    ]);
   });
 });
diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { MemoryRouter } from 'react-router';
+import { render } from '@testing-library/react';
 
 import App from '../App';
 
 it('renders without crashing', () => {
-  shallow(
+  render(
     <MemoryRouter>
       <App />
     </MemoryRouter>

diff --git a/src/auth/components/oidcCallback/__tests__/OidcCallback.test.tsx b/src/auth/components/oidcCallback/__tests__/OidcCallback.test.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import { BrowserRouter, RouteChildrenProps } from 'react-router-dom';
+import { act, render } from '@testing-library/react';
 
-import {
-  mountWithProvider,
-  updateWrapper,
-} from '../../../../common/test/testUtils';
 import authService from '../../../authService';
 import OidcCallback from '../OidcCallback';
 
@@ -14,8 +11,8 @@ const mockedDefaultProps = {
   },
 };
 
-const getWrapper = () =>
-  mountWithProvider(
+const renderComponent = () =>
+  render(
     <BrowserRouter>
       <OidcCallback
         {...((mockedDefaultProps as unknown) as RouteChildrenProps)}
@@ -45,9 +42,11 @@ describe('<OidcCallback />', () => {
       new Error('iat is in the future')
     );
 
-    const wrapper = getWrapper();
+    renderComponent();
 
-    await updateWrapper(wrapper);
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
 
     expect(
       getHistoryReplaceCallArgument().includes(
@@ -62,9 +61,12 @@ describe('<OidcCallback />', () => {
       new Error('The resource owner or authorization server denied the request')
     );
 
-    const wrapper = getWrapper();
+    // const wrapper = renderComponent();
+    renderComponent();
 
-    await updateWrapper(wrapper);
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
 
     expect(
       getHistoryReplaceCallArgument().includes(
@@ -77,19 +79,23 @@ describe('<OidcCallback />', () => {
     it('should call authService.endLogin', async () => {
       const authServiceEndLoginSpy = vi.spyOn(authService, 'endLogin');
 
-      const wrapper = getWrapper();
+      renderComponent();
 
-      await updateWrapper(wrapper);
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       expect(authServiceEndLoginSpy).toHaveBeenCalled();
     });
 
     it('should redirect user after successful login', async () => {
       vi.spyOn(authService, 'endLogin');
 
-      const wrapper = getWrapper();
+      renderComponent();
 
-      await updateWrapper(wrapper);
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       expect(mockedDefaultProps.history.replace).toHaveBeenCalledTimes(1);
     });

diff --git a/src/common/test/testUtils.tsx b/src/common/test/testUtils.tsx
diff --git a/...rofile/components/profileInformation/__tests__/AuthenticationProviderInformation.test.tsx b/...rofile/components/profileInformation/__tests__/AuthenticationProviderInformation.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import enzymeToJson from 'enzyme-to-json';
+import { render } from '@testing-library/react';
 
 import AuthenticationProviderInformation from '../AuthenticationProviderInformation';
 import { mockProfileCreator } from '../../../../common/test/userMocking';
@@ -20,7 +19,7 @@ describe('<AuthenticationProviderInformation /> ', () => {
   const defaultProps = {};
 
   const getWrapper = () =>
-    mount(<AuthenticationProviderInformation {...defaultProps} />);
+    render(<AuthenticationProviderInformation {...defaultProps} />);
 
   describe('renders correctly when AMR is helsinkiAccountAMR', () => {
     beforeAll(() => {
@@ -36,8 +35,8 @@ describe('<AuthenticationProviderInformation /> ', () => {
         () => 'helsinkiAccount' as useProfile.AMRStatic
       );
 
-      const wrapper = getWrapper();
-      expect(enzymeToJson(wrapper)).toMatchSnapshot();
+      const { container } = getWrapper();
+      expect(container).toMatchSnapshot();
     });
   });
   describe('renders correctly when AMR is tunnistusSuomifiAMR', () => {
@@ -46,8 +45,8 @@ describe('<AuthenticationProviderInformation /> ', () => {
         () => 'tunnistusSuomifi' as useProfile.AMRStatic
       );
 
-      const wrapper = getWrapper();
-      expect(enzymeToJson(wrapper)).toMatchSnapshot();
+      const { container } = getWrapper();
+      expect(container).toMatchSnapshot();
     });
   });
 });
diff --git a/...rofileInformation/__tests__/__snapshots__/AuthenticationProviderInformation.test.tsx.snap b/...rofileInformation/__tests__/__snapshots__/AuthenticationProviderInformation.test.tsx.snap
@@ -1,51 +1,47 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<AuthenticationProviderInformation />  > renders correctly when AMR is helsinkiAccountAMR > should render helsinki account information as expected based on config 1`] = `
-<AuthenticationProviderInformation>
-  <ProfileSection>
-    <section
-      className="content-box profile-section"
+<div>
+  <section
+    class="content-box profile-section"
+  >
+    <div
+      class="flex-box-columns"
     >
       <div
-        className="flex-box-columns"
+        class="editor-description-container"
       >
-        <div
-          className="editor-description-container"
-        >
-          <h2>
-            profileInformation.authenticationMethod
-          </h2>
-          <span>
-            identityProvider.helsinkiAccount
-          </span>
-        </div>
+        <h2>
+          profileInformation.authenticationMethod
+        </h2>
+        <span>
+          identityProvider.helsinkiAccount
+        </span>
       </div>
-    </section>
-  </ProfileSection>
-</AuthenticationProviderInformation>
+    </div>
+  </section>
+</div>
 `;
 
 exports[`<AuthenticationProviderInformation />  > renders correctly when AMR is tunnistusSuomifiAMR > should render suomi.fi information as expected based on config 1`] = `
-<AuthenticationProviderInformation>
-  <ProfileSection>
-    <section
-      className="content-box profile-section"
+<div>
+  <section
+    class="content-box profile-section"
+  >
+    <div
+      class="flex-box-columns"
     >
       <div
-        className="flex-box-columns"
+        class="editor-description-container"
       >
-        <div
-          className="editor-description-container"
-        >
-          <h2>
-            profileInformation.authenticationMethod
-          </h2>
-          <span>
-            identityProvider.tunnistusSuomifi
-          </span>
-        </div>
+        <h2>
+          profileInformation.authenticationMethod
+        </h2>
+        <span>
+          identityProvider.tunnistusSuomifi
+        </span>
       </div>
-    </section>
-  </ProfileSection>
-</AuthenticationProviderInformation>
+    </div>
+  </section>
+</div>
 `;