test: add cypress e2e (#159)

cypress/integration/common/Header.spec.ts

@@ -0,0 +1,47 @@
+describe('Common > Header', () => {
+  beforeEach(() => cy.visit('/'))
+
+  describe('Switch theme color (dark/light)', () => {
+    it('should switch theme from `dark` (default) to `light`', () => {
+      cy.get('[data-cy=switch-theme-dark]').should('be.visible')
+      cy.get('[data-cy=switch-theme-light]').should('not.be.visible')
+      cy.get('body').should(
+        'not.have.css',
+        'background-color',
+        'rgb(255, 255, 255)'
+      )
+
+      cy.get('[data-cy=switch-theme-click]').click()
+
+      cy.get('[data-cy=switch-theme-dark]').should('not.be.visible')
+      cy.get('[data-cy=switch-theme-light]').should('be.visible')
+      cy.get('body').should(
+        'have.css',
+        'background-color',
+        'rgb(255, 255, 255)'
+      )
+    })
+  })
+
+  describe('Switch Language', () => {
+    it('should switch language from EN (default) to FR', () => {
+      cy.get('h1').contains('I am Divlo')
+      cy.get('[data-cy=language-flag-text]').contains('EN')
+      cy.get('[data-cy=languages-list]').should('not.exist')
+      cy.get('[data-cy=language-click]').click()
+      cy.get('[data-cy=languages-list]').should('exist')
+      cy.get('[data-cy=languages-list] > li:first-child').contains('FR').click()
+      cy.get('[data-cy=languages-list]').should('not.exist')
+      cy.get('[data-cy=language-flag-text]').contains('FR')
+      cy.get('h1').contains('Je suis Divlo')
+    })
+
+    it('should close the language list menu when clicking outside', () => {
+      cy.get('[data-cy=languages-list]').should('not.exist')
+      cy.get('[data-cy=language-click]').click()
+      cy.get('[data-cy=languages-list]').should('exist')
+      cy.get('h1').click()
+      cy.get('[data-cy=languages-list]').should('not.exist')
+    })
+  })
+})

cypress/integration/pages/404.spec.ts

@@ -0,0 +1,7 @@
+describe('Page /404', () => {
+  beforeEach(() => cy.visit('/404', { failOnStatusCode: false }))
+
+  it('should display the statusCode of 404', () => {
+    cy.get('[data-cy=status-code]').contains('404')
+  })
+})

cypress/integration/pages/500.spec.ts

@@ -0,0 +1,7 @@
+describe('Page /500', () => {
+  beforeEach(() => cy.visit('/500', { failOnStatusCode: false }))
+
+  it('should display the statusCode of 500', () => {
+    cy.get('[data-cy=status-code]').contains('500')
+  })
+})

cypress/integration/pages/index.spec.ts

@@ -0,0 +1,19 @@
+describe('Page /', () => {
+  beforeEach(() => cy.visit('/'))
+
+  it('should reveals the sections while scrolling except the about section', () => {
+    const sectionsReveals = [
+      '#interests',
+      '#skills',
+      '#portfolio',
+      '#open-source'
+    ]
+    cy.get('#about').should('be.visible')
+    for (const section of sectionsReveals) {
+      cy.get(section)
+        .should('not.be.visible')
+        .scrollIntoView()
+        .should('be.visible')
+    }
+  })
+})

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["cypress"],
+    "isolatedModules": false
+  },
+  "include": ["../node_modules/cypress", "./**/*.ts"]
+}