test(test): add test

mutativejs · Sep 17, 2024 · 994c355 · 994c355
1 parent a71c576
commit 994c355
Show file tree

Hide file tree

Showing 4 changed files with 397 additions and 0 deletions.
diff --git a/test/atomWithMutative.test.tsx b/test/atomWithMutative.test.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { StrictMode } from 'react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { useAtom } from 'jotai/react';
+import { atomWithMutative } from '../src';
+
+afterEach(cleanup);
+
+test('atomWithMutative with useAtom', async () => {
+  const countAtom = atomWithMutative(0);
+
+  const Parent = () => {
+    const [count, setCount] = useAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
+
+test('atomWithMutative with WritableAtom<Value, Value> signature', async () => {
+  const countAtom = atomWithMutative(0);
+
+  const Parent = () => {
+    const [count, setCount] = useAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount(count + 1)}>Increase</button>
+        <button onClick={() => setCount(count - 1)}>Decrease</button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
diff --git a/test/useMutativeAtom.test.tsx b/test/useMutativeAtom.test.tsx
@@ -0,0 +1,107 @@
+import { StrictMode } from 'react';
+import React from 'react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { atom } from 'jotai/vanilla';
+import { atomWithMutative, useMutativeAtom, withMutative } from '../src';
+
+afterEach(cleanup);
+
+test('useMutativeAtom with regular atom', async () => {
+  const countAtom = atom(0);
+
+  const Parent = () => {
+    const [count, setCount] = useMutativeAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>,
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
+
+test('useMutativeAtom with mutative atom', async () => {
+  const countAtom = atomWithMutative(0);
+
+  const Parent = () => {
+    const [count, setCount] = useMutativeAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>,
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
+
+test('useMutativeAtom with derived mutative atom', async () => {
+  const regularCountAtom = atom(0);
+  const countAtom = withMutative(regularCountAtom);
+
+  const Parent = () => {
+    const [count, setCount] = useMutativeAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>,
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
diff --git a/test/useSetMutativeAtom.test.tsx b/test/useSetMutativeAtom.test.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { StrictMode } from 'react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { useAtomValue } from 'jotai/react';
+import { atom } from 'jotai/vanilla';
+import { atomWithMutative, useSetMutativeAtom, withMutative } from '../src';
+
+afterEach(cleanup);
+
+test('useSetMutativeAtom with regular atom', async () => {
+  const countAtom = atom(0);
+
+  const Parent = () => {
+    const count = useAtomValue(countAtom);
+    const setCount = useSetMutativeAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>,
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
+
+test('useSetMutativeAtom with mutative atom', async () => {
+  const countAtom = atomWithMutative(0);
+
+  const Parent = () => {
+    const count = useAtomValue(countAtom);
+    const setCount = useSetMutativeAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>,
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});
+
+test('useSetMutativeAtom with derived mutative atom', async () => {
+  const regularCountAtom = atom(0);
+  const countAtom = withMutative(regularCountAtom);
+
+  const Parent = () => {
+    const count = useAtomValue(countAtom);
+    const setCount = useSetMutativeAtom(countAtom);
+    return (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount((draft) => (draft = draft + 1))}>
+          Increase
+        </button>
+        <button onClick={() => setCount((draft) => (draft = draft - 1))}>
+          Decrease
+        </button>
+      </>
+    );
+  };
+
+  const { findByText, getByText } = render(
+    <StrictMode>
+      <Parent />
+    </StrictMode>,
+  );
+
+  await findByText('count: 0');
+
+  fireEvent.click(getByText('Increase'));
+  await findByText('count: 1');
+
+  fireEvent.click(getByText('Decrease'));
+  await findByText('count: 0');
+});