test: add test for getTypedChildrenArray

Author: jason89521

package.json

@@ -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",

src/__test__/constant.tsx

@@ -1,11 +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="first">
-    first
-    <div className="second">second</div>
-    <Typist.Backspace count={6} />
-    <div className="third">third</div>
+  <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__/getTypedChildrenArray.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, getByText, render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import React, { useState, useMemo } from 'react';
+
+import type { Splitter } from '../types/TypistProps';
+import { defaultSplitter } from '../utils/defaultFuncs';
+import getTypedChildrenArray from '../utils/getTypedChildrenArray';
+
+import { BUTTON_ID, nestedChildren, textsArray, WRAPPER_ID } from './constant';
+
+type Props = {
+  children: ReactNode;
+  splitter?: Splitter;
+};
+
+const App = ({ children, splitter = defaultSplitter }: Props) => {
+  const typedChildrenArray = useMemo(
+    () => getTypedChildrenArray(children, splitter),
+    [children, splitter]
+  );
+  const [tick, setTick] = useState(0);
+
+  return (
+    <>
+      <div data-testid={WRAPPER_ID}>{typedChildrenArray[tick]}</div>
+      <button data-testid={BUTTON_ID} onClick={() => setTick(tick + 1)}>
+        increment
+      </button>
+    </>
+  );
+};
+
+test('display children correctly', () => {
+  render(<App>{nestedChildren}</App>);
+  const wrapper = screen.getByTestId(WRAPPER_ID);
+  const button = screen.getByTestId(BUTTON_ID);
+
+  textsArray.forEach(texts => {
+    texts.forEach(text => {
+      getByText(wrapper, text);
+    });
+    fireEvent.click(button);
+  });
+});