TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 07:53:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: add table driven unit tests

Browse Source
This commit is contained in:
Elio Bischof
2023-06-05 17:46:17 +02:00
parent 4ca1d60f0f
commit d312c86ac0
8 changed files with 62 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
apps/login/app/(login)/verify/page.test.tsx
View File

@@ -1,110 +0,0 @@
import RootLayout from '#/app/layout';
import Page from './page'
import { RenderResult, render, screen, waitFor, renderHook } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
describe('/login/verify', () => {
const noUserIDError = "No userId provided!"
const noCodeError = "No code provided!"
const codeLabelText = "Code"
describe.each`
userId | code | directSubmit | expectRenderedUserIDError | expectRenderedCodePrefilled | expectRenderedCodeError
| ${"123"} | ${"xyz"} | ${true} | ${false} | ${"" /*TODO: We should expect "xyz"*/} | ${false}
| ${"123"} | ${""} | ${true} | ${false} | ${""} | ${true}
| ${"123"} | ${undefined} | ${true} | ${false} | ${""} | ${true}
| ${"123"} | ${"xyz"} | ${false} | ${false} | ${"xyz"} | ${false}
| ${"123"} | ${""} | ${false} | ${false} | ${""} | ${false}
| ${"123"} | ${undefined} | ${false} | ${false} | ${""} | ${false}
| ${""} | ${"xyz"} | ${true} | ${true} | ${false} | ${false}
| ${""} | ${""} | ${true} | ${true} | ${false} | ${false}
| ${""} | ${undefined} | ${true} | ${true} | ${false} | ${false}
| ${""} | ${"xyz"} | ${false} | ${true} | ${false} | ${false}
| ${""} | ${""} | ${false} | ${true} | ${false} | ${false}
| ${""} | ${undefined} | ${false} | ${true} | ${false} | ${false}
| ${undefined} | ${"xyz"} | ${true} | ${true} | ${false} | ${false}
| ${undefined} | ${""} | ${true} | ${true} | ${false} | ${false}
| ${undefined} | ${undefined} | ${true} | ${true} | ${false} | ${false}
| ${undefined} | ${"xyz"} | ${false} | ${true} | ${false} | ${false}
| ${undefined} | ${""} | ${false} | ${true} | ${false} | ${false}
| ${undefined} | ${undefined} | ${false} | ${true} | ${false} | ${false}
`(`With code=$code, submit=$submit and userId=$userId`, ({ userId, code, directSubmit, expectRenderedUserIDError, expectRenderedCodePrefilled, expectRenderedCodeError }) => {
let renderResult: RenderResult;
beforeEach(async () => {
await act(async () => {
renderResult = render(await RootLayout({
children: await Page({
searchParams: {
code: code,
submit: directSubmit,
userID: userId,
}
})
}))
// TODO: Replace the above syntax for awaiting the JSX.Element once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135 is released
// renderResult = render(<Page searchParams={{
// code: code,
// submit: submit,
// userID: userId,
// }} />)
})
})
it(`should have rendered`, () => {
expect(renderResult.container.firstChild).toBeDefined();
})
describe(`With expectRenderedUserIDError=${expectRenderedUserIDError}`, () => {
if (expectRenderedUserIDError) {
it(`should show the error "${noUserIDError}"`, () => {
const error = screen.getByText(noUserIDError)
expect(error).toBeInTheDocument()
expect(error).toBeVisible()
})
} else {
it(`should not show the error "${noUserIDError}`, () => {
const error = screen.queryByText(noUserIDError)
expect(error).not.toBeInTheDocument()
})
}
})
describe(`With expectRenderedCodePrefilled=${expectRenderedCodePrefilled}`, () => {
if (typeof expectRenderedCodePrefilled == 'string') {
it(`should show the ${codeLabelText} input with the value "${expectRenderedCodePrefilled}" prefilled`, async () => {
await waitFor(() => {
const codeInput = screen.getByLabelText(codeLabelText)
expect(codeInput).toHaveTextContent(expectRenderedCodePrefilled)
})
})
} else {
it(`should not show the ${codeLabelText} input`, () => {
const codeInput = screen.queryByText(codeLabelText)
expect(codeInput).not.toBeInTheDocument()
})
}
})
describe(`With expectRenderedCodeError=${expectRenderedCodeError}`, () => {
if (expectRenderedCodeError) {
it(`should show the error "${noCodeError}"`, () => {
const error = screen.getByText(noCodeError)
expect(error).toBeInTheDocument()
expect(error).toBeVisible()
})
} else {
it(`should not show the error "${expectRenderedCodeError}`, () => {
const error = screen.queryByText(noCodeError)
expect(error).not.toBeInTheDocument()
})
}
})
if (!directSubmit) {
describe(`With click on submit`, () => {
})
}
})
});

30
apps/login/jest-setup.ts
View File

@@ -1,30 +0,0 @@
// Polyfill "window.fetch" used in the React component.
import 'whatwg-fetch'
import * as mockRouter from 'next-router-mock';
import { mockLoginBackend } from './mock-login-backend'
// Inspired by https://github.com/scottrippey/next-router-mock/issues/67#issuecomment-1564906960
const useRouter = mockRouter.useRouter;
const MockNextNavigation = {
...mockRouter,
usePathname: () => {
const router = useRouter();
return router.pathname;
},
useSearchParams: () => {
const router = useRouter();
const path = router.asPath.split('?')?.[1] ?? '';
return new URLSearchParams(path);
},
};
// jest.mock('next/navigation', () => MockNextNavigation);
// jest.mock('next/router', () => mockRouter)
beforeAll(() => {
mockLoginBackend.listen()
})
beforeEach(() => mockLoginBackend.resetHandlers())
afterAll(() => mockLoginBackend.close())

2
apps/login/jest.config.ts
View File

@@ -8,12 +8,10 @@ export default async (): Promise<Config.InitialOptions> => {
},
setupFilesAfterEnv: [
'@testing-library/jest-dom/extend-expect',
'<rootDir>/jest-setup.ts',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
},
testEnvironment: 'jsdom',
clearMocks: true,
};
};

2
apps/login/package.json
View File

@@ -60,7 +60,7 @@
"@types/jest": "^29.5.1",
"@types/ms": "0.7.31",
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react": "18.2.8",
"@types/react-dom": "18.0.9",
"@types/testing-library__jest-dom": "^5.14.6",
"@types/tinycolor2": "1.4.3",

43
apps/login/ui/PasswordComplexity.test.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { render, screen, waitFor, within } from '@testing-library/react';
import PasswordComplexity from './PasswordComplexity';
// TODO: Why does this not compile?
// import { ResourceOwnerType } from '@zitadel/server';
const matchesTitle = `Matches`
const doesntMatchTitle = `Doesn't match`
describe('<PasswordComplexity/>', () => {
describe.each`
settingsMinLength | password | expectSVGTitle
${5} | ${'Password1!'} | ${matchesTitle}
${30} | ${'Password1!'} | ${doesntMatchTitle}
${0} | ${'Password1!'} | ${matchesTitle}
${undefined} | ${'Password1!'} | ${false}
`(`With settingsMinLength=$settingsMinLength, password=$password, expectSVGTitle=$expectSVGTitle`, ({ settingsMinLength, password, expectSVGTitle }) => {
const feedbackElementLabel = /password length/i
beforeEach(() => {
render(<PasswordComplexity password={password} equals passwordComplexitySettings={{
minLength: settingsMinLength,
requiresLowercase: false,
requiresUppercase: false,
requiresNumber: false,
requiresSymbol: false,
resourceOwnerType: 0 // ResourceOwnerType.RESOURCE_OWNER_TYPE_UNSPECIFIED,
}} />)
})
if (expectSVGTitle === false) {
it(`should not render the feedback element`, async () => {
await waitFor(() => {
expect(screen.queryByText(feedbackElementLabel)).not.toBeInTheDocument()
})
})
} else {
it(`Should show one SVG with title ${expectSVGTitle}`, async () => {
await waitFor(async () => {
const svg = within(screen.getByText(feedbackElementLabel).parentElement as HTMLElement).findByRole('img')
expect(await svg).toHaveTextContent(expectSVGTitle)
})
})
}
})
});

18
apps/login/ui/PasswordComplexity.tsx
View File

@@ -20,7 +20,9 @@ const check = (
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 las la-check text-green-500 dark:text-green-500 mr-2 text-lg"
role="img"
>
<title>Matches</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -36,7 +38,9 @@ const cross = (
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
role="img"
>
<title>Doesn't match</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -60,12 +64,14 @@ export default function PasswordComplexity({
return (
<div className="mb-4 grid grid-cols-2 gap-x-8 gap-y-2">
<div className="flex flex-row items-center">
{hasMinLength ? check : cross}
<span className={desc}>
Password length {passwordComplexitySettings.minLength}
</span>
</div>
{passwordComplexitySettings.minLength != undefined ? (
<div className="flex flex-row items-center">
{hasMinLength ? check : cross}
<span className={desc}>
Password length {passwordComplexitySettings.minLength}
</span>
</div>
) : <span />}
<div className="flex flex-row items-center">
{hasSymbol ? check : cross}
<span className={desc}>has Symbol</span>