Merge pull request #14585 from overleaf/msm-sso-config-modal

[web] SSO Config modal GitOrigin-RevId: e704afa61fe14390b64ce29a27ccbce7e884b396
2026-11-14 06:03:45 +01:00 · 2023-09-13 08:03:46 +00:00
parent 4b72908940
commit 0f30edf69f
10 changed files with 502 additions and 6 deletions
@@ -0,0 +1,269 @@
+import { useCallback, FormEvent } from 'react'
+import { Button, Form, FormControl } from 'react-bootstrap'
+import {
+  Select,
+  SelectProps,
+} from '../../../../frontend/js/shared/components/select'
+
+const testData = [1, 2, 3].map(index => ({
+  key: index,
+  value: `Demo item ${index}`,
+  sub: `Subtitle ${index}`,
+}))
+
+type RenderProps = Partial<SelectProps<typeof testData[number]>> & {
+  onSubmit?: (formData: object) => void
+}
+
+function render(props: RenderProps) {
+  const submitHandler = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (props.onSubmit) {
+      const formData = new FormData(event.target as HTMLFormElement)
+      // a plain object is more convenient to work later with assertions
+      props.onSubmit(Object.fromEntries(formData.entries()))
+    }
+  }
+  cy.mount(
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+      }}
+    >
+      <form onSubmit={submitHandler}>
+        <Select
+          items={testData}
+          itemToString={x => String(x?.value)}
+          label={props.label}
+          name="select_control"
+          defaultText={props.defaultText}
+          defaultItem={props.defaultItem}
+          itemToSubtitle={props.itemToSubtitle}
+          itemToKey={x => String(x.key)}
+          onSelectedItemChanged={props.onSelectedItemChanged}
+          disabled={props.disabled}
+          optionalLabel={props.optionalLabel}
+          loading={props.loading}
+        />
+        <button type="submit">submit</button>
+      </form>
+    </div>
+  )
+}
+
+describe('<Select />', function () {
+  describe('initial rendering', function () {
+    it('renders default text', function () {
+      render({ defaultText: 'Choose an item' })
+      cy.findByTestId('spinner').should('not.exist')
+      cy.findByText('Choose an item')
+    })
+
+    it('renders default item', function () {
+      render({ defaultItem: testData[2] })
+      cy.findByText('Demo item 3')
+    })
+
+    it('default item takes precedence over default text', function () {
+      render({ defaultText: 'Choose an item', defaultItem: testData[2] })
+      cy.findByText('Demo item 3')
+    })
+
+    it('renders label', function () {
+      render({
+        defaultText: 'Choose an item',
+        label: 'test label',
+        optionalLabel: false,
+      })
+      cy.findByText('test label')
+      cy.findByText('(Optional)').should('not.exist')
+    })
+
+    it('renders optional label', function () {
+      render({
+        defaultText: 'Choose an item',
+        label: 'test label',
+        optionalLabel: true,
+      })
+      cy.findByText('test label')
+      cy.findByText('(Optional)')
+    })
+
+    it('renders a spinner while loading when there is a label', function () {
+      render({
+        defaultText: 'Choose an item',
+        label: 'test label',
+        loading: true,
+      })
+      cy.findByTestId('spinner')
+    })
+
+    it('does not render a spinner while loading if there is no label', function () {
+      render({
+        defaultText: 'Choose an item',
+        loading: true,
+      })
+      cy.findByTestId('spinner').should('not.exist')
+    })
+  })
+
+  describe('items rendering', function () {
+    it('renders all items', function () {
+      render({ defaultText: 'Choose an item' })
+      cy.findByText('Choose an item').click()
+
+      cy.findByText('Demo item 1')
+      cy.findByText('Demo item 2')
+      cy.findByText('Demo item 3')
+    })
+
+    it('renders subtitles', function () {
+      render({
+        defaultText: 'Choose an item',
+        itemToSubtitle: x => String(x?.sub),
+      })
+      cy.findByText('Choose an item').click()
+
+      cy.findByText('Subtitle 1')
+      cy.findByText('Subtitle 2')
+      cy.findByText('Subtitle 3')
+    })
+  })
+
+  describe('item selection', function () {
+    it('cannot select an item when disabled', function () {
+      render({ defaultText: 'Choose an item', disabled: true })
+      cy.findByText('Choose an item').click()
+
+      cy.findByText('Demo item 1').should('not.exist')
+      cy.findByText('Demo item 2').should('not.exist')
+      cy.findByText('Demo item 3').should('not.exist')
+      cy.findByText('Choose an item')
+    })
+
+    it('renders only the selected item after selection', function () {
+      render({ defaultText: 'Choose an item' })
+      cy.findByText('Choose an item').click()
+
+      cy.findByText('Demo item 1')
+      cy.findByText('Demo item 2')
+      cy.findByText('Demo item 3').click()
+
+      cy.findByText('Choose an item').should('not.exist')
+      cy.findByText('Demo item 1').should('not.exist')
+      cy.findByText('Demo item 2').should('not.exist')
+      cy.findByText('Demo item 3')
+    })
+
+    it('invokes callback after selection', function () {
+      const selectionHandler = cy.stub().as('selectionHandler')
+
+      render({
+        defaultText: 'Choose an item',
+        onSelectedItemChanged: selectionHandler,
+      })
+      cy.findByText('Choose an item').click()
+      cy.findByText('Demo item 2').click()
+
+      cy.get('@selectionHandler').should(
+        'have.been.calledOnceWith',
+        testData[1]
+      )
+    })
+  })
+
+  describe('when the form is submitted', function () {
+    it('populates FormData with the default selected item', function () {
+      const submitHandler = cy.stub().as('submitHandler')
+      render({ defaultItem: testData[1], onSubmit: submitHandler })
+
+      cy.findByText('submit').click()
+      cy.get('@submitHandler').should('have.been.calledOnceWith', {
+        select_control: 'Demo item 2',
+      })
+    })
+
+    it('populates FormData with the selected item', function () {
+      const submitHandler = cy.stub().as('submitHandler')
+      render({ defaultItem: testData[1], onSubmit: submitHandler })
+
+      cy.findByText('Demo item 2').click() // open dropdown
+      cy.findByText('Demo item 3').click() // choose a different item
+
+      cy.findByText('submit').click()
+      cy.get('@submitHandler').should('have.been.calledOnceWith', {
+        select_control: 'Demo item 3',
+      })
+    })
+
+    it('does not populate FormData when no item is selected', function () {
+      const submitHandler = cy.stub().as('submitHandler')
+      render({ defaultText: 'Choose an item', onSubmit: submitHandler })
+
+      cy.findByText('submit').click()
+      cy.get('@submitHandler').should('have.been.calledOnceWith', {})
+    })
+  })
+
+  describe('with react-bootstrap forms', function () {
+    type FormWithSelectProps = {
+      onSubmit: (formData: object) => void
+    }
+
+    const FormWithSelect = ({ onSubmit }: FormWithSelectProps) => {
+      const selectComponent = useCallback(
+        () => (
+          <Select
+            name="select_control"
+            items={testData}
+            defaultItem={testData[0]}
+            itemToString={x => String(x?.value)}
+            itemToKey={x => String(x.key)}
+          />
+        ),
+        []
+      )
+
+      function handleSubmit(event: FormEvent<Form>) {
+        event.preventDefault()
+        const formData = new FormData(event.target as HTMLFormElement)
+        // a plain object is more convenient to work later with assertions
+        onSubmit(Object.fromEntries(formData.entries()))
+      }
+
+      return (
+        <Form onSubmit={handleSubmit}>
+          <FormControl componentClass={selectComponent} />
+          <Button type="submit">submit</Button>
+        </Form>
+      )
+    }
+
+    it('populates FormData with the selected item when the form is submitted', function () {
+      const submitHandler = cy.stub().as('submitHandler')
+      cy.mount(
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+          }}
+        >
+          <FormWithSelect onSubmit={submitHandler} />
+        </div>
+      )
+
+      cy.findByText('Demo item 1').click() // open dropdown
+      cy.findByText('Demo item 3').click() // choose a different item
+
+      cy.findByText('submit').click()
+      cy.get('@submitHandler').should('have.been.calledOnceWith', {
+        select_control: 'Demo item 3',
+      })
+    })
+  })
+})