Merge pull request #1950 from IBMa/boilerplatejest

fix(node): Add comments explaining value of the jest boilerplate

accessibility-checker/boilerplates/README.md

@@ -5,8 +5,8 @@ of "Hello World" for different test framework environments. The boilerplates
 are:
 
 * [cucumber-selenium](cucumber-selenium): Using [Cucumber](https://www.npmjs.com/package/cucumber) with a [Selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) browser
-* [jest](jest): Using a [Jest](https://www.npmjs.com/package/jest) test environment
+* [jest](jest): Using a [Jest](https://www.npmjs.com/package/jest) test environment with a baseline
 * [jest-selenium](jest-selenium): Using a [Jest](https://www.npmjs.com/package/jest) test environment with a [Selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) browser
 * [mocha-selenium](mocha-selenium): Using a [Mocha](https://www.npmjs.com/package/mocha) test environment with a [Selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) browser
 * [protractor](protractor): Using a [Protractor](https://www.npmjs.com/package/protractor) test environment
-* [webdriverio](webdriverio): Using a [Webdriverio](https://www.npmjs.com/package/webdriverio) test environment
+* [webdriverio](webdriverio): Using a [Webdriverio](https://www.npmjs.com/package/webdriverio) test environment

accessibility-checker/boilerplates/jest/README.md

@@ -0,0 +1,23 @@
+# jest
+
+This folder covers "baseline basics".
+
+We have two tests - one referencing a baseline (stored at `baselines/IMG_BASELINE.json`) and one that does not.
+
+A scan was run previously that detected an issue. That scan was saved as a baseline. The checker will ignore issues stored in the baseline. This feature allows a team to snapshot where they're at to prevent new issues from being introduced. This also allows a team to fail on potential violations, but then store items in the baseline that they've assessed and determined were being addressed in some way.
+
+When you `npm install` and `npm test` in this folder, you should expect to see one test fail and one test pass.
+
+At the time of this commit, if you look at the results for `Image missing alt without Baseline` you will see a failure including:
+
+```
+ - Message: The image has neither an accessible name nor is marked as decorative or redundant
+      Level: violation
+      XPath: /html[1]/body[1]/div[1]/img[1]
+      Snippet: <img src="hello.png">
+      Help: https://able.ibm.com/rules/archives/2024.06.17/doc/en-US/img_alt_valid.html#%7B%22message%22%3A%22The%20image%20has%20neither%20an%20accessible%20name%20nor%20is%20marked%20as%20decorative%20or%20redundant%22%2C%22snippet%22%3A%22%3Cimg%20src%3D%5C%22hello.png%5C%22%3E%22%2C%22value%22%3A%5B%22VIOLATION%22%2C%22FAIL%22%5D%2C%22reasonId%22%3A%22fail_no_alt%22%2C%22ruleId%22%3A%22img_alt_valid%22%2C%22msgArgs%22%3A%5B%5D%7D
+```
+
+We can then add to the `document.body.innerHTML` in that test, following the linked `help` above, to remove the violation. In this example, a simple way is to add an appopriate `alt` attribute.
+
+A useful exercise would be to extend this example to make use of the provided HelloWidget component.

accessibility-checker/boilerplates/jest/src/HelloWidget.js

@@ -6,4 +6,4 @@ var HelloWidget = React.createClass({
     }
 });
 
-module.exports = HelloWidget;
+module.exports = HelloWidget;

accessibility-checker/boilerplates/jest/test/basic.test.js

@@ -3,16 +3,16 @@
  */
 'use strict';
 
-var path = require("path");
-
-// Describe this Suite of testscases, describe is a test Suite and 'it' is a testcase.
-describe("Hello World Basics", () => {
+describe("Hello World - Baseline Basics", () => {
     test("Image missing alt w/ Baseline", async () => {
-        document.body.innerHTML = "<div><img src='hello.png' /></div>";
-        await expect(document).toBeAccessible("IMG_BASELINE");
+        document.body.innerHTML = "<div><img src='hello.png' /></div>"
+        // We expect this test to pass because it will find baselines/IMG_BASELINE.json
+        // The checker will ignore issues stored in the baseline
+        await expect(document).toBeAccessible("IMG_BASELINE")
     });
     test("Image missing alt without Baseline", async () => {
-        document.body.innerHTML = "<div><img src='hello.png' /></div>";
-        await expect(document).toBeAccessible("IMG_NO_BASELINE");
-    });
-});
+        // If you add alt='anything' you will no longer see the 'The image has neither an accessible name nor is marked as decorative or redundant' message
+        document.body.innerHTML = "<div><img src='hello.png' /></div>"
+        await expect(document).toBeAccessible("IMG_NO_BASELINE")
+    })
+})