test: Add cypress integration tests

Author: ktquez

cypress.json

@@ -2,8 +2,8 @@
 	"baseUrl": "http://localhost:8080",
 	"fixturesFolder": "tests/e2e/fixtures",
 	"screenshotsFolder": "tests/e2e/screenshots",
-	"integrationFolder": "tests/e2e/specs",
+	"integrationFolder": "tests/e2e/integration",
 	"fileServerFolder": "demo",
 	"pluginsFile": false,
-	"supportFile": false
+	"supportFile": "tests/e2e/support"
 }

tests/e2e/integration/aria.spec.js

@@ -1,5 +1,71 @@
-describe('Aria test', () => {
+describe('Aria label', () => {
   before(() => {
     cy.visit('/')
   })
+
+  it('Button color mode must be visible', () => {
+    cy.getColorModeButtonIsVisible()
+  })
+
+  it('Current color mode must be "light"', () => {
+    cy.getCurrentColorMode()
+      .should('contain', 'light')
+  })
+
+  it('Must have the aria-label attribute and contain text for the "dark" color mode', () => {
+    cy.getColorModeButton()
+      .should('have.attr', 'aria-label', 'toggle to dark mode color')
+  })
+
+  it('Button color mode must be clicked', () => {
+    cy.toggleColorMode()
+  })
+
+  it('Current color mode must be "dark"', () => {
+    cy.getCurrentColorMode()
+      .should('contain', 'dark')
+  })
+
+  it('Must have the aria-label attribute and contain text for the "system" color mode', () => {
+    cy.getColorModeButton()
+      .should('have.attr', 'aria-label', 'toggle to system mode color')
+  })
+})
+
+describe('Aria live regions', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('Button color mode must be visible', () => {
+    cy.getColorModeButtonIsVisible()
+  })
+
+  it('Current color mode must be "light"', () => {
+    cy.getCurrentColorMode()
+      .should('contain', 'light')
+  })
+
+  it('There must be an element with aria-live', () => {
+    cy.getColorModeButton()
+      .get('span[aria-live]')
+  })
+
+  it('The element with aria-live must contain "light" in the announced text', () => {
+    cy.getColorModeButton()
+      .get('span[aria-live]')
+      .invoke('text')
+      .should('eq', 'light color mode is enabled')
+  })
+
+  it('Button color mode must be clicked', () => {
+    cy.toggleColorMode()
+  })
+
+  it('The element with aria-live must contain "dark" in the announced text', () => {
+    cy.getColorModeButton()
+      .get('span[aria-live]')
+      .invoke('text')
+      .should('eq', 'dark color mode is enabled')
+  })
 })

tests/e2e/integration/meta-theme-color.spec.js

@@ -0,0 +1,33 @@
+describe('Dark mode storage', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  beforeEach(() => {
+    cy.restoreLocalStorageCache()
+  })
+
+  afterEach(() => {
+    cy.saveLocalStorageCache()
+  })
+
+  it('Button color mode must be visible', () => {
+    cy.getColorModeButtonIsVisible()
+  })
+
+  it('Current color mode must be "light"', () => {
+    cy.getCurrentColorMode().should('contain', 'light')
+  })
+
+  it('the color mode "light" must contain in localStorage by key "colorMode"', () => {
+    cy.getLocalStorage('colorMode').should('contain', 'light')
+  })
+
+  it('Button color mode must be clicked', () => {
+    cy.toggleColorMode()
+  })
+
+  it('the color mode "dark" must contain in localStorage by key "colorMode"', () => {
+    cy.getLocalStorage('colorMode').should('contain', 'dark')
+  })
+})

tests/e2e/integration/storage.spec.js

@@ -2,4 +2,28 @@ describe('Dark mode toggle class', () => {
   before(() => {
     cy.visit('/')
   })
+
+  it('Button color mode must be visible', () => {
+    cy.getColorModeButtonIsVisible()
+  })
+
+  it('Class name must contain "light" color mode', () => {
+    cy.getColorModeClassName().should('contain', 'light')
+  })
+
+  it('Current color mode must be "light"', () => {
+    cy.getCurrentColorMode().should('contain', 'light')
+  })
+
+  it('Button color mode must be clicked', () => {
+    cy.toggleColorMode()
+  })
+
+  it('Class name must contain "dark" color mode', () => {
+    cy.getColorModeClassName().should('contain', 'dark')
+  })
+
+  it('Current color mode must be "dark"', () => {
+    cy.getCurrentColorMode().should('contain', 'dark')
+  })
 })

tests/e2e/integration/toggle-class.spec.js

@@ -23,3 +23,52 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+let LOCAL_STORAGE_MEMORY = {}
+
+Cypress.Commands.add('saveLocalStorageCache', () => {
+  Object.keys(localStorage).forEach(key => {
+    LOCAL_STORAGE_MEMORY[key] = localStorage[key]
+  })
+})
+
+Cypress.Commands.add('restoreLocalStorageCache', () => {
+  Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
+    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key])
+  })
+})
+
+Cypress.Commands.add('clearLocalStorageCache', () => {
+  localStorage.clear()
+  LOCAL_STORAGE_MEMORY = {}
+})
+
+Cypress.Commands.add('getColorModeButton', () => {
+  cy.get('[data-cy="color-mode-button"')
+})
+
+Cypress.Commands.add('getColorModeButtonIsVisible', () => {
+  cy.getColorModeButton().should('be.visible')
+})
+
+Cypress.Commands.add('getCurrentColorMode', () => {
+  cy.getColorModeButton().get('[data-cy="color-mode"]').invoke('text')
+})
+
+Cypress.Commands.add('getColorModeClassName', () => {
+  cy.document().then((doc) => doc.documentElement.className)
+})
+
+Cypress.Commands.add('getLocalStorage', (key) => {
+  cy.window().then((window) => window.localStorage.getItem(key))
+})
+
+Cypress.Commands.add('toggleColorMode', () => {
+  cy.getColorModeButton().click()
+})
+
+Cypress.Commands.add('checkColorModeStorage', (storage, key, token) => {
+  cy.window()
+    .its(`${storage}.${key}`)
+    .should('eq', token)
+})