cypress e2e testing for publisher-app

cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/annotations-graves.cy.js

@@ -0,0 +1,47 @@
+describe('template spec', () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:8080/exist/apps/tei-publisher/annotate/graves20.xml?view=div&odd=annotations')
+    });
+
+    it('opens William Graves example and displays text', () => {
+
+        cy.get('#view1').shadow().find('[data-tei="4.4.2.2.2"]')
+            .should('have.text', 'Dear William,')
+
+    })
+
+    it('opens annotation panel when triggering person annotation', () => {
+
+        cy.get('#view1').shadow().find('[data-tei="4.4.2.2.2"]')
+            .trigger('mousedown')
+            .then(($el) => {
+                const el = $el[0]
+                const document = el.ownerDocument
+                const range = document.createRange()
+                range.setStart(el.firstChild, 5);
+                range.setEnd(el.firstChild, 12)
+                document.getSelection().removeAllRanges(range)
+                document.getSelection().addRange(range)
+            })
+            .trigger('mouseup')
+        cy.document().trigger('selectionchange')
+
+        cy.get('[icon="social:person"]').click()
+
+        cy.get('pb-authority-lookup').shadow().find('#query').shadow().find('input')
+            .should('contain.value', 'William')
+    })
+
+
+    /*
+      it('opens Leibniz example', () => {
+        cy.visit('http://localhost:8080/exist/apps/tei-publisher/annotate/test.xml?view=div&odd=annotations')
+      })
+
+      it('opens Leibnütz example', () => {
+        cy.visit('http://localhost:8080/exist/apps/tei-publisher/annotate/leibnuetz.xml?view=div&odd=annotations')
+      })
+    */
+
+
+})

cypress/e2e/annotations-leibniz.cy.js

@@ -0,0 +1,9 @@
+describe('leibniz spec', () => {
+
+
+  it('opens Leibniz example', () => {
+    cy.visit('http://localhost:8080/exist/apps/tei-publisher/annotate/test.xml?view=div&odd=annotations')
+  })
+
+
+})

cypress/e2e/annotations-leibnuetz.cy.js

@@ -0,0 +1,8 @@
+describe('Leibnuetz spec', () => {
+
+
+  it('opens Leibnütz example', () => {
+    cy.visit('http://localhost:8080/exist/apps/tei-publisher/annotate/leibnuetz.xml?view=div&odd=annotations')
+  })
+
+})

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/support/commands.js

@@ -0,0 +1,141 @@
+// ***********************************************
+// 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) => { ... })
+
+
+/**
+ * Credits
+ * @Bkucera: https://github.com/cypress-io/cypress/issues/2839#issuecomment-447012818
+ * @Phrogz: https://stackoverflow.com/a/10730777/1556245
+ *
+ * Usage
+ * ```
+ * // Types "foo" and then selects "fo"
+ * cy.get('input')
+ *   .type('foo')
+ *   .setSelection('fo')
+ *
+ * // Types "foo", "bar", "baz", and "qux" on separate lines, then selects "foo", "bar", and "baz"
+ * cy.get('textarea')
+ *   .type('foo{enter}bar{enter}baz{enter}qux{enter}')
+ *   .setSelection('foo', 'baz')
+ *
+ * // Types "foo" and then sets the cursor before the last letter
+ * cy.get('input')
+ *   .type('foo')
+ *   .setCursorAfter('fo')
+ *
+ * // Types "foo" and then sets the cursor at the beginning of the word
+ * cy.get('input')
+ *   .type('foo')
+ *   .setCursorBefore('foo')
+ *
+ * // `setSelection` can alternatively target starting and ending nodes using query strings,
+ * // plus specific offsets. The queries are processed via `Element.querySelector`.
+ * cy.get('body')
+ *   .setSelection({
+ *     anchorQuery: 'ul > li > p', // required
+ *     anchorOffset: 2 // default: 0
+ *     focusQuery: 'ul > li > p:last-child', // default: anchorQuery
+ *     focusOffset: 0 // default: 0
+ *    })
+ */
+
+// Low level command reused by `setSelection` and low level command `setCursor`
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+    cy.wrap(subject)
+        .trigger('mousedown')
+        .then(fn)
+        .trigger('mouseup');
+
+    cy.document().trigger('selectionchange');
+    return cy.wrap(subject);
+});
+
+Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
+    return cy.wrap(subject)
+        .selection($el => {
+            if (typeof query === 'string') {
+                const anchorNode = getTextNode($el[0], query);
+                const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
+                const anchorOffset = anchorNode.wholeText.indexOf(query);
+                const focusOffset = endQuery ?
+                    focusNode.wholeText.indexOf(endQuery) + endQuery.length :
+                    anchorOffset + query.length;
+                setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+            } else if (typeof query === 'object') {
+                const el = $el[0];
+                const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+                const anchorOffset = query.anchorOffset || 0;
+                const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
+                const focusOffset = query.focusOffset || 0;
+                setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+            }
+        });
+});
+
+// Low level command reused by `setCursorBefore` and `setCursorAfter`, equal to `setCursorAfter`
+Cypress.Commands.add('setCursor', { prevSubject: true }, (subject, query, atStart) => {
+    return cy.wrap(subject)
+        .selection($el => {
+            const node = getTextNode($el[0], query);
+            const offset = node.wholeText.indexOf(query) + (atStart ? 0 : query.length);
+            const document = node.ownerDocument;
+            document.getSelection().removeAllRanges();
+            document.getSelection().collapse(node, offset);
+        })
+    // Depending on what you're testing, you may need to chain a `.click()` here to ensure
+    // further commands are picked up by whatever you're testing (this was required for Slate, for example).
+});
+
+Cypress.Commands.add('setCursorBefore', { prevSubject: true }, (subject, query) => {
+    cy.wrap(subject).setCursor(query, true);
+});
+
+Cypress.Commands.add('setCursorAfter', { prevSubject: true }, (subject, query) => {
+    cy.wrap(subject).setCursor(query);
+});
+
+// Helper functions
+function getTextNode(el, match){
+    const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+    if (!match) {
+        return walk.nextNode();
+    }
+
+    const nodes = [];
+    let node;
+    while(node = walk.nextNode()) {
+        if (node.wholeText.includes(match)) {
+            return node;
+        }
+    }
+}
+
+function setBaseAndExtent(...args) {
+    const document = args[0].ownerDocument;
+    document.getSelection().removeAllRanges();
+    document.getSelection().setBaseAndExtent(...args);
+}

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')