dataverse-frontend/packages/design-system/tests/component/form/form-group/FormGroupCheckbox.spec.tsx at 4dfa68c677aa53260714dba48fd54a4565ee6f96 · IQSS/dataverse-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { FormGroup } from '../../../../src/lib/components/form/form-group/FormGroup'
import { FormCheckboxGroup } from '../../../../src/lib/components/form/form-checkbox-group/FormCheckboxGroup'
import { Form } from '../../../../src/lib'

const option1Label = 'Test Label 1'
const option2Label = 'Test Label 2'
const option3Label = 'Test Label 3'
const checkboxName = 'checkbox-name'

describe('FormCheckbox', () => {
  it('renders label and checkbox input', () => {
    cy.mount(
      <FormCheckboxGroup title="Checkbox">
        <FormGroup.Checkbox id="checkbox-1" label={option1Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-2" label={option2Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-3" label={option3Label} name={checkboxName} />
      </FormCheckboxGroup>
    )

    const checkbox1 = cy.findByLabelText(option1Label)
    checkbox1.should('exist')

    const checkbox2 = cy.findByLabelText(option2Label)
    checkbox2.should('exist')

    const checkbox3 = cy.findByLabelText(option3Label)
    checkbox3.should('exist')
  })

  it('renders without label', () => {
    cy.mount(
      <FormCheckboxGroup title="Checkbox">
        <FormGroup.Checkbox id="checkbox-1" label={option1Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-2" label={option2Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-3" label={option3Label} name={checkboxName} />
      </FormCheckboxGroup>
    )

    const checkbox2 = cy.findByLabelText(option2Label)

    checkbox2.click()

    checkbox2.should('be.checked')
  })

  it('should render with the required symbol', () => {
    cy.mount(
      <FormCheckboxGroup title="Checkbox" required>
        <FormGroup.Checkbox id="checkbox-1" label={option1Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-2" label={option2Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-3" label={option3Label} name={checkboxName} />
      </FormCheckboxGroup>
    )

    const requiredSymbol = cy.findByRole('img')
    requiredSymbol.should('exist')
  })

  it('should render with the a tooltip message', () => {
    const tooltipMessage = 'This is a tooltip message'
    cy.mount(
      <FormCheckboxGroup title="Checkbox" required message={tooltipMessage}>
        <FormGroup.Checkbox id="checkbox-1" label={option1Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-2" label={option2Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-3" label={option3Label} name={checkboxName} />
      </FormCheckboxGroup>
    )

    cy.findByLabelText('tooltip icon').trigger('mouseover')
    cy.findByRole('tooltip').should('be.visible')
    cy.findByText(tooltipMessage).should('be.visible')
  })

  it('renders with invalid feedback as a group', () => {
    cy.mount(
      <FormCheckboxGroup title="Checkbox" isInvalid>
        <FormGroup.Checkbox id="checkbox-1" label={option1Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-2" label={option2Label} name={checkboxName} />
        <Form.Group.Feedback type="valid">Valid checkbox</Form.Group.Feedback>
        <Form.Group.Feedback type="invalid">Invalid checkbox</Form.Group.Feedback>
      </FormCheckboxGroup>
    )

    cy.findByText('Invalid checkbox').should('be.visible')
    cy.findByText('Valid checkbox').should('not.be.visible')
  })

  it('renders with valid feedback as a group', () => {
    cy.mount(
      <FormCheckboxGroup title="Checkbox" isValid>
        <FormGroup.Checkbox id="checkbox-1" label={option1Label} name={checkboxName} />
        <FormGroup.Checkbox id="checkbox-2" label={option2Label} name={checkboxName} />
        <Form.Group.Feedback type="valid">Valid checkbox</Form.Group.Feedback>
        <Form.Group.Feedback type="invalid">Invalid checkbox</Form.Group.Feedback>
      </FormCheckboxGroup>
    )

    cy.findByText('Invalid checkbox').should('not.be.visible')
    cy.findByText('Valid checkbox').should('be.visible')
  })
})