Add CYPRESS.md and new test

CYPRESS.md

@@ -0,0 +1,70 @@
+# Cypress
+
+This project is outfitted with Cypress E2E testing. This is used to cover code where unit tests are difficult to maintain.
+
+## How to run the tests
+
+Locally you can run the tests with two commands:
+
+```sh
+# First, install the dependencies
+$ npm install
+
+# Run the normal dev server
+$ npm run start
+
+# Open cypress. It will open a browser window in which you can choose to run integration tests
+$ npx cypress open
+```
+
+## How to add tests
+
+You can add tests by adding new TypeScript files to the `cypress/e2e` folder. By convention we use
+the same name as the `demo` page. So the tests for `demo/while.html` live in
+`cypress/e2e/while.cy.ts`.
+
+Those tests consist of a few parts that are always the same. For example, the test for `while.html`
+does the following:
+
+```typescript
+describe('while demo spec', () => {
+  beforeEach (() => {
+    // We are testing while.html, so open that page. Cypress will reload this every test
+    cy.visit('while.html');
+  });
+
+  it('can count to 10', () => {
+    // Make sure we start at an expected state
+	cy.get('[data-cy="output"]')
+	  .should('contain', '0')
+	// Start the counter
+	cy.get('[data-cy="counter"]')
+	  .click()
+	// Assert the toast is shown
+	cy.get('.toastify')
+	  .should('be.visible')
+      .should('contain', 'counted to 10 done')
+	// And the counter updated
+	cy.get('[data-cy="output"]')
+	  .should('contain', '10')
+	// Test the rest
+	cy.get('[data-cy="reset"]')
+     .click()
+    cy.get('[data-cy="output"]')
+     .should('contain', '0')
+   });
+});
+```
+
+## Targetting elements
+Cypress uses DOM selectors to target elements. Use the `data-cy` attribute to target elements.
+
+## Cypress versus unit tests
+
+Because Cypress takes away all timing issues, they are easier to write than normal unit
+tests. Normal unit tests can still be useful for API tests (for instance the workings of the XPath
+functions, but integration tests should be done in Cypress.
+
+## CI
+
+The Cypress tests are executed in Github Actions, on every commit.

cypress/e2e/ignore.cy.ts

@@ -0,0 +1,25 @@
+describe('while demo spec', () => {
+   beforeEach(() => {
+       cy.visit('ignore.html');
+   });
+  // @see https://www.thisdot.co/blog/testing-web-components-with-cypress-and-typescript
+  it('should not ignore all expressions', () => {
+    cy.get('fx-fore span')
+		.should('contain', 'Hello')
+  });
+
+  it('should ignore expressions under the ignore filter', () => {
+      cy.get('fx-fore .myElement span')
+          .first()
+          .should('contain', '{ignored}');
+      cy.get('fx-fore .myElement span')
+          .last()
+          .should('contain', '{whatever}');
+  });
+
+  it('should also ignore expressions under the ignore filter that would cause errors', () => {
+      cy.get('fx-fore .myElement')
+          .last()
+          .should('contain', '{}{}{{{}}}');
+  });
+});

cypress/e2e/while.cy.ts

@@ -2,37 +2,32 @@ describe('while demo spec', () => {
    beforeEach (() => {
        cy.visit('while.html');
    });
-  // @see https://www.thisdot.co/blog/testing-web-components-with-cypress-and-typescript
-  it('show the expecter header', () => {
-    cy.get('h1 > code')
-      .should('contain', 'while')
-  })
 
-  it('display notification at 10', () => {
-    cy.get('[data-cy="counter"]')
-      .click()
-    cy.get('.toastify')
-      .should('be.visible')
-  })
+	it('can count to 10', () => {
+		// Make sure we start at an expected state
+		cy.get('[data-cy="output"]')
+			.should('contain', '0')
+		// Start the counter
+		cy.get('[data-cy="counter"]')
+			.click()
+		// Assert the toast is shown
+		cy.get('.toastify')
+			.should('be.visible')
+			.should('contain', 'counted to 10 done')
+		// And the counter updated
+		cy.get('[data-cy="output"]')
+			.should('contain', '10')
+		// Test the rest
+		cy.get('[data-cy="reset"]')
+			.click()
+		cy.get('[data-cy="output"]')
+			.should('contain', '0')
+	});
 
-  it('notify user 10 times', () => {
-    cy.get('[data-cy="start"]')
-      .click()
-    cy.get('.toastify')
-      .should('have.length', '10')
-  })
-
-  it.skip('start and abort', () => {
-    cy.get('[data-cy="hey-go"]')
-      .click()
-    cy.get('.toastify')
-      .should('have.length', '10')
-  })
-
-  it.skip('continue and abort on adding and removing', () => {
-    cy.get('[data-cy="hey-go"]')
-      .click()
-    cy.get('.toastify')
-      .should('have.length', '10')
-  })
+	it('notify user 10 times', () => {
+		cy.get('[data-cy="start"]')
+			.click()
+		cy.get('.toastify')
+			.should('have.length', '10')
+	})
 })

demo/while.html

@@ -43,9 +43,11 @@ <h1>The <code>while</code> attribute</h1>
                     <fx-setvalue ref="counter" value=".+1" while=". < 10"></fx-setvalue>
                     <fx-message>counted to {counter} done</fx-message>
                 </fx-trigger>
-                {counter}
+				<span data-cy="output">
+                  {counter}
+				</span>
                 <fx-trigger>
-                    <button>reset</button>
+                    <button data-cy="reset">reset</button>
                     <fx-setvalue ref="counter" value="0"></fx-setvalue>
                 </fx-trigger>
 

package.json

@@ -34,6 +34,7 @@
     "fontoxpath": "^3.30.0"
   },
   "devDependencies": {
+    "@types/cypress": "^1.1.3",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@open-wc/building-rollup": "^2.0.1",
     "@open-wc/eslint-config": "^7.0.0",