Naming convention changes for clarity & additional testing

- Tests cover functionality of query options
- Clearing and user input of the code fields
- Clicking on the HTML previews
- Validating the query option selections change the descriptive content

Author: JacobMGEvans

cypress/fixtures/userStubs.json

@@ -1,7 +1,8 @@
 {
   "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"
+    "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')",

cypress/integration/demoAllFunctionality.spec.js

@@ -1,13 +1,6 @@
 describe('All Query Selections & Buttons Funtionality', () => {
   beforeEach(() => {
-    cy.seedAndVisit();
-
-    cy.fixture('userStubs.json').then((stub) =>
-      cy.get('.CodeMirror textarea').first().type(stub.html.example, {
-        force: true,
-      }),
-    );
-
+    cy.visitAndClear();
     cy.fixture('userStubs.json').then((stub) =>
       cy
         .get('.CodeMirror textarea')
@@ -18,9 +11,47 @@ describe('All Query Selections & Buttons Funtionality', () => {
     );
   });
 
-  it('click on HTML preview "signup" button', () => {
+  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/integration/initApp.spec.js

@@ -1,6 +1,6 @@
 describe('App Initialization Smoke Test', () => {
   beforeEach(() => {
-    cy.seedAndVisit();
+    cy.visitAndClear();
 
     cy.fixture('userStubs.json').then((stub) =>
       cy.get('.CodeMirror textarea').first().type(stub.html.helloWorld, {

cypress/support/index.js

@@ -1,2 +1,2 @@
 /// <reference types="cypress" />
-import './init-seed';
+import './init-clear';

cypress/support/init-seed.js renamed to cypress/support/init-clear.js

@@ -1,4 +1,4 @@
-Cypress.Commands.add('seedAndVisit', () => {
+Cypress.Commands.add('visitAndClear', () => {
   cy.visit('/');
   cy.get('.CodeMirror')
     .first()