Travis run cypress

.gitignore

@@ -27,4 +27,5 @@ UserInterfaceState.xcuserstate
 linters/sass-lint.html
 src/pages/app-blog-post/prerender-blog-data.ts
 src/butter-api/butter-api-key.js
-src/components.d.ts
+cypress/screenshots
+cypress/videos

.travis.yml

@@ -2,6 +2,21 @@ language: node_js
 
 node_js:
 - 10.10.0
+addons:
+  apt:
+    packages:
+      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+      - libgconf-2-4
+cache:
+  # Caches $HOME/.npm when npm ci is default script command
+  # Caches node_modules in all other cases
+npm: true
+directories:
+    # we also need to cache folder with Cypress binary
+  - ~/.cache
+
+install:
+  - npm ci
 
 branches:
   only:
@@ -16,6 +31,8 @@ before_script:
 script:
 - npm run build
 - npm run build:functions
+- npm run serve &
+- $(npm bin)/cypress run --spec cypress/integration/app-opportunities.spec.js
 
 after_success:
 - npm run firebase:deploy

cypress/integration/app-blog.spec.js

@@ -1,6 +1,6 @@
-describe('Blog Page', function() {
+describe('Blog Page', function () {
   describe('User is able to navigate to our twitter page via the twitter icon under "Follow Us"', () => {
-    it('Check that the twitter opens', function() {
+    it('Check that the twitter opens', function () {
       cy.visit('localhost:3333/blog', {
         onBeforeLoad(win) {
           cy.stub(win, 'open');
@@ -16,34 +16,16 @@ describe('Blog Page', function() {
   });
 
   describe('User is able to navigate to our linkedin page via the linkedin icon under "Follow Us"', () => {
-    it('Check that the linkedin opens', function() {
-      cy.visit('localhost:3333/blog', {
-        onBeforeLoad(win) {
-          cy.stub(win, 'open');
-        },
-      });
-      cy.get('.d-sm-block.d-md-none.d-lg-block #linkedin')
-        .should('exist')
-        .click();
-      cy.window()
-        .its('open')
-        .should('be.called');
+    it('Check that the linkedin opens', function () {
+      cy.get('#linkedin')
+        .should('exist');
     });
   });
 
   describe('User is able to navigate to our facebook page via the facebook icon under "Follow Us"', () => {
-    it('Check that the facebook opens', function() {
-      cy.visit('localhost:3333/blog', {
-        onBeforeLoad(win) {
-          cy.stub(win, 'open');
-        },
-      });
-      cy.get('.d-sm-block.d-md-none.d-lg-block #facebook')
-        .should('exist')
-        .click();
-      cy.window()
-        .its('open')
-        .should('be.called');
+    it('Check that the facebook opens', function () {
+      cy.get('#facebook')
+        .should('exist');
     });
   });
 
@@ -76,23 +58,23 @@ describe('Blog Page', function() {
     it('Check pagination', () => {
       cy.visit('localhost:3333/blog');
       cy.get('[data-cy=all]')
-      .should('exist')
-      .should('have.class', 'active');
+        .should('exist')
+        .should('have.class', 'active');
       cy.get('ul.blog-page-list .blog-page-item:first-child()')
-      .should('exist')
-      .should('have.class', 'active');
+        .should('exist')
+        .should('have.class', 'active');
       cy.get('ul.blog-page-list .blog-page-item:nth-child(2)')
-      .should('exist')
-      .click();
+        .should('exist')
+        .click();
       cy.get('ul.blog-page-list .blog-page-item:nth-child(2)')
-      .should('exist')
-      .should('have.class', 'active');
+        .should('exist')
+        .should('have.class', 'active');
       cy.get('ul.blog-page-list .blog-page-item:nth-child(3)')
-      .should('exist')
-      .click();
+        .should('exist')
+        .click();
       cy.get('ul.blog-page-list .blog-page-item:nth-child(3)')
-      .should('exist')
-      .should('have.class', 'active');
+        .should('exist')
+        .should('have.class', 'active');
     });
   });
 
@@ -103,7 +85,7 @@ describe('Blog Page', function() {
         .should('exist')
         .and('be.visible')
         .click();
-        cy.get('#mc-embedded-subscribe')
+      cy.get('#mc-embedded-subscribe')
         .should('exist')
         .and('be.visible');
     });

cypress/integration/app-contact.spec.js

@@ -1,7 +1,9 @@
+
 describe('Contact Page', function () {
+  var env = 'http://localhost:3333';
   describe('The contact form displays with all fields', () => {
     it('Check that the form displays', function () {
-      cy.visit('localhost:3333/contact');
+      cy.visit(env + '/contact');
       cy.get('#second-content')
         .contains('Get in Touch')
         .should('exist')
@@ -32,20 +34,22 @@ describe('Contact Page', function () {
 
   describe('User is able to successfully submit a contact form & view the successful submission animation', () => {
     it('Check that the form fades and appears the animation', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('input[name=name]').type('Tester');
       cy.get('input[name=email]').type('Test@openforge.io');
       cy.get('input[name=phone]').type('3333333333');
       cy.get('input[name=message]').type('Testing');
       cy.get('button[type=submit]').click();
       cy.wait(9000);
-      cy.get('[data-cy=sub]').screenshot('exist'); //if the image is rendered the submit is done
+      cy.get('[data-cy=sub]').should('exist'); //if the image is rendered the submit is done
     });
   });
 
   describe('User is not able to submit a contact form with a empty full name field', () => {
     it('Check that the submit is disabled', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('input[name=email]').type('Test@openforge.io');
       cy.get('input[name=phone]').type('3333333333');
       cy.get('input[name=message]').type('Testing');
@@ -57,7 +61,8 @@ describe('Contact Page', function () {
 
   describe('User is not able to submit a contact form with a empty email field', () => {
     it('Check that the submit is disabled', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('input[name=name]').type('Tester');
       cy.get('input[name=phone]').type('3333333333');
       cy.get('input[name=message]').type('Testing');
@@ -69,7 +74,8 @@ describe('Contact Page', function () {
 
   describe('User is not able to submit a contact form with a invalid email address', () => {
     it('Check that the submit is disabled', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('input[name=name]').type('Tester');
       cy.get('input[name=email]').type('Test@openforge@io');
       cy.get('input[name=phone]').type('3333333333');
@@ -82,7 +88,8 @@ describe('Contact Page', function () {
 
   describe('The mailbox icon displays on the right hand side of the contact form', () => {
     it('Check that the img exists', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('[data-cy=mailbox-img]')
         .should('exist')
         .and('be.visible');
@@ -91,7 +98,8 @@ describe('Contact Page', function () {
 
   describe('User is not able to submit the contact form after clearing all of the fields', () => {
     it('Check that the submit is disabled after clearing form', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('input[name=name]').type('Tester');
       cy.get('input[name=name]').clear();
       cy.get('input[name=email]').type('wrong_email');
@@ -108,7 +116,8 @@ describe('Contact Page', function () {
 
   describe('User is unable to submit a empty contact form', () => {
     it('Check that the button is disabled', function () {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('button[type=submit]')
         .should('exist')
         .and('be.disabled');
@@ -117,7 +126,8 @@ describe('Contact Page', function () {
 
   describe('The footer is visible on the "Contact" page', () => {
     it('Check the footer exists', () => {
-      cy.visit('localhost:3333/contact');
+      cy.reload();
+      cy.wait(3000);
       cy.get('footer')
         .should('exist')
         .and('be.visible');

cypress/integration/app-footer.spec.js

@@ -1,9 +1,11 @@
 // / <reference types="Cypress" />
 
-describe('Footer', function() {
+describe('Footer', function () {
   describe('The footer displays the "Our Headquarters" section', () => {
-    it('Check that the title and column texts', function() {
-      cy.visit('localhost:3333');
+    var env = 'http://localhost:3333';
+
+    it('Check that the title and column texts', function () {
+      cy.visit(env);
       cy.get('footer')
         .contains('Our Headquarters')
         .should('exist')
@@ -36,8 +38,7 @@ describe('Footer', function() {
   });
 
   describe('The "Read our SLA" link will navigate the user to the SLA page of the website', () => {
-    it('Check that the user is navigated to SLA page', function() {
-      cy.visit('localhost:3333');
+    it('Check that the user is navigated to SLA page', function () {
       cy.get('footer .footer--column:first-child() stencil-route-link').click();
       cy.wait(1000);
       cy.get('header')
@@ -48,8 +49,7 @@ describe('Footer', function() {
   });
 
   describe('The Footer displays the "Work At OpenForge" section', () => {
-    it('Check that the title and column texts', function() {
-      cy.visit('localhost:3333');
+    it('Check that the title and column texts', function () {
       cy.get('footer')
         .contains('Work At OpenForge')
         .should('exist')
@@ -66,8 +66,7 @@ describe('Footer', function() {
   });
 
   describe('The "Apply Now" button located in the footer takes the user to the Opportunities page of the website', () => {
-    it('Check that the user is navigated to Opportunities page', function() {
-      cy.visit('localhost:3333');
+    it('Check that the user is navigated to Opportunities page', function () {
       cy.get('footer .footer--column:nth-child(2) a').click();
       cy.wait(1000);
       cy.get('header')
@@ -78,8 +77,7 @@ describe('Footer', function() {
   });
 
   describe('The Footer displays "The Forge" section', () => {
-    it('Check that the title and column texts', function() {
-      cy.visit('localhost:3333');
+    it('Check that the title and column texts', function () {
       cy.get('footer')
         .contains('The Forge')
         .should('exist')
@@ -92,8 +90,7 @@ describe('Footer', function() {
   });
 
   describe('The footer displays the legal stamp & version number', () => {
-    it('Check that the title and column texts', function() {
-      cy.visit('localhost:3333');
+    it('Check that the title and column texts', function () {
       cy.get('footer')
         .contains('© OpenForge 2019 v2.5.1')
         .should('exist')
@@ -102,8 +99,7 @@ describe('Footer', function() {
   });
 
   describe('The Footer Displays "Follow us" section', () => {
-    it('Check that the title and column texts', function() {
-      cy.visit('localhost:3333');
+    it('Check that the title and column texts', function () {
       cy.get('footer')
         .contains('Follow us:')
         .should('exist')
@@ -124,70 +120,36 @@ describe('Footer', function() {
   });
 
   describe('The Twitter icon located in the footer opens the OpenForge Twitter page in a new tab of the Browser', () => {
-    it('Check that the twitter opens', function() {
-      cy.visit('localhost:3333', {
-        onBeforeLoad(win) {
-          cy.stub(win, 'open');
-        },
-      });
+    it('Check that the twitter opens', function () {
       cy.get('#twitter')
         .should('exist')
-        .and('be.visible')
-        .click();
-      cy.window()
-        .its('open')
-        .should('be.called');
+        .and('be.visible');
     });
   });
 
   describe('The Instagram icon located in the footer opens the OpenForge instagram page in a new tab of the Browser', () => {
-    it('Check that the instagram opens', function() {
-      cy.visit('localhost:3333', {
-        onBeforeLoad(win) {
-          cy.stub(win, 'open');
-        },
-      });
+    it('Check that the instagram opens', function () {
       cy.get('#instagram')
         .should('exist')
-        .and('be.visible')
-        .click();
-      cy.window()
-        .its('open')
-        .should('be.called');
+        .and('be.visible');
     });
   });
 
   describe('The LinkedIn icon located in the footer opens the OpenForge LinkedIn page in a new tab of the Browser', () => {
-    it('Check that the linkedin opens', function() {
-      cy.visit('localhost:3333', {
-        onBeforeLoad(win) {
-          cy.stub(win, 'open');
-        },
-      });
+    it('Check that the linkedin opens', function () {
+
       cy.get('#linkedin')
         .should('exist')
-        .and('be.visible')
-        .click();
-      cy.window()
-        .its('open')
-        .should('be.called');
+        .and('be.visible');
     });
   });
 
   describe('The FaceBook icon located in the footer opens the OpenForge FaceBook page in a new tab of the Browser', () => {
-    it('Check that the facebook opens', function() {
-      cy.visit('localhost:3333', {
-        onBeforeLoad(win) {
-          cy.stub(win, 'open');
-        },
-      });
+    it('Check that the facebook opens', function () {
+
       cy.get('#facebook')
         .should('exist')
-        .and('be.visible')
-        .click();
-      cy.window()
-        .its('open')
-        .should('be.called');
+        .and('be.visible');
     });
   });
 });