Skip to content

Commit cb58f4e

Browse files
borisskertborisskert
authored
Introduce e2e tests (#2)
1 parent c767d72 commit cb58f4e

File tree

17 files changed

+2191
-57
lines changed

17 files changed

+2191
-57
lines changed

‎.github/workflows/npm.yml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
name: Build and run tests
3+
4+
on:
5+
push:
6+
branches: [ main ]
7+
pull_request:
8+
branches: [ main ]
9+
10+
jobs:
11+
build:
12+
name: Run stack
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v4
16+
- uses: actions/setup-node@v4
17+
with:
18+
node-version: '22'
19+
20+
- run: npm ci
21+
- run: npm run e2e:ci

‎angular.json‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,45 @@
9191
],
9292
"scripts": []
9393
}
94+
},
95+
"cypress-run": {
96+
"builder": "@cypress/schematic:cypress",
97+
"options": {
98+
"devServerTarget": "dynamic-form-app:serve"
99+
},
100+
"configurations": {
101+
"production": {
102+
"devServerTarget": "dynamic-form-app:serve:production"
103+
}
104+
}
105+
},
106+
"cypress-open": {
107+
"builder": "@cypress/schematic:cypress",
108+
"options": {
109+
"watch": true,
110+
"headless": false
111+
}
112+
},
113+
"e2e": {
114+
"builder": "@cypress/schematic:cypress",
115+
"options": {
116+
"devServerTarget": "dynamic-form-app:serve",
117+
"watch": true,
118+
"headless": false
119+
},
120+
"configurations": {
121+
"production": {
122+
"devServerTarget": "dynamic-form-app:serve:production"
123+
}
124+
}
94125
}
95126
}
96127
}
128+
},
129+
"cli": {
130+
"schematicCollections": [
131+
"@cypress/schematic",
132+
"@schematics/angular"
133+
]
97134
}
98-
}
135+
}

‎cypress.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from 'cypress'
2+
3+
export default defineConfig({
4+
5+
e2e: {
6+
'baseUrl': 'http://localhost:4200'
7+
},
8+
9+
10+
})

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
describe('Single Cash Payment', () => {
2+
beforeEach(() => {
3+
cy.visit('/')
4+
})
5+
6+
it('Visits the initial project page', () => {
7+
cy.contains('App Component')
8+
})
9+
10+
describe('When fill name, select cash and submit', () => {
11+
beforeEach(() => cy
12+
.get('.dynamic-form--name').type('John Doe')
13+
.selectCash()
14+
.then(() => cy
15+
.get('.dynamic-form--submit').click()
16+
)
17+
)
18+
19+
it('Should show submitted form value', () => {
20+
cy.shouldShowSubmittedCash({
21+
name: 'John Doe'
22+
})
23+
})
24+
});
25+
})

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
describe('Single CreditCard', () => {
2+
beforeEach(() => {
3+
cy.visit('/')
4+
})
5+
6+
it('Visits the initial project page', () => {
7+
cy.contains('App Component')
8+
})
9+
10+
describe('When fill creditCard payment details and submit', () => {
11+
beforeEach(() => cy
12+
.get('.dynamic-form--name').type('John Doe')
13+
.selectCreditCard({
14+
cardNumber: '1234567890123456',
15+
expiryDate: '12/23',
16+
cvv: '123',
17+
})
18+
.then(() => cy
19+
.get('.dynamic-form--submit').click()
20+
)
21+
)
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+
})

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
describe('Single Debit', () => {
2+
beforeEach(() => {
3+
cy.visit('/')
4+
})
5+
6+
it('Visits the initial project page', () => {
7+
cy.contains('App Component')
8+
})
9+
10+
describe('When fill debit payment details and submit', () => {
11+
beforeEach(() => cy
12+
.get('.dynamic-form--name').type('John Doe')
13+
.selectDebit({
14+
accountHolder: 'Joanna Doe',
15+
iban: 'DE12 1234 1234 1234 1234 12',
16+
bic: 'ABCDEF12',
17+
})
18+
.then(() => cy
19+
.get('.dynamic-form--submit').click()
20+
)
21+
)
22+
23+
it('Should show submitted form value', () => {
24+
cy.shouldShowSubmittedDebit({
25+
name: 'John Doe',
26+
accountHolder: 'Joanna Doe',
27+
iban: 'DE12 1234 1234 1234 1234 12',
28+
bic: 'ABCDEF12',
29+
}
30+
)
31+
})
32+
});
33+
})

‎cypress/fixtures/example.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "hello@cypress.io"
4+
}
5+

‎cypress/support/commands.ts‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// ***********************************************
2+
// This example namespace declaration will help
3+
// with Intellisense and code completion in your
4+
// IDE or Text Editor.
5+
// ***********************************************
6+
declare namespace Cypress {
7+
interface Chainable<Subject = any> {
8+
selectCash(): Chainable<Subject>;
9+
10+
selectCreditCard(param: {
11+
cardNumber: string;
12+
expiryDate: string;
13+
cvv: string;
14+
}): Chainable<Subject>;
15+
16+
selectDebit(param: {
17+
accountHolder: string;
18+
iban: string;
19+
bic: string;
20+
}): Chainable<Subject>;
21+
22+
shouldShowSubmittedCash(param: {
23+
name: string;
24+
}): Chainable<Subject>;
25+
26+
shouldShowSubmittedCreditCard(param: {
27+
name: string;
28+
cardNumber: string;
29+
expiryDate: string;
30+
cvv: string;
31+
}): Chainable<Subject>;
32+
33+
shouldShowSubmittedDebit(param: {
34+
name: string;
35+
accountHolder: string;
36+
iban: string;
37+
bic: string;
38+
}): Chainable<Subject>;
39+
}
40+
}
41+
42+
Cypress.Commands.add('selectCash', () => {
43+
return cy
44+
.then(() => cy
45+
.get('.payment-form--payment-method').click()
46+
.get('mat-option').contains('Cash').click()
47+
)
48+
})
49+
50+
Cypress.Commands.add('selectCreditCard', (params) => {
51+
return cy
52+
.then(() => cy
53+
.get('.payment-form--payment-method').click()
54+
.get('mat-option').contains('Credit Card').click()
55+
)
56+
57+
.then(() => cy
58+
.get('.creditcard-form-input--cardnumber')
59+
.focus()
60+
.type(params.cardNumber)
61+
)
62+
63+
.then(() => cy
64+
.get('.creditcard-form-input--expiryDate')
65+
.focus()
66+
.type(params.expiryDate)
67+
)
68+
69+
.then(() => cy
70+
.get('.creditcard-form-input--cvv')
71+
.focus()
72+
.type(params.cvv)
73+
)
74+
})
75+
76+
Cypress.Commands.add('selectDebit', (params) => {
77+
return cy
78+
.then(() => cy
79+
.get('.payment-form--payment-method').click()
80+
.get('mat-option').contains('Debit').click()
81+
)
82+
83+
.then(() => cy
84+
.get('.debit-form-input--accountHolder')
85+
.focus()
86+
.type(params.accountHolder)
87+
)
88+
89+
.then(() => cy
90+
.get('.debit-form-input--iban')
91+
.focus()
92+
.type(params.iban)
93+
)
94+
95+
.then(() => cy
96+
.get('.debit-form-input--bic')
97+
.focus()
98+
.type(params.bic)
99+
)
100+
})
101+
102+
Cypress.Commands.add('shouldShowSubmittedCash', (param) => {
103+
return cy.get('div.submitted-value-container')
104+
.should(
105+
'contain.text',
106+
`{\n "name": "${param.name}",\n "payments": [\n {\n "paymentMethod": "cash",\n "paymentDetails": null\n }\n ]\n}`
107+
)
108+
});
109+
110+
Cypress.Commands.add('shouldShowSubmittedCreditCard', (param) => {
111+
return cy.get('div.submitted-value-container')
112+
.should(
113+
'contain.text',
114+
`{\n "name": "${param.name}",\n "payments": [\n {\n "paymentMethod": "creditCard",\n "paymentDetails": {\n "cardNumber": "${param.cardNumber}",\n "expiryDate": "${param.expiryDate}",\n "cvv": "${param.cvv}"\n }\n }\n ]\n}`
115+
)
116+
});
117+
118+
Cypress.Commands.add('shouldShowSubmittedDebit', (param) => {
119+
return cy.get('div.submitted-value-container')
120+
.should(
121+
'contain.text',
122+
`{\n "name": "${param.name}",\n "payments": [\n {\n "paymentMethod": "debit",\n "paymentDetails": {\n "accountHolder": "${param.accountHolder}",\n "iban": "${param.iban}",\n "bic": "${param.bic}"\n }\n }\n ]\n}`
123+
)
124+
});

‎cypress/support/e2e.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// ***********************************************************
2+
// This example support/e2e.ts is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// When a command from ./commands is ready to use, import with `import './commands'` syntax
17+
import './commands';

‎cypress/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"include": ["**/*.ts"],
4+
"compilerOptions": {
5+
"sourceMap": false,
6+
"types": ["cypress"]
7+
}
8+
}

0 commit comments

Comments
 (0)