Added Tests

elastic · Feb 17, 2021 · f4dfffd · f4dfffd
1 parent 01a0a54
commit f4dfffd
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 2 deletions.
diff --git a/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap b/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
@@ -72,6 +72,21 @@ exports[`EuiCheckbox props label is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiCheckbox props labelProps is rendered 1`] = `
+<div
+  class="euiCheckbox euiCheckbox--noLabel"
+>
+  <input
+    class="euiCheckbox__input"
+    id="id"
+    type="checkbox"
+  />
+  <div
+    class="euiCheckbox__square"
+  />
+</div>
+`;
+
 exports[`EuiCheckbox props type inList is rendered 1`] = `
 <div
   class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"

diff --git a/src/components/form/checkbox/checkbox.test.tsx b/src/components/form/checkbox/checkbox.test.tsx
@@ -61,6 +61,13 @@ describe('EuiCheckbox', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('labelProps is rendered', () => {
+      const component = render(
+        <EuiCheckbox {...checkboxRequiredProps} labelProps={requiredProps} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
     describe('type', () => {
       TYPES.forEach((value) => {
         test(`${value} is rendered`, () => {

diff --git a/src/components/form/radio/__snapshots__/radio.test.tsx.snap b/src/components/form/radio/__snapshots__/radio.test.tsx.snap
@@ -72,6 +72,21 @@ exports[`EuiRadio props label is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiRadio props labelProps is rendered 1`] = `
+<div
+  class="euiRadio euiRadio--noLabel testClass1 testClass2"
+>
+  <input
+    class="euiRadio__input"
+    id="id"
+    type="radio"
+  />
+  <div
+    class="euiRadio__circle"
+  />
+</div>
+`;
+
 exports[`EuiRadio props value is rendered 1`] = `
 <div
   class="euiRadio euiRadio--noLabel"

diff --git a/src/components/form/radio/radio.test.tsx b/src/components/form/radio/radio.test.tsx
@@ -64,5 +64,13 @@ describe('EuiRadio', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('labelProps is rendered', () => {
+      const component = render(
+        <EuiRadio id="id" onChange={() => {}} labelProps={requiredProps} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -83,3 +83,46 @@ exports[`EuiSwitch is rendered 1`] = `
   </span>
 </div>
 `;
+
+exports[`labelProps is rendered 1`] = `
+<div
+  class="euiSwitch"
+>
+  <button
+    aria-checked="false"
+    aria-labelledby="generated-id"
+    class="euiSwitch__button"
+    id="generated-id"
+    role="switch"
+    type="button"
+  >
+    <span
+      class="euiSwitch__body"
+    >
+      <span
+        class="euiSwitch__thumb"
+      />
+      <span
+        class="euiSwitch__track"
+      >
+        <span
+          class="euiSwitch__icon"
+          data-euiicon-type="cross"
+        />
+        <span
+          class="euiSwitch__icon euiSwitch__icon--checked"
+          data-euiicon-type="check"
+        />
+      </span>
+    </span>
+  </button>
+  <span
+    aria-label="aria-label"
+    class="euiSwitch__label testClass1 testClass2"
+    data-test-subj="test subject string"
+    id="generated-id"
+  >
+    Label
+  </span>
+</div>
+`;
diff --git a/src/components/form/switch/switch.test.tsx b/src/components/form/switch/switch.test.tsx
@@ -44,3 +44,13 @@ describe('EuiSwitch', () => {
     expect(component).toMatchSnapshot();
   });
 });
+
+describe('labelProps', () => {
+  it('is rendered', () => {
+    const component = render(
+      <EuiSwitch {...props} labelProps={requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
@@ -58,7 +58,7 @@ export type EuiSwitchProps = CommonProps &
     compressed?: boolean;
     type?: 'submit' | 'reset' | 'button';
     /**
-     * Object of props passed to the <span/>
+     * Object of props passed to the label's <span/>
      */
     labelProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
   };
@@ -77,7 +77,7 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
   ...rest
 }) => {
   const [switchId] = useState(id || htmlIdGenerator()());
-  const [labelId] = useState(htmlIdGenerator()());
+  const [labelId] = useState(labelProps?.id || htmlIdGenerator()());
 
   const onClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement | HTMLParagraphElement>) => {