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.

README.md

@@ -181,6 +181,23 @@ Alternatively you can run the test suite from the commandline once:
 npm run test
 ```
 
+## Running the integration tests
+
+Start the demo server and open cypress. Choose your browser and run all tests from there.
+
+```
+npm run start
+npx cypress open
+```
+
+Alternatively, start the demo server and run the tests headlessly:
+
+```
+npm run start
+npx cypress run
+```
+
+
 ## Building a package
 
 ```npm run build``` creates two bundles in 'dist' directory.

contributing.md

@@ -6,11 +6,14 @@ Contributions are welcome.
 
 ### Demos + Docs
 
-"demo or die" - Fore is open with regard to the functionality. It's expected to grow over time and new ideas getting
-added on the way that haven't been planned ahead of time. 
+"demo or die" - Fore is open with regard to the functionality. It's expected to grow over time and
+new ideas getting added on the way that haven't been planned ahead of time.
 
-Demos illustrate what's working and also explain the different options of a feature. New demos should follow the the structure
-and styling of the existing files in the 'demo' directory.
+Demos illustrate what's working and also explain the different options of a feature. New demos
+should follow the the structure and styling of the existing files in the 'demo' directory.
+
+Demos can also be accompanied by end-to-end tests. these are an easy way to make sure the demo keeps
+running. Refer to [the cypress docs](./CYPRESS.md) to see how you can add those tests.
 
 ### Code
 
@@ -24,7 +27,9 @@ Before sending a PR you should:
 
 ### Tests
 
-Testers highly welcome. There's myriad of possibilities to break the code. Help to fix the loose ends.
+Testers highly welcome. There's myriad of possibilities to break the code. Help to fix the loose
+ends. Automated tests are even better! Read the [Cypress documentation](./CYPRESS.md) to see how you
+can add new tests!
 
 ### Bug reports
 

cypress.config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
 	e2e: {
 		baseUrl: 'http://localhost:8090/demo/',
 		experimentalStudio: true,
+		experimentalRunAllSpecs: true,
 
 		setupNodeEvents(on, config) {
 			// implement node event listeners here

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

@@ -35,6 +35,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",