Sprint 3 unit tests

e-commerce-app/package.json

@@ -14,16 +14,18 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "redux-thunk": "^2.4.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --coverage",
+    "test": "react-scripts test --coverage --watchAll",
     "eject": "react-scripts eject",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
@@ -59,10 +61,13 @@
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
+    "@types/redux-mock-store": "^1.0.3",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^5.0.0",
     "husky": "^8.0.3",
-    "prettier": "^3.0.0"
+    "msw": "^1.3.1",
+    "prettier": "^3.0.0",
+    "redux-mock-store": "^1.5.4"
   }
 }

e-commerce-app/src/components/LoadingProgress/LoadingProgress.tsx

@@ -6,7 +6,12 @@ import styles from './LoadingProgress.module.scss';
 const LoadingProgress = (): JSX.Element => {
   return (
     <Box display="flex" justifyContent="center" alignItems="center" className={styles.box}>
-      <CircularProgress size={200} thickness={10} />
+      <CircularProgress
+        size={200}
+        thickness={10}
+        style={{ width: 200, height: 200, strokeWidth: 10 }}
+        data-testid="circular-progress"
+      />
       <Typography position="absolute" variant="h4">
         Loading...
       </Typography>

e-commerce-app/src/tests/AddressItem.test.tsx

@@ -0,0 +1,90 @@
+import { render, fireEvent } from '@testing-library/react';
+import { AddressItem } from '../components/AddressItem/AddressItem';
+
+describe('AddressItem', () => {
+  const address = {
+    id: 1,
+    name: 'Test Address',
+    checked: false,
+    street: 'Test Street',
+    city: 'Test City',
+    country: 'Test Country',
+    postcode: '12345',
+  };
+
+  const addressData = {
+    streetName: 'Test Street',
+    city: 'Test City',
+    country: 'Test Country',
+    postalCode: '12345',
+  };
+
+  it('renders address details correctly', () => {
+    const { getByText } = render(
+      <AddressItem
+        todo={address}
+        onDeleteAddr={() => {}}
+        onCheckAddr={() => {}}
+        onEdit={() => {}}
+        address={addressData}
+      />,
+    );
+
+    expect(getByText('Test Address')).toBeInTheDocument();
+    expect(getByText('Test Street, Test City, Test Country, 12345')).toBeInTheDocument();
+  });
+
+  it('calls onDeleteAddr when delete button is clicked', () => {
+    const onDeleteAddr = jest.fn();
+
+    const { getByLabelText } = render(
+      <AddressItem
+        todo={address}
+        onDeleteAddr={onDeleteAddr}
+        onCheckAddr={() => {}}
+        onEdit={() => {}}
+        address={addressData}
+      />,
+    );
+
+    fireEvent.click(getByLabelText('delete'));
+
+    expect(onDeleteAddr).toHaveBeenCalledWith(1);
+  });
+
+  it('calls onEdit when edit button is clicked', () => {
+    const onEdit = jest.fn();
+
+    const { getByLabelText } = render(
+      <AddressItem
+        todo={address}
+        onDeleteAddr={() => {}}
+        onCheckAddr={() => {}}
+        onEdit={onEdit}
+        address={addressData}
+      />,
+    );
+
+    fireEvent.click(getByLabelText('edit'));
+
+    expect(onEdit).toHaveBeenCalledWith(1);
+  });
+
+  it('calls onCheckAddr when the address name is clicked', () => {
+    const onCheckAddr = jest.fn();
+
+    const { getByText } = render(
+      <AddressItem
+        todo={address}
+        onDeleteAddr={() => {}}
+        onCheckAddr={onCheckAddr}
+        onEdit={() => {}}
+        address={addressData}
+      />,
+    );
+
+    fireEvent.click(getByText('Test Address'));
+
+    expect(onCheckAddr).toHaveBeenCalledWith(1);
+  });
+});

e-commerce-app/src/tests/AddressPanel.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { AddressPanel } from '../components/Panel/Panel';
+
+const { getByLabelText } = screen;
+
+describe('AddressPanel', () => {
+  it('renders with default values and ADD button', () => {
+    const onAddAddress = jest.fn();
+
+    const { getByLabelText, getByRole } = render(
+      <AddressPanel mode="add" onAddAddress={onAddAddress} />,
+    );
+
+    expect(getByLabelText('Address name')).toBeInTheDocument();
+    expect(getByLabelText('street')).toBeInTheDocument();
+    expect(getByLabelText('city')).toBeInTheDocument();
+    expect(getByLabelText('country')).toBeInTheDocument();
+    expect(getByLabelText('postcode')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'ADD' })).toBeInTheDocument();
+  });
+
+  it('calls onAddAddress when ADD button is clicked', () => {
+    const onAddAddress = jest.fn();
+    const { getByRole } = render(<AddressPanel mode="add" onAddAddress={onAddAddress} />);
+
+    const addButton = getByRole('button', { name: 'ADD' });
+
+    fireEvent.change(getByLabelText('Address name'), { target: { value: 'Test Address' } });
+    fireEvent.change(getByLabelText('street'), { target: { value: '123 Test St' } });
+    fireEvent.change(getByLabelText('city'), { target: { value: 'Test City' } });
+    fireEvent.change(getByLabelText('country'), { target: { value: 'Test Country' } });
+    fireEvent.change(getByLabelText('postcode'), { target: { value: '12345' } });
+
+    fireEvent.click(addButton);
+
+    expect(onAddAddress).toHaveBeenCalledWith({
+      name: 'Test Address',
+      street: '123 Test St',
+      city: 'Test City',
+      country: 'Test Country',
+      postcode: '12345',
+    });
+  });
+});

e-commerce-app/src/tests/BoardList.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import { BoardList } from '../components/AddressList/AddressList';
+
+jest.mock('../components/Panel/Panel', () => ({
+  AddressPanel: jest.fn(() => <div data-testid="mocked-address-panel" />),
+}));
+
+const sampleTodoList = [
+  {
+    id: 1,
+    name: 'Address 1',
+    street: 'Street 1',
+    city: 'City 1',
+    country: 'Country 1',
+    postcode: '12345',
+    checked: false,
+  },
+  {
+    id: 2,
+    name: 'Address 2',
+    street: 'Street 2',
+    city: 'City 2',
+    country: 'Country 2',
+    postcode: '67890',
+    checked: false,
+  },
+];
+
+const sampleAddress = {
+  streetName: 'Street',
+  postalCode: '54321',
+  city: 'Sample City',
+  country: 'Sample Country',
+};
+
+test('BoardList renders correctly', () => {
+  const onDeleteAddr = jest.fn();
+  const onCheckAddr = jest.fn();
+  const onEdit = jest.fn();
+  const onChangeAddr = jest.fn();
+
+  render(
+    <BoardList
+      editTodoId={null}
+      todoList={sampleTodoList}
+      onDeleteAddr={onDeleteAddr}
+      onCheckAddr={onCheckAddr}
+      onEdit={onEdit}
+      onChangeAddr={onChangeAddr}
+      address={sampleAddress}
+    />,
+  );
+
+  expect(screen.queryByTestId('mocked-address-panel')).toBeNull();
+
+  expect(screen.getByText('Address 1')).toBeInTheDocument();
+  expect(screen.getByText('Address 2')).toBeInTheDocument();
+});

e-commerce-app/src/tests/ErrorPage.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ErrorPage } from '../pages/ErrorPage/ErrorPage';
+
+jest.mock('react-router-dom', () => ({
+  Link: ({ to, children }: { to: string; children: React.ReactNode }) => (
+    <a href={to}>{children}</a>
+  ),
+}));
+test('renders ErrorPage component', () => {
+  const { getByText } = render(<ErrorPage />);
+
+  const textElement = getByText(/Sorry, the page you’re looking for doesn’t exist./i);
+  expect(textElement).toBeInTheDocument();
+});

e-commerce-app/src/tests/LoadingProgress.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import LoadingProgress from '../components/LoadingProgress/LoadingProgress';
+
+test('renders loading progress component', () => {
+  const { getByText, getByTestId } = render(<LoadingProgress />);
+
+  const loadingText = getByText('Loading...');
+  const circularProgress = getByTestId('circular-progress');
+
+  expect(loadingText).toBeInTheDocument();
+
+  const styles = window.getComputedStyle(circularProgress);
+
+  expect(styles.getPropertyValue('width')).toBe('200px');
+  expect(styles.getPropertyValue('height')).toBe('200px');
+  expect(styles.getPropertyValue('stroke-width')).toBe('10');
+});

e-commerce-app/src/tests/LogoutPage.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { LogoutPage } from '../pages/LogoutPage/LogoutPage';
+import { Provider } from 'react-redux';
+import { store } from '../store/store';
+
+test('LogoutPage component renders without errors', async () => {
+  const { container } = render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <LogoutPage />
+      </MemoryRouter>
+    </Provider>,
+  );
+
+  await waitFor(() => {
+    expect(container.querySelector('.MuiCircularProgress-root')).toBeInTheDocument();
+  });
+});

e-commerce-app/src/tests/MenuLinks.test.tsx

@@ -0,0 +1,29 @@
+import { render, fireEvent } from '@testing-library/react';
+import MenuLinks from '../components/MenuLinks/MenuLinks';
+
+jest.mock('react-router-dom', () => ({
+  useNavigate: jest.fn(),
+}));
+
+describe('MenuLinks', () => {
+  it('calls the navigate function when a link is clicked', () => {
+    const navigate = jest.fn();
+
+    const navigation = {
+      Home: '/',
+      About: '/about',
+    };
+
+    jest.spyOn(require('react-router-dom'), 'useNavigate').mockReturnValue(navigate);
+
+    const { getByText } = render(<MenuLinks navigation={navigation} handler={() => {}} />);
+
+    fireEvent.click(getByText('Home'));
+
+    expect(navigate).toHaveBeenCalledWith('/');
+
+    fireEvent.click(getByText('About'));
+
+    expect(navigate).toHaveBeenCalledWith('/about');
+  });
+});

e-commerce-app/src/tests/NavLinks.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import NavLinks from '../components/NavLinks/NavLinks';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('NavLinks', () => {
+  it('navigates to the correct path when a button is clicked', () => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <NavLinks />
+      </MemoryRouter>
+    );
+
+    const homeButton = getByText(/home/i);
+
+    fireEvent.click(homeButton);
+  });
+});

e-commerce-app/src/tests/ProductsFilterForm.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { store } from '../store/store';
+import ProductsFilterForm from '../components/ProductsFilterForm/ProductsFilterForm';
+
+describe('ProductsFilterForm', () => {
+  it('should render without errors', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ProductsFilterForm />
+      </Provider>,
+    );
+    expect(container).toBeInTheDocument();
+  });
+});