test: add table driven unit tests

apps/login/ui/PasswordComplexity.test.tsx

@@ -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)
+                })
+            })
+        }
+    })
+});

apps/login/ui/PasswordComplexity.tsx

@@ -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>