test: add cypress end-to-end test setup (#313)

Co-authored-by: Jacob M-G Evans <27247160+JacobMGEvans@users.noreply.github.com>

Author: ddehart

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:cypress/recommended',
   ],
   parserOptions: {
     ecmaVersion: 2020,

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:1234",
+  "integrationFolder": "cypress/e2e"
+}

cypress/e2e/initApp.spec.js

@@ -0,0 +1,86 @@
+it('renders Testing Playground with an example', () => {
+  cy.visit('/');
+
+  cy.findByRole('heading', {
+    level: 1,
+    name: 'Testing Playground mascot Froggy ️ Testing Playground',
+  }).should('exist');
+
+  cy.findByRole('link', {
+    name: 'Testing Playground mascot Froggy ️ Testing Playground',
+  })
+    .should('exist')
+    .and('have.attr', 'href', '/');
+
+  cy.findByRole('button', { name: 'playground' }).should('exist');
+  cy.findByRole('button', { name: 'run' }).should('exist');
+  cy.findByRole('button', { name: 'settings' }).should('exist');
+  cy.findByRole('button', { name: 'kebab menu' }).should('exist');
+
+  cy.getMarkupEditor().should('exist');
+
+  cy.getSandboxBody().within(() => {
+    cy.findByLabelText('Email address')
+      .should('exist')
+      .and('have.attr', 'type', 'email')
+      .and('have.attr', 'placeholder', 'Enter email');
+
+    cy.findByText("It's safe with us. We hate spam!").should('exist');
+
+    cy.findByLabelText('Password')
+      .should('exist')
+      .and('have.attr', 'type', 'password')
+      .and('have.attr', 'placeholder', 'Password');
+
+    cy.findByLabelText('I accept the terms and conditions')
+      .should('exist')
+      .and('have.attr', 'type', 'checkbox')
+      .and('not.be.checked');
+
+    cy.findByRole('link', { name: 'terms and conditions' })
+      .should('exist')
+      .and('have.attr', 'href', 'https://www.example.com');
+
+    cy.findByRole('button', { name: 'Submit' }).should('exist');
+  });
+
+  cy.findByRole('region', { name: 'html preview' }).within(() => {
+    cy.findByRole('button', { name: 'expand' }).should('exist');
+    cy.findByText('accessible roles:').should('exist');
+    cy.findByText('generic').should('exist');
+  });
+
+  cy.getQueryEditor().should('exist');
+
+  cy.findByRole('region', { name: 'query suggestion' }).within(() => {
+    cy.findByText('> <button type="submit" > Submit </button>').should('exist');
+    cy.findByRole('button', { name: 'expand' }).should('exist');
+  });
+
+  cy.getResult().within(() => {
+    cy.findByText('suggested query').should('exist');
+
+    cy.findByText("> getByRole('button', { name: /submit/i })").should('exist');
+
+    cy.findByRole('button', { name: 'copy query' }).should('exist');
+
+    cy.findByText(
+      'There is one thing though. You could make the query a bit more specific by adding the name option.',
+    ).should('exist');
+
+    cy.findByRole('heading', {
+      level: 3,
+      name: '1. Queries Accessible to Everyone',
+    }).should('exist');
+
+    cy.findByRole('heading', {
+      level: 3,
+      name: '2. Semantic Queries',
+    }).should('exist');
+
+    cy.findByRole('heading', {
+      level: 3,
+      name: '3. Test IDs',
+    }).should('exist');
+  });
+});

cypress/support/commands.js

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

cypress/support/index.js

@@ -0,0 +1,72 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Add common command to get the body of the sandbox iframe
+// See: https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
+Cypress.Commands.add('getSandboxBody', () => {
+  cy.log('getSandboxBody');
+
+  return cy
+    .findByTitle('sandbox')
+    .its('0.contentDocument.body', { log: false })
+    .should('not.be.empty')
+    .then((body) => cy.wrap(body, { log: false }));
+});
+
+// Add commands to clear CodeMirror editors
+// See: https://stackoverflow.com/questions/62012319/how-can-i-clear-a-codemirror-editor-field-from-cypress
+
+Cypress.Commands.add('clearMarkupEditor', () => {
+  cy.log('clearMarkupEditor');
+
+  cy.get('.CodeMirror', { log: false })
+    .first({ log: false })
+    .its('0.CodeMirror', { log: false })
+    .then((editor) => {
+      editor.setValue('');
+    });
+});
+
+Cypress.Commands.add('clearQueryEditor', () => {
+  cy.log('clearQueryEditor');
+
+  cy.get('.CodeMirror', { log: false })
+    .last({ log: false })
+    .its('0.CodeMirror', { log: false })
+    .then((editor) => {
+      editor.setValue('');
+    });
+});
+
+Cypress.Commands.add('getMarkupEditor', () => {
+  cy.log('getMarkupEditor');
+
+  return cy.get('.CodeMirror textarea', { log: false }).first({ log: false });
+});
+
+Cypress.Commands.add('getQueryEditor', () => {
+  cy.log('getQueryEditor');
+
+  return cy.get('.CodeMirror textarea', { log: false }).last({ log: false });
+});
+
+Cypress.Commands.add('getResult', () => {
+  cy.log('getResult');
+
+  return cy.get('div[data-testid=result]', { log: false });
+});