Add configuration for Tests using Cypress; Add Cypress integration tests

.gitignore

@@ -67,4 +67,8 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
-.vscode
+.vscode
+
+# Cypress
+www/cypress/screenshots/
+www/cypress/videos/

www/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8000/",
+  "integrationFolder": "cypress/integration"
+}

www/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

www/cypress/integration/404.test.js

@@ -0,0 +1,22 @@
+describe("404", () => {
+  beforeEach(() => {
+    cy.visit("/not-existing-page", {
+      failOnStatusCode: false,
+    })
+    cy.get("button")
+      .contains("Preview custom 404 page")
+      .click()
+  })
+
+  it("should have the hamburger link and the contact me link", () => {
+    cy.get("[data-test=menu]").should("have.class", "hamburger")
+    cy.get("[data-test=contactme]").should("have.attr", "title", "Contact me")
+  })
+
+  it("should have a page not found, and a link to go to home page", () => {
+    cy.get("h1").contains("Page not found")
+    cy.get("[data-test=404]")
+      .find("a")
+      .should("have.attr", "href", "/")
+  })
+})

www/cypress/integration/about-me.test.js

@@ -0,0 +1,15 @@
+describe("About me page", () => {
+  beforeEach(() => {
+    cy.visit("/about-me")
+  })
+
+  it("should have the hamburger link and the contact me link", () => {
+    cy.get("[data-test=menu]").should("have.class", "hamburger")
+    cy.get("[data-test=contactme]").should("have.attr", "title", "Contact me")
+  })
+
+  it("should contains Abot me h2, and experience h2", () => {
+    cy.get("h2").contains("About Me!")
+    cy.get("h2").contains("Experience!")
+  })
+})

www/cypress/integration/experience.test.js

@@ -0,0 +1,52 @@
+describe("Experience page", () => {
+  beforeEach(() => {
+    cy.visit("/experience")
+    cy.wait(1000)
+  })
+
+  it("should have the hamburger link and the contact me link", () => {
+    cy.get("h1").contains("Work Experience")
+    cy.get("[data-test=menu]").should("have.class", "hamburger")
+    cy.get("[data-test=contactme]").should("have.attr", "title", "Contact me")
+  })
+
+  it("should show a list of jobs", () => {
+    cy.get("[data-test=jobs]")
+      .find(">div")
+      .should($div => {
+        expect($div.length, "more that 1 item").to.be.greaterThan(1)
+      })
+
+    cy.get("[data-test=jobs]")
+      .find(">div a")
+      .each($el => {
+        console.log($el.attr("href"))
+        expect($el.attr("href")).to.match(/^\/experience\//)
+      })
+  })
+
+  it("should has data-year attribute", () => {
+    cy.get("[data-test=jobs]")
+      .find(">div")
+      .filter("[data-year]")
+      .each($el => {
+        assert.isNumber(
+          parseInt($el.attr("data-year"), 10),
+          "data-year is a number"
+        )
+      })
+  })
+
+  it("should display all jobs in small, medium and big screen", () => {
+    const sizes = [554, 762, 1000]
+    sizes.forEach(width => {
+      cy.viewport(width, 720)
+
+      cy.get("[data-test=jobs]")
+        .find(">div a")
+        .each($el => {
+          cy.wrap($el).should("be.visible")
+        })
+    })
+  })
+})

www/cypress/integration/home.test.js

@@ -0,0 +1,52 @@
+describe("Home page", () => {
+  beforeEach(() => {
+    cy.visit("/")
+  })
+
+  it("open contact me and close it", () => {
+    cy.get("[data-test=contactme]").click()
+    cy.get(".contact").should("have.class", "contactme-open")
+    cy.wait(500)
+    cy.get("[data-test=contactmeClose]").click()
+    cy.get(".contact").should("not.have.class", "contactme-open")
+  })
+
+  it("check content in contact me when it's open", () => {
+    cy.get("[data-test=contactme]").click()
+    cy.contains(".contactme-info", "Get in touch with me on")
+    cy.wait(500)
+    cy.get("[data-test=contactmeClose]").click()
+    cy.get(".contact").should("not.have.class", "contactme-open")
+  })
+
+  it("open hamburguer menu and close it", () => {
+    cy.get(".hamburger")
+      .click()
+      .should("have.class", "is-opened-navi")
+    cy.wait(1000)
+    // Close menu
+    cy.get(".hamburger")
+      .click()
+      .should("not.have.class", "is-opened-navi")
+  })
+
+  it("search for 4 links, and close it", () => {
+    cy.get(".hamburger").click()
+    cy.wait(1000)
+    // Count Links
+    cy.get("[data-test=menulinks]")
+      .find("a.is-opened")
+      .should($a => {
+        expect($a, "4 items").to.have.length(4)
+        expect($a.eq(0), "first item").to.contain("Home")
+        expect($a.eq(1), "second item").to.contain("Experience")
+        expect($a.eq(2), "thrid item").to.contain("Skills")
+        expect($a.eq(3), "fourth item").to.contain("About Me")
+
+        expect($a.eq(0).attr("href"), "Home link").to.eq("/")
+        expect($a.eq(1).attr("href"), "Experience link").to.eq("/experience")
+        expect($a.eq(2).attr("href"), "Skills link").to.eq("/skills")
+        expect($a.eq(3).attr("href"), "About Me link").to.eq("/about-me")
+      })
+  })
+})

www/cypress/integration/job.template.test.js

@@ -0,0 +1,70 @@
+describe("Vlooping experience page", () => {
+  const h3Titles = [
+    "Mobile App Development",
+    "Mobile App",
+    "Queue",
+    "Social network",
+    "Recording Messages",
+    "Report Content",
+  ]
+
+  beforeEach(() => {
+    cy.visit("/experience/vlooping")
+    cy.wait(1000)
+  })
+
+  it("should not have the hamburger link and should not have the contact me link", () => {
+    cy.get("[data-test=menu]").should("not.exist")
+    cy.get("[data-test=contactme]").should("not.exist")
+  })
+
+  it("should have navigations links", () => {
+    cy.get("[data-test=goback]")
+      .should("exist")
+      .and("have.attr", "href", "/experience")
+    cy.get("[data-test=previous]").should("exist")
+    cy.get("[data-test=next]").should("exist")
+  })
+
+  it("should navigate between next slides", () => {
+    // Next button
+    h3Titles.forEach(title => {
+      cy.get("[data-test=slideshow")
+        .find("[aria-hidden=true]")
+        .should("be.visible")
+        .find("h3")
+        .contains(title)
+      cy.get("[data-test=next]").click()
+      cy.scrollTo(0, 0)
+      cy.wait(1000)
+    })
+  })
+
+  it("should navigate between previous slides", () => {
+    h3Titles.push(h3Titles.shift())
+    console.log("h3Titles", h3Titles)
+    // Previous button
+    h3Titles.reverse().forEach(title => {
+      cy.get("[data-test=slideshow")
+        .find("[aria-hidden=true]")
+        .should("be.visible")
+        .find("h3")
+        .contains(title)
+      cy.get("[data-test=previous]").click()
+      cy.scrollTo(0, 0)
+      cy.wait(1000)
+    })
+  })
+
+  it("should have title content and skills content", () => {
+    cy.get("[data-test=content]")
+      .find("h1")
+      .should("exist")
+    cy.get("[data-test=content]")
+      .find("h3")
+      .should("exist")
+    cy.get("main")
+      .find("header")
+      .contains("Tools used")
+  })
+})

www/cypress/integration/skills.test.js

@@ -0,0 +1,94 @@
+const checkItems = [0, 1, 2, 3, 4, 5]
+const itemsLength = checkItems.length
+
+describe("Skills page", () => {
+  beforeEach(() => {
+    cy.visit("/skills")
+    cy.wait(1000)
+  })
+
+  it("should have the hamburger link and should not have the contact me link", () => {
+    cy.get("h2").contains("Skills")
+    cy.get("[data-test=menu]").should("have.class", "hamburger")
+    cy.get("[data-test=contactme]").should("not.exist")
+  })
+
+  it("should show a list of skills", () => {
+    cy.get("[data-test=skills]").within(() => {
+      cy.root()
+        .find(">li")
+        .should($li => {
+          expect(
+            $li.length,
+            `more that ${itemsLength} items`
+          ).to.be.greaterThan(itemsLength)
+        })
+
+      cy.scrollTo(0, 210)
+      checkItems.forEach(item => {
+        cy.root()
+          .get("li")
+          .eq(item)
+          .should("be.visible")
+      })
+    })
+  })
+
+  it("should detect skills in the beginning and in end", () => {
+    cy.get("[data-test=skills]").within(() => {
+      cy.root()
+        .find(">li")
+        .should("contain", "React")
+        .and("contain", "React Native")
+        .and("contain", "Gatsby")
+        .and("contain", "Google Maps")
+        .and("contain", "CakePHP")
+        .and("contain", "SVN")
+    })
+  })
+
+  it("should the skill logos render a spacer div", () => {
+    cy.get("[data-test=skills]").within(() => {
+      cy.scrollTo(0, 210)
+      checkItems.forEach(item => {
+        cy.root()
+          .get("li")
+          .eq(item)
+          .find(`.gatsby-image-wrapper > div`)
+          .should(`have.attr`, `style`)
+          .and(`match`, /width: 100%; padding-bottom:/)
+      })
+    })
+  })
+
+  it("should the skill logos render sizes", () => {
+    cy.get("[data-test=skills]").within(() => {
+      cy.scrollTo(0, 210)
+      checkItems.forEach(item => {
+        cy.root()
+          .get("li")
+          .eq(item)
+          .find(`picture > source`)
+          .should(`have.attr`, `sizes`)
+          .and(`match`, /\(max-width: \d+px\) 100vw, \d+px/)
+      })
+    })
+  })
+
+  it("should the skill logos render correct srcset", () => {
+    cy.scrollTo(0, 210)
+    checkItems.forEach(item => {
+      cy.root()
+        .get("li")
+        .eq(item)
+        .find(`picture > source`)
+        .should(`have.attr`, `srcset`)
+        .and(srcset => {
+          srcset.split(/\s*,\s*/).forEach(part => {
+            expect(part).to.contain(`/static`)
+            expect(part).to.match(/\d{2,}w/)
+          })
+        })
+    })
+  })
+})

www/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

www/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

www/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands"
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')