Add test for i18n demo (and document how to peer into shadowDOM

CYPRESS.md

@@ -59,6 +59,31 @@ describe('while demo spec', () => {
 ## Targetting elements
 Cypress uses DOM selectors to target elements. Use the `data-cy` attribute to target elements.
 
+## ShadowDOM
+
+Fore uses the shadowdom extensively. Cypress can target into shadow roots, but not with normal DOM
+selectors. Take the [`i18n`](./cypress/e2e/i18n/i18n.cy.ts) tests for example. Here the `fx-output`
+contains a text that we want to assert. We use the `shadow()` method to peer into there.
+
+```typescript
+  it('can toggle the language', function() {
+    cy.get('[data-cy="EN"]').click();
+      cy
+		  .get('fx-output')
+		  .shadow()
+		  .find('#value')
+		  .should('contain', 'Description of object');
+      cy
+		  .get('[data-cy="DE"]')
+		  .click();
+      cy
+		  .get('fx-output')
+		  .shadow()
+		  .find('#value')
+		  .should('contain', 'Objektbeschreibung');
+  });
+```
+
 ## Cypress versus unit tests
 
 Because Cypress takes away all timing issues, they are easier to write than normal unit

cypress/e2e/external-fore.cy.ts

@@ -0,0 +1,10 @@
+describe('external-fore.html', () => {
+	beforeEach(() => {
+		cy.visit('external-fore.html');
+	});
+
+	it('can load the external fore component', () => {
+		cy.get('#output').shadow().contains('middle');
+		cy.get('h2 > fx-output').shadow().contains('left')
+	});
+})

cypress/e2e/i18n/i18n.cy.ts

@@ -0,0 +1,22 @@
+describe('template spec', () => {
+	beforeEach(()=>{
+		cy.visit('i18n/i18n.html');
+	});
+
+  it('can toggle the language', function() {
+    cy.get('[data-cy="EN"]').click();
+      cy
+		  .get('fx-output')
+		  .shadow()
+		  .find('#value')
+		  .should('contain', 'Description of object');
+      cy
+		  .get('[data-cy="DE"]')
+		  .click();
+      cy
+		  .get('fx-output')
+		  .shadow()
+		  .find('#value')
+		  .should('contain', 'Objektbeschreibung');
+  });
+})

demo/i18n/i18n.html

@@ -40,11 +40,11 @@ <h1>i18n</h1>
                 </fx-group>
 
                 <fx-trigger>
-                    <button>DE</button>
+                    <button data-cy="DE">DE</button>
                     <fx-send submission="switch-lang" url="de.json">de</fx-send>
                 </fx-trigger>
                 <fx-trigger>
-                    <button>EN</button>
+                    <button data-cy="EN">EN</button>
                     <fx-send submission="switch-lang" url="en.json">en</fx-send>
                 </fx-trigger>
 
@@ -55,4 +55,4 @@ <h1>i18n</h1>
 <script type="module" src="../demo.js"></script>
 
 </body>
-</html>
+</html>