import React from 'react';
import {
  render,
  fireEvent,
  screen,
  waitForElementToBeRemoved,
} from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import axiosMock from 'axios';
import NavBar from '../components/NavBar/NavBar';

it('logouts successfully', async () => {
  /* There is a bug related to localStorage testing. 
  Hence we use this method, but changing prototype is not recommeded */

  /* localStorage Mock* */
  const localStorageMock = {
    getItem: jest.fn(),
    setItem: jest.fn(),
    removeItem: jest.fn(),
  };
  Object.setPrototypeOf(global.localStorage, localStorageMock);

  /* axios Mock resolved value */
  axiosMock.post.mockResolvedValue({
    data: {},
  });
  const setMobileOpen = jest.fn();
  const setTabletOpen = jest.fn();
  const mobileOpen = false;
  const tabletOpen = false;

  render(
    <NavBar
      mobileOpen={mobileOpen}
      setMobileOpen={setMobileOpen}
      tabletOpen={tabletOpen}
      setTabletOpen={setTabletOpen}
    />,
    {
      wrapper: MemoryRouter,
    }
  );

  const logout = screen.getByRole('button', { name: /logout/i });

  fireEvent.click(logout);
  const agree = await screen.findByRole('button', { name: /^agree/i });
  fireEvent.click(agree);

  await waitForElementToBeRemoved(() =>
    screen.getByText(/Are you sure you wish to logout?/i)
  );

  expect(axiosMock.post).toHaveBeenCalledTimes(1);
  expect(localStorage.removeItem).toBeCalledWith('token');
  expect(localStorage.removeItem).toBeCalledWith('isStaff');
});