VACMS-15783: Alt-Text Validation Testing

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": {

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,42 @@
+
+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 (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."
+
+  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."
+
+  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."
+
+  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."
+    When I update alt-text content to display "a simple polygon placeholder"
+    Then I should see no error message

tests/cypress/integration/step_definitions/common/i_create_an_image_with_alt_text.js

@@ -0,0 +1,59 @@
+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();
+  }
+);
+
+When("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;"
+  );
+});

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