@ministryofjustice/frontend 2.2.3 → 2.2.4

package/moj/all.js

@@ -1840,6 +1840,7 @@ MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
   }
 };
 
+
 if('contentEditable' in document.documentElement) {
   MOJFrontend.RichTextEditor = function(options) {
     this.options = options;

package/moj/all.spec.js

@@ -0,0 +1,22 @@
+const { getByText, getByTestId } = require("@testing-library/dom");
+
+require("./helpers");
+require("./all.js");
+
+describe("initAll", () => {
+  test("initialises container", () => {
+    MOJFrontend.PasswordReveal = jest.fn();
+
+    const container = document.createElement("div");
+
+    container.innerHTML = `
+      <input data-module="moj-password-reveal" data-testid="password-reveal" type="password" />
+    `;
+
+    new MOJFrontend.initAll({ scope: container });
+
+    expect(MOJFrontend.PasswordReveal).toHaveBeenCalledWith(
+      getByTestId(container, "password-reveal"),
+    );
+  });
+});

package/moj/components/password-reveal/password-reveal.js

@@ -29,3 +29,4 @@ MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
     this.button.html('Show <span class="govuk-visually-hidden">password</span>');
   }
 };
+

package/moj/components/password-reveal/password-reveal.spec.js

@@ -0,0 +1,46 @@
+const { getByDisplayValue, getByText } = require("@testing-library/dom");
+const { axe } = require("jest-axe");
+
+require("./password-reveal.js");
+
+describe("Password reveal", () => {
+  let container;
+
+  beforeEach(() => {
+    const input = document.createElement("input");
+    input.type = "password";
+    input.value = "password";
+
+    new MOJFrontend.PasswordReveal(input);
+
+    container = input.parentNode;
+  });
+
+  test("initialises container", () => {
+    expect(container).toHaveClass("moj-password-reveal");
+    expect(container).toContainElement(getByText(container, "Show"));
+  });
+
+  test("toggle reveal", () => {
+    const input = getByDisplayValue(container, "password");
+    const button = getByText(container, "Show");
+
+    button.click();
+
+    expect(input).toHaveAttribute("type", "text");
+    expect(button).toHaveTextContent("Hide");
+
+    button.click();
+
+    expect(input).toHaveAttribute("type", "password");
+    expect(button).toHaveTextContent("Show");
+  });
+
+  test("accessibility", async () => {
+    const button = getByText(container, "Show");
+
+    expect(await axe(document.body)).toHaveNoViolations();
+    button.click();
+    expect(await axe(document.body)).toHaveNoViolations();
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "main": "moj/all.js",
   "sass": "moj/all.scss",
   "engines": {