q-blog/tests/features/auth/AuthenticateButton.test.tsx

import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { Provider } from 'react-redux';
import { store } from '@/state/store';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { MemoryRouter } from 'react-router-dom';
import NavBar from '@/components/layout/Navbar/Navbar';
import { render, screen, fireEvent } from '@testing-library/react';

describe('AuthenticateButton — loading state', () => {
  it('disables and shows spinner when authStatus is loading; ignores clicks', () => {
    const onAuth = vi.fn();
    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter>
            <NavBar
              isAuthenticated={false}
              hasBlog={false}
              userName={''}
              userAvatar={''}
              blog={null}
              authenticate={onAuth}
              hasAttemptedToFetchBlogInitial={false}
              allNames={[]}
              onSwitchActiveName={() => {}}
              userBlogs={[]}
              onSelectBlog={() => {}}
              authStatus={'loading'}
              namesStatus={'idle'}
            />
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );

    const btn = screen.getByRole('button', { name: /Authenticating…/i });
    expect(btn).toBeDisabled();
    // Click should have no effect
    fireEvent.click(btn);
    expect(onAuth).not.toHaveBeenCalled();
  });
});