Merge pull request #7765 from overleaf/ii-add-email-ui-affiliating-with-existing-institution

Add email with existing and non existing institution GitOrigin-RevId: 331bc06f0ea289a82b403a910491e233f4eda4bb
2026-11-15 06:33:55 +01:00 · 2022-04-28 08:03:16 +00:00
parent f0ac0f3e7a
commit e5051bcd1d
12 changed files with 963 additions and 12 deletions
@@ -4,6 +4,7 @@ import {
  fireEvent,
  waitForElementToBeRemoved,
 } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import EmailsSection from '../../../../../../frontend/js/features/settings/components/emails-section'
 import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
@@ -19,7 +20,7 @@ const userEmailData: UserEmailData = {
      commonsAccount: false,
      confirmed: true,
      id: 1,
-      isUniversity: false,
+      isUniversity: true,
      name: 'Overleaf',
      ssoEnabled: false,
      ssoBeta: false,
@@ -129,7 +130,7 @@ describe('<EmailsSection />', function () {
      .get('/user/emails?ensureAffiliation=true', [])
      .post('/user/emails', 500)

-    const addAnotherEmailBtn = await screen.findByRole('button', {
+    const addAnotherEmailBtn = screen.getByRole('button', {
      name: /add another email/i,
    })

@@ -156,4 +157,185 @@ describe('<EmailsSection />', function () {
    expect(submitBtn).to.not.be.null
    expect(submitBtn.disabled).to.be.false
  })
+
+  it('adds new email address with existing institution', async function () {
+    const country = 'Germany'
+    fetchMock.get('/user/emails?ensureAffiliation=true', [])
+    render(<EmailsSection />)
+
+    await fetchMock.flush(true)
+    fetchMock.reset()
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /add another email/i,
+      })
+    )
+
+    await userEvent.type(screen.getByLabelText(/email/i), userEmailData.email)
+
+    await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
+
+    const universityInput = screen.getByRole('textbox', {
+      name: /university/i,
+    }) as HTMLInputElement
+
+    expect(universityInput.disabled).to.be.true
+
+    fetchMock.get(/\/institutions\/list/, [
+      {
+        id: userEmailData.affiliation.institution.id,
+        name: userEmailData.affiliation.institution.name,
+        country_code: 'de',
+        departments: [],
+      },
+    ])
+
+    // Select the country from dropdown
+    await userEvent.type(
+      screen.getByRole('textbox', {
+        name: /country/i,
+      }),
+      country
+    )
+    await userEvent.click(screen.getByText(country))
+
+    expect(universityInput.disabled).to.be.false
+
+    await fetchMock.flush(true)
+    fetchMock.reset()
+
+    // Select the university from dropdown
+    await userEvent.click(universityInput)
+    await userEvent.click(
+      screen.getByText(userEmailData.affiliation.institution.name)
+    )
+
+    const roleInput = screen.getByRole('textbox', { name: /role/i })
+    await userEvent.type(roleInput, userEmailData.affiliation.role)
+    const departmentInput = screen.getByRole('textbox', { name: /department/i })
+    await userEvent.type(departmentInput, userEmailData.affiliation.department)
+
+    fetchMock
+      .get('/user/emails?ensureAffiliation=true', [userEmailData])
+      .post(/\/user\/emails/, 200)
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /add new email/i,
+      })
+    )
+
+    const [[, request]] = fetchMock.calls(/\/user\/emails/)
+
+    expect(JSON.parse(request?.body?.toString() || '{}')).to.deep.equal({
+      email: userEmailData.email,
+      university: {
+        id: userEmailData.affiliation?.institution.id,
+      },
+      role: userEmailData.affiliation?.role,
+      department: userEmailData.affiliation?.department,
+    })
+
+    screen.getByText(userEmailData.email)
+    screen.getByText(userEmailData.affiliation.institution.name)
+    screen.getByText(userEmailData.affiliation.role, { exact: false })
+    screen.getByText(userEmailData.affiliation.department, { exact: false })
+  })
+
+  it('adds new email address without existing institution', async function () {
+    const country = 'Germany'
+    const countryCode = 'de'
+    const newUniversity = 'Abcdef'
+    fetchMock.get('/user/emails?ensureAffiliation=true', [])
+    render(<EmailsSection />)
+
+    await fetchMock.flush(true)
+    fetchMock.reset()
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /add another email/i,
+      })
+    )
+
+    await userEvent.type(screen.getByLabelText(/email/i), userEmailData.email)
+
+    await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
+
+    const universityInput = screen.getByRole('textbox', {
+      name: /university/i,
+    }) as HTMLInputElement
+
+    expect(universityInput.disabled).to.be.true
+
+    fetchMock.get(/\/institutions\/list/, [
+      {
+        id: userEmailData.affiliation.institution.id,
+        name: userEmailData.affiliation.institution.name,
+        country_code: 'de',
+        departments: [],
+      },
+    ])
+
+    // Select the country from dropdown
+    await userEvent.type(
+      screen.getByRole('textbox', {
+        name: /country/i,
+      }),
+      country
+    )
+    await userEvent.click(screen.getByText(country))
+
+    expect(universityInput.disabled).to.be.false
+
+    await fetchMock.flush(true)
+    fetchMock.reset()
+
+    // Enter the university manually
+    await userEvent.type(universityInput, newUniversity)
+
+    const roleInput = screen.getByRole('textbox', { name: /role/i })
+    await userEvent.type(roleInput, userEmailData.affiliation.role)
+    const departmentInput = screen.getByRole('textbox', { name: /department/i })
+    await userEvent.type(departmentInput, userEmailData.affiliation.department)
+
+    const userEmailDataCopy = {
+      ...userEmailData,
+      affiliation: {
+        ...userEmailData.affiliation,
+        institution: {
+          ...userEmailData.affiliation.institution,
+          name: newUniversity,
+        },
+      },
+    }
+
+    fetchMock
+      .get('/user/emails?ensureAffiliation=true', [userEmailDataCopy])
+      .post(/\/user\/emails/, 200)
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /add new email/i,
+      })
+    )
+
+    const [[, request]] = fetchMock.calls(/\/user\/emails/)
+
+    expect(JSON.parse(request?.body?.toString() || '{}')).to.deep.equal({
+      email: userEmailData.email,
+      university: {
+        name: newUniversity,
+        country_code: countryCode,
+      },
+      role: userEmailData.affiliation?.role,
+      department: userEmailData.affiliation?.department,
+    })
+
+    screen.getByText(userEmailData.email)
+    screen.getByText(newUniversity)
+    screen.getByText(userEmailData.affiliation.role, { exact: false })
+    screen.getByText(userEmailData.affiliation.department, { exact: false })
+  })
 })