School/Anul 2/Semestrul 2/MPP/Silk Road/Silk Road Web/tests/DrugForm.test.tsx

import { expect, test, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import drugs from '../src/constants/mock_data';
import React from 'react';
import routes from '../src/constants/routes';
import DrugFrom from '../src/components/Shared/DrugForm';
import axios from 'axios';
import Drug from '../src/interfaces/Drug';

const mockedUseNavigate = vi.fn(() => {
  return (path: string) => {
    return routes[path];
  };
});
vi.mock('react-router-dom', async () => {
  const mod = await vi.importActual<typeof import('react-router-dom')>(
    'react-router-dom'
  );
  return {
    ...mod,
    useNavigate: () => mockedUseNavigate
  };
});

vi.mock('react-redux', async () => {
  const mod = await vi.importActual<typeof import('react-redux')>(
    'react-redux'
  );
  return {
    ...mod,
    useDispatch: () => vi.fn()
  };
});

test('DrugForm renders correctly - Empty', () => {
  render(<DrugFrom />);
  expect(screen.getByTitle('Name')).toBeTruthy();
  expect(screen.getByTitle('Stock')).toBeTruthy();
  expect(screen.getByTitle('Price')).toBeTruthy();

  expect(
    screen.getByTitle('Name').getElementsByTagName('input')[0].value
  ).not.toBeTruthy();
  expect(screen.getByTitle('Stock').getElementsByTagName('input')[0].value).eq(
    '0'
  );
  expect(screen.getByTitle('Price').getElementsByTagName('input')[0].value).eq(
    '0'
  );
});

test('DrugForm renders correctly - Update', () => {
  render(<DrugFrom updateDrug={drugs[0]} />);
  expect(screen.getByTitle('Name')).toBeTruthy();
  expect(screen.getByTitle('Stock')).toBeTruthy();
  expect(screen.getByTitle('Price')).toBeTruthy();

  expect(screen.getByTitle('Name').getElementsByTagName('input')[0].value).eq(
    drugs[0].name
  );
  expect(screen.getByTitle('Stock').getElementsByTagName('input')[0].value).eq(
    drugs[0].stock.toString()
  );
  expect(screen.getByTitle('Price').getElementsByTagName('input')[0].value).eq(
    drugs[0].price.toString()
  );
});

test('DrugForm renders correctly - Create', () => {
  render(<DrugFrom />);
  expect(drugs.length).eq(16);
  fireEvent.change(screen.getByTitle('Name').getElementsByTagName('input')[0], {
    target: { value: 'Test' }
  });
  fireEvent.change(
    screen.getByTitle('Stock').getElementsByTagName('input')[0],
    {
      target: { value: '10' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Price').getElementsByTagName('input')[0],
    {
      target: { value: '100' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Manufacturer').getElementsByTagName('input')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Description').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Side Effects').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Interactions').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Dosage').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Contraindications').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Warnings').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Storage').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Pregnancy').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Breastfeeding').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  fireEvent.change(
    screen.getByTitle('Overdose').getElementsByTagName('textarea')[0],
    {
      target: { value: 'Test' }
    }
  );
  vi.spyOn(axios, 'post').mockImplementation((url: string, data?: unknown) => {
    drugs.push(data as Drug);
    return Promise.resolve({ data: data });
  });
  fireEvent.click(screen.getByText('Submit'));
  expect(drugs.length).eq(17);
  expect(drugs[16].name).eq('Test');
});

test('DrugForm renders correctly - Update', () => {
  render(<DrugFrom updateDrug={drugs[0]} />);
  expect(screen.getByTitle('Name')).toBeTruthy();
  expect(screen.getByTitle('Stock')).toBeTruthy();
  expect(screen.getByTitle('Price')).toBeTruthy();

  expect(screen.getByTitle('Name').getElementsByTagName('input')[0].value).eq(
    drugs[0].name
  );

  fireEvent.change(screen.getByTitle('Name').getElementsByTagName('input')[0], {
    target: { value: 'cox' }
  });
  vi.spyOn(axios, 'put').mockImplementation((url: string, data?: unknown) => {
    const index = drugs.findIndex((d) => d.id === (data as Drug).id);
    drugs[index] = data as Drug;
    return Promise.resolve({ data: data });
  });
  fireEvent.click(screen.getByText('Submit'));
  expect(drugs[0].name).eq('cox');
});