Zustand test

__mocks__/zustand.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+// __mocks__/zustand.ts
+// __mocks__/zustand.ts
+import * as zustand from 'zustand';
+import { afterEach, jest } from '@jest/globals';
+import { act } from '@testing-library/react';
+
+const { create: actualCreate, createStore: actualCreateStore } = jest.requireActual<typeof zustand>('zustand');
+
+// a variable to hold reset functions for all stores declared in the app
+export const storeResetFns = new Set<() => void>();
+
+const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+    const store = actualCreate(stateCreator);
+    const initialState = store.getState();
+    storeResetFns.add(() => {
+        store.setState(initialState, true);
+    });
+    return store;
+};
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
+    console.log('zustand create mock');
+
+    // to support curried version of create
+    return typeof stateCreator === 'function' ? createUncurried(stateCreator) : createUncurried;
+}) as typeof zustand.create;
+
+const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+    const store = actualCreateStore(stateCreator);
+    const initialState = store.getState();
+    storeResetFns.add(() => {
+        store.setState(initialState, true);
+    });
+    return store;
+};
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
+    console.log('zustand createStore mock');
+
+    // to support curried version of createStore
+    return typeof stateCreator === 'function' ? createStoreUncurried(stateCreator) : createStoreUncurried;
+}) as typeof zustand.createStore;
+
+// reset all stores after each test run
+afterEach(() => {
+    act(() => {
+        storeResetFns.forEach((resetFn) => {
+            resetFn();
+        });
+    });
+});

__tests__/index.test.js

@@ -1,9 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import Model from '../src/app/components/Model';
+import Inputs from '../src/app/components/Inputs';
+import Container from '../src/app/components/Container';
+import Examples from '../src/app/components/Examples';
 import Toolbar from '../src/app/components/ToolBar';
 import Shots from '../src/app/components/Shots';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import { describe } from 'node:test';
 
 describe('Model', () => {
   it('test textarea model button copy to clipboard', async () => {
@@ -69,4 +73,45 @@ describe('Examples', () => {
     noExamples = screen.queryByText(/No examples added/i);
     expect(noExamples).toBeInTheDocument();
   });
+});
+
+describe('Zustand', ()=>{
+
+  test('testing the whole app except the gpt request', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div className='flex flex-col pt-3 h-screen'>
+        <div className='mx-6 mb-3 flex flex-row basis-[2%]'>
+          <h1 className='text-3xl font-black place-self-center'>ModGen.js</h1>
+          <Toolbar isLoading={false} send={async ()=>{}} changeModeUp={()=>{}} modeUp={false} />
+        </div>
+        <div className='flex flex-row text-base grow min-h-0 basis-[98%]'>
+          <Inputs data={undefined} isLoading={false} modeUp={false} />
+
+          <Container className='w-5/12'>
+              <Examples modeUp={false} />
+          </Container>
+        </div>
+      </div>
+    )
+
+    const textAreaModel = screen.getByPlaceholderText('Input some code...');
+    await user.click(textAreaModel);
+    await user.type(textAreaModel, "function");
+
+    const textAreaResult = screen.getByPlaceholderText('Input a result...');
+    await user.click(textAreaResult);
+    await user.type(textAreaResult, "interface");
+
+    await user.click(screen.getByRole('button', {name: /add example/i}));
+
+    expect(screen.getByText("function")).toBeInTheDocument();
+    expect(screen.getByText("interface")).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', {name: /delete everything/i}));
+
+    const noExamples = screen.queryByText(/No examples added/i);
+    expect(noExamples).toBeInTheDocument();
+  });
 });

jest

@@ -0,0 +1,17 @@
+// jest.config.ts
+import type { JestConfigWithTsJest } from 'ts-jest';
+// import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: './',
+});
+
+/** @type {import('jest').Config} */
+const config: JestConfigWithTsJest = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['./src/setup-jest.ts'],
+};
+
+export default config;

jest.config.mjs

@@ -12,6 +12,8 @@ const config = {
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
   testEnvironment: 'jest-environment-jsdom',
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['./src/setup-jest.ts'],
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async