Merge pull request #8 from jason89521/test

Author: jason89521

__test__/Typist.test.tsx

@@ -32,7 +32,7 @@
   "scripts": {
     "commit": "cz",
     "dev": "vite",
-    "test": "jest ./__test__/Typist.test.tsx",
+    "test": "jest",
     "build:example": "tsc && vite build",
     "build:types": "rimraf types/* && tsc --project tsconfig.lib.json",
     "build:lib": "yarn build:types && vite build --mode lib && api-extractor run",

__test__/utils.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getByText, render } from '@testing-library/react';
+
+import Typist from '..';
+import { nestedChildren, textsArray } from './constant';
+import { waitFor } from './utils';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+test('render children correctly', async () => {
+  const { container } = render(<Typist>{nestedChildren}</Typist>);
+
+  for (const texts of textsArray) {
+    for (const text of texts) {
+      await waitFor(() => {
+        getByText(container, text);
+      });
+    }
+    jest.runOnlyPendingTimers();
+  }
+});

package.json

@@ -0,0 +1,29 @@
+import React from 'react';
+import Typist from '..';
+
+export const textsArray = [
+  ['a'],
+  ['ab'],
+  ['ab', 'c'],
+  ['ab', 'cd'],
+  ['ab', 'c'],
+  ['ab'],
+  ['ab', 'e'],
+  ['ab', 'ef'],
+  ['ab', 'ef', 'gh'],
+];
+
+export const nestedChildren = (
+  <div className="ab">
+    ab
+    <div className="cd">cd</div>
+    <Typist.Backspace count={2} />
+    <div className="ef">ef</div>
+    <Typist.Paste>
+      <span>gh</span>
+    </Typist.Paste>
+  </div>
+);
+
+export const WRAPPER_ID = 'wrapper';
+export const BUTTON_ID = 'button';

src/__test__/Typist.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 });
+}

src/__test__/constant.tsx

@@ -86,28 +86,27 @@ const Main = ({
         do {
           setCurrentIndex(-1);
           const actions = getActions(children, splitter);
-          await timeoutPromise(startDelay);
+          if (startDelay > 0) await timeoutPromise(startDelay);
           for (const { type, payload } of actions) {
+            if (pause) await pausePromise();
             if (type === 'TYPE_TOKEN') {
-              await pausePromise();
               setCurrentIndex(prev => prev + 1);
               await timeoutPromise(typingDelay);
             } else if (type === 'BACKSPACE') {
               let amount = payload;
               while (amount--) {
-                await pausePromise();
                 setCurrentIndex(prev => prev + 1);
                 await timeoutPromise(backspaceDelay);
               }
             } else if (type === 'PASTE') {
               setCurrentIndex(prev => prev + 1);
-            } else if (type === 'PAUSE') {
+            } else if (type === 'DELAY') {
               await timeoutPromise(payload);
             }
           }
           onTypingDone?.();
-          await timeoutPromise(finishDelay);
-          await loopPromise();
+          if (finishDelay > 0) await timeoutPromise(finishDelay);
+          if (!loopRef.current) await loopPromise();
         } while (loopRef.current);
       } catch (error) {
         // do nothing

src/__test__/utils.ts

@@ -5,6 +5,6 @@ export type TypeTokenAction = {
   payload: string | ReactElement;
 };
 export type BackspaceAction = { type: 'BACKSPACE'; payload: number };
-export type PauseAction = { type: 'PAUSE'; payload: number };
+export type DelayAction = { type: 'DELAY'; payload: number };
 export type PasteAction = { type: 'PASTE'; payload: string | ReactElement };
-export type Action = TypeTokenAction | BackspaceAction | PauseAction | PasteAction;
+export type Action = TypeTokenAction | BackspaceAction | DelayAction | PasteAction;

src/components/Main.tsx

@@ -4,7 +4,7 @@ import { Children, isValidElement } from 'react';
 import type {
   Action,
   BackspaceAction,
-  PauseAction,
+  DelayAction,
   PasteAction,
   TypeTokenAction,
 } from '../types/actions';
@@ -25,7 +25,7 @@ const backspace = (count: number): BackspaceAction => ({
   payload: count,
 });
 
-const pause = (ms: number): PauseAction => ({ type: 'PAUSE', payload: ms });
+const pause = (ms: number): DelayAction => ({ type: 'DELAY', payload: ms });
 
 const paste = (str: string): PasteAction => ({ type: 'PASTE', payload: str });