datajunction-ui/src/app/pages/LoginPage/__tests__/index.test.jsx

DataJunction UI

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import { LoginPage } from '../index';

describe('LoginPage', () => {
  const original = window.location;

  beforeAll(() => {
    Object.defineProperty(window, 'location', {
      configurable: true,
      value: { reload: vi.fn() },
    });
  });

  afterAll(() => {
    Object.defineProperty(window, 'location', {
      configurable: true,
      value: original,
    });
  });

  beforeEach(() => {
    fetch.resetMocks();
  });

  afterEach(() => {
    vi.clearAllMocks();
  });

  it('displays error messages when fields are empty and form is submitted', async () => {
    const { getByText, queryAllByText } = render(<LoginPage />);
    fireEvent.click(getByText('Login'));

    await waitFor(() => {
      expect(getByText('DataJunction')).toBeInTheDocument();
      expect(getByText('Username is required')).toBeInTheDocument();
      expect(getByText('Password is required')).toBeInTheDocument();
    });
  });

  it('calls fetch with correct data on login', async () => {
    const username = 'testUser';
    const password = 'testPassword';

    const { getByText, getByPlaceholderText } = render(<LoginPage />);
    fireEvent.change(getByPlaceholderText('Username'), {
      target: { value: username },
    });
    fireEvent.change(getByPlaceholderText('Password'), {
      target: { value: password },
    });
    fireEvent.click(getByText('Login'));

    await waitFor(() => {
      expect(fetch).toHaveBeenCalledWith(
        `${process.env.REACT_APP_DJ_URL}/basic/login/`,
        expect.objectContaining({
          method: 'POST',
          body: expect.any(FormData),
          credentials: 'include',
        }),
      );
      expect(window.location.reload).toHaveBeenCalled();
    });
  });

  it('calls fetch with correct data on signup', async () => {
    const email = 'testEmail@testEmail.com';
    const username = 'testUser';
    const password = 'testPassword';

    const { getByText, getByPlaceholderText } = render(<LoginPage />);
    fireEvent.click(getByText('Sign Up'));
    fireEvent.change(getByPlaceholderText('Email'), {
      target: { value: email },
    });
    fireEvent.change(getByPlaceholderText('Username'), {
      target: { value: username },
    });
    fireEvent.change(getByPlaceholderText('Password'), {
      target: { value: password },
    });
    fireEvent.click(getByText('Sign Up'));

    await waitFor(() => {
      expect(fetch).toHaveBeenCalledWith(
        `${process.env.REACT_APP_DJ_URL}/basic/user/`,
        expect.objectContaining({
          method: 'POST',
          body: expect.any(FormData),
          credentials: 'include',
        }),
      );
      expect(window.location.reload).toHaveBeenCalled();
    });
  });
});