zitadel/apps/login/__test__/PasswordComplexity.test.tsx

import { render, screen, waitFor, within } from "@testing-library/react";
import PasswordComplexity from "../ui/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);
          });
        });
      }
    }
  );
});