test: update Typist's test

Author: jason89521

src/__test__/Typist.test.tsx

@@ -1,81 +1,23 @@
-import React, { useState } from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { getByText, render } from '@testing-library/react';
 
 import Typist from '..';
-import { nestedChildren } from './constant';
+import { nestedChildren, textsArray } from './constant';
+import { waitFor } from './utils';
 
 beforeEach(() => {
   jest.useFakeTimers();
 });
 
-describe('Display children correctly.', () => {
-  // Since the way Typist generates its children is different when disabled is different,
-  // we need to test it separately.
-  describe('Disabled is true', () => {
-    test('Nested children', () => {
-      render(<Typist disabled>{nestedChildren}</Typist>);
-      screen.getByText('first');
-      expect(screen.queryByText('second')).toBeNull();
-      screen.getByText('third');
-    });
+test('render children correctly', async () => {
+  const { container } = render(<Typist>{nestedChildren}</Typist>);
 
-    test('clear all children if the count of the last backspace is Infinity', () => {
-      const { container } = render(
-        <Typist disabled>
-          {nestedChildren}
-          <Typist.Backspace count={Infinity} />
-        </Typist>
-      );
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe('Disabled is false', () => {
-    test('nested children', async () => {
-      render(<Typist>{nestedChildren}</Typist>);
-      await screen.findByText('first');
-      await screen.findByText('second');
-      await screen.findByText('third');
-      expect(screen.queryByText('second')).toBeNull();
-    });
-
-    test('clear all childthe count of the last backspace is Infinity', async () => {
-      const { container } = render(
-        <Typist>
-          {nestedChildren}
-          <Typist.Backspace count={Infinity} />
-        </Typist>
-      );
+  for (const texts of textsArray) {
+    for (const text of texts) {
       await waitFor(() => {
-        expect(container.firstChild).toBeNull();
+        getByText(container, text);
       });
-    });
-  });
-});
-
-test('Dynamic children', async () => {
-  const arr = ['text 1', 'text 2'];
-  const App = () => {
-    const [index, setIndex] = useState(0);
-    return (
-      <Typist
-        onTypingDone={() => {
-          setIndex(index === 0 ? 1 : 0);
-        }}
-        restartKey={index}
-      >
-        {arr[index]}
-      </Typist>
-    );
-  };
-
-  render(<App />);
-  await waitFor(() => {
-    screen.getByText('text 1');
-    expect(screen.queryByText('text 2')).toBeNull();
-  });
-  await waitFor(() => {
-    screen.getByText('text 2');
-    expect(screen.queryByText('text 1')).toBeNull();
-  });
+    }
+    jest.runOnlyPendingTimers();
+  }
 });

src/__test__/getTypedChildrenArray.test.tsx

@@ -0,0 +1,6 @@
+import type { waitForOptions } from '@testing-library/react';
+import { waitFor as originWaitFor } from '@testing-library/react';
+
+export function waitFor<T>(callback: () => Promise<T> | T, options?: waitForOptions) {
+  return originWaitFor(callback, { interval: 0, ...options });
+}