Merge pull request #754 from vrk-kpa/fix/component-test-warnings

[Fix] CharacterCounter component tests
vrk-kpa · Jul 20, 2023 · c746ea1 · c746ea1
2 parents 3dee01f + bc6ccf5
commit c746ea1
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/src/core/Form/TextInput/TextInput.test.tsx b/src/core/Form/TextInput/TextInput.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { act, render, fireEvent } from '@testing-library/react';
 import { axeTest } from '../../../utils/test';
 
 import { TextInput } from './TextInput';
@@ -306,6 +306,14 @@ describe('props', () => {
 });
 
 describe('Character counter', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   it('should display correct character count', () => {
     const { container, getByTestId } = render(
       <TextInput
@@ -340,7 +348,6 @@ describe('Character counter', () => {
   });
 
   it('should have correct screen reader status text', () => {
-    jest.useFakeTimers();
     const { container, getByTestId } = render(
       <TextInput
         labelText="label"
@@ -370,7 +377,9 @@ describe('Character counter', () => {
       container.getElementsByClassName('fi-status-text')[0].firstChild,
     ).toHaveTextContent('');
 
-    jest.advanceTimersByTime(2000);
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
 
     expect(
       container.getElementsByClassName('fi-status-text')[0].firstChild,

diff --git a/src/core/Form/TextInput/TextInput.tsx b/src/core/Form/TextInput/TextInput.tsx
@@ -129,6 +129,15 @@ const BaseTextInput = (props: characterCounterProps & TextInputProps) => {
     typeof setTimeout
   > | null>(null);
 
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+
   const {
     className,
     labelText,
@@ -178,11 +187,13 @@ const BaseTextInput = (props: characterCounterProps & TextInputProps) => {
       const charCountInInput = event.target.value.length;
       setCharCount(charCountInInput);
       const newTypingTimer = setTimeout(() => {
-        setCharacterCounterAriaText(
-          charCountInInput <= characterLimit
-            ? ariaCharactersRemainingText(characterLimit - charCountInInput)
-            : ariaCharactersExceededText(charCountInInput - characterLimit),
-        );
+        if (isMounted) {
+          setCharacterCounterAriaText(
+            charCountInInput <= characterLimit
+              ? ariaCharactersRemainingText(characterLimit - charCountInInput)
+              : ariaCharactersExceededText(charCountInInput - characterLimit),
+          );
+        }
       }, 1500);
       setTypingTimer(newTypingTimer);
     }

diff --git a/src/core/Form/Textarea/Textarea.test.tsx b/src/core/Form/Textarea/Textarea.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
 import { axeTest } from '../../../utils/test';
 
 import { Textarea } from './Textarea';
@@ -290,6 +290,14 @@ describe('props', () => {
   });
 
   describe('Character counter', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
     it('should display character count', () => {
       const { container, getByRole } = render(
         <Textarea
@@ -324,7 +332,6 @@ describe('props', () => {
     });
 
     it('should have correct screen reader status text', () => {
-      jest.useFakeTimers();
       const { container, getByTestId } = render(
         <Textarea
           labelText="label"
@@ -345,6 +352,7 @@ describe('props', () => {
       ).toHaveTextContent('');
 
       const textInput = getByTestId('cc-textarea') as HTMLTextAreaElement;
+
       fireEvent.change(textInput, {
         target: { value: 'Lorem ipsum dolor sit amet' },
       });
@@ -354,7 +362,9 @@ describe('props', () => {
         container.getElementsByClassName('fi-status-text')[0].firstChild,
       ).toHaveTextContent('');
 
-      jest.advanceTimersByTime(2000);
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
 
       expect(
         container.getElementsByClassName('fi-status-text')[0].firstChild,

diff --git a/src/core/Form/Textarea/Textarea.tsx b/src/core/Form/Textarea/Textarea.tsx
@@ -156,6 +156,15 @@ const BaseTextarea = (props: TextareaProps) => {
     typeof setTimeout
   > | null>(null);
 
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const onClickProps = !!disabled ? {} : { onMouseDown: onClick };
@@ -180,11 +189,13 @@ const BaseTextarea = (props: TextareaProps) => {
       const charCountInInput = event.target.value.length;
       setCharCount(charCountInInput);
       const newTypingTimer = setTimeout(() => {
-        setCharacterCounterAriaText(
-          charCountInInput <= characterLimit
-            ? ariaCharactersRemainingText(characterLimit - charCountInInput)
-            : ariaCharactersExceededText(charCountInInput - characterLimit),
-        );
+        if (isMounted) {
+          setCharacterCounterAriaText(
+            charCountInInput <= characterLimit
+              ? ariaCharactersRemainingText(characterLimit - charCountInInput)
+              : ariaCharactersExceededText(charCountInInput - characterLimit),
+          );
+        }
       }, 1500);
       setTypingTimer(newTypingTimer);
     }