Setup E2E tests on Cypress

Author: zerodevx

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:5000"
+}

cypress/fixtures/example.json

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

cypress/integration/test.spec.js

@@ -0,0 +1,80 @@
+/* eslint-env mocha */
+/* global cy, expect */
+
+describe('Integration Tests', () => {
+  before(() => cy.visit('/'))
+
+  afterEach(() => cy.wait(500))
+
+  it('Displays a toast', () => {
+    cy.get('[data-btn=default]')
+      .click()
+      .get('._toastBtn')
+      .click()
+  })
+
+  it('Displays colored toast', () => {
+    cy.get('[data-btn=green]')
+      .click()
+      .get('._toastItem')
+      .should('have.css', 'background-color', 'rgb(72, 187, 120)')
+      .get('._toastBtn')
+      .click()
+  })
+
+  it('Displays rich HTML', () => {
+    cy.get('[data-btn=richHtml]')
+      .click()
+      .get('._toastItem')
+      .find('a')
+      .get('._toastBtn')
+      .click()
+  })
+
+  it('Can change duration', () => {
+    cy.window()
+      .invoke('toast.push', 'Test', { duration: 1000 })
+      .get('._toastItem')
+      .wait(1500)
+      .should('not.exist')
+  })
+
+  it('Can be non-dismissable then popped', () => {
+    cy.get('[data-btn=nonDismissable]')
+      .click()
+      .get('._toastBtn')
+      .should('not.exist')
+      .get('[data-btn=removeLastToast]')
+      .click()
+      .wait(500)
+      .get('._toastItem')
+      .should('not.exist')
+  })
+
+  it('Flips progress bar', () => {
+    cy.get('[data-btn=flipProgressBar]')
+      .click()
+      .get('._toastBar')
+      .then($bar => {
+        const old = parseFloat($bar.val())
+        cy.wait(500).then(() => {
+          expect(parseFloat($bar.val())).to.be.above(old)
+          cy.get('._toastBtn').click()
+        })
+      })
+  })
+
+  it('Dynamically update progress bar', () => {
+    cy.window()
+      .invoke('toast.push', 'Test', { duration: 1, initial: 0, progress: 0 })
+      .then(id => {
+        cy.get('._toastBar').then($bar => {
+          expect($bar.val()).to.equal(0)
+          cy.window().invoke('toast.set', id, { progress: 0.2 }).wait(50).then(() => {
+            expect(parseFloat($bar.val())).to.equal(0.2)
+            cy.get(',_toastBtn').click()
+          })
+        })
+      })
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

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) => { ... })

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')

docs/App.svelte

@@ -2,6 +2,7 @@
 import { tick } from 'svelte'
 import { SvelteToast, toast } from '../src'
 import Prism from './Prism.svelte'
+import camelCase from 'camelcase'
 
 // Hoist to `window` for debug
 window.toast = toast
@@ -216,6 +217,7 @@ toast.set(id, { progress: 1 })`,
     <button
       class:selected={selected === btn.name}
       on:click={() => { handleClick(btn) }}
+      data-btn={camelCase(btn.name)}
     >{btn.name}</button>
     {/each}
 

package.json

@@ -24,13 +24,16 @@
     "build:dist": "rollup -c rollup.dist.config.js",
     "build:tailwind": "NODE_ENV=production tailwindcss -i docs/tailwind.css -c docs/tailwind.config.js -o docs/build/global.css -m",
     "build": "run-s lint build:*",
+    "test": "cypress run",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
     "autoprefixer": "^10.2.6",
+    "camelcase": "^6.2.0",
+    "cypress": "^7.6.0",
     "eslint": "^7.30.0",
     "eslint-config-standard-with-typescript": "^20.0.0",
     "eslint-plugin-html": "^6.1.2",