docs(functions): test utils of shared (#20)

* docs(functions): test utils of shared

docs/guide/get-started.md

@@ -19,6 +19,7 @@ After installation, you can use the functions you want in your SolidJS component
 For example, if you want to listen to the click event outside an element, you can use the `useClickOutside` function:
 
 ```tsx
+// App.tsx
 let ref: HTMLElement;
 function App() {
   onMount(() => {
@@ -36,7 +37,7 @@ function App() {
 }
 ```
 
-Using the `useClickOutside` function will register a click event listener on `window`, which will judge the target of the click event internally. If the target of the click event is `ref`, the callback will not be triggered, otherwise, it will be triggered.
+Using the `useClickOutside` function will register a click event listener on `window`, which will check the target of the click event internally. If the target of the click event is `ref`, the callback will not be fired, otherwise, it will be fired.
 
 <iframe src="https://stackblitz.com/edit/useclickoutside?embed=1&file=src/App.tsx&hideExplorer=1&hideNavigation=1" width="100%" height="400rem" style="border: none; border-radius: 8px;" />
 

docs/shared/test.md

@@ -18,4 +18,48 @@ pnpm install @soliduse/shared --save-dev
 
 ## Usage
 
-After installation
+After installation, you can use the functions you want to test your SolidJS components.
+
+For example, if you want to test a click event fired or not, you can use the `mount` to render your SolidJS components, and use the `fireEvent` object to fire the click event:
+
+```tsx
+// App.tsx
+import type { Component } from 'solid-js';
+
+interface Props {
+  onClick: () => void;
+}
+
+const App: Component<Props> = ({ onClick }) => {
+  return <button onClick={onClick}>click me</button>;
+};
+
+export default App;
+```
+
+```tsx
+// App.test.tsx
+import { fireEvent, mount } from '@soliduse/shared';
+
+import App from './App';
+
+it('should be fired', () => {
+  const onClick = vi.fn();
+
+  const { queryByText } = mount(() => <App onClick={onClick} />);
+  expect(onClick).not.toHaveBeenCalled();
+  const button = queryByText(/click me/i) as HTMLButtonElement;
+  fireEvent.click(button);
+  expect(onClick).toHaveBeenCalled();
+});
+```
+
+Using the `mount` function will create a `div` element as a root for rendering the `App` component, it will return some query functions to help you get the element you want to test.
+
+Using the `fireEvent` object to fire the event you want, and check if the event listener fires.
+
+<iframe src="https://stackblitz.com/edit/test-click-event?embed=1&file=src/App.test.tsx&hideExplorer=1&hideNavigation=1" width="100%" height="400rem" style="border: none; border-radius: 8px;" />
+
+:::tip
+If the preview window shows that the browser is incompatible, please click the button on the left bottom side to preview in [StackBlitz](https://stackblitz.com/) using a Chromium-based browser.
+:::

packages/core/src/useClickOutside/__tests__/index.ssr.test.tsx

@@ -17,7 +17,7 @@ describe('@soliduse/core/useClickOutside', () => {
     cleanup();
   });
 
-  test('should not be triggered correctly when server-side rendering', () => {
+  test('should not be fired correctly when server-side rendering', () => {
     const listener = vi.fn();
 
     let ref: HTMLButtonElement;

packages/core/src/useClickOutside/__tests__/index.test.tsx

@@ -9,7 +9,7 @@ describe('@soliduse/core/useClickOutside', () => {
     cleanup();
   });
 
-  test('should be triggered correctly when clicking outside of target', () => {
+  test('should be fired correctly when clicking outside of target', () => {
     const listener = vi.fn();
 
     let ref: HTMLButtonElement;
@@ -36,7 +36,7 @@ describe('@soliduse/core/useClickOutside', () => {
     expect(listener).toHaveBeenCalledTimes(1);
   });
 
-  test('should not be triggered correctly when clicking outside of target which is ignored', () => {
+  test('should not be fired correctly when clicking outside of target which is ignored', () => {
     const listener = vi.fn();
 
     let ref: HTMLButtonElement;
@@ -64,7 +64,7 @@ describe('@soliduse/core/useClickOutside', () => {
     expect(listener).toHaveBeenCalledTimes(0);
   });
 
-  test('should not be triggered correctly when clicking outside of target after unregistering', () => {
+  test('should not be fired correctly when clicking outside of target after unregistering', () => {
     const listener = vi.fn();
 
     let unregister!: Fn;