Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit ae586c1

Browse files
Fdom92Fdom92
committed
feat(cypress): update contact tests
1 parent ddabb64 commit ae586c1

File tree

2 files changed

+151
-33
lines changed

2 files changed

+151
-33
lines changed

‎cypress/integration/app-contact.spec.js‎

Lines changed: 148 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,128 @@
1-
describe('Contact Page', function () {
2-
var env = 'http://localhost:3333';
3-
beforeEach(() => {
4-
cy.visit(env + '/contact');
5-
cy.get('button[type=submit]').as('submitBtn');
1+
describe('Contact Page', function() {
2+
describe('The contact form displays with all fields', () => {
3+
it('Check that the form displays', function() {
4+
cy.visit('localhost:3333/contact');
5+
cy.get('#second-content')
6+
.contains('Get in Touch')
7+
.should('exist')
8+
.and('be.visible');
9+
cy.get('#second-content')
10+
.contains("Tell us a little bit about what you're working on. We'll be in touch to tell you about the next steps toward accomplishing your goals!")
11+
.should('exist')
12+
.and('be.visible');
13+
14+
cy.get('#contact-form')
15+
.contains('Full Name*')
16+
.should('exist')
17+
.and('be.visible');
18+
cy.get('#contact-form')
19+
.contains('E-mail*')
20+
.should('exist')
21+
.and('be.visible');
22+
cy.get('#contact-form')
23+
.contains('Phone')
24+
.should('exist')
25+
.and('be.visible');
26+
cy.get('#contact-form')
27+
.contains('What are you working on?')
28+
.should('exist')
29+
.and('be.visible');
30+
});
31+
});
32+
33+
describe('User is able to successfully submit a contact form & view the successful submission animation', () => {
34+
it('Check that the form fades and appears the animation', function() {
35+
cy.visit('localhost:3333/contact');
36+
cy.get('input[name=name]').type('Tester');
37+
cy.get('input[name=email]').type('Test@openforge.io');
38+
cy.get('input[name=phone]').type('3333333333');
39+
cy.get('input[name=message]').type('Testing');
40+
cy.get('button[type=submit]').click();
41+
cy.wait(9000);
42+
cy.get('[data-cy=sub]').screenshot('exist'); //if the image is rendered the submit is done
43+
});
44+
});
45+
46+
describe('User is not able to submit a contact form with a empty full name field', () => {
47+
it('Check that the submit is disabled', function() {
48+
cy.visit('localhost:3333/contact');
49+
cy.get('input[name=email]').type('Test@openforge.io');
50+
cy.get('input[name=phone]').type('3333333333');
51+
cy.get('input[name=message]').type('Testing');
52+
cy.get('button[type=submit]')
53+
.should('exist')
54+
.and('be.disabled');
55+
});
56+
});
57+
58+
describe('User is not able to submit a contact form with a empty email field', () => {
59+
it('Check that the submit is disabled', function() {
60+
cy.visit('localhost:3333/contact');
61+
cy.get('input[name=name]').type('Tester');
62+
cy.get('input[name=phone]').type('3333333333');
63+
cy.get('input[name=message]').type('Testing');
64+
cy.get('button[type=submit]')
65+
.should('exist')
66+
.and('be.disabled');
67+
});
68+
});
69+
70+
describe('User is not able to submit a contact form with a empty email field', () => {
71+
it('Check that the submit is disabled', function() {
72+
cy.visit('localhost:3333/contact');
73+
cy.get('input[name=name]').type('Tester');
74+
cy.get('input[name=email]').type('wrong_email');
75+
cy.get('input[name=phone]').type('3333333333');
76+
cy.get('input[name=message]').type('Testing');
77+
cy.get('button[type=submit]')
78+
.should('exist')
79+
.and('be.disabled');
80+
});
681
});
782

83+
describe('The mailbox icon displays on the right hand side of the contact form', () => {
84+
it('Check that the img exists', function() {
85+
cy.visit('localhost:3333/contact');
86+
cy.get('[data-cy=mailbox-img]')
87+
.should('exist')
88+
.and('be.visible');
89+
});
90+
});
91+
92+
describe('User is not able to submit the contact form after clearing all of the fields', () => {
93+
it('Check that the submit is disabled after clearing form', function() {
94+
cy.visit('localhost:3333/contact');
95+
cy.get('input[name=name]').type('Tester');
96+
cy.get('input[name=name]').clear();
97+
cy.get('input[name=email]').type('wrong_email');
98+
cy.get('input[name=email]').clear();
99+
cy.get('input[name=phone]').type('3333333333');
100+
cy.get('input[name=phone]').clear();
101+
cy.get('input[name=message]').type('Testing');
102+
cy.get('input[name=message]').clear();
103+
cy.get('button[type=submit]')
104+
.should('exist')
105+
.and('be.disabled');
106+
});
107+
});
108+
109+
describe('User is unable to submit a empty contact form', () => {
110+
it('Check that the button is disabled', function() {
111+
cy.visit('localhost:3333/contact');
112+
cy.get('button[type=submit]')
113+
.should('exist')
114+
.and('be.disabled');
115+
});
116+
});
117+
118+
describe('The footer is visible on the "Contact" page', () => {
119+
it('Check the footer exists', () => {
120+
cy.visit('localhost:3333/contact');
121+
cy.get('footer')
122+
.should('exist')
123+
.and('be.visible');
124+
});
125+
});
8126
/*describe('Nav Bar Navigation (Desktop)', function () {
9127
// TODO -> Test suite for the blog link in nav bar.
10128
it('Home on nav bar should redirect to home page', function () {
@@ -142,33 +260,32 @@ describe('Contact Page', function () {
142260
})
143261
})*/
144262

145-
describe('Contact Form', function () {
146-
let nameField;
147-
let emailField;
148-
let phoneField;
149-
let messageField;
263+
// describe('Contact Form', function () {
264+
// let nameField;
265+
// let emailField;
266+
// let phoneField;
267+
// let messageField;
150268

151-
describe('Successful form submission', function () {
152-
beforeEach(() => {
153-
nameField = cy.get('input[name=name]').type('Testing');
154-
emailField = cy.get('input[name=email]').type('testEmail@gmail.com');
155-
phoneField = cy.get('input[name=phone]').type('1459341234');
156-
messageField = cy.get('input[name=message]').type('This is a test message');
157-
cy.get('@submitBtn').click();
158-
});
269+
// describe('Successful form submission', function () {
270+
// beforeEach(() => {
271+
// nameField = cy.get('input[name=name]').type('Testing');
272+
// emailField = cy.get('input[name=email]').type('testEmail@gmail.com');
273+
// phoneField = cy.get('input[name=phone]').type('1459341234');
274+
// messageField = cy.get('input[name=message]').type('This is a test message');
275+
// cy.get('@submitBtn').click();
276+
// });
159277

160-
it('Should show a success message on submit when all form values have been filled out', function () {
161-
cy.wait(9000);
162-
cy.get('[data-cy=sub]').screenshot('exist'); //if the image is rendered the submit is done
163-
});
164-
165-
});
166-
describe('Unsucessful form submission', function () {
167-
it('DOM should not show success message when all fields of the form are not filled out', function () {
168-
nameField = cy.get('input[name=name]').type('Test Name');
169-
cy.get('@submitBtn').should('be.disabled');
170-
});
171-
});
172-
});
278+
// it('Should show a success message on submit when all form values have been filled out', function () {
279+
// cy.wait(9000);
280+
// cy.get('[data-cy=sub]').screenshot('exist'); //if the image is rendered the submit is done
281+
// });
173282

283+
// });
284+
// describe('Unsucessful form submission', function () {
285+
// it('DOM should not show success message when all fields of the form are not filled out', function () {
286+
// nameField = cy.get('input[name=name]').type('Test Name');
287+
// cy.get('@submitBtn').should('be.disabled');
288+
// });
289+
// });
290+
// });
174291
});

‎src/pages/app-contact/app-contact.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export class AppContact {
3838

3939
radioChoices: any;
4040

41-
constructor() { }
41+
constructor() {}
4242

4343
@Listen('check')
4444
@Listen('valueChanged')
@@ -185,6 +185,7 @@ export class AppContact {
185185

186186
<app-input
187187
name="message"
188+
id="message"
188189
label={translate('contact.form.whatAreYouWorkingOn')}
189190
type="text"
190191
placeholder={translate('contact.form.placeholder.message')}
@@ -205,7 +206,7 @@ export class AppContact {
205206
</div>
206207
</div>
207208
<div class="col-lg-6 d-none d-lg-flex form-image-content">
208-
<app-img src="/assets/contact/mailbox-graphic.png" alt="Mail Box graphic" />
209+
<app-img data-cy="mailbox-img" src="/assets/contact/mailbox-graphic.png" alt="Mail Box graphic" />
209210
</div>
210211
</div>
211212
) : null}

0 commit comments

Comments
 (0)