test: add test case for pause

Author: jason89521

jest-setup.ts

@@ -1,4 +1,4 @@
 import '@testing-library/jest-dom';
-import { configure } from '@testing-library/react';
+// import { configure } from '@testing-library/react';
 
-configure({ asyncUtilTimeout: 5000 });
+// configure({ asyncUtilTimeout: 1000 });

src/__test__/Typist.test.tsx

@@ -1,23 +1,45 @@
 import React from 'react';
-import { getByText, render } from '@testing-library/react';
+import {
+  fireEvent,
+  getByTestId,
+  getByText,
+  render,
+} from '@testing-library/react';
 
 import Typist from '..';
-import { nestedChildren, textsArray } from './constant';
-import { waitFor } from './utils';
+import { nestedChildren, textsArray, PauseTest, BUTTON_ID } from './constant';
+import { findByText, waitFor } from './utils';
 
-beforeEach(() => {
-  jest.useFakeTimers();
+afterEach(() => {
+  jest.useRealTimers();
 });
 
 test('render children correctly', async () => {
   const { container } = render(<Typist>{nestedChildren}</Typist>);
+  jest.useFakeTimers();
 
   for (const texts of textsArray) {
     for (const text of texts) {
-      await waitFor(() => {
-        getByText(container, text);
-      });
+      await findByText(container, text);
     }
     jest.runOnlyPendingTimers();
   }
 });
+
+test('pause the typing animation', async () => {
+  const { container } = render(<PauseTest />);
+  const button = getByTestId(container, BUTTON_ID);
+
+  await findByText(container, 'a');
+  fireEvent.click(button);
+  let isPauseWork = true;
+  try {
+    await findByText(container, 'ab');
+    isPauseWork = false;
+  } catch (error) {
+    // do nothing
+  }
+  if (!isPauseWork) throw new Error('Pause does not work!');
+  fireEvent.click(button);
+  await findByText(container, 'ab');
+});

src/__test__/constant.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Typist from '..';
 
 export const textsArray = [
@@ -14,11 +14,11 @@ export const textsArray = [
 ];
 
 export const nestedChildren = (
-  <div className="ab">
+  <div className='ab'>
     ab
-    <div className="cd">cd</div>
+    <div className='cd'>cd</div>
     <Typist.Backspace count={2} />
-    <div className="ef">ef</div>
+    <div className='ef'>ef</div>
     <Typist.Paste>
       <span>gh</span>
     </Typist.Paste>
@@ -27,3 +27,14 @@ export const nestedChildren = (
 
 export const WRAPPER_ID = 'wrapper';
 export const BUTTON_ID = 'button';
+
+export const PauseTest = () => {
+  const [pause, setPause] = useState(false);
+
+  return (
+    <>
+      <Typist pause={pause}>ab</Typist>
+      <button data-testid={BUTTON_ID} onClick={() => setPause(!pause)} />
+    </>
+  );
+};

src/__test__/utils.ts

@@ -1,6 +1,28 @@
-import type { waitForOptions } from '@testing-library/react';
-import { waitFor as originWaitFor } from '@testing-library/react';
+import type {
+  waitForOptions,
+  Matcher,
+  SelectorMatcherOptions,
+} from '@testing-library/react';
+import {
+  waitFor as originWaitFor,
+  findByText as originFindByText,
+} from '@testing-library/react';
 
-export function waitFor<T>(callback: () => Promise<T> | T, options?: waitForOptions) {
+export function waitFor<T>(
+  callback: () => Promise<T> | T,
+  options?: waitForOptions
+) {
   return originWaitFor(callback, { interval: 0, ...options });
 }
+
+export function findByText<T extends HTMLElement = HTMLElement>(
+  container: HTMLElement,
+  id: Matcher,
+  options?: SelectorMatcherOptions,
+  waitForElementOptions?: waitForOptions
+) {
+  return originFindByText<T>(container, id, options, {
+    interval: 0,
+    ...waitForElementOptions,
+  });
+}