chore: add cypress

.eslintrc.js

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

.lintstagedrc.js

@@ -1,4 +1,7 @@
 module.exports = {
-  '**/*.js': (files) => [`eslint --quiet --fix ${files.join(' ')}`,`jest --passWithNoTests`],
+  '**/*.js': (files) => [
+    `eslint --quiet --fix ${files.join(' ')}`,
+    `jest --passWithNoTests`,
+  ],
   '**/*.{md,js}': (files) => [`prettier --write ${files.join(' ')}`],
 };

cypress.json

@@ -0,0 +1,5 @@
+{
+   "baseUrl": "http://localhost:1234",
+   "$schema": "https://on.cypress.io/cypress.schema.json"
+}
+

cypress/fixtures/userStubs.json

@@ -0,0 +1,14 @@
+{
+  "html": {
+    "helloWorld": "<div data-testid='hello'>Hello World",
+    "example": "<label for='username'>Username</label> <input id='username' name='username' placeholder='Enter Name' data-testid='uname-testid' title='enter your username' alt='enter your username' value='john-doe' type='text'/> <button name='signup' type='submit' data-testid='button-testid'>signup",
+    "shortExample": "<button name='signup' type='submit' data-testid='button-testid'>signup"
+  },
+  "query": {
+    "helloWorld": "screen.getByTestId('hello')",
+    "example": {
+      "usernameTestId": "screen.getByTestId('uname-testid')",
+      "buttonTestId": "screen.getByTestId('button-testid')"
+     }
+  }
+}

cypress/integration/initApp.spec.js

@@ -0,0 +1,40 @@
+describe('App Initialization Smoke Test', () => {
+  beforeEach(() => {
+    cy.visitAndClear();
+
+    cy.fixture('userStubs.json').then((stub) =>
+      cy.get('.CodeMirror textarea').first().type(stub.html.helloWorld, {
+        force: true,
+      }),
+    );
+
+    cy.fixture('userStubs.json').then((stub) =>
+      cy.get('.CodeMirror textarea').eq(1).type(stub.query.helloWorld, {
+        force: true,
+      }),
+    );
+  });
+
+  it('Gives a suggested query more specific than the used data-testid', () => {
+    cy.get('[data-cy=suggested-query]').should(
+      'contain',
+      "screen.getByText('Hello World')",
+    );
+    cy.get('.query-editor > .w-full > .CodeMirror').should(
+      'contain',
+      "screen.getByTestId('hello')",
+    );
+  });
+
+  it('Clicking on the suggested query changes the query in code field', () => {
+    cy.get('[data-cy=suggested-query]').click();
+    cy.get('[data-cy=suggested-query]').should(
+      'contain',
+      "screen.getByText('Hello World')",
+    );
+    cy.get('.query-editor > .w-full > .CodeMirror').should(
+      'contain',
+      "screen.getByText('Hello World')",
+    );
+  });
+});

cypress/integration/navigation.spec.js

@@ -0,0 +1,29 @@
+describe('Navigation In Header Redirection Testing', () => {
+  beforeEach(() => cy.visit('/'));
+  it('Clicking "Common Mistakes" will redirect', () => {
+    cy.get('.bg-gray-900 > .space-x-8 > a')
+      .last()
+      .should('have.attr', 'href')
+      .and(
+        'include',
+        'https://kentcdodds.com/blog/common-mistakes-with-react-testing-library',
+      );
+
+    cy.get('.bg-gray-900 > .space-x-8 > a')
+      .eq(2)
+      .should('have.attr', 'href')
+      .and('include', 'https://testing-library.com/docs/guide-which-query');
+
+    cy.get('.bg-gray-900 > .space-x-8 > a')
+      .eq(1)
+      .should('have.attr', 'href')
+      .and(
+        'include',
+        'https://testing-library.com/docs/dom-testing-library/intro',
+      );
+    cy.get('.bg-gray-900 > .space-x-8 > a')
+      .eq(0)
+      .should('have.attr', 'href')
+      .and('include', 'https://github.com/smeijer/testing-playground');
+  });
+});

cypress/integration/queryOptionsFunctionality.spec.js

@@ -0,0 +1,57 @@
+describe('All Query Selections & Buttons Funtionality', () => {
+  beforeEach(() => {
+    cy.visitAndClear();
+    cy.fixture('userStubs.json').then((stub) =>
+      cy
+        .get('.CodeMirror textarea')
+        .eq(1)
+        .type(stub.query.example.usernameTestId, {
+          force: true,
+        }),
+    );
+  });
+
+  it('Click on HTML preview "signup" & query options "text", "testId", and "role"', () => {
+    cy.fixture('userStubs.json').then((stub) =>
+      cy.get('.CodeMirror textarea').first().type(stub.html.shortExample, {
+        force: true,
+      }),
+    );
+    cy.get('[data-testid=button-testid]').click();
+    cy.get('[data-cy=suggested-query]').should('contain', 'signup');
+
+    cy.get(':nth-child(2) > .field > .truncate').click();
+    cy.get('p').should('contain', 'getByTestId');
+
+    cy.get('.grid > :nth-child(1) > :nth-child(5)').click();
+    cy.get('p').should('contain', 'getByText');
+
+    cy.get('.grid > :nth-child(1) > :nth-child(2) > .truncate').click();
+    cy.get('p').should('contain', 'great');
+  });
+
+  it('Click on HTML preview input field & query options "labelText", "placeholderText", "displayValue", "altText" and "title"', () => {
+    cy.fixture('userStubs.json').then((stub) =>
+      cy.get('.CodeMirror textarea').first().type(stub.html.example, {
+        force: true,
+      }),
+    );
+    cy.get('[data-testid=uname-testid]').click();
+    cy.get('[data-cy=suggested-query]').should('contain', 'textbox');
+
+    cy.get('.grid > :nth-child(1) > :nth-child(3) > .truncate').click();
+    cy.get('p').should('contain', 'getByLabelText');
+
+    cy.get(':nth-child(4) > .truncate').click();
+    cy.get('p').should('contain', 'getByPlaceholderText');
+
+    cy.get(':nth-child(6) > .truncate').click();
+    cy.get('p').should('contain', 'getByDisplayValue');
+
+    cy.get('.space-y-8 > :nth-child(1) > :nth-child(2) > .truncate').click();
+    cy.get('p').should('contain', 'getByAltText');
+
+    cy.get('.space-y-8 > :nth-child(1) > :nth-child(3) > .truncate').click();
+    cy.get('p').should('contain', 'getByTitle');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = () => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/index.js

@@ -0,0 +1,2 @@
+/// <reference types="cypress" />
+import './initClear';

cypress/support/initClear.js

@@ -0,0 +1,14 @@
+Cypress.Commands.add('visitAndClear', () => {
+  cy.visit('/');
+  cy.get('.CodeMirror')
+    .first()
+    .then((editor) => {
+      editor[0].CodeMirror.setValue('');
+    });
+
+  cy.get('.CodeMirror')
+    .first()
+    .then((editor) => {
+      editor.prevObject[1].CodeMirror.setValue('');
+    });
+});