feat(text-input): update unit tests

momentum-design · Jun 25, 2024 · 4ee448a · 4ee448a
1 parent 705df1c
commit 4ee448a
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 9 deletions.
diff --git a/src/components/TextInput/TextInput.unit.test.tsx b/src/components/TextInput/TextInput.unit.test.tsx
@@ -50,6 +50,28 @@ describe('<TextInput/>', () => {
       expect(container).toMatchSnapshot();
     });
 
+    it('should match snapshot with label', async () => {
+      expect.assertions(1);
+
+      const id = 'example-id';
+
+      const container = await mountComponent(<TextInput label="Password" id={id} />);
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot with clearAriaLabel', async () => {
+      expect.assertions(1);
+
+      const id = 'example-id';
+
+      const container = await mountComponent(
+        <TextInput label="Password" clearAriaLabel="Clear this input" id={id} />
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
     it('should match snapshot with style', async () => {
       expect.assertions(1);
 
@@ -121,9 +143,10 @@ describe('<TextInput/>', () => {
 
       const id = 'example-id-2';
 
-      const element = (await mountAndWait(<TextInput aria-label="text-input" id={id} />))
-        .find(TextInput);
-
+      const element = (await mountAndWait(<TextInput aria-label="text-input" id={id} />)).find(
+        TextInput
+      );
+
       expect(element.props()).toMatchObject({ 'aria-label': 'text-input', id: 'example-id-2' });
     });
 
@@ -164,20 +187,27 @@ describe('<TextInput/>', () => {
     it('should have aria-describedby and id when message is provided', async () => {
       expect.assertions(2);
 
-      const textInputComponent = (await mountAndWait(<TextInput aria-label="text-input" aria-describedby={'desc-test-ID'} />))
-        .find(TextInput);
+      const textInputComponent = (
+        await mountAndWait(<TextInput aria-label="text-input" aria-describedby={'desc-test-ID'} />)
+      ).find(TextInput);
 
-      const inputMessageComponent = (await mountAndWait(<InputMessage className='error' level="error" id={'desc-test-ID'} />)).find(InputMessage);
+      const inputMessageComponent = (
+        await mountAndWait(<InputMessage className="error" level="error" id={'desc-test-ID'} />)
+      ).find(InputMessage);
 
       expect(inputMessageComponent.props().id).toStrictEqual('desc-test-ID');
-      expect(textInputComponent.props()).toMatchObject({ 'aria-label': 'text-input', 'aria-describedby': 'desc-test-ID' });
+      expect(textInputComponent.props()).toMatchObject({
+        'aria-label': 'text-input',
+        'aria-describedby': 'desc-test-ID',
+      });
     });
 
     it('should not have aria-labelledby when message is not provided', async () => {
       expect.assertions(1);
 
-      const textInputComponent = (await mountAndWait(<TextInput aria-label="text-input" />))
-        .find(TextInput);
+      const textInputComponent = (await mountAndWait(<TextInput aria-label="text-input" />)).find(
+        TextInput
+      );
 
       expect(textInputComponent.props()['aria-describedby']).toBe(undefined);
     });

diff --git a/src/components/TextInput/TextInput.unit.test.tsx.snap b/src/components/TextInput/TextInput.unit.test.tsx.snap
@@ -61,6 +61,44 @@ exports[`<TextInput/> snapshot should match snapshot with className 1`] = `
 </SSRProvider>
 `;
 
+exports[`<TextInput/> snapshot should match snapshot with clearAriaLabel 1`] = `
+<SSRProvider>
+  <TextInput
+    clearAriaLabel="Clear this input"
+    id="example-id"
+    label="Password"
+  >
+    <div
+      className="md-text-input-wrapper"
+      data-focus={false}
+      data-level="none"
+      onClick={[Function]}
+    >
+      <label
+        htmlFor="test-ID"
+        id="desc-test-ID"
+      >
+        Password
+      </label>
+      <div
+        className="md-text-input-container"
+      >
+        <input
+          aria-labelledby="test-ID"
+          disabled={false}
+          id="example-id"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          readOnly={false}
+          type="text"
+        />
+      </div>
+    </div>
+  </TextInput>
+</SSRProvider>
+`;
+
 exports[`<TextInput/> snapshot should match snapshot with description 1`] = `
 <SSRProvider>
   <TextInput
@@ -289,6 +327,43 @@ exports[`<TextInput/> snapshot should match snapshot with inputMaxLen 1`] = `
 </SSRProvider>
 `;
 
+exports[`<TextInput/> snapshot should match snapshot with label 1`] = `
+<SSRProvider>
+  <TextInput
+    id="example-id"
+    label="Password"
+  >
+    <div
+      className="md-text-input-wrapper"
+      data-focus={false}
+      data-level="none"
+      onClick={[Function]}
+    >
+      <label
+        htmlFor="test-ID"
+        id="desc-test-ID"
+      >
+        Password
+      </label>
+      <div
+        className="md-text-input-container"
+      >
+        <input
+          aria-labelledby="test-ID"
+          disabled={false}
+          id="example-id"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          readOnly={false}
+          type="text"
+        />
+      </div>
+    </div>
+  </TextInput>
+</SSRProvider>
+`;
+
 exports[`<TextInput/> snapshot should match snapshot with style 1`] = `
 <SSRProvider>
   <TextInput