Add test and update snapshots

auth0 · Sep 5, 2023 · e0bb598 · e0bb598
1 parent 0e6afa3
commit e0bb598
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 31 deletions.
diff --git a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap
@@ -2,45 +2,95 @@
 
 exports[`CustomInput when type == checkbox and when placeholderHTML is set renders correctly as a CheckBoxInput 1`] = `
 <div
-  className="auth0-lock-input-checkbox"
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-input-checkbox"
 >
-  <label>
-    <input
-      aria-label="Custom Input"
-      checked={false}
-      id="1-custom_input"
-      name="custom_input"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      dangerouslySetInnerHTML={
-        {
-          "__html": "<b>Placeholder</b>",
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={false}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        dangerouslySetInnerHTML={
+          {
+            "__html": "<b>Placeholder</b>",
+          }
         }
-      }
-    />
-  </label>
+      />
+    </label>
+  </div>
 </div>
 `;
 
 exports[`CustomInput when type == checkbox renders correctly as a CheckBoxInput 1`] = `
 <div
-  className="auth0-lock-input-checkbox"
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-input-checkbox"
 >
-  <label>
-    <input
-      aria-label="Custom Input"
-      checked={false}
-      id="1-custom_input"
-      name="custom_input"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span>
-      placeholder
-    </span>
-  </label>
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={false}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span>
+        placeholder
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`CustomInput when type == checkbox shows an error when value is incorrect 1`] = `
+<div
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-error auth0-lock-input-checkbox"
+>
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={true}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        dangerouslySetInnerHTML={
+          {
+            "__html": "<b>Placeholder</b>",
+          }
+        }
+      />
+    </label>
+  </div>
+  <div
+    className="auth0-lock-error-msg"
+    id="auth0-lock-error-msg-custom_input"
+    role="alert"
+  >
+    <div
+      className="auth0-lock-error-invalid-hint"
+    >
+      invalid-hint-custom_input
+    </div>
+  </div>
 </div>
 `;
 

diff --git a/src/__tests__/field/custom_input.test.jsx b/src/__tests__/field/custom_input.test.jsx
@@ -97,20 +97,31 @@ describe('CustomInput', () => {
   describe('when type == checkbox', () => {
     beforeEach(() => (defaultProps.type = 'checkbox'));
     it('renders correctly as a CheckBoxInput', () => {
+      require('field/index').isFieldVisiblyInvalid = () => false;
       const CustomInput = getComponent();
 
       expectComponent(<CustomInput {...defaultProps} />).toMatchSnapshot();
     });
 
     describe('and when placeholderHTML is set', () => {
       it('renders correctly as a CheckBoxInput', () => {
+        require('field/index').isFieldVisiblyInvalid = () => false;
+
         const CustomInput = getComponent();
 
         expectComponent(
           <CustomInput {...defaultProps} placeholderHTML={'<b>Placeholder</b>'} />
         ).toMatchSnapshot();
       });
     });
+
+    it('shows an error when value is incorrect', () => {
+      const CustomInput = getComponent();
+
+      expectComponent(
+        <CustomInput {...defaultProps} placeholderHTML={'<b>Placeholder</b>'} />
+      ).toMatchSnapshot();
+    });
   });
   describe('when type == hidden', () => {
     beforeEach(() => {