Skip to content

Commit 9a64f93

Browse files
borisskertborisskert
authored
Fix: Cannot submit form when a hidden form is invalid (#4)
1 parent cb58f4e commit 9a64f93

File tree

14 files changed

+367
-76
lines changed

14 files changed

+367
-76
lines changed

‎.github/workflows/npm.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
jobs:
1111
build:
12-
name: Run stack
12+
name: Run tests
1313
runs-on: ubuntu-latest
1414
steps:
1515
- uses: actions/checkout@v4
@@ -18,4 +18,5 @@ jobs:
1818
node-version: '22'
1919

2020
- run: npm ci
21+
- run: npm run test:ci
2122
- run: npm run e2e:ci

‎cypress/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
screenshots/

‎cypress/e2e/multiple-payments.spec.cy.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
describe('Multiple Payments', () => {
2+
beforeEach(() => {
3+
cy.visit('/')
4+
})
5+
6+
describe('When fill creditCard payment details', () => {
7+
beforeEach(() => cy
8+
.get('.dynamic-form--name').type('John Doe')
9+
.selectCreditCard({
10+
cardNumber: '1234567890123456',
11+
expiryDate: '12/23',
12+
cvv: '123',
13+
})
14+
)
15+
16+
describe('When add debit payment details', () => {
17+
beforeEach(() => cy
18+
.get('.add-group__button').click()
19+
.selectDebit({
20+
accountHolder: 'Joanna Doe',
21+
iban: 'DE12 1234 1234 1234 1234 12',
22+
bic: 'ABCDEF12',
23+
}, 1)
24+
)
25+
26+
describe('When submit', () => {
27+
beforeEach(() => cy.submitForm());
28+
29+
it('Should show submitted form value', () => {
30+
cy.get('div.submitted-value-container').should('contain.text', `{\n "name": "John Doe",\n "payments": [\n {\n "paymentMethod": "creditCard",\n "paymentDetails": {\n "cardNumber": "1234567890123456",\n "expiryDate": "12/23",\n "cvv": "123"\n }\n },\n {\n "paymentMethod": "debit",\n "paymentDetails": {\n "accountHolder": "Joanna Doe",\n "iban": "DE12 1234 1234 1234 1234 12",\n "bic": "ABCDEF12"\n }\n }\n ]\n}`)
31+
})
32+
})
33+
34+
describe('When delete second payment details', () => {
35+
beforeEach(() => cy.deletePayment(1))
36+
37+
describe('When submit', () => {
38+
beforeEach(() => cy.submitForm());
39+
40+
it('Should show submitted form value', () => {
41+
cy.get('div.submitted-value-container').should('contain.text', `{\n "name": "John Doe",\n "payments": [\n {\n "paymentMethod": "creditCard",\n "paymentDetails": {\n "cardNumber": "1234567890123456",\n "expiryDate": "12/23",\n "cvv": "123"\n }\n }\n ]\n}`)
42+
})
43+
})
44+
})
45+
})
46+
})
47+
48+
describe('When load CreditCard and Debit', () => {
49+
beforeEach(() => cy
50+
.loadCreditCardAndDebitPayment()
51+
)
52+
53+
describe('When submit', () => {
54+
beforeEach(() => cy.submitForm());
55+
56+
it('Should show submitted form value', () => {
57+
cy.get('div.submitted-value-container')
58+
.should('contain.text', '{\n "name": "John Doe",\n "payments": [\n {\n "paymentMethod": "creditCard",\n "paymentDetails": {\n "cardNumber": "1234567890123456",\n "expiryDate": "12/22",\n "cvv": "123"\n }\n },\n {\n "paymentMethod": "debit",\n "paymentDetails": {\n "accountHolder": "John Doe",\n "iban": "DE12345678901234567890",\n "bic": "GENODEF1M04"\n }\n }\n ]\n}')
59+
})
60+
})
61+
62+
describe('When delete second payment details', () => {
63+
beforeEach(() => cy.deletePayment(1))
64+
65+
describe('When submit', () => {
66+
beforeEach(() => cy.submitForm());
67+
68+
it('Should show submitted form value', () => {
69+
cy.get('div.submitted-value-container').should('contain.text', `{\n "name": "John Doe",\n "payments": [\n {\n "paymentMethod": "creditCard",\n "paymentDetails": {\n "cardNumber": "1234567890123456",\n "expiryDate": "12/22",\n "cvv": "123"\n }\n }\n ]\n}`)
70+
})
71+
})
72+
})
73+
})
74+
})

‎cypress/e2e/single-cash-payment.spec.cy.ts‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,37 @@ describe('Single Cash Payment', () => {
1010
describe('When fill name, select cash and submit', () => {
1111
beforeEach(() => cy
1212
.get('.dynamic-form--name').type('John Doe')
13-
.selectCash()
14-
.then(() => cy
15-
.get('.dynamic-form--submit').click()
16-
)
13+
.switchToCash()
1714
)
1815

19-
it('Should show submitted form value', () => {
20-
cy.shouldShowSubmittedCash({
21-
name: 'John Doe'
16+
describe('When submit', () => {
17+
beforeEach(() => cy.submitForm());
18+
19+
it('Should show submitted form value', () => {
20+
cy.shouldShowSubmittedCash({
21+
name: 'John Doe'
22+
})
23+
})
24+
})
25+
26+
describe('When fill incorrect creditCard and switch back', () => {
27+
beforeEach(() => cy
28+
.selectCreditCard({
29+
cardNumber: '123456789012345a',
30+
expiryDate: '12/23',
31+
cvv: '123',
32+
})
33+
.then(() => cy
34+
.switchToCash()
35+
).then(() => cy
36+
.submitForm()
37+
)
38+
)
39+
40+
it('Should show submitted form value', () => {
41+
cy.shouldShowSubmittedCash({
42+
name: 'John Doe'
43+
})
2244
})
2345
})
2446
});

‎cypress/e2e/single-creditcard-payment.spec.cy.ts‎

Lines changed: 82 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,98 @@ describe('Single CreditCard', () => {
77
cy.contains('App Component')
88
})
99

10-
describe('When fill creditCard payment details and submit', () => {
10+
describe('When fill creditCard payment details', () => {
1111
beforeEach(() => cy
1212
.get('.dynamic-form--name').type('John Doe')
1313
.selectCreditCard({
1414
cardNumber: '1234567890123456',
1515
expiryDate: '12/23',
1616
cvv: '123',
1717
})
18-
.then(() => cy
19-
.get('.dynamic-form--submit').click()
20-
)
2118
)
2219

23-
it('Should show submitted form value', () => {
24-
cy.shouldShowSubmittedCreditCard({
25-
name: 'John Doe',
26-
cardNumber: '1234567890123456',
27-
expiryDate: '12/23',
28-
cvv: '123',
20+
describe('When submit', () => {
21+
beforeEach(() => cy.submitForm());
22+
23+
it('Should show submitted form value', () => {
24+
cy.shouldShowSubmittedCreditCard({
25+
name: 'John Doe',
26+
cardNumber: '1234567890123456',
27+
expiryDate: '12/23',
28+
cvv: '123',
29+
})
30+
})
31+
})
32+
33+
describe('When fill incorrect debit and switch back', () => {
34+
beforeEach(() => cy
35+
.selectDebit({
36+
accountHolder: 'John Doe',
37+
iban: 'DE89 3704 0044 0532 0130 0a', // invalid IBAN
38+
bic: 'COBADEFFXXX',
39+
})
40+
.then(() => cy
41+
.switchToCreditCard()
42+
)
43+
.then(() => cy
44+
.submitForm()
45+
)
46+
)
47+
48+
it('Should show submitted form value', () => {
49+
cy.shouldShowSubmittedCreditCard({
50+
name: 'John Doe',
51+
cardNumber: '1234567890123456',
52+
expiryDate: '12/23',
53+
cvv: '123',
54+
})
2955
})
3056
})
3157
});
58+
59+
describe('When load creditCard payment details', () => {
60+
beforeEach(() => cy.loadCreditCardPayment());
61+
62+
it('Should show creditCard payment details', () => {
63+
cy.get('.creditcard-form-input--cardnumber').should('have.value', '1234567890123456')
64+
cy.get('.creditcard-form-input--expiryDate').should('have.value', '12/22')
65+
cy.get('.creditcard-form-input--cvv').should('have.value', '123')
66+
})
67+
68+
describe('When submit', () => {
69+
beforeEach(() => cy.submitForm());
70+
71+
it('Should show submitted form value', () => {
72+
cy.shouldShowSubmittedCreditCard({
73+
name: 'John Doe',
74+
cardNumber: '1234567890123456',
75+
expiryDate: '12/22',
76+
cvv: '123',
77+
})
78+
})
79+
})
80+
81+
describe('When load debit payment details', () => {
82+
beforeEach(() => cy.loadDebitPayment());
83+
84+
it('Should load debit payment details', () => {
85+
cy.get('.debit-form-input--accountHolder').should('have.value', 'John Doe')
86+
cy.get('.debit-form-input--iban').should('have.value', 'DE12345678901234567890')
87+
cy.get('.debit-form-input--bic').should('have.value', 'GENODEF1M04')
88+
})
89+
90+
describe('When submit', () => {
91+
beforeEach(() => cy.submitForm());
92+
93+
it('Should show submitted form value', () => {
94+
cy.shouldShowSubmittedDebit({
95+
name: 'John Doe',
96+
accountHolder: 'John Doe',
97+
iban: 'DE12345678901234567890',
98+
bic: 'GENODEF1M04',
99+
})
100+
})
101+
})
102+
})
103+
})
32104
})

‎cypress/e2e/single-debit-payment.spec.cy.ts‎

Lines changed: 77 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,97 @@ describe('Single Debit', () => {
77
cy.contains('App Component')
88
})
99

10-
describe('When fill debit payment details and submit', () => {
10+
describe('When fill debit payment details', () => {
1111
beforeEach(() => cy
1212
.get('.dynamic-form--name').type('John Doe')
1313
.selectDebit({
1414
accountHolder: 'Joanna Doe',
1515
iban: 'DE12 1234 1234 1234 1234 12',
1616
bic: 'ABCDEF12',
1717
})
18-
.then(() => cy
19-
.get('.dynamic-form--submit').click()
20-
)
2118
)
2219

23-
it('Should show submitted form value', () => {
24-
cy.shouldShowSubmittedDebit({
20+
describe('When submit', () => {
21+
beforeEach(() => cy.submitForm());
22+
23+
it('Should show submitted form value', () => {
24+
cy.shouldShowSubmittedDebit({
2525
name: 'John Doe',
2626
accountHolder: 'Joanna Doe',
2727
iban: 'DE12 1234 1234 1234 1234 12',
2828
bic: 'ABCDEF12',
29-
}
29+
})
30+
})
31+
})
32+
33+
describe('When fill incorrect creditCard and switch back', () => {
34+
beforeEach(() => cy
35+
.selectCreditCard({
36+
cardNumber: '123456789012345a', // invalid card number
37+
expiryDate: '12/23',
38+
cvv: '123',
39+
})
40+
.then(() => cy
41+
.switchToDebit()
42+
).then(() => cy
43+
.submitForm()
44+
)
3045
)
46+
47+
it('Should show submitted form value', () => {
48+
cy.shouldShowSubmittedDebit({
49+
name: 'John Doe',
50+
accountHolder: 'Joanna Doe',
51+
iban: 'DE12 1234 1234 1234 1234 12',
52+
bic: 'ABCDEF12',
53+
})
54+
})
55+
})
56+
});
57+
58+
describe('When load debit payment details', () => {
59+
beforeEach(() => cy.loadDebitPayment());
60+
61+
it('Should load debit payment details', () => {
62+
cy.get('.debit-form-input--accountHolder').should('have.value', 'John Doe')
63+
cy.get('.debit-form-input--iban').should('have.value', 'DE12345678901234567890')
64+
cy.get('.debit-form-input--bic').should('have.value', 'GENODEF1M04')
65+
})
66+
67+
describe('When submit', () => {
68+
beforeEach(() => cy.submitForm());
69+
70+
it('Should show submitted form value', () => {
71+
cy.shouldShowSubmittedDebit({
72+
name: 'John Doe',
73+
accountHolder: 'John Doe',
74+
iban: 'DE12345678901234567890',
75+
bic: 'GENODEF1M04',
76+
})
77+
})
78+
})
79+
80+
describe('When load creditCard payment details', () => {
81+
beforeEach(() => cy.loadCreditCardPayment());
82+
83+
it('Should show creditCard payment details', () => {
84+
cy.get('.creditcard-form-input--cardnumber').should('have.value', '1234567890123456')
85+
cy.get('.creditcard-form-input--expiryDate').should('have.value', '12/22')
86+
cy.get('.creditcard-form-input--cvv').should('have.value', '123')
87+
})
88+
89+
describe('When submit', () => {
90+
beforeEach(() => cy.submitForm());
91+
92+
it('Should show submitted form value', () => {
93+
cy.shouldShowSubmittedCreditCard({
94+
name: 'John Doe',
95+
cardNumber: '1234567890123456',
96+
expiryDate: '12/22',
97+
cvv: '123',
98+
})
99+
})
100+
})
31101
})
32102
});
33103
})

0 commit comments

Comments
 (0)