Test

reddit-client/package.json

@@ -38,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "msw": "^0.42.3"
   }
 }

reddit-client/public/manifest.json

@@ -8,13 +8,13 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
+      "src": "logo01.svg",
+      "type": "image/svg",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
+      "src": "logo01.svg",
+      "type": "image/svg",
       "sizes": "512x512"
     }
   ],

reddit-client/src/Components/NavBar/__tests__/NavBar.test.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { screen } from '@testing-library/react';
+
+//funzione render personalizzata per includere <Provider> e poter gestire lo stato con redux
+import { render } from '../../../util/test-utils';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+import NavBar from '../NavBar';
+import searchBarReducer, { setSearchBar } from "../../../features/SearchBar/searchBarSlice";
+
+describe('NavBar component', () => {
+  test('Logo is an active link to homepage', () => {
+    render(<NavBar />);
+    //screen.debug();
+    const linkHome = screen.getByLabelText('Pagina iniziale');
+    expect(linkHome).toBeVisible();
+    expect(linkHome).toBeEnabled();
+  });
+
+  test('Search input value', () => {
+    render(<NavBar />);
+
+    const searchBox = screen.getByPlaceholderText('Cerca su Reddit');
+    expect(searchBox).toBeInTheDocument();
+    expect(searchBox).toHaveDisplayValue('');
+    expect(searchBarReducer(undefined, {})).toEqual({searchTerm: ''});
+
+    userEvent.type(searchBox, 'cow');
+    expect(searchBox).toHaveValue('cow');
+    expect(searchBarReducer({searchTerm: ''}, setSearchBar('cow'))).toEqual({searchTerm: 'cow'});
+  });
+
+  test('button search', () => {
+    render(<NavBar />);
+
+    const buttonSearch = screen.getByRole('button');
+    const aSearch = screen.getByText(/Search/);
+    expect(buttonSearch).toBeInTheDocument();
+    expect(buttonSearch).toBeEnabled();
+    expect(buttonSearch).toContainElement(aSearch);
+
+  });
+});

reddit-client/src/Components/Subreddit/Subreddit.js

@@ -19,10 +19,10 @@ export function Subreddit ({subreddit}) {
       <div className='iconSubreddit' style={{backgroundColor: color}}> 
         {icon !== "" ?       
           <img src={icon} alt=""/>
-        : <p>r/</p>
+        : <p data-testid='emptyIcon'>r/</p>
         }
       </div>
-      <p>r/{name || 'non trovato'}</p>
+      <p>r/{name}</p>
     </div>
   );
 }

reddit-client/src/Components/Subreddit/__tests__/Subreddit.test.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { screen } from '@testing-library/react';
+
+//funzione render personalizzata per includere <Provider> e poter gestire lo stato con redux
+import { render } from '../../../util/test-utils';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+import {Subreddit} from '../Subreddit';
+
+describe('Subreddit component', () => {
+    const initialState = {
+      name: "sports",
+      headerImg: "https://a.thumbs.redditmedia.com/OG0cMFwrTOQE6Gj5xW2pwTMpjkegILNnJEzHZukZTW4.png",
+      title: "Reddit Sports",
+      color: "#ff4500",
+      icon: "https://b.thumbs.redditmedia.com/V3oOhkQE_SiCz2dvI2uA7TlbcfvaIMPw2AQjtIdqMUk.png",
+      id: "2qgzy"
+    }
+
+  test('Render with prop', () => {
+    render(<Subreddit subreddit={initialState}/>);
+    //screen.debug();
+    const imgIcon = screen.getByRole('img');
+    expect(imgIcon).toBeInTheDocument();
+    expect(imgIcon).toHaveAttribute('src', expect.stringContaining(initialState.icon));
+    expect(imgIcon).toBeVisible();
+  });
+
+  test('Render without prop', () => {
+    render(<Subreddit subreddit=''/>);
+    //screen.debug();
+    const imgIcon = screen.queryByRole('img');
+    expect(imgIcon).toBeNull();
+
+    const subNameP = screen.getByText('r/example title');
+    expect(subNameP).toBeInTheDocument();
+  });
+
+  test('Render with prop and empty icon', () => {
+    initialState.icon = '';
+    render(<Subreddit subreddit={initialState}/>);
+    //screen.debug();
+    const imgIcon = screen.queryByRole('img');
+    expect(imgIcon).toBeNull();
+
+    const rIcon = screen.getByTestId('emptyIcon');
+    expect(rIcon).toBeInTheDocument();
+  });
+
+});

reddit-client/src/features/SectionSubreddits/SectionSubreddits.js

@@ -32,16 +32,16 @@ export default function SectionSubreddits() {
 
   return (
     <section className='subreddits'>
-      <button className={active && 'active'} onClick={(e) => handleClick(e)}>
+      <button className={(active && 'active') || undefined} onClick={(e) => handleClick(e)}>
         <h2>{search ? 'Subreddits include: ' + search.replace('?q=', '') : 'Subreddits'}</h2>
       </button>
-      <svg width="100%" height="10px" className={active && 'active'}>
+      <svg width="100%" height="10px" className={(active && 'active') || undefined}>
         <line x1="0" y1="5" x2="900" y2="5"/>
       </svg>
-      <ul className={active && 'active'}>
+      <ul className={(active && 'active') || undefined}>
         {subreddits.length > 0 ? subreddits.map((subreddit) => {
           return (
-          <li>
+          <li key={subreddit.id}>
             <a href={'/r/'+ subreddit.name}>
             <Subreddit 
               subreddit={subreddit} 

reddit-client/src/mocks/handlers.js

@@ -0,0 +1,10 @@
+import { rest } from 'msw';
+
+export const handlers = [
+  rest.get('/', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({key: 'value'})
+    )
+  }),
+];

reddit-client/src/mocks/server.js

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

reddit-client/src/setupTests.js

@@ -3,3 +3,8 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { server } from './mocks/server';
+
+beforeAll(() => server.listen()); //simulano l'api prima di tutti i test
+afterEach(() => server.resetHandlers());// ripristina gli handlers aggiunti successivamente
+afterAll(() => server.close());// pulisce al termine dei test

reddit-client/src/util/test-utils.js

@@ -0,0 +1,40 @@
+/*
+La funzione di React Testing Library render accetta un albero di elementi React 
+e ne esegue il rendering. Proprio come in una vera app, qualsiasi componente 
+connesso a Redux avrà bisogno di un componente React-Redux <Provider> avvolto 
+attorno a sé , con un vero negozio Redux impostato e fornito.
+
+Inoltre, il codice di test dovrebbe creare un'istanza del negozio Redux separata 
+per ogni test, invece di riutilizzare la stessa istanza del negozio e reimpostarne 
+lo stato . Ciò garantisce che i valori non perdano accidentalmente tra i test.
+
+Invece di copiare e incollare la stessa creazione e Provider configurazione 
+del negozio in ogni test, possiamo utilizzare l' wrapper opzione nella render 
+funzione ed esportare la nostra funzione personalizzata render che crea un nuovo 
+negozio Redux ed esegue il rendering di un file <Provider> 
+*/
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
+//import { configureStore } from '@reduxjs/toolkit'
+//sostituito con
+import { store } from '../Components/App/store';
+
+const AllTheProviders = ({children}) => {
+  return (
+    <Provider store={store}>
+      {children}
+    </Provider>
+  )
+}
+
+const customRender = (ui, options) =>
+  render(ui, {wrapper: AllTheProviders, ...options})
+
+// re-export everything
+export * from '@testing-library/react'
+
+// override render method
+export {customRender as render}