overleaf/services/web/test/frontend/features/settings/components/leave-section.test.tsx

import {
  fireEvent,
  screen,
  waitForElementToBeRemoved,
  render,
} from '@testing-library/react'

import LeaveSection from '../../../../../frontend/js/features/settings/components/leave-section'

describe('<LeaveSection />', function () {
  it('opens modal', async function () {
    render(<LeaveSection />)

    const button = screen.getByRole('button', {
      name: 'Delete your account',
    })

    fireEvent.click(button)
    await screen.findByText('Delete Account')
  })

  it('closes modal', async function () {
    render(<LeaveSection />)
    fireEvent.click(
      screen.getByRole('button', {
        name: 'Delete your account',
      })
    )

    const cancelButton = screen.getByRole('button', {
      name: 'Close',
    })

    fireEvent.click(cancelButton)

    await waitForElementToBeRemoved(() => screen.getByText('Delete Account'))
  })
})