From 1b37b5f9fcdb50544d71ef7b6060e5de696cc5db Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Wed, 15 Nov 2023 14:53:45 -0600 Subject: [PATCH 1/6] VACMS-15783 adds tests in support of alt-text validation --- .../custom/va_gov_media/va_gov_media.info.yml | 4 ++ .../platform/alt_text_validation.feature | 20 ++++++++ .../common/i_create_an_image_with_alt_text.js | 48 +++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 tests/cypress/integration/features/platform/alt_text_validation.feature create mode 100644 tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js diff --git a/docroot/modules/custom/va_gov_media/va_gov_media.info.yml b/docroot/modules/custom/va_gov_media/va_gov_media.info.yml index e2d945d896..3d4f813043 100644 --- a/docroot/modules/custom/va_gov_media/va_gov_media.info.yml +++ b/docroot/modules/custom/va_gov_media/va_gov_media.info.yml @@ -3,3 +3,7 @@ type: module description: 'Manage images and other media' core_version_requirement: ^9 || ^10 package: 'Custom' + +dependencies: + - drupal:clientside_validation + - drupal:clientside_validation_jquery diff --git a/tests/cypress/integration/features/platform/alt_text_validation.feature b/tests/cypress/integration/features/platform/alt_text_validation.feature new file mode 100644 index 0000000000..fa89d1a324 --- /dev/null +++ b/tests/cypress/integration/features/platform/alt_text_validation.feature @@ -0,0 +1,20 @@ + +Feature: Alt-Text Validation + In order to enhance the veteran experience + As an editor + I need just-in-time guidance as to best practices surrounding alt-text content + + Scenario: An editor supplies verbose alt-text content + Given I am logged in as a user with the "administrator" role + When I create an image with 152 characters of alt-text content + Then I should see "Alternative text cannot be longer than 150 characters." as an error message + + Scenario: An editor supplies redundant alt-text content + Given I am logged in as a user with the "administrator" role + When I create an image with "Image of polygon" as alt-text + Then I should see "Alternative text cannot contain phrases like “image of”, “photo of”, “graphic of”, “picture of”, etc." as an error message + + Scenario: An editor supplies the name of the image file as alt-text content + Given I am logged in as a user with the "administrator" role + When I create an image with "polygon_image.png" as alt-text + Then I should see "Alternative text cannot contain file names." as an error message diff --git a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js new file mode 100644 index 0000000000..015f0abad6 --- /dev/null +++ b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js @@ -0,0 +1,48 @@ +import { When, Then } from "@badeball/cypress-cucumber-preprocessor"; +import { faker } from "@faker-js/faker"; + +const navigateToAndFillMediaForm = () => { + cy.visit("/media/add/image"); + cy.injectAxe(); + cy.scrollTo("top"); + cy.findAllByLabelText("Name").type(`[Test Data] ${faker.lorem.sentence()}`, { + force: true, + }); + cy.findAllByLabelText("Description").type(faker.lorem.sentence(), { + force: true, + }); + cy.findAllByLabelText("Section").select("VACO"); + cy.get("#edit-image-0-upload") + .attachFile("images/polygon_image.png") + .wait(1000); +}; + +const focusOnNameField = () => { + cy.findAllByLabelText("Name").focus(); +}; + +When("I create an image with {string} as alt-text", (altTextContent) => { + navigateToAndFillMediaForm(); + cy.findAllByLabelText("Alternative text").type(altTextContent, { + force: true, + }); + focusOnNameField(); +}); + +When( + "I create an image with {int} characters of alt-text content", + (charCount) => { + navigateToAndFillMediaForm(); + cy.findAllByLabelText("Alternative text").type( + faker.helpers.repeatString("a", charCount), + { + force: true, + } + ); + focusOnNameField(); + } +); + +Then("I should see {string} as an error message", (errorMessage) => { + cy.get("div.form-item--error-message").find("strong").contains(errorMessage); +}); From 19966d8733233c2a354d1e2ff21fbedec1976b2f Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Wed, 15 Nov 2023 15:46:35 -0600 Subject: [PATCH 2/6] updates composer.json --- composer.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/composer.json b/composer.json index 786c877f42..3763900a6c 100644 --- a/composer.json +++ b/composer.json @@ -291,7 +291,8 @@ "dealerdirect/phpcodesniffer-composer-installer": true, "php-http/discovery": true, "cweagans/composer-patches": true, - "orakili/composer-drupal-info-file-patch-helper": true + "orakili/composer-drupal-info-file-patch-helper": true, + "digitalrevolution/php-codesniffer-baseline": true } }, "extra": { From cee16371f8131b44ad7829274872ad75f84da5a7 Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Fri, 17 Nov 2023 14:49:44 -0600 Subject: [PATCH 3/6] adds scenario where editor corrects after receiving error message --- .../features/platform/alt_text_validation.feature | 7 +++++++ .../common/i_create_an_image_with_alt_text.js | 15 +++++++++++++++ tests/cypress/support/commands.js | 2 +- 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/tests/cypress/integration/features/platform/alt_text_validation.feature b/tests/cypress/integration/features/platform/alt_text_validation.feature index fa89d1a324..77e8c9e352 100644 --- a/tests/cypress/integration/features/platform/alt_text_validation.feature +++ b/tests/cypress/integration/features/platform/alt_text_validation.feature @@ -18,3 +18,10 @@ Feature: Alt-Text Validation Given I am logged in as a user with the "administrator" role When I create an image with "polygon_image.png" as alt-text Then I should see "Alternative text cannot contain file names." as an error message + + Scenario: An editor supplies the name of the image file and then correctly edits field + Given I am logged in as a user with the "administrator" role + When I create an image with "polygon_image.png" as alt-text + Then I should see "Alternative text cannot contain file names." as an error message + Then I update alt-text content to display "a simple polygon placeholder" + Then I should see no error message diff --git a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js index 015f0abad6..eb1296c555 100644 --- a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js +++ b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js @@ -43,6 +43,21 @@ When( } ); +Then("I update alt-text content to display {string}", (altTextContent) => { + cy.findAllByLabelText("Alternative text").clear(); + cy.findAllByLabelText("Alternative text").type(altTextContent, { + force: true, + }); +}); + +Then("I should see no error message", () => { + cy.get("div.form-item--error-message > strong").should( + "have.attr", + "style", + "display: none;" + ); +}); + Then("I should see {string} as an error message", (errorMessage) => { cy.get("div.form-item--error-message").find("strong").contains(errorMessage); }); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index 007d5c7a39..dccdbbfe45 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -65,7 +65,7 @@ Cypress.Commands.add("drupalLogout", () => { Cypress.Commands.add("drupalDrushCommand", (command) => { let cmd = "drush %command"; if (Cypress.env("VAGOV_INTERACTIVE")) { - cmd = "ddev drush %command"; + cmd = "drush %command"; } if (typeof command === "string") { command = [command]; From 99a2e5d0934d2ed741055b4ceaf19f49a04195f3 Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Fri, 17 Nov 2023 14:56:27 -0600 Subject: [PATCH 4/6] corrects command script (adjusted for local env) --- tests/cypress/support/commands.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index dccdbbfe45..007d5c7a39 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -65,7 +65,7 @@ Cypress.Commands.add("drupalLogout", () => { Cypress.Commands.add("drupalDrushCommand", (command) => { let cmd = "drush %command"; if (Cypress.env("VAGOV_INTERACTIVE")) { - cmd = "drush %command"; + cmd = "ddev drush %command"; } if (typeof command === "string") { command = [command]; From 65bf775edbad3572b82cf30da685205ad02635c7 Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Tue, 21 Nov 2023 10:52:14 -0600 Subject: [PATCH 5/6] adds hard validation tests --- .../platform/alt_text_validation.feature | 29 +++++++++--- .../common/i_create_an_image_with_alt_text.js | 4 -- .../common/i_save_an_image_with_alt_text.js | 45 +++++++++++++++++++ 3 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 tests/cypress/integration/step_definitions/common/i_save_an_image_with_alt_text.js diff --git a/tests/cypress/integration/features/platform/alt_text_validation.feature b/tests/cypress/integration/features/platform/alt_text_validation.feature index 77e8c9e352..ab56b5ab33 100644 --- a/tests/cypress/integration/features/platform/alt_text_validation.feature +++ b/tests/cypress/integration/features/platform/alt_text_validation.feature @@ -4,24 +4,39 @@ Feature: Alt-Text Validation As an editor I need just-in-time guidance as to best practices surrounding alt-text content - Scenario: An editor supplies verbose alt-text content + Scenario: An editor supplies verbose alt-text content (server-side validation) + Given I am logged in as a user with the "administrator" role + When I save an image with 152 characters of alt-text content + Then I should see "Alternative text cannot be longer than 150 characters." + + Scenario: An editor supplies redundant alt-text content (server-side validation) + Given I am logged in as a user with the "administrator" role + When I save an image with "Image of polygon" as alt-text + Then I should see "Alternative text cannot contain phrases like “image of”, “photo of”, “graphic of”, “picture of”, etc." + + Scenario: An editor supplies the name of the image file as alt-text content (server-side validation) + Given I am logged in as a user with the "administrator" role + When I save an image with "polygon_image.png" as alt-text + Then I should see "Alternative text cannot contain file names." + + Scenario: An editor supplies verbose alt-text content (element blur validation) Given I am logged in as a user with the "administrator" role When I create an image with 152 characters of alt-text content - Then I should see "Alternative text cannot be longer than 150 characters." as an error message + Then I should see "Alternative text cannot be longer than 150 characters." - Scenario: An editor supplies redundant alt-text content + Scenario: An editor supplies redundant alt-text content (element blur validation) Given I am logged in as a user with the "administrator" role When I create an image with "Image of polygon" as alt-text - Then I should see "Alternative text cannot contain phrases like “image of”, “photo of”, “graphic of”, “picture of”, etc." as an error message + Then I should see "Alternative text cannot contain phrases like “image of”, “photo of”, “graphic of”, “picture of”, etc." - Scenario: An editor supplies the name of the image file as alt-text content + Scenario: An editor supplies the name of the image file as alt-text content (element blur validation) Given I am logged in as a user with the "administrator" role When I create an image with "polygon_image.png" as alt-text - Then I should see "Alternative text cannot contain file names." as an error message + Then I should see "Alternative text cannot contain file names." Scenario: An editor supplies the name of the image file and then correctly edits field Given I am logged in as a user with the "administrator" role When I create an image with "polygon_image.png" as alt-text - Then I should see "Alternative text cannot contain file names." as an error message + Then I should see "Alternative text cannot contain file names." Then I update alt-text content to display "a simple polygon placeholder" Then I should see no error message diff --git a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js index eb1296c555..45f311dbfb 100644 --- a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js +++ b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js @@ -57,7 +57,3 @@ Then("I should see no error message", () => { "display: none;" ); }); - -Then("I should see {string} as an error message", (errorMessage) => { - cy.get("div.form-item--error-message").find("strong").contains(errorMessage); -}); diff --git a/tests/cypress/integration/step_definitions/common/i_save_an_image_with_alt_text.js b/tests/cypress/integration/step_definitions/common/i_save_an_image_with_alt_text.js new file mode 100644 index 0000000000..900ad1954f --- /dev/null +++ b/tests/cypress/integration/step_definitions/common/i_save_an_image_with_alt_text.js @@ -0,0 +1,45 @@ +import { When } from "@badeball/cypress-cucumber-preprocessor"; +import { faker } from "@faker-js/faker"; + +const navigateToAndFillMediaForm = () => { + cy.visit("/media/add/image"); + cy.injectAxe(); + cy.scrollTo("top"); + cy.findAllByLabelText("Name").type(`[Test Data] ${faker.lorem.sentence()}`, { + force: true, + }); + cy.findAllByLabelText("Description").type(faker.lorem.sentence(), { + force: true, + }); + cy.findAllByLabelText("Section").select("VACO"); + cy.get("#edit-image-0-upload") + .attachFile("images/polygon_image.png") + .wait(1000); +}; + +const clickSaveButton = () => { + cy.get("form.media-form input#edit-submit").click(); + cy.wait(1000); +}; + +When("I save an image with {string} as alt-text", (altTextContent) => { + navigateToAndFillMediaForm(); + cy.findAllByLabelText("Alternative text").type(altTextContent, { + force: true, + }); + clickSaveButton(); +}); + +When( + "I save an image with {int} characters of alt-text content", + (charCount) => { + navigateToAndFillMediaForm(); + cy.findAllByLabelText("Alternative text").type( + faker.helpers.repeatString("a", charCount), + { + force: true, + } + ); + clickSaveButton(); + } +); From a4ce74f9b2c24cf0425a8e3e85c34baa04c94e1d Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Tue, 21 Nov 2023 11:31:12 -0600 Subject: [PATCH 6/6] refactors step definition to use action semantics --- .../integration/features/platform/alt_text_validation.feature | 2 +- .../step_definitions/common/i_create_an_image_with_alt_text.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/cypress/integration/features/platform/alt_text_validation.feature b/tests/cypress/integration/features/platform/alt_text_validation.feature index ab56b5ab33..a818c5967e 100644 --- a/tests/cypress/integration/features/platform/alt_text_validation.feature +++ b/tests/cypress/integration/features/platform/alt_text_validation.feature @@ -38,5 +38,5 @@ Feature: Alt-Text Validation Given I am logged in as a user with the "administrator" role When I create an image with "polygon_image.png" as alt-text Then I should see "Alternative text cannot contain file names." - Then I update alt-text content to display "a simple polygon placeholder" + When I update alt-text content to display "a simple polygon placeholder" Then I should see no error message diff --git a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js index 45f311dbfb..4b4a52a5ee 100644 --- a/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js +++ b/tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js @@ -43,7 +43,7 @@ When( } ); -Then("I update alt-text content to display {string}", (altTextContent) => { +When("I update alt-text content to display {string}", (altTextContent) => { cy.findAllByLabelText("Alternative text").clear(); cy.findAllByLabelText("Alternative text").type(altTextContent, { force: true,