overleaf/services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx
Timothée Alby cf2dfc6bf1 Merge pull request #7593 from overleaf/ta-settings-migration
[SettingsPage] Integration Branch

GitOrigin-RevId: 5a3c26b2a02d716c4ae3981e3f08b811ae307725
2022-04-25 08:05:12 +00:00

158 lines
4.4 KiB
TypeScript

import {
render,
screen,
fireEvent,
waitForElementToBeRemoved,
} from '@testing-library/react'
import { expect } from 'chai'
import { UserEmailData } from '../../../../../../types/user-email'
import fetchMock from 'fetch-mock'
import InstitutionAndRole from '../../../../../../frontend/js/features/settings/components/emails/institution-and-role'
import { UserEmailsProvider } from '../../../../../../frontend/js/features/settings/context/user-email-context'
import EmailsSection from '../../../../../../frontend/js/features/settings/components/emails-section'
const userData1: UserEmailData = {
affiliation: {
cachedConfirmedAt: null,
cachedPastReconfirmDate: false,
cachedReconfirmedAt: null,
department: null,
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: null,
},
confirmedAt: '2022-03-09T10:59:44.139Z',
email: 'foo@overleaf.com',
default: true,
}
const userData2: 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',
},
email: 'baz@overleaf.com',
default: false,
}
describe('user role and institution', function () {
beforeEach(function () {
window.metaAttributesCache = new Map()
window.metaAttributesCache.set('ol-ExposedSettings', {
hasAffiliationsFeature: true,
})
fetchMock.reset()
})
afterEach(function () {
window.metaAttributesCache = new Map()
fetchMock.reset()
})
it('renders affiliation name with add role/department button', function () {
const userEmailData = userData1
render(
<UserEmailsProvider>
<InstitutionAndRole userEmailData={userEmailData} />
</UserEmailsProvider>
)
screen.getByText(userEmailData.affiliation.institution.name, {
exact: false,
})
screen.getByRole('button', { name: /add role and department/i })
expect(screen.queryByRole('button', { name: /change/i })).to.not.exist
})
it('renders affiliation name, role and department with change button', function () {
const userEmailData = userData2
render(
<UserEmailsProvider>
<InstitutionAndRole userEmailData={userEmailData} />
</UserEmailsProvider>
)
screen.getByText(userEmailData.affiliation.institution.name, {
exact: false,
})
screen.getByText(userEmailData.affiliation.department, { exact: false })
screen.getByText(userEmailData.affiliation.role, { exact: false })
screen.getByRole('button', { name: /change/i })
expect(screen.queryByRole('button', { name: /add role and department/i }))
.to.not.exist
})
it('adds new role and department', async function () {
fetchMock
.get('/user/emails?ensureAffiliation=true', [userData1])
.post('/user/emails/endorse', 200)
render(<EmailsSection />)
const addBtn = await screen.findByRole('button', {
name: /add role and department/i,
})
fireEvent.click(addBtn)
const submitBtn = screen.getByRole('button', {
name: /save/i,
}) as HTMLButtonElement
expect(submitBtn.disabled).to.be.true
const roleValue = 'Dummy role'
const departmentValue = 'Dummy department'
const roleInput = screen.getByPlaceholderText(/role/i)
fireEvent.change(roleInput, {
target: { value: roleValue },
})
expect(submitBtn.disabled).to.be.true
const departmentInput = screen.getByPlaceholderText(/department/i)
fireEvent.change(departmentInput, {
target: { value: departmentValue },
})
expect(submitBtn.disabled).to.be.false
fireEvent.click(submitBtn)
expect(submitBtn.disabled).to.be.true
await waitForElementToBeRemoved(() =>
screen.getByRole('button', { name: /saving/i })
)
screen.getByText(roleValue, { exact: false })
screen.getByText(departmentValue, { exact: false })
})
})