Skip to content

Commit 2c4fe62

Browse files
wdoconnellwdoconnell
authored
chore: fix broken checkout test and related form validation issue (#6075)
1 parent eeef895 commit 2c4fe62

File tree

2 files changed

+102
-111
lines changed

2 files changed

+102
-111
lines changed

‎cypress/e2e/cloud/checkout/checkoutpage.test.ts‎

Lines changed: 102 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -27,135 +27,127 @@ describe('Checkout Page Works', () => {
2727
)
2828

2929
it('should render the checkout page and allow for pointing and clicking', () => {
30-
cy.setFeatureFlagsNoNav({
31-
multiOrg: true,
32-
}).then(() => {
33-
const email = '[email protected]'
34-
const limit = 10
35-
const numberError = 'Please enter a value of 1 or greater'
36-
const genericError = 'This is a required field'
30+
const email = '[email protected]'
31+
const limit = 10
32+
const numberError = 'Please enter a value of 1 or greater'
33+
const genericError = 'This is a required field'
3734

38-
cy.getByTestID('shouldNotify--checkbox--input').should('be.checked')
35+
cy.getByTestID('shouldNotify--checkbox--input').should('be.checked')
3936

40-
resetInputs()
37+
resetInputs()
4138

42-
// Click Upgrade
43-
cy.getByTestID('checkout-upgrade--button').click()
39+
// Click Upgrade
40+
cy.getByTestID('checkout-upgrade--button').click()
4441

45-
// Check all errors are visible
46-
cy.getByTestID('balanceThreshold--input').scrollIntoView()
47-
cy.getByTestID('balanceThreshold--form-element-error').should(
48-
'be.visible'
49-
)
50-
cy.getByTestID('balanceThreshold--form-element-error').contains(
51-
genericError
52-
)
53-
cy.getByTestID('notifyEmail--form-element-error').should('be.visible')
54-
cy.getByTestID('notifyEmail--form-element-error').contains(genericError)
55-
56-
// Check balance threshold specific error should exist
57-
cy.getByTestID('balanceThreshold--input').clear().type('0')
58-
cy.getByTestID('balanceThreshold--form-element-error').contains(
59-
numberError
60-
)
61-
62-
cy.getByTestID('notifyEmail--input').clear().type(email)
63-
cy.getByTestID('balanceThreshold--input').clear().type(`${limit}`)
64-
65-
// Check all errors are gone
66-
cy.getByTestID('balanceThreshold--form-element-error').should('not.exist')
67-
cy.getByTestID('notifyEmail--form-element-error').should('not.exist')
68-
69-
// Uncheck Checkbox
70-
cy.getByTestID('shouldNotify--checkbox').click()
71-
cy.getByTestID('shouldNotify--checkbox--input').should('not.be.checked')
72-
73-
// Email and limit should still be present after toggling the notifications checkbox
74-
cy.getByTestID('shouldNotify--checkbox').click()
75-
cy.getByTestID('shouldNotify--checkbox--input').should('be.checked')
76-
cy.getByTestID('notifyEmail--input').should('have.value', email)
77-
cy.getByTestID('balanceThreshold--input').should('have.value', limit)
78-
79-
// should render US Billing Address
42+
// Check all errors are visible
43+
cy.getByTestID('balanceThreshold--input').scrollIntoView()
44+
cy.getByTestID('balanceThreshold--form-element-error').should('be.visible')
45+
cy.getByTestID('balanceThreshold--form-element-error').contains(
46+
genericError
47+
)
48+
cy.getByTestID('notifyEmail--form-element-error').should('be.visible')
49+
cy.getByTestID('notifyEmail--form-element-error').contains(genericError)
50+
51+
// Check balance threshold specific error should exist
52+
cy.getByTestID('balanceThreshold--input').clear().type('0')
53+
cy.getByTestID('balanceThreshold--form-element-error').contains(numberError)
54+
55+
cy.getByTestID('notifyEmail--input').clear().type(email)
56+
cy.getByTestID('balanceThreshold--input').clear().type(`${limit}`)
57+
58+
// Check all errors are gone
59+
cy.getByTestID('balanceThreshold--form-element-error').should('not.exist')
60+
cy.getByTestID('notifyEmail--form-element-error').should('not.exist')
61+
62+
// Uncheck Checkbox
63+
cy.getByTestID('shouldNotify--checkbox').click()
64+
cy.getByTestID('shouldNotify--checkbox--input').should('not.be.checked')
65+
66+
// Email and limit should still be present after toggling the notifications checkbox
67+
cy.getByTestID('shouldNotify--checkbox').click()
68+
cy.getByTestID('shouldNotify--checkbox--input').should('be.checked')
69+
cy.getByTestID('notifyEmail--input').should('have.value', email)
70+
cy.getByTestID('balanceThreshold--input').should('have.value', limit)
71+
72+
// should render US Billing Address
73+
const error = 'This is a required field'
74+
75+
// Check defaults
76+
resetInputs()
77+
cy.getByTestID('country--dropdown')
78+
.get('.cf-dropdown--selected')
79+
.contains('United States')
80+
cy.getByTestID('usSubdivision--dropdown')
81+
.get('.cf-dropdown--selected')
82+
.contains('Alabama')
83+
84+
cy.getByTestID('checkout-upgrade--button').click()
85+
86+
cy.getByTestID('city--form-element-error').should('be.visible')
87+
cy.getByTestID('city--form-element-error').contains(error)
88+
cy.getByTestID('postalCode--form-element-error').should('be.visible')
89+
cy.getByTestID('postalCode--form-element-error').contains(error)
90+
91+
cy.getByTestID('city--input').type('Blacksburg')
92+
cy.getByTestID('postalCode--input').type('24060')
93+
cy.getByTestID('street1--input').type('Street1 Address')
94+
cy.getByTestID('street2--input').type('Street2 Address')
95+
96+
cy.getByTestID('city--form-element-error').should('not.exist')
97+
cy.getByTestID('postalCode--form-element-error').should('not.exist')
98+
99+
const cases = [
100+
{country: 'Canada', state: 'Province'},
101+
{country: 'India', state: 'State / Province / Region'},
102+
]
103+
cases.forEach(item => {
104+
const city = 'TestCity'
80105
const error = 'This is a required field'
81106

82-
// Check defaults
83107
resetInputs()
108+
cy.getByTestID('country--dropdown')
109+
.click()
110+
.getByTestID('dropdown-item')
111+
.contains(item.country)
112+
.then(i => {
113+
i[0].click()
114+
})
115+
116+
// Validate correct country is currently selected
84117
cy.getByTestID('country--dropdown')
85118
.get('.cf-dropdown--selected')
86-
.contains('United States')
87-
cy.getByTestID('usSubdivision--dropdown')
88-
.get('.cf-dropdown--selected')
89-
.contains('Alabama')
119+
.contains(item.country)
120+
121+
// Check US State equivalent
122+
cy.getByTestID('intlSubdivision--form-element')
123+
.get('.cf-form--label-text')
124+
.contains(item.state)
125+
cy.getByTestID('intlSubdivision--input')
126+
.should('be.visible')
127+
.should('have.value', '')
90128

129+
// Click Upgrade Button
91130
cy.getByTestID('checkout-upgrade--button').click()
92131

132+
// Check required fields show error
93133
cy.getByTestID('city--form-element-error').should('be.visible')
94134
cy.getByTestID('city--form-element-error').contains(error)
95-
cy.getByTestID('postalCode--form-element-error').should('be.visible')
96-
cy.getByTestID('postalCode--form-element-error').contains(error)
97-
98-
cy.getByTestID('city--input').type('Blacksburg')
99-
cy.getByTestID('postalCode--input').type('24060')
100-
cy.getByTestID('street1--input').type('Street1 Address')
101-
cy.getByTestID('street2--input').type('Street2 Address')
102135

103-
cy.getByTestID('city--form-element-error').should('not.exist')
104-
cy.getByTestID('postalCode--form-element-error').should('not.exist')
105-
106-
const cases = [
107-
{country: 'Canada', state: 'Province'},
108-
{country: 'India', state: 'State / Province / Region'},
109-
]
110-
cases.forEach(item => {
111-
const city = 'TestCity'
112-
const error = 'This is a required field'
113-
114-
resetInputs()
115-
cy.getByTestID('country--dropdown')
116-
.click()
117-
.getByTestID('dropdown-item')
118-
.contains(item.country)
119-
.then(i => {
120-
i[0].click()
121-
})
136+
cy.getByTestID('city--input').type(city).should('have.value', city)
122137

123-
// Validate correct country is currently selected
124-
cy.getByTestID('country--dropdown')
125-
.get('.cf-dropdown--selected')
126-
.contains(item.country)
127-
128-
// Check US State equivalent
129-
cy.getByTestID('intlSubdivision--form-element')
130-
.get('.cf-form--label-text')
131-
.contains(item.state)
132-
cy.getByTestID('intlSubdivision--input')
133-
.should('be.visible')
134-
.should('have.value', '')
135-
136-
// Click Upgrade Button
137-
cy.getByTestID('checkout-upgrade--button').click()
138-
139-
// Check required fields show error
140-
cy.getByTestID('city--form-element-error').should('be.visible')
141-
cy.getByTestID('city--form-element-error').contains(error)
142-
143-
cy.getByTestID('city--input').type(city).should('have.value', city)
144-
145-
// Click Upgrade Button
146-
cy.getByTestID('checkout-upgrade--button').click()
138+
// Click Upgrade Button
139+
cy.getByTestID('checkout-upgrade--button').click()
147140

148-
// Check no errors are visible for billing address form
149-
cy.getByTestID('city--form-element-error').should('not.exist')
150-
})
141+
// Check no errors are visible for billing address form
142+
cy.getByTestID('city--form-element-error').should('not.exist')
143+
})
151144

152-
// Click Cancel Button
153-
cy.getByTestID('checkout-cancel--button').click()
145+
// Click Cancel Button
146+
cy.getByTestID('checkout-cancel--button').click()
154147

155-
cy.get('@org').then((org: Organization) => {
156-
cy.location().should(loc => {
157-
expect(loc.pathname).to.include(`/orgs/${org.id}`)
158-
})
148+
cy.get('@org').then((org: Organization) => {
149+
cy.location().should(loc => {
150+
expect(loc.pathname).to.include(`/orgs/${org.id}`)
159151
})
160152
})
161153
})

‎src/checkout/shared/FormInput.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ const FormInput: FC<Props> = ({label, required, id, ...args}) => {
5151
>
5252
<Input
5353
id={id}
54-
required={required}
5554
value={inputs[id]}
5655
onChange={handleChange}
5756
testID={`${id}--input`}

0 commit comments

Comments
 (0)