VACMS-15783 adds tests in support of alt-text validation

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

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

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