Adding some tests with cypress (#1)

Author: jeffreyvr

.github/workflows/run-tests.yml

@@ -0,0 +1,24 @@
+name: Run Tests
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: "8.3"
+
+      - name: Install composer dependencies
+        run: composer install --no-interaction
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test

cypress.config.js

@@ -0,0 +1,19 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  screenshotOnRunFailure: false,
+  video: false,
+  fixturesFolder: 'tests/cypress/fixtures',
+  screenshotsFolder: 'tests/cypress/screenshots',
+  videosFolder: 'tests/cypress/videos',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./tests/cypress/plugins/index.js')(on, config)
+    },
+    excludeSpecPattern: '*.html',
+    specPattern: 'tests/cypress/integration/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/cypress/support/index.js',
+  },
+})

package-lock.json

@@ -1,32 +1,37 @@
 {
-    "name": "paver",
-    "version": "0.0.1",
-    "description": "Block based drag and drop editor made with Alpine.js.",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/paver/paver.git"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "bugs": {
-        "url": "https://github.com/paver/paver/issues"
-    },
-    "homepage": "https://github.com/paver/paver#readme",
-    "devDependencies": {
-        "laravel-mix": "^6.0.49",
-        "postcss": "^8.4.41",
-        "postcss-import": "^16.1.0",
-        "postcss-prefixer": "^3.0.0"
-    },
-    "dependencies": {
-        "@alpinejs/morph": "^3.14.1",
-        "alpinejs": "^3.14.1",
-        "postcss-nested": "^6.0.1",
-        "sortablejs": "^1.15.2",
-        "tippy.js": "^6.3.7"
-    }
+  "name": "paver",
+  "version": "0.0.1",
+  "description": "Block based drag and drop editor made with Alpine.js.",
+  "scripts": {
+    "start-server": "php -S localhost:8000 -t ./tests/localhost",
+    "stop-server": "lsof -t -i:8000 | xargs kill -9",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run --headless",
+    "test": "npm run start-server & npm run cypress:run && npm run stop-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/paver/paver.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/paver/paver/issues"
+  },
+  "homepage": "https://github.com/paver/paver#readme",
+  "devDependencies": {
+    "cypress": "^13.14.1",
+    "laravel-mix": "^6.0.49",
+    "postcss": "^8.4.41",
+    "postcss-import": "^16.1.0",
+    "postcss-prefixer": "^3.0.0"
+  },
+  "dependencies": {
+    "@alpinejs/morph": "^3.14.1",
+    "alpinejs": "^3.14.1",
+    "postcss-nested": "^6.0.1",
+    "sortablejs": "^1.15.2",
+    "tippy.js": "^6.3.7"
+  }
 }

package.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"
+  }

tests/cypress/fixtures/example.json

@@ -0,0 +1,30 @@
+beforeEach(() => {
+    cy.visit('http://localhost:8000/?content=1')
+})
+
+it('renders the editor block in the frame', () => {
+    cy.getIframeBody('.paver__editor').within(() => {
+        cy.get('.paver__editor-root').eq(0).contains('This is an example')
+    })
+})
+
+it('can enter a block edit state', () => {
+    cy.getIframeBody('.paver__editor').within(() => {
+        cy.wait(100).get('.paver__block-toolbar button').eq(1).click({force: true})
+    })
+
+    cy.get('.paver__component-sidebar').should('be.visible')
+})
+
+it('can modify a block', () => {
+    cy.getIframeBody('.paver__editor').within(() => {
+        cy.wait(200).get('.paver__block-toolbar button').eq(1).click({force: true})
+    })
+
+    cy.get('.paver__component-sidebar').should('be.visible')
+    cy.get('.paver__component-sidebar').find('.paver__option input').clear().type('John Smith')
+
+    cy.getIframeBody('.paver__editor').within(() => {
+        cy.get('.paver__editor-root').eq(0).contains('John Smith')
+    })
+})

tests/cypress/integration/editor-content-render.cy.js

@@ -0,0 +1,16 @@
+beforeEach(() => {
+    cy.visit('http://localhost:8000')
+})
+
+it('renders the editor', () => {
+    cy.get('.paver__container').should('be.visible')
+    cy.get('.paver__editor').should('be.visible')
+    cy.get('.paver__sidebar').should('be.visible')
+})
+
+it('renders the editor frame', () => {
+    cy.getIframeBody('.paver__editor').within(() => {
+        cy.get('.paver__editor-root').eq(0).should('be.visible')
+        cy.get('.paver__editor-frame').eq(0).should('be.visible')
+    })
+})

tests/cypress/integration/editor-render.cy.js

@@ -0,0 +1,21 @@
+/// <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}
+ */
+module.exports = (on, config) => {
+    // `on` is used to hook into various events Cypress emits
+    // `config` is the resolved Cypress config
+  }

tests/cypress/plugins/index.js

@@ -0,0 +1,7 @@
+Cypress.Commands.add('getIframeBody', (iframeSelector) => {
+    return cy
+        .get(iframeSelector)
+        .its('0.contentDocument.body')
+        .should('not.be.empty')
+        .then(cy.wrap)
+})

tests/cypress/support/commands.js

@@ -0,0 +1 @@
+import './commands'