Add additional tests for web-components

KittyGiraudel · Oct 3, 2023 · 2ff9c65 · 2ff9c65
1 parent 12e21f4
commit 2ff9c65
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/cypress/e2e/webComponents.cy.js b/cypress/e2e/webComponents.cy.js
@@ -0,0 +1,29 @@
+import { shouldBeHidden, shouldBeVisible } from './utils.js'
+
+describe('Web Components', () => {
+  beforeEach(() => cy.visit('/web-components'))
+
+  it('should focus the dialog container on open', () => {
+    cy.get('my-dialog').shadow().find('[data-show]').click()
+    cy.get('my-dialog').then(shouldBeVisible)
+    cy.get('my-dialog').should('have.focus')
+  })
+
+  it('should close with ESC', () => {
+    cy.get('my-dialog').shadow().find('[data-show]').click()
+    cy.realPress('Escape')
+    cy.get('my-dialog').then(shouldBeHidden)
+  })
+
+  it('should close with close button', () => {
+    cy.get('my-dialog').shadow().find('[data-show]').click()
+    cy.get('my-dialog').shadow().find('.dialog-close').click()
+    cy.get('my-dialog').then(shouldBeHidden)
+  })
+
+  it('should restore focus to the previously focused element', () => {
+    cy.get('my-dialog').shadow().find('[data-show]').click()
+    cy.get('my-dialog').shadow().find('.dialog-close').click()
+    cy.get('my-dialog').shadow().find('[data-show]').should('have.focus')
+  })
+})
diff --git a/cypress/fixtures/web-components.html b/cypress/fixtures/web-components.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Tests — Web Components</title>
+  <link rel="stylesheet" href="../styles.css" />
+</head>
+
+<body>
+  <main>
+    <h1>Tests — Web Components</h1>
+
+    <my-dialog>
+      <template>
+        <button type="button" data-show>Open the dialog</button>
+        <div class="dialog" id="my-dialog" aria-labelledby="my-dialog-title" aria-hidden="true">
+          <div class="dialog-overlay" data-a11y-dialog-hide></div>
+          <div class="dialog-content" role="document">
+            <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
+            <h1 id="my-dialog-title">Your dialog title</h1>
+          </div>
+        </div>
+        <link rel="stylesheet" href="../styles.css" />
+      </template>
+    </my-dialog>
+  </main>
+
+  <script src="./a11y-dialog.js"></script>
+  <script>
+    class MyDialog extends HTMLElement {
+      connectedCallback() {
+        const shadow = this.attachShadow({ mode: 'open' });
+        const template = this.querySelector('template');
+        shadow.appendChild(template.content.cloneNode(true));
+
+        const container = this.shadowRoot.querySelector("#my-dialog");
+        const dialog = new A11yDialog(container);
+
+        const trigger = this.shadowRoot.querySelector('[data-show]');
+        trigger.addEventListener('click', () => dialog.show())
+      }
+    }
+
+    customElements.define("my-dialog", MyDialog);
+  </script>
+</body>
+
+</html>