import { render, screen, within, fireEvent, waitFor, waitForElementToBeRemoved, } from '@testing-library/react' import EmailsSection from '../../../../../../frontend/js/features/settings/components/emails-section' import { expect } from 'chai' import fetchMock from 'fetch-mock' import { UserEmailData } from '../../../../../../types/user-email' const confirmedUserData: UserEmailData = { confirmedAt: '2022-03-10T10:59:44.139Z', email: 'bar@overleaf.com', default: false, } const unconfirmedUserData: UserEmailData = { email: 'baz@overleaf.com', default: false, } const professionalUserData: UserEmailData = { affiliation: { cachedConfirmedAt: null, cachedPastReconfirmDate: false, cachedReconfirmedAt: null, department: 'Art History', institution: { commonsAccount: false, confirmed: true, id: 1, isUniversity: false, name: 'Overleaf', ssoEnabled: false, ssoBeta: false, }, inReconfirmNotificationPeriod: false, inferred: false, licence: 'pro_plus', pastReconfirmDate: false, portal: { slug: '', templates_count: 1 }, role: 'Reader', }, confirmedAt: '2022-03-09T10:59:44.139Z', email: 'foo@overleaf.com', default: true, } const fakeUsersData = [ { ...confirmedUserData }, { ...unconfirmedUserData }, { ...professionalUserData }, ] describe('', function () { beforeEach(function () { window.metaAttributesCache.set('ol-ExposedSettings', { hasAffiliationsFeature: true, }) fetchMock.reset() }) afterEach(function () { window.metaAttributesCache = new Map() fetchMock.reset() }) it('renders translated heading', function () { render() screen.getByRole('heading', { name: /emails and affiliations/i }) }) it('renders translated description', function () { render() screen.getByText(/add additional email addresses/i) screen.getByText(/to change your primary email/i) }) it('renders a loading message when loading', async function () { render() await screen.findByText(/loading/i) }) it('renders an error message and hides loading message on error', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', 500) render() await screen.findByText( /an error has occurred while performing your request/i ) expect(screen.queryByText(/loading/i)).to.be.null }) it('renders user emails', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', fakeUsersData) render() await waitFor(() => { fakeUsersData.forEach(userData => { screen.getByText(new RegExp(userData.email, 'i')) }) }) }) it('renders primary status', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [professionalUserData]) render() await screen.findByText(`${professionalUserData.email} (primary)`) }) it('shows confirmation status for unconfirmed users', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [unconfirmedUserData]) render() await screen.findByText(/please check your inbox/i) }) it('hides confirmation status for confirmed users', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [confirmedUserData]) render() await waitForElementToBeRemoved(() => screen.getByText(/loading/i)) expect(screen.queryByText(/please check your inbox/i)).to.be.null }) it('renders resend link', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [unconfirmedUserData]) render() await screen.findByRole('button', { name: /resend confirmation email/i }) }) it('renders professional label', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [professionalUserData]) render() const node = await screen.findByText(professionalUserData.email, { exact: false, }) expect(within(node).getByText(/professional/i)).to.exist }) it('shows loader when resending email', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [unconfirmedUserData]) render() await waitForElementToBeRemoved(() => screen.getByText(/loading/i)) fetchMock.post('/user/emails/resend_confirmation', 200) const button = screen.getByRole('button', { name: /resend confirmation email/i, }) fireEvent.click(button) expect( screen.queryByRole('button', { name: /resend confirmation email/i, }) ).to.be.null await waitForElementToBeRemoved(() => screen.getByText(/sending/i)) expect( screen.queryByText(/an error has occurred while performing your request/i) ).to.be.null await screen.findByRole('button', { name: /resend confirmation email/i, }) }) it('shows error when resending email fails', async function () { fetchMock.get('/user/emails?ensureAffiliation=true', [unconfirmedUserData]) render() await waitForElementToBeRemoved(() => screen.getByText(/loading/i)) fetchMock.post('/user/emails/resend_confirmation', 503) const button = screen.getByRole('button', { name: /resend confirmation email/i, }) fireEvent.click(button) expect( screen.queryByRole('button', { name: /resend confirmation email/i, }) ).to.be.null await waitForElementToBeRemoved(() => screen.getByText(/sending/i)) screen.getByText(/sorry, something went wrong/i) screen.getByRole('button', { name: /resend confirmation email/i }) }) })