Created tests for componets: shots(examples), toolbar and model (#23)

* created tests for componets: shots(examples), toolbar and model

* new github actions .yml for auto testing

* added one-time run testing

---------

Co-authored-by: Byron <[email protected]>

.github/workflows/testingComponents.yml

@@ -0,0 +1,22 @@
+name: React resting library tests
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎 Checkout
+        uses: actions/checkout@v4
+      - name: 🟩 Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+          cache: 'npm'
+      - name: 🤠 npm install
+        run: npm ci
+      - name: ✔ Ruuun tests
+        run: npm run proof

__tests__/index.test.js

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+import Model from '../src/app/components/Model';
+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';
+
+describe('Model', () => {
+  it('test textarea model button copy to clipboard', async () => {
+    const user = userEvent.setup()
+    render(<Model userInput={"hello"} updateUserInput={(comn) => {}} disabled={false} />);
+
+    await user.click(screen.getByRole('button', {name: /Copy to clipboard/i}));
+    const successText = screen.getByText(/copied!/i);
+
+    expect(successText).toBeInTheDocument();
+  });
+});
+
+describe('Toolbar', () => {
+  it('example button correct mode', async () =>{
+    const user = userEvent.setup()
+    render(<Toolbar isLoading={false} send={async () =>{}} changeModeUp={()=>{}} modeUp={false}  />);
+
+    await user.click(screen.getByRole('button', {name: "Example"}));
+    const loadExampleText = screen.getByText(/load example/i);
+    const addExampleText = screen.getByText(/add example/i);
+    const sendButton = screen.queryByText(/send request/i);
+
+    expect(loadExampleText).toBeInTheDocument();
+    expect(addExampleText).toBeInTheDocument();
+    expect(sendButton).toBeNull();
+
+  });
+
+  it('request button correct mode', async () =>{
+    const user = userEvent.setup()
+    render(<Toolbar isLoading={false} send={async () =>{}} changeModeUp={()=>{}} modeUp={false}  />);
+
+    await user.click(screen.getByRole('button', {name: /request/i}));
+    const sendButton = screen.getByText(/send request/i);
+    const loadExampleText = screen.queryByText(/load example/i);
+    const addExampleText = screen.queryByText(/add example/i);
+
+    expect(sendButton).toBeInTheDocument();
+    expect(loadExampleText).toBeNull();
+    expect(addExampleText).toBeNull();
+  });
+
+});
+
+describe('Examples', () => {
+  it('adding and deleting examples', async () =>{
+    var examples = [{input:"hello", result:"result no1"},{input:"hello2", result:"result no2"},{input:"hello3", result:"result no3"}];
+    const {rerender} = render(<Shots examples={examples} />);
+
+    const exampleOneText = screen.getByText('result no1');
+    const exampleTwoText = screen.getByText('result no2');
+    const exampleThreeText = screen.getByText('result no3');
+    var noExamples = screen.queryByText(/No examples added/i);
+
+    expect(exampleOneText).toBeInTheDocument();
+    expect(exampleTwoText).toBeInTheDocument();
+    expect(exampleThreeText).toBeInTheDocument();
+    expect(noExamples).toBeNull();
+
+    examples = [];
+    rerender(<Shots examples={examples} />);
+    noExamples = screen.queryByText(/No examples added/i);
+    expect(noExamples).toBeInTheDocument();
+  });
+});

jest.config.mjs

@@ -0,0 +1,18 @@
+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: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)