chore: added unit tests (#40)

* chore: added unit tests * chore: added unit tests * chore: format CONTRIBUTING.md * chore: updated coverage threshold * chore: updated test flow * chore: added test retry * chore: updated test settings * ci: only run phone input test * ci: revert * chore: run test in sequence in CI * chore: updated test config * docs: udpated docs * chore: updated tests config * chore: try to ignore run use-preserve-input-caret-position tests * chore: updated turbo repo config * chore: revert turbo * chore: try build before run test * chore: skip run build docs * chore: try allow run all tests * chore: updated tests flow * chore: updated test flows * chore: updated test config * chore: updated test configs * chore: updated test config * chore: updated test cases * chore: try test without setTimeout * chore: try place expect inside act * test: updated flaky tests to use timeout
trinhthinh388 · Jan 29, 2024 · 10b9fd2 · 10b9fd2
1 parent ae2a3e6
commit 10b9fd2
Show file tree

Hide file tree

Showing 58 changed files with 1,453 additions and 250 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -15,7 +15,7 @@ permissions:
   contents: read
 
 jobs:
-  unit-test:
+  unit-tests:
     name: ʦ Vitest
     runs-on: ubuntu-latest
     steps:
@@ -33,5 +33,5 @@ jobs:
       - name: 📥 Download deps
         run: yarn install --frozen-lockfile
 
-      - name: 🔎 Type check
+      - name: 🔎 Unit Test
         run: yarn test
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -9,7 +9,7 @@ prepare your contribution.
 The following steps will get you up and running to contribute to React Awesome Components:
 
 1. Fork the repo (click the <kbd>Fork</kbd> button at the top right of
-   [this page]([https://github.com/trinhthinh388/react-awesome-components](https://github.com/trinhthinh388/react-awesome-components)))
+   [this page](<[https://github.com/trinhthinh388/react-awesome-components](https://github.com/trinhthinh388/react-awesome-components)>))
 
 2. Clone your fork locally
 
@@ -22,6 +22,7 @@ cd react-awesome-components
    command will install dependencies.
 
 > If you run into any issues during this step, kindly reach out to the React Awesome Components
+>
 > - Email: trinhthinh388@gmail.com
 > - Telegram: @chick_buster
 > - Twitter: @chick_buster
@@ -138,6 +139,7 @@ All commits that fix bugs or add features need a test.
 ## Want to write a blog post or tutorial
 
 That would be amazing! Reach out to me here:
+
 > - Email: trinhthinh388@gmail.com
 > - Telegram: @chick_buster
 > - Twitter: @chick_buster

diff --git a/apps/docs/src/pages/docs/use-preserve-input-caret-position.mdx b/apps/docs/src/pages/docs/use-preserve-input-caret-position.mdx
@@ -52,11 +52,11 @@ return <input className="w-full border rounded-md px-3 py-2" value={value} onCha
 
 ## Install
 
-To start using **usePreserveInputCaretPosition**, you can install the `@react-awesome/hooks` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+To start using **usePreserveInputCaretPosition**, you can install the `@react-awesome/use-preserve-input-caret-position` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
 the following command to install the dependencies:
 
 ```sh npm2yarn
-npm i @react-awesome/hooks
+npm i @react-awesome/use-preserve-input-caret-position
 ```
 
 ## Usage
@@ -87,7 +87,7 @@ When using `usePreserveInputCaretPosition` the input now can perfectly handle th
 </Container>
 
 ```jsx
-import { usePreserveInputCaretPosition } from '@react-awesome/hooks'
+import { usePreserveInputCaretPosition } from '@react-awesome/use-preserve-input-caret-position'
 
 export const Example = () => {
   const ref = useRef(null)
@@ -163,7 +163,7 @@ return <input ref={ref} className="w-full border rounded-md px-3 py-2" value={va
 </Container>
 
 ```jsx
-import { usePreserveInputCaretPosition } from '@react-awesome/hooks'
+import { usePreserveInputCaretPosition } from '@react-awesome/use-preserve-input-caret-position'
 
 export const Example = () => {
   const ref = useRef(null)

diff --git a/apps/docs/src/pages/docs/use-previous.mdx b/apps/docs/src/pages/docs/use-previous.mdx
@@ -8,11 +8,11 @@ title: usePrevious
 
 ## Install
 
-To start using **usePrevious**, you can install the `@react-awesome/hooks` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+To start using **usePrevious**, you can install the `@react-awesome/use-previous` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
 the following command to install the dependencies:
 
 ```sh npm2yarn
-npm i @react-awesome/hooks
+npm i @react-awesome/use-previous
 ```
 
 ## Usage
@@ -33,7 +33,7 @@ return (
     onClick={() => setState((prev) => ++prev)}
     className="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
   >
-    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+    <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
       Click to add
     </span>
   </button>
@@ -59,7 +59,7 @@ return (
 </Container>
 
 ```jsx
-import { usePrevious } from '@react-awesome/hooks'
+import { usePrevious } from '@react-awesome/use-previous'
 
 const Example = () => {
   const [state, setState] = useState(0)

diff --git a/apps/docs/src/pages/docs/use-selection-range.mdx b/apps/docs/src/pages/docs/use-selection-range.mdx
@@ -8,11 +8,11 @@ title: useSelectionRange
 
 ## Install
 
-To start using **useSelectionRange**, you can install the `@react-awesome/hooks` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+To start using **useSelectionRange**, you can install the `@react-awesome/use-selection-range` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
 the following command to install the dependencies:
 
 ```sh npm2yarn
-npm i @react-awesome/hooks
+npm i @react-awesome/use-selection-range
 ```
 
 ## Usage
@@ -56,7 +56,7 @@ return (
 </Container>
 
 ```jsx
-import { useSelectionRange } from '@react-awesome/phone-input'
+import { useSelectionRange } from '@react-awesome/use-selection-range'
 
 const Example = () => {
   const ref = useRef(null)
@@ -68,6 +68,65 @@ const Example = () => {
 }
 ```
 
+## Notes
+
+**useSelectionRange** doesn't have effect on some special editable elements like `div` with `contentEditable` or `textarea`.
+Since `div` with `contentEditable` (or `textarea`) doesn't offer any `selectionStart` or `selectionEnd` to the callback.
+
+export const BadExample = () => {
+  const [ref, setRef] = useState(null)
+
+const { caret } = useSelectionRange(ref)
+
+return (
+
+<>
+  <div
+    className="w-full border rounded-md px-3 py-2 border-red-400"
+    ref={setRef}
+    contentEditable
+    suppressContentEditableWarning
+  >
+    I cannot track the contentEditable div element
+  </div>
+  <ul className="mt-2">
+    <li>
+      <span className="font-medium">😢 Start</span>
+      <code className="ml-2 nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10">
+        {caret.start.toString()}
+      </code>
+    </li>
+    <li>
+      <span className="font-medium">😢 End</span>
+      <code className="ml-2 nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10">
+        {caret.end.toString()}
+      </code>
+    </li>
+  </ul>
+</>
+); };
+
+<Container>
+  <BadExample />
+</Container>
+
+```jsx
+import { useSelectionRange } from '@react-awesome/use-selection-range'
+
+const NotWorkingExample = () => {
+  const ref = useRef(null)
+  const { register } = useSelectionRange()
+
+  const { caret } = useSelectionRange(ref.current)
+
+  return (
+    <div ref={setRef} contentEditable>
+      I cannot track the contentEditable div element
+    </div>
+  )
+}
+```
+
 ## Parameters
 
 The `useSelectionRange` takes the following parameters:

diff --git a/package.json b/package.json
@@ -5,30 +5,32 @@
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "test": "turbo test",
+    "test": "turbo build --filter=!@react-awesome/docs && turbo test",
     "typecheck": "turbo typecheck",
     "clean": "turbo clean && rimraf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "format:fix": "prettier --write \"**/*.{ts,tsx,md}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "yarn build && changeset publish",
+    "release": "yarn build --filter=!@react-awesome/docs && changeset publish",
     "docs": "yarn workspace @react-awesome/docs",
-    "phone-input": "yarn workspace @react-awesome/phone-input",
-    "hooks": "yarn workspace @react-awesome/hooks",
     "eslint": "yarn workspace @react-awesome/eslint-config",
     "prepare": "husky"
   },
   "devDependencies": {
     "@changesets/cli": "2.26.2",
     "@react-awesome/eslint-config": "*",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^1.2.1",
     "@vitest/ui": "^1.2.1",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.56.0",
     "husky": "^9.0.6",
+    "jsdom": "^24.0.0",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
     "tty-table": "^4.2.3",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -31,7 +31,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@react-awesome/hooks": "0.0.2",
-    "@react-awesome/phone-input": "1.0.2"
+    "@react-awesome/phone-input": "1.0.2",
+    "@react-awesome/use-click-outside": "0.0.0",
+    "@react-awesome/use-preserve-input-caret-position": "0.0.0",
+    "@react-awesome/use-selection-range": "0.0.0",
+    "@react-awesome/use-previous": "0.0.0"
   }
 }
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,2 +1,9 @@
 export * from '@react-awesome/phone-input'
-export * from '@react-awesome/hooks'
+
+/**
+ * Hooks
+ */
+export * from '@react-awesome/use-click-outside'
+export * from '@react-awesome/use-preserve-input-caret-position'
+export * from '@react-awesome/use-previous'
+export * from '@react-awesome/use-selection-range'
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "@react-awesome/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  },
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
 }
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md