e911-modal.test.tsx

import React from 'react';
import {render, screen, fireEvent, waitFor} from '@testing-library/react';
import '@testing-library/jest-dom';
import E911Modal from '../../../../src/components/StationLogin/E911Modal/E911Modal';
import {E911ModalLabels} from '../../../../src/components/StationLogin/E911Modal/e911-modal.constants';

jest.mock('@webex/cc-ui-logging', () => ({
  withMetrics: (component: React.ComponentType<Record<string, unknown>>) => component,
}));

describe('E911Modal', () => {
  const defaultProps = {
    isOpen: true,
    onSaveAndContinue: jest.fn(),
    onCancel: jest.fn(),
  };

  beforeEach(() => {
    jest.clearAllMocks();
    HTMLDialogElement.prototype.showModal = jest.fn();
    HTMLDialogElement.prototype.close = jest.fn();
  });

  it('should render the modal when isOpen is true', () => {
    render(<E911Modal {...defaultProps} />);
    expect(screen.getByTestId('e911-modal')).toBeInTheDocument();
  });

  it('should display the modal title', () => {
    render(<E911Modal {...defaultProps} />);
    expect(screen.getByText(E911ModalLabels.TITLE)).toBeInTheDocument();
  });

  it('should display the warning message', () => {
    render(<E911Modal {...defaultProps} />);
    expect(screen.getByText(E911ModalLabels.WARNING_MESSAGE)).toBeInTheDocument();
  });

  it('should display the dialing section', () => {
    render(<E911Modal {...defaultProps} />);
    expect(screen.getByText(E911ModalLabels.DIALING_TITLE)).toBeInTheDocument();
    expect(screen.getByText(E911ModalLabels.DIALING_MESSAGE)).toBeInTheDocument();
  });

  it('should display the checkbox with label', () => {
    render(<E911Modal {...defaultProps} />);
    expect(screen.getByTestId('e911-checkbox')).toBeInTheDocument();
  });

  it('should not call onSaveAndContinue when button clicked without checkbox checked', () => {
    render(<E911Modal {...defaultProps} />);
    const saveButton = screen.getByTestId('e911-save-button');

    fireEvent.click(saveButton);

    // Button click should not trigger callback when checkbox is unchecked
    expect(defaultProps.onSaveAndContinue).not.toHaveBeenCalled();
  });

  it('should enable Save & Continue button when checkbox is checked', async () => {
    render(<E911Modal {...defaultProps} />);
    const checkbox = screen.getByTestId('e911-checkbox');

    fireEvent(checkbox, new CustomEvent('change', {detail: {checked: true}}));

    await waitFor(() => {
      const saveButton = screen.getByTestId('e911-save-button');
      expect(saveButton).not.toBeDisabled();
    });
  });

  it('should call onCancel when Cancel button is clicked', () => {
    render(<E911Modal {...defaultProps} />);
    const cancelButton = screen.getByTestId('e911-cancel-button');

    fireEvent.click(cancelButton);

    expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
  });

  it('should call onCancel when close button is clicked', () => {
    render(<E911Modal {...defaultProps} />);
    const closeButton = screen.getByTestId('e911-close-button');

    fireEvent.click(closeButton);

    expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
  });

  it('should call onSaveAndContinue when Save & Continue is clicked with checkbox checked', async () => {
    render(<E911Modal {...defaultProps} />);
    const checkbox = screen.getByTestId('e911-checkbox');

    fireEvent(checkbox, new CustomEvent('change', {detail: {checked: true}}));

    await waitFor(() => {
      const saveButton = screen.getByTestId('e911-save-button');
      expect(saveButton).not.toBeDisabled();
    });

    const saveButton = screen.getByTestId('e911-save-button');
    fireEvent.click(saveButton);

    expect(defaultProps.onSaveAndContinue).toHaveBeenCalledTimes(1);
  });

  it('should call showModal when isOpen changes to true', () => {
    const {rerender} = render(<E911Modal {...defaultProps} isOpen={false} />);

    rerender(<E911Modal {...defaultProps} isOpen={true} />);

    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
  });

  it('should reset checkbox state when modal closes', () => {
    const {rerender} = render(<E911Modal {...defaultProps} isOpen={true} />);

    rerender(<E911Modal {...defaultProps} isOpen={false} />);

    // Modal should attempt to close - the actual close behavior depends on dialog.open state
    expect(screen.getByTestId('e911-modal')).toBeInTheDocument();
  });

  it('should display help link', () => {
    render(<E911Modal {...defaultProps} />);
    expect(screen.getByTestId('e911-help-link')).toBeInTheDocument();
    expect(screen.getByText(E911ModalLabels.HELP_LINK_TEXT)).toBeInTheDocument();
  });
});