add test for TextInput and fix classes in tests

vrk-kpa · Jul 6, 2023 · 7082ad1 · 7082ad1
1 parent 1d179b7
commit 7082ad1
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 15 deletions.
diff --git a/src/core/Form/TextInput/TextInput.test.tsx b/src/core/Form/TextInput/TextInput.test.tsx
@@ -304,3 +304,37 @@ describe('props', () => {
     });
   });
 });
+
+describe('Character counter', () => {
+  it('should display correct character count', () => {
+    const { container, getByRole } = render(
+      <TextInput
+        labelText="label"
+        defaultValue="Lorem ipsum"
+        characterLimit={20}
+        ariaCharactersRemainingText={(amount) =>
+          `You have ${amount} characters remaining`
+        }
+        ariaCharactersExceededText={(amount) =>
+          `You have ${amount} characters too many`
+        }
+      />,
+    );
+    expect(
+      container.getElementsByClassName('fi-text-input_character-counter')
+        .length,
+    ).toBe(1);
+    expect(
+      container.getElementsByClassName('fi-text-input_character-counter')[0],
+    ).toHaveTextContent('11/20');
+
+    const textInput = getByRole('textbox') as HTMLTextAreaElement;
+    fireEvent.change(textInput, {
+      target: { value: 'Lorem ipsum dolor sit amet' },
+    });
+
+    expect(
+      container.getElementsByClassName('fi-text-input_character-counter')[0],
+    ).toHaveTextContent('26/20');
+  });
+});
diff --git a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -195,7 +195,7 @@ exports[`snapshots match error status with statustext 1`] = `
   width: 290px;
 }
 
-.c1 .fi-text-input_characterCounter {
+.c1 .fi-text-input_character-counter {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
   -ms-letter-spacing: 0;
@@ -218,7 +218,26 @@ exports[`snapshots match error status with statustext 1`] = `
   margin-top: 4px;
 }
 
-.c1 .fi-text-input_bottomWrapper {
+.c1 .fi-text-input_character-counter.fi-text-input_character-counter--error {
+  color: hsl(3,59%,48%);
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.c1 .fi-text-input_bottom-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -416,7 +435,7 @@ exports[`snapshots match error status with statustext 1`] = `
       />
     </div>
     <div
-      class="c0 fi-text-input_bottomWrapper"
+      class="c0 fi-text-input_bottom-wrapper"
     >
       <span
         aria-atomic="true"
@@ -638,7 +657,7 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   width: 290px;
 }
 
-.c1 .fi-text-input_characterCounter {
+.c1 .fi-text-input_character-counter {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
   -ms-letter-spacing: 0;
@@ -661,7 +680,26 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   margin-top: 4px;
 }
 
-.c1 .fi-text-input_bottomWrapper {
+.c1 .fi-text-input_character-counter.fi-text-input_character-counter--error {
+  color: hsl(3,59%,48%);
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.c1 .fi-text-input_bottom-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -858,7 +896,7 @@ exports[`snapshots match hidden label with placeholder 1`] = `
       />
     </div>
     <div
-      class="c0 fi-text-input_bottomWrapper"
+      class="c0 fi-text-input_bottom-wrapper"
     >
       <span
         aria-atomic="true"
@@ -1066,7 +1104,7 @@ exports[`snapshots match minimal implementation 1`] = `
   width: 290px;
 }
 
-.c1 .fi-text-input_characterCounter {
+.c1 .fi-text-input_character-counter {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
   -ms-letter-spacing: 0;
@@ -1089,7 +1127,26 @@ exports[`snapshots match minimal implementation 1`] = `
   margin-top: 4px;
 }
 
-.c1 .fi-text-input_bottomWrapper {
+.c1 .fi-text-input_character-counter.fi-text-input_character-counter--error {
+  color: hsl(3,59%,48%);
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.c1 .fi-text-input_bottom-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1285,7 +1342,7 @@ exports[`snapshots match minimal implementation 1`] = `
       />
     </div>
     <div
-      class="c0 fi-text-input_bottomWrapper"
+      class="c0 fi-text-input_bottom-wrapper"
     >
       <span
         aria-atomic="true"

diff --git a/src/core/Form/Textarea/Textarea.test.tsx b/src/core/Form/Textarea/Textarea.test.tsx
@@ -306,10 +306,11 @@ describe('props', () => {
         </Textarea>,
       );
       expect(
-        container.getElementsByClassName('fi-textarea_characterCounter').length,
+        container.getElementsByClassName('fi-textarea_character-counter')
+          .length,
       ).toBe(1);
       expect(
-        container.getElementsByClassName('fi-textarea_characterCounter')[0],
+        container.getElementsByClassName('fi-textarea_character-counter')[0],
       ).toHaveTextContent('11/20');
 
       const textarea = getByRole('textbox') as HTMLTextAreaElement;
@@ -318,7 +319,7 @@ describe('props', () => {
       });
 
       expect(
-        container.getElementsByClassName('fi-textarea_characterCounter')[0],
+        container.getElementsByClassName('fi-textarea_character-counter')[0],
       ).toHaveTextContent('26/20');
     });
   });

diff --git a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
@@ -207,7 +207,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c1.fi-textarea .fi-textarea_bottomWrapper {
+.c1.fi-textarea .fi-textarea_bottom-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -218,7 +218,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c1.fi-textarea .fi-textarea_characterCounter {
+.c1.fi-textarea .fi-textarea_character-counter {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
   -ms-letter-spacing: 0;
@@ -241,6 +241,25 @@ exports[`snapshot default structure should match snapshot 1`] = `
   margin-top: 4px;
 }
 
+.c1.fi-textarea .fi-textarea_character-counter.fi-textarea_character-counter--error {
+  color: hsl(3,59%,48%);
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+
 .c1.fi-textarea .fi-textarea_statusText--has-content {
   margin-top: 5px;
 }
@@ -370,7 +389,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
     />
   </div>
   <div
-    class="c0 fi-textarea_bottomWrapper"
+    class="c0 fi-textarea_bottom-wrapper"
   >
     <span
       aria-atomic="true"