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); +});