Skip to content

Commit

Permalink
Oppgrader til react 18
Browse files Browse the repository at this point in the history
Oppgrader fra react 17 til 18, som medfølger:
- Bytte fra enzyme til react-testing-library, og påfølgende endringer i
  API for test rendering.
- Oppdatering av snapshots for endringer i react og styled-components
  rendering.
  • Loading branch information
LudvigHz committed Jun 24, 2024
1 parent 661c9b1 commit 8226ef6
Show file tree
Hide file tree
Showing 52 changed files with 908 additions and 1,528 deletions.
1,752 changes: 496 additions & 1,256 deletions package-lock.json

Large diffs are not rendered by default.

46 changes: 28 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@
},
"dependencies": {
"@amplitude/analytics-browser": "^2.5.3",
"@navikt/aksel-icons": "^6.10.1",
"@navikt/ds-css": "^6.10.1",
"@grafana/faro-react": "^1.7.3",
"@grafana/faro-web-sdk": "^1.7.3",
"@grafana/faro-web-tracing": "^1.7.3",
"@navikt/aksel-icons": "^6.11.0",
"@navikt/ds-css": "^6.11.0",
"@navikt/fnrvalidator": "^1.1.3",
"@navikt/navspa": "^4.0.0",
"@navikt/navspa": "^6.1.0",
"@navikt/tag-input": "^2.0.1",
"@navikt/textparser": "^2.3.0",
"@navikt/textparser": "^2.4.0",
"@tanstack/react-query": "^4.12.0",
"@vitejs/plugin-react": "^4.2.1",
"classnames": "^2.2.6",
Expand Down Expand Up @@ -100,10 +100,11 @@
"nav-frontend-tekstomrade": "^2.1.1",
"nav-frontend-typografi": "^3.1.1",
"nav-frontend-typografi-style": "^1.0.22",
"react": "^18.3.1",
"react-day-picker": "^7.3.2",
"react-dom": "^17.0.2",
"react-dom": "^18.3.1",
"react-hook-form": "^7.39.0",
"react-modal": "^3.11.2",
"react-modal": "^3.16.1",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
Expand All @@ -115,28 +116,27 @@
},
"devDependencies": {
"@eslint/js": "^9.3.0",
"@testing-library/react-hooks": "^2.0.1",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/classnames": "^2.2.10",
"@types/detect-browser": "^2.0.1",
"@types/enzyme": "^3.9.3",
"@types/eslint__js": "^8.42.3",
"@types/faker": "^4.1.2",
"@types/lodash.debounce": "^4.0.6",
"@types/md5": "^2.1.33",
"@types/node": "^18.0.0",
"@types/prop-types": "^15.5.3",
"@types/react": "^16.9.41",
"@types/prop-types": "^15.7.12",
"@types/react": "^18.3.3",
"@types/react-collapse": "^5.0.0",
"@types/react-dom": "^16.9.8",
"@types/react-modal": "^3.10.6",
"@types/react-dom": "^18.3.0",
"@types/react-modal": "^3.16.3",
"@types/react-redux": "^7.1.9",
"@types/react-router": "5.1.2",
"@types/react-router-dom": "^5.1.0",
"@types/react-test-renderer": "^16.8.2",
"@types/react-test-renderer": "^18.3.0",
"@types/styled-components": "5.1.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
"cross-env": "^7.0.3",
"enzyme": "^3.10.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
Expand All @@ -149,16 +149,26 @@
"nav-faker": "^3.2.3",
"prettier": "^3.2.5",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-collapse": "^5.0.1",
"react-test-renderer": "^16.8.6",
"react-collapse": "^5.1.1",
"react-test-renderer": "^18.3.1",
"redux-devtools-extension": "^2.13.8",
"typescript": "^5.4.5",
"typescript-eslint": "^7.11.0",
"vite-require": "^0.2.3",
"vitest": "^1.5.2",
"yet-another-fetch-mock": "^4.0.0"
},
"overrides": {
"nav-frontend-js-utils": {
"react": "$react"
},
"@navikt/tag-input": {
"react": "$react"
},
"connected-react-router": {
"react": "$react"
}
},
"browserslist": {
"production": [
">0.2%",
Expand Down
6 changes: 3 additions & 3 deletions src/app/App.test.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import AppContainer from './AppContainer';

it('renders without crashing', () => {
const div = document.createElement('div');
div.id = 'root';
document.body.appendChild(div);

ReactDOM.render(<AppContainer />, div);
const root = createRoot(div)
root.render(<AppContainer />);
});
6 changes: 3 additions & 3 deletions src/app/brukerprofil/BrukeprofilSide.test.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';

import BrukerprofilSide from './BrukerprofilSide';
import TestProvider from '../../test/Testprovider';

test('Smoketeste brukerprofil', () => {
const brukerprofil = mount(
const { container } = render(
<TestProvider>
<BrukerprofilSide />
</TestProvider>
);

expect(brukerprofil).toMatchSnapshot();
expect(container).toMatchSnapshot();
});
84 changes: 83 additions & 1 deletion src/app/brukerprofil/__snapshots__/BrukeprofilSide.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,3 +1,85 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Smoketeste brukerprofil 1`] = `ReactWrapper {}`;
exports[`Smoketeste brukerprofil 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.c0 > *:first-child {
margin-bottom: 1rem;
}
<div>
<div
class="c0"
>
<div
class="alertstripe alertstripe--info"
>
<span
class="alertstripe__ikon"
>
<span
class="sr-only"
>
info
</span>
<svg
aria-label="info-ikon"
focusable="false"
height="1.5em"
kind="info-sirkel-fyll"
role="img"
viewBox="0 0 24 24"
width="1.5em"
>
<g
fill="none"
>
<path
d="M12 0C5.382 0 0 5.382 0 12s5.382 12 12 12c6.617 0 12-5.382 12-12S18.617 0 12 0z"
fill="#337C9B"
/>
<path
d="M12 5a1.566 1.566 0 1 1 .11 3.13A1.566 1.566 0 0 1 12 5zm2.976 12.01c.563 0 1.043.431 1.043.991s-.48.992-1.043.992H9.39c-.564 0-1.043-.431-1.043-.992 0-.56.479-.99 1.043-.99h1.6v-5.016h-.986c-.565 0-1.044-.43-1.044-.991 0-.56.48-.991 1.044-.991h2.03c.563 0 1.043.43 1.043.99v6.007h1.899z"
fill="#FFF"
/>
</g>
</svg>
</span>
<div
class="typo-normal alertstripe__tekst"
>
Redigering av brukerprofil er flyttet
</div>
</div>
<a
class="lenkepanel"
href=""
>
Gå til den nye personforvalteren
<span
class="lenkepanel__indikator"
/>
</a>
</div>
</div>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,6 @@ exports[`viser dialogpanel 1`] = `
>
Melding
</label>
<div
className="textarea--medMeta__wrapper"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,59 @@ exports[`viser fortsett dialog 1`] = `
justify-content: center;
}
.c1 {
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-animation: edHiKw 0.3s ease-out;
animation: edHiKw 0.3s ease-out;
}
<div
className="c0"
/>
>
<span
className="c1"
>
<svg
aria-label="Laster innhold"
className="spinner spinner--l"
focusable="false"
height={32}
kind="spinner-negativ"
preserveAspectRatio="xMidYMid"
viewBox="0 0 50 50"
width={32}
>
<title>
Venter...
</title>
<circle
cx="25"
cy="25"
fill="none"
r="20"
stroke="#eee"
strokeWidth="5"
xmlns="http://www.w3.org/2000/svg"
/>
<circle
cx="25"
cy="25"
fill="none"
r="20"
stroke="#888"
strokeDasharray="50 155"
strokeLinecap="round"
strokeWidth="5"
/>
</svg>
</span>
</div>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,6 @@ exports[`viser send ny melding 1`] = `
>
Melding
</label>
<div
className="textarea--medMeta__wrapper"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { mount, ReactWrapper } from 'enzyme';
import { render, within } from '@testing-library/react';
import userEvent, { UserEvent } from '@testing-library/user-event';
import TestProvider from '../../../../test/Testprovider';
import InfoTabs from '../InfoTabs';
import { BrowserRouter } from 'react-router-dom';
Expand All @@ -10,43 +11,38 @@ import { aremark } from '../../../../mock/persondata/aremark';
import { getMockTraader } from '../../../../mock/meldinger/meldinger-mock';
import dialogResource from '../../../../rest/resources/dialogResource';

test('bytter til riktig tab og setter fokus på riktig melding ved bruk av dyplenke fra oversikt', () => {
test('bytter til riktig tab og setter fokus på riktig melding ved bruk av dyplenke fra oversikt', async () => {
setupReactQueryMocks();
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
(dialogResource.useFetch as jest.Mock<any>).mockImplementation(() => ({
data: getMockTraader(aremark.personIdent)
}));
const store = getTestStore();
const infoTabs = mount(
const { container: infoTabs } = render(
<TestProvider customStore={store}>
<BrowserRouter>
<InfoTabs />
</BrowserRouter>
</TestProvider>
);

// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
expect(getAktivTab(infoTabs).toLowerCase()).toContain(INFOTABS.OVERSIKT.path);
expect(getAktivTab(infoTabs)).toHaveTextContent(new RegExp(INFOTABS.OVERSIKT.path, 'i'));
const user = userEvent.setup();

// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
clickOnMeldingerIOversikt(infoTabs);
await clickOnMeldingerIOversikt(infoTabs, user);

// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
expect(getAktivTab(infoTabs)).toContain(INFOTABS.MELDINGER.tittel);
expect(getAktivTab(infoTabs)).toHaveTextContent(new RegExp(INFOTABS.MELDINGER.tittel, 'i'));

const checkedMelding = infoTabs.find('input[checked=true].' + meldingerTest.melding).html();
const expectedElement = infoTabs
.find('input[type="radio"].' + meldingerTest.melding)
.at(1)
.html();
const checkedMelding = within(infoTabs).getByRole('radio', { checked: true });

const expectedElement = within(infoTabs).getAllByRole('radio')[1];

expect(checkedMelding).toEqual(expectedElement);
});

function clickOnMeldingerIOversikt(infoTabs: ReactWrapper) {
infoTabs
.find('.' + meldingerTest.oversikt)
.find('button')
.at(1)
.simulate('click');
async function clickOnMeldingerIOversikt(infoTabs: HTMLElement, user: UserEvent) {
const tab = infoTabs.querySelectorAll('.' + meldingerTest.oversikt)[1] as HTMLElement;
const button = within(tab).getByRole('button');

await user.click(button);
}
Loading

0 comments on commit 8226ef6

Please sign in to comment.