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

Commit 5bc86db

Browse files
author
Pablo
committed
Merge remote-tracking branch 'origin/feature/cypress-readme' into feature/cypress-readme
2 parents 880b8b5 + eb2449c commit 5bc86db

File tree

3 files changed

+169
-172
lines changed

3 files changed

+169
-172
lines changed

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

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
describe('Blog Page', function() {
2+
describe('User is able to navigate to our twitter page via the twitter icon under "Follow Us"', () => {
3+
it('Check that the twitter opens', function() {
4+
cy.visit('localhost:3333/blog', {
5+
onBeforeLoad(win) {
6+
cy.stub(win, 'open');
7+
},
8+
});
9+
cy.get('.d-sm-block.d-md-none.d-lg-block #twitter')
10+
.should('exist')
11+
.click();
12+
cy.window()
13+
.its('open')
14+
.should('be.called');
15+
});
16+
});
17+
18+
describe('User is able to navigate to our linkedin page via the linkedin icon under "Follow Us"', () => {
19+
it('Check that the linkedin opens', function() {
20+
cy.visit('localhost:3333/blog', {
21+
onBeforeLoad(win) {
22+
cy.stub(win, 'open');
23+
},
24+
});
25+
cy.get('.d-sm-block.d-md-none.d-lg-block #linkedin')
26+
.should('exist')
27+
.click();
28+
cy.window()
29+
.its('open')
30+
.should('be.called');
31+
});
32+
});
33+
34+
describe('User is able to navigate to our facebook page via the facebook icon under "Follow Us"', () => {
35+
it('Check that the facebook opens', function() {
36+
cy.visit('localhost:3333/blog', {
37+
onBeforeLoad(win) {
38+
cy.stub(win, 'open');
39+
},
40+
});
41+
cy.get('.d-sm-block.d-md-none.d-lg-block #facebook')
42+
.should('exist')
43+
.click();
44+
cy.window()
45+
.its('open')
46+
.should('be.called');
47+
});
48+
});
49+
50+
describe('The feature blog post only displays in the all tab', () => {
51+
it('Check the all tab', () => {
52+
cy.visit('localhost:3333/blog');
53+
cy.get('[data-cy=all]')
54+
.should('exist')
55+
.should('have.class', 'active');
56+
cy.get('app-blog-featured')
57+
.contains("What's New In Our Blog")
58+
.should('exist')
59+
.and('be.visible');
60+
cy.get('[data-cy=announcements]').click();
61+
cy.wait(1000);
62+
cy.get('app-blog-featured').should('not.exist');
63+
cy.get('[data-cy=development]').click();
64+
cy.wait(1000);
65+
cy.get('app-blog-featured').should('not.exist');
66+
cy.get('[data-cy=design]').click();
67+
cy.wait(1000);
68+
cy.get('app-blog-featured').should('not.exist');
69+
cy.get('[data-cy=business]').click();
70+
cy.wait(1000);
71+
cy.get('app-blog-featured').should('not.exist');
72+
});
73+
});
74+
75+
describe('User is able to navigate blog posts via the pagination', () => {
76+
it('Check pagination', () => {
77+
cy.visit('localhost:3333/blog');
78+
cy.get('[data-cy=all]')
79+
.should('exist')
80+
.should('have.class', 'active');
81+
cy.get('ul.blog-page-list .blog-page-item:first-child()')
82+
.should('exist')
83+
.should('have.class', 'active');
84+
cy.get('ul.blog-page-list .blog-page-item:nth-child(2)')
85+
.should('exist')
86+
.click();
87+
cy.get('ul.blog-page-list .blog-page-item:nth-child(2)')
88+
.should('exist')
89+
.should('have.class', 'active');
90+
cy.get('ul.blog-page-list .blog-page-item:nth-child(3)')
91+
.should('exist')
92+
.click();
93+
cy.get('ul.blog-page-list .blog-page-item:nth-child(3)')
94+
.should('exist')
95+
.should('have.class', 'active');
96+
});
97+
});
98+
99+
describe('The user is able to navigate to our newsletter signup page from a blog article', () => {
100+
it('Check newsletter', () => {
101+
cy.visit('localhost:3333/blog');
102+
cy.get('.featured-post-title')
103+
.should('exist')
104+
.and('be.visible')
105+
.click();
106+
cy.get('#mc-embedded-subscribe')
107+
.should('exist')
108+
.and('be.visible');
109+
});
110+
});
111+
112+
describe('User is able to navigate back to the main blog page from a specific blog article', () => {
113+
it('Check back navigation from blog', () => {
114+
cy.visit('localhost:3333/blog');
115+
cy.get('.featured-post-title')
116+
.should('exist')
117+
.and('be.visible')
118+
.click();
119+
cy.wait(1000);
120+
cy.get('.top-buttons-container .back-link')
121+
.should('exist')
122+
.and('be.visible');
123+
cy.get('.top-buttons-container .back-link:first-child() stencil-route-link').click();
124+
cy.wait(1000);
125+
cy.get('app-blog-featured')
126+
.contains("What's New In Our Blog")
127+
.should('exist')
128+
.and('be.visible');
129+
});
130+
});
131+
132+
describe('The footer is visible on the "Blog" page', () => {
133+
it('Check the footer exists', () => {
134+
cy.visit('localhost:3333/blog');
135+
cy.get('footer')
136+
.should('exist')
137+
.and('be.visible');
138+
});
139+
});
140+
});

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

Lines changed: 0 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -123,169 +123,4 @@ describe('Contact Page', function() {
123123
.and('be.visible');
124124
});
125125
});
126-
/*describe('Nav Bar Navigation (Desktop)', function () {
127-
// TODO -> Test suite for the blog link in nav bar.
128-
it('Home on nav bar should redirect to home page', function () {
129-
cy.get('.navbar').contains('Home').click()
130-
cy.url().should('include', '/')
131-
})
132-
describe('Services', function () {
133-
beforeEach(() => {
134-
// Gets Services text
135-
cy.get('.container > #navbarSupportedContent').contains('Services');
136-
// Clicks services dropdown arrow
137-
cy.get('.container > #navbarSupportedContent > .navbar-nav > .nav-item > #navbarDropdown').click();
138-
})
139-
it('Services should drop down to display Development and navigate to developer page', function () {
140-
cy.get('.navbar-nav > .nav-item:nth-child(2) > .dropdown-menu > .hydrated:nth-child(1) > .nav-link').contains('Development').click()
141-
cy.url().should('include', '/app-developer')
142-
})
143-
it('Services should drop down to display Design and navigate to design page', function () {
144-
cy.get('.navbar-nav > .nav-item:nth-child(2) > .dropdown-menu > .hydrated:nth-child(2) > .nav-link').contains('Design').click();
145-
cy.url().should('include', '/app-designer');
146-
})
147-
it('Services should drop down to display Consulting and navigate to consulting page', function () {
148-
cy.get('.navbar-nav > .nav-item:nth-child(2) > .dropdown-menu > .hydrated:nth-child(3) > .nav-link').contains('Consulting').click()
149-
cy.url().should('include', '/startup-consulting')
150-
});
151-
});
152-
153-
describe('About', function () {
154-
it('About should drop down to display Meet the team and navigate to about page', function () {
155-
cy.get('.navbar').contains('About').click()
156-
cy.get('.navbar').contains('Meet the team').click()
157-
cy.url().should('include', '/about')
158-
cy.contains('We Are Passionate About Technology and Design')
159-
})
160-
it('About should drop down to display Juntoscope Case Study and navigate to juntoscope page', function () {
161-
cy.get('.navbar').contains('About').click()
162-
cy.get('.navbar').contains('Juntoscope Case Study').click()
163-
cy.url().should('include', '/juntoscope')
164-
cy.contains('Case Study')
165-
})
166-
it('About should drop down to display Toolbox and navigate to Toolbox page', function () {
167-
cy.get('.navbar').contains('About').click()
168-
cy.get('.navbar').contains('Toolbox').click()
169-
cy.url().should('include', '/toolbox')
170-
cy.contains('Here are some of the tools we use')
171-
})
172-
it('About should drop down to display PWA White Paper and navigate to PWA White Paper page', function () {
173-
cy.get('.navbar').contains('About').click()
174-
cy.get('.navbar').contains('PWA White Paper').click()
175-
cy.url().should('include', '/resources/pwa-white-paper')
176-
cy.contains('What is a PWA and is it right for you?')
177-
})
178-
});
179-
})
180-
181-
describe('Nav Bar Navigation (Mobile)', function () {
182-
beforeEach(() => {
183-
cy.viewport(960, 600) // Sets view to large to enable nav menu
184-
cy.get('.navbar-toggler').click() // expands nav menu before each test
185-
})
186-
it('Nav menu should collapse', function () {
187-
cy.wait(2000)
188-
cy.get('.navbar-toggler').click()
189-
})
190-
it('Home on nav Bar should redirect to home page', function () {
191-
cy.get('.navbar').contains('Home').click()
192-
cy.url().should('include', '/')
193-
})
194-
195-
describe('Services', function () {
196-
beforeEach(() => {
197-
cy.get('.container > #navbarSupportedContent').contains('Services');
198-
cy.get('.container > #navbarSupportedContent > .navbar-nav > .nav-item > #navbarDropdown').click();
199-
})
200-
it('Services should drop down to display Development and navigate to developer page', function () {
201-
cy.get('.navbar-nav > .nav-item:nth-child(2) > .dropdown-menu > .hydrated:nth-child(1) > .nav-link').contains('Development').click()
202-
cy.url().should('include', '/app-developer')
203-
})
204-
it('Services should drop down to display Design and navigate to design page', function () {
205-
cy.get('.navbar-nav > .nav-item:nth-child(2) > .dropdown-menu > .hydrated:nth-child(2) > .nav-link').contains('Design').click()
206-
cy.url().should('include', '/app-designer')
207-
})
208-
it('Services should drop down to display Consulting and navigate to consulting page', function () {
209-
cy.get('.navbar-nav > .nav-item:nth-child(2) > .dropdown-menu > .hydrated:nth-child(3) > .nav-link').contains('Consulting').click();
210-
cy.url().should('include', '/startup-consulting');
211-
})
212-
});
213-
214-
describe('About', function () {
215-
it('About should drop down to display Meet the team and navigate to about page', function () {
216-
cy.get('.navbar').contains('About').click()
217-
cy.get('.navbar').contains('Meet the team').click()
218-
cy.url().should('include', '/about')
219-
cy.contains('We Are Passionate About Technology and Design')
220-
})
221-
it('About should drop down to display Juntoscope Case Study and navigate to juntoscope page', function () {
222-
cy.get('.navbar').contains('About').click()
223-
cy.get('.navbar').contains('Juntoscope Case Study').click()
224-
cy.url().should('include', '/juntoscope')
225-
cy.contains('Case Study')
226-
})
227-
it('About should drop down to display Toolbox and navigate to Toolbox page', function () {
228-
cy.get('.navbar').contains('About').click()
229-
cy.get('.navbar').contains('Toolbox').click()
230-
cy.url().should('include', '/toolbox')
231-
cy.contains('Here are some of the tools we use')
232-
})
233-
it('About should drop down to display PWA White Paper and navigate to PWA White Paper page', function () {
234-
cy.get('.navbar').contains('About').click()
235-
cy.get('.navbar').contains('PWA White Paper').click()
236-
cy.url().should('include', '/resources/pwa-white-paper')
237-
cy.contains('What is a PWA and is it right for you?')
238-
})
239-
});
240-
});
241-
242-
describe('Header', function () {
243-
it('Header should display with appropriate text content within it', function () {
244-
const h2Content = 'Let\'s Work Together'
245-
const pContent = 'Request Free Quote'
246-
247-
cy.get('header').should('exist').and('be.visible')
248-
cy.get('.hero').contains(h2Content).and('be.visible')
249-
cy.get('.hero').contains(pContent).and('be.visible')
250-
})
251-
252-
it('Should contain a Request Now button that scrolls to the form on click', function () {
253-
cy.get('header')
254-
.find('.btn')
255-
.should('exist')
256-
.and('be.visible')
257-
.and('contain', 'Request Free Quote')
258-
.click()
259-
cy.get('#second-content').click()
260-
})
261-
})*/
262-
263-
// describe('Contact Form', function () {
264-
// let nameField;
265-
// let emailField;
266-
// let phoneField;
267-
// let messageField;
268-
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-
// });
277-
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-
// });
282-
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-
// });
291126
});

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

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,11 @@ export class AppBlog {
247247
filterClass += ' disabled';
248248
filterLinkClass += ' disabled';
249249
}
250+
const cyName = filter.slug ? filter.slug : 'all';
251+
250252
return (
251253
<li class={filterClass}>
252-
<a onClick={() => this.handleFilter(filter.slug)} href="#" class={filterLinkClass}>
254+
<a onClick={() => this.handleFilter(filter.slug)} href="#" class={filterLinkClass} data-cy={cyName}>
253255
{filter.name}
254256
</a>
255257
</li>
@@ -328,6 +330,26 @@ export class AppBlog {
328330
this.displaySearchBar = false;
329331
}
330332

333+
open(provider: string) {
334+
switch (provider) {
335+
case 'instagram':
336+
window.open('https://www.instagram.com/openforgemobile/', '_blank');
337+
break;
338+
case 'twitter':
339+
window.open('https://twitter.com/openforgemobile', '_blank');
340+
break;
341+
case 'linkedin':
342+
window.open('https://www.linkedin.com/company/openforge/', '_blank');
343+
break;
344+
case 'facebook':
345+
window.open('https://www.facebook.com/openforgemobile/', '_blank');
346+
break;
347+
348+
default:
349+
break;
350+
}
351+
}
352+
331353
render() {
332354
const featuredPost = this.renderFeaturedPost(this.featuredPost, this.featuredIsLoading, this.featuredIsError);
333355
const filters = this.renderFilters(this.blogFilter, this.searchIsLoading || this.blogIsLoading, this.searchQuery);
@@ -409,13 +431,13 @@ export class AppBlog {
409431
<div class="col-sm-6 text-center">
410432
<p class="contact-icons-label d-none d-md-block">Follow Us:</p>
411433
<div class="contact-icons d-none d-md-block">
412-
<a href="https://twitter.com/openforgemobile" target="_blank" rel="noopener">
434+
<a onClick={() => this.open('twitter')} id="twitter" target="_blank" rel="noopener" aria-label="Openforge Twitter account link">
413435
<app-img class="contact-icon" src="/assets/blog/twitter.png" alt="twitter" />
414436
</a>
415-
<a href="https://www.facebook.com/openforgemobile/" target="_blank" rel="noopener">
437+
<a onClick={() => this.open('facebook')} id="facebook" target="_blank" rel="noopener" aria-label="Openforge Facebook account link">
416438
<app-img class="contact-icon" src="/assets/blog/facebook.png" alt="facebook" />
417439
</a>
418-
<a href="https://www.linkedin.com/company/openforge/" target="_blank" rel="noopener">
440+
<a onClick={() => this.open('linkedin')} id="linkedin" target="_blank" rel="noopener" aria-label="Openforge Linkedin account link">
419441
<app-img class="contact-icon" src="/assets/blog/linkedin.png" alt="linkedin" />
420442
</a>
421443
</div>
@@ -457,13 +479,13 @@ export class AppBlog {
457479

458480
<p class="contact-icons-label d-none d-md-block">Follow Us:</p>
459481
<div class="contact-icons d-none d-md-block">
460-
<a href="https://twitter.com/openforgemobile" target="_blank" rel="noopener">
482+
<a onClick={() => this.open('twitter')} id="twitter" target="_blank" rel="noopener" aria-label="Openforge Twitter account link">
461483
<app-img class="contact-icon" src="/assets/blog/twitter.png" alt="twitter" />
462484
</a>
463-
<a href="https://www.facebook.com/openforgemobile/" target="_blank" rel="noopener">
485+
<a onClick={() => this.open('facebook')} id="facebook" target="_blank" rel="noopener" aria-label="Openforge Facebook account link">
464486
<app-img class="contact-icon" src="/assets/blog/facebook.png" alt="facebook" />
465487
</a>
466-
<a href="https://www.linkedin.com/company/openforge/" target="_blank" rel="noopener">
488+
<a onClick={() => this.open('linkedin')} id="linkedin" target="_blank" rel="noopener" aria-label="Openforge Linkedin account link">
467489
<app-img class="contact-icon" src="/assets/blog/linkedin.png" alt="linkedin" />
468490
</a>
469491
</div>

0 commit comments

Comments
 (0)