growstuff/app/javascript/components/AuthDialog.test.jsx

import {fireEvent, render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {describe, expect, it, vi} from 'vitest';

import AuthDialog from './AuthDialog';

const urls = {sign_in: '/s', sign_up: '/u', forgot_password: '/f', sign_in_page: '/si', sign_up_page: '/su', bluesky: '/b'};

function setup(pageUrls = urls) {
  render(
      <>
        <a href="/members/sign_in" data-auth-dialog="sign_in">Log in</a>
        <a href="/members/sign_up" data-auth-dialog="sign_up">Join</a>
        <a href="/members/sign_in" data-auth-dialog="bluesky">Bluesky</a>
        <a href="/about">About</a>
        <AuthDialog urls={pageUrls} site_name="Growstuff" />
      </>,
  );
}

describe('AuthDialog', () => {
  it('draws nothing to start with', () => {
    setup();
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  it('opens sign in from a sign in link', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Log in'}));
    expect(screen.getByRole('dialog', {name: 'Sign in'})).toBeInTheDocument();
  });

  it('opens sign up from a sign up link', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Join'}));
    expect(screen.getByRole('dialog', {name: 'Join Growstuff'})).toBeInTheDocument();
  });

  it('opens the Bluesky dialog from a Bluesky link', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Bluesky'}));
    expect(screen.getByRole('dialog', {name: 'Sign in with Bluesky'})).toBeInTheDocument();
  });

  it('moves from the sign in dialog to Bluesky', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Log in'}));
    await userEvent.click(screen.getByRole('button', {name: 'Continue with Bluesky'}));
    expect(screen.getByRole('dialog', {name: 'Sign in with Bluesky'})).toBeInTheDocument();
  });

  it('moves from the sign up dialog to Bluesky', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Join'}));
    await userEvent.click(screen.getByRole('button', {name: 'Continue with Bluesky'}));
    expect(screen.getByRole('dialog', {name: 'Sign in with Bluesky'})).toBeInTheDocument();
  });

  it('offers no Bluesky button when it is switched off', async () => {
    setup({...urls, bluesky: null});
    await userEvent.click(screen.getByRole('link', {name: 'Log in'}));
    expect(screen.queryByRole('button', {name: 'Continue with Bluesky'})).not.toBeInTheDocument();
  });

  it('ignores other links', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'About'}));
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  it('leaves a ctrl-click to open in a new tab', () => {
    setup();
    fireEvent.click(screen.getByRole('link', {name: 'Log in'}), {ctrlKey: true});
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  it('switches from sign in to sign up', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Log in'}));
    await userEvent.click(screen.getByRole('link', {name: 'Join free'}));
    expect(screen.getByRole('dialog', {name: 'Join Growstuff'})).toBeInTheDocument();
  });

  it('closes', async () => {
    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Log in'}));
    await userEvent.click(screen.getByRole('button', {name: 'Close'}));
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  it('closes an open offcanvas when an auth link is clicked', async () => {
    const hide = vi.fn();
    window.bootstrap = {
      Offcanvas: {
        getInstance: vi.fn(() => ({hide})),
        getOrCreateInstance: vi.fn(() => ({hide})),
      },
    };

    const offcanvas = document.createElement('div');
    offcanvas.id = 'navbarSupportedContent';
    offcanvas.className = 'offcanvas-lg offcanvas-end show';
    document.body.appendChild(offcanvas);

    setup();
    await userEvent.click(screen.getByRole('link', {name: 'Log in'}));

    expect(hide).toHaveBeenCalled();
    offcanvas.remove();
    delete window.bootstrap;
  });
});