[TESTING] Add Cypress Real Events for a11y UI testing

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/index.js

@@ -17,6 +17,7 @@ import '@cypress/code-coverage/support';
 import './commands.js';
 require(THEME_IMPORT); // defined by DefinePlugin in the cypress webpack config
 require('cypress-plugin-tab'); // adds the `.tab()` command to cypress chains, see https://docs.cypress.io/api/commands/type#Typing-tab-key-does-not-work
+require('cypress-real-events/support'); // uses the Chrome Devtools Protocol to replace simulated events, see https://github.com/dmtrKovalenko/cypress-real-events#why 
 
 // @see https://github.com/quasarframework/quasar/issues/2233#issuecomment-492975745
 Cypress.on('uncaught:exception', (err) => {

package.json

@@ -68,6 +68,7 @@
     "@types/vfile-message": "^2.0.0",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
+    "cypress-real-events": "^1.6.0",
     "lodash": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
     "numeral": "^2.0.6",

src/components/accordion/accordion.spec.tsx

@@ -0,0 +1,177 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { Fragment } from 'react';
+import { EuiAccordion, EuiAccordionProps } from './index';
+import { EuiPanel } from '../../components/panel';
+import { htmlIdGenerator } from '../../services';
+
+const baseProps: EuiAccordionProps = {
+  buttonContent: 'Click me to toggle',
+  id: htmlIdGenerator()(),
+  initialIsOpen: false,
+};
+
+const noArrow = { arrowDisplay: 'none' };
+const noArrowProps: EuiAccordionProps = Object.assign(baseProps, noArrow);
+
+describe('EuiAccordion', () => {
+  describe('Keyboard and screen reader accessibility', () => {
+    it('renders with required props', () => {
+      cy.mount(
+        <Fragment>
+          <div
+            data-test-subj="cypress-real-event-target"
+            style={{ height: '1px', width: '1px' }}
+          />
+          <EuiAccordion {...baseProps}>
+            <EuiPanel color="subdued">
+              Any content inside of <strong>EuiAccordion</strong> will appear
+              here.
+            </EuiPanel>
+          </EuiAccordion>
+        </Fragment>
+      );
+      cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
+        position: 'topLeft',
+      });
+      cy.realPress('Tab');
+      cy.focused().contains('Click me to toggle');
+      cy.end();
+    });
+
+    it('opens and closes on ENTER keypress', () => {
+      cy.mount(
+        <Fragment>
+          <div
+            data-test-subj="cypress-real-event-target"
+            style={{ height: '1px', width: '1px' }}
+          />
+          <EuiAccordion {...baseProps}>
+            <EuiPanel color="subdued">
+              Any content inside of <strong>EuiAccordion</strong> will appear
+              here.
+            </EuiPanel>
+          </EuiAccordion>
+        </Fragment>
+      );
+      cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
+        position: 'topLeft',
+      });
+      cy.realPress('Tab');
+      cy.focused().contains('Click me to toggle').realPress('Enter');
+      cy.realPress(['Shift', 'Tab']);
+      cy.focused().invoke('attr', 'aria-expanded').should('equal', 'true');
+      cy.realPress('Enter');
+      cy.focused().invoke('attr', 'aria-expanded').should('equal', 'false');
+      cy.end();
+    });
+
+    it('opens and closes on SPACE keypress', () => {
+      cy.mount(
+        <Fragment>
+          <div
+            data-test-subj="cypress-real-event-target"
+            style={{ height: '1px', width: '1px' }}
+          />
+          <EuiAccordion {...baseProps}>
+            <EuiPanel color="subdued">
+              Any content inside of <strong>EuiAccordion</strong> will appear
+              here.
+            </EuiPanel>
+          </EuiAccordion>
+        </Fragment>
+      );
+      cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
+        position: 'topLeft',
+      });
+      cy.realPress('Tab');
+      cy.focused().contains('Click me to toggle').realPress('Space');
+      cy.realPress(['Shift', 'Tab']);
+      cy.focused().invoke('attr', 'aria-expanded').should('equal', 'true');
+      cy.realPress('Space');
+      cy.focused().invoke('attr', 'aria-expanded').should('equal', 'false');
+      cy.end();
+    });
+  });
+
+  describe('Props and keyboard navigation', () => {
+    it('should not have an arrow', () => {
+      cy.mount(
+        <Fragment>
+          <div
+            data-test-subj="cypress-real-event-target"
+            style={{ height: '1px', width: '1px' }}
+          />
+          <EuiAccordion {...noArrowProps}>
+            <EuiPanel color="subdued">
+              Any content inside of <strong>EuiAccordion</strong> will appear
+              here. We will include <a href="#">a link</a> to confirm focus.
+            </EuiPanel>
+          </EuiAccordion>
+        </Fragment>
+      );
+      cy.get('.euiAccordion__iconButton').should('not.exist');
+      cy.end();
+    });
+
+    it('manages focus when panel is opened', () => {
+      cy.mount(
+        <Fragment>
+          <div
+            data-test-subj="cypress-real-event-target"
+            style={{ height: '1px', width: '1px' }}
+          />
+          <EuiAccordion {...noArrowProps}>
+            <EuiPanel color="subdued">
+              Any content inside of <strong>EuiAccordion</strong> will appear
+              here. We will include <a href="#">a link</a> to confirm focus.
+            </EuiPanel>
+          </EuiAccordion>
+        </Fragment>
+      );
+      cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
+        position: 'topLeft',
+      });
+      cy.realPress('Tab');
+      cy.focused().contains('Click me to toggle').realPress('Enter');
+      cy.focused().invoke('attr', 'tabindex').should('equal', '-1');
+      cy.focused().contains('Any content inside of EuiAccordion');
+      cy.realPress('Tab');
+      cy.focused().contains('a link');
+      cy.end();
+    });
+
+    it('manages focus when forceState is open', () => {
+      cy.mount(
+        <Fragment>
+          <div
+            data-test-subj="cypress-real-event-target"
+            style={{ height: '1px', width: '1px' }}
+          />
+          <EuiAccordion {...noArrowProps} forceState="open">
+            <EuiPanel color="subdued">
+              Any content inside of <strong>EuiAccordion</strong> will appear
+              here. We will include <a href="#">a link</a> to confirm focus.
+            </EuiPanel>
+          </EuiAccordion>
+        </Fragment>
+      );
+      cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
+        position: 'topLeft',
+      });
+      cy.realPress('Tab');
+      cy.focused().contains('Click me to toggle');
+      cy.focused().invoke('attr', 'aria-expanded').should('equal', 'true');
+      cy.focused().invoke('attr', 'tabindex').should('not.exist');
+      cy.realPress('Tab');
+      cy.focused().contains('a link');
+      cy.end();
+    });
+  });
+});

tsconfig-cypress.json

@@ -3,5 +3,8 @@
   "include": [
     "./src/**/*.spec.tsx",
   ],
-  "exclude": ["node_modules"]
+  "compilerOptions": {
+    "types": ["cypress", "cypress-real-events"]
+  },
+  "exclude": ["node_modules"],
 }

wiki/cypress-testing.md

@@ -81,6 +81,46 @@ contains `{component name}.tsx`.
 * DON'T depend upon class names or other implementation details for `find`ing nodes, if possible.
 * DON'T extend the `cy.` global namespace - instead prefer to import helper functions directly
 
+## Cypress Real Events
+
+> Cypress default events are simulated. That means that all events like `cy.click` or `cy.type` are fired from JavaScript. That's why these events will be untrusted (`event.isTrusted` will be `false`) and they can behave a little different from real native events. But for some cases, it can be impossible to use simulated events, for example, to fill a native alert or copy to the clipboard. This plugin solves this problem.
+
+[Cypress Real Events](https://github.com/dmtrKovalenko/cypress-real-events#why)
+
+### Why Cypress Real Events?
+
+Cypress Real Events uses the [Chrome Devtools Protocol](https://chromedevtools.github.io/devtools-protocol/) to handle behaviors like a real browser. This gives us a better way to test complex events like mouse hover and keyboard focus. By using real events and making assertions against them, we can test keyboard and screen reader accessibility as users change the local state.
+
+### How to write Cypress (real events) tests
+
+The [Cypress Real Events API](https://github.com/dmtrKovalenko/cypress-real-events#api) works seamlessly with existing `cy()` methods. If you wanted to press a button using Cypress Real Events, you could use `realPress('Tab')` as a replacement for the `cy.tab()` synthetic method. All Cypress Real Events methods are prefixed with the string "real". Here's a small example test:
+
+```jsx
+import { mount } from '@cypress/react';
+import TestComponent from './test_component';
+
+describe('TestComponent', () => {
+  it('clicks a button with Cypress Real Events', () => {
+    mount(<TestComponent />);
+
+    /* Activate a button with a real keypress event */
+    cy.get('[data-test-subj="submitButton"]').realPress('Enter');
+    cy.focused().invoke('attr', 'aria-expanded').should('equal', 'true');
+  });
+});
+```
+
+#### Do's and don'ts for Cypress Real Events
+
+* DO follow [all previous guidance](#dos-and-donts) for writing Cypress tests
+* DO add a 1px by 1px target to your tests and click on it. Cypress Real Events doesn't always [set focus in the testing window](https://github.com/dmtrKovalenko/cypress-real-events/issues/196).<br/><br/>
+  ```javascript
+  cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
+    position: 'topLeft',
+  });
+  ```
+* DO be on the lookout for new features!
+
 ## Debugging tests
 
 For debugging failures locally, use `yarn test-cypress-dev`, which allows you to run a single specific test suite and runs tests in a browser window, making dev tools available to you so you can pause and inspect DOM as needed.

yarn.lock

@@ -5533,6 +5533,11 @@ cypress-plugin-tab@^1.0.5:
   dependencies:
     ally.js "^1.4.1"
 
+cypress-real-events@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.6.0.tgz#277024b62a324b6937760a700e831e795c021040"
+  integrity sha512-QxXm0JsQkCrb2uH+fMXNDQ5kNWTzX3OtndBafdsZmNV19j+6JuTK9n52B1YVxrDrr/qzPAojcHJc5PNoQvwp+w==
+
 cypress@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.1.1.tgz#26720ca5a22077cd85f49745616b7a08152a298f"