@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js

@@ -1,203 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { CheckboxGroup } from "../../ic-checkbox-group";
-import { Checkbox } from "../../../ic-checkbox/ic-checkbox";
-import { TextField } from "../../../ic-text-field/ic-text-field";
-describe("ic-checkbox-group", () => {
-  it("should render", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test">
-        <ic-checkbox value="test" label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders");
-  });
-  it("should render as required", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test" required>
-        <ic-checkbox value="test" label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-required");
-  });
-  it("should render as helper text", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test" helper-text="helper test">
-        <ic-checkbox value="test" label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-with-helpertext");
-  });
-  it("should render checked", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test">
-        <ic-checkbox value="test" checked label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-checked");
-  });
-  it("should render indeterminate", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test">
-        <ic-checkbox value="test" checked indeterminate label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-indeterminate");
-  });
-  it("should render an aria label when label hidden", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" hide-label name="test">
-        <ic-checkbox value="test" label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-hidden-label");
-  });
-  it("should render in a disabled state", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test">
-        <ic-checkbox value="test" disabled label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-disabled");
-  });
-  it("should render with validation status", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" hide-label name="test" validation-status="error">
-        <ic-checkbox value="test" label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-with-validation");
-  });
-  it("should render with hidden dynamic additional field", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox, TextField],
-      html: `<ic-checkbox-group label="test label" hide-label name="test" validation-status="error">
-        <ic-checkbox value="test" additional-field-display="dynamic" label="test label">
-        <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
-        </ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-with-dynamic-field");
-  });
-  it("should render with dynamic additional field when checked", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox, TextField],
-      html: `<ic-checkbox-group label="test label" hide-label name="test" validation-status="error">
-        <ic-checkbox value="test" label="test label" additional-field-display="dynamic" checked>
-        <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
-        </ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-with-dynamic-field-when-checked");
-  });
-  it("should render with disabled static additional field", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox, TextField],
-      html: `<ic-checkbox-group label="test label" hide-label name="test" validation-status="error">
-        <ic-checkbox value="test" label="test label" additional-field-display="static">
-        <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
-        </ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-with-disabled-additional-field");
-  });
-  it("should remove disabled attribute from static additional field when checked", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox, TextField],
-      html: `<ic-checkbox-group label="test label" hide-label name="test" validation-status="error">
-        <ic-checkbox value="test" label="test label" additional-field-display="static" checked>
-        <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
-        </ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot("renders-with-disabled-attribute-removed-from-field");
-  });
-  it("should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test" size="small">
-        <ic-checkbox value="test" label="test label"></ic-checkbox>
-        <ic-checkbox value="test" label="test label"></ic-checkbox>  
-      </ic-checkbox-group>`,
-    });
-    expect(page.root).toMatchSnapshot();
-    const checkboxes = page.root.querySelectorAll("ic-checkbox");
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox.classList.contains("small")).toBe(true);
-    });
-  });
-  it("should prioritise the size on an individual checkbox over the size on the checkbox group", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test" size="large">
-        <ic-checkbox value="test" label="test label" id="large-checkbox"></ic-checkbox>
-        <ic-checkbox value="test" label="test label" size="small" id="small-checkbox"></ic-checkbox>  
-      </ic-checkbox-group>`,
-    });
-    const smallCheckbox = page.root.querySelector("ic-checkbox#small-checkbox");
-    expect(smallCheckbox["size"]).toMatch("small");
-    const largeCheckbox = page.root.querySelector("ic-checkbox:not(#small-checkbox)");
-    expect(largeCheckbox.classList.contains("large")).toBe(true);
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should change checked state", async () => {
-    const page = await newSpecPage({
-      components: [Checkbox],
-      html: `<ic-checkbox value="test" label="test label" checked></ic-checkbox>`,
-    });
-    expect(page.root.checked).toBe(true);
-    page.rootInstance.handleClick();
-    await page.waitForChanges();
-    expect(page.root.checked).toBe(false);
-  });
-  it("should call 'setFocus' when checkbox is focused", async () => {
-    const page = await newSpecPage({
-      components: [Checkbox],
-      html: `<ic-checkbox value="test" label="test label" checked></ic-checkbox>`,
-    });
-    //Can't expect anything in this test - this is to increase code coverage only
-    await page.rootInstance.setFocus().toHaveBeenCalled;
-  });
-  it("should emit icCheck on click", async () => {
-    const page = await newSpecPage({
-      components: [CheckboxGroup, Checkbox],
-      html: `<ic-checkbox-group label="test label" name="test">
-        <ic-checkbox value="test" label="test label"></ic-checkbox>    
-      </ic-checkbox-group>`,
-    });
-    const eventSpy = jest.fn();
-    page.win.addEventListener("icCheck", eventSpy);
-    page.root
-      .querySelector("ic-checkbox")
-      .shadowRoot.querySelector("input")
-      .click();
-    await page.waitForChanges();
-    expect(eventSpy).toHaveBeenCalled();
-  });
-  it("should test form reset event", async () => {
-    const page = await newSpecPage({
-      components: [Checkbox],
-      html: `<form>
-          <ic-checkbox value="test" label="test label" checked></ic-checkbox>    
-          <button id="resetButton" type="reset">Reset</button>  
-      </form>`,
-    });
-    expect(page.root.checked).toBe(true);
-    page.root.checked = false;
-    await page.waitForChanges();
-    expect(page.root.checked).toBe(false);
-    await page.rootInstance.handleFormReset();
-    await page.waitForChanges();
-    expect(page.root.checked).toBe(true);
-    //test disconnected callback
-    page.setContent("");
-  });
-});
-//# sourceMappingURL=ic-checkbox-group.spec.js.map

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render as required\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-required\");\n  });\n\n  it(\"should render as helper text\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render indeterminate\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n  });\n\n  it(\"should render an aria label when label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n  });\n\n  it(\"should render with hidden dynamic additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n  });\n\n  it(\"should render with dynamic additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-dynamic-field-when-checked\"\n    );\n  });\n\n  it(\"should render with disabled static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n  });\n\n  it(\"should remove disabled attribute from static additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-disabled-attribute-removed-from-field\"\n    );\n  });\n\n  it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox.classList.contains(\"small\")).toBe(true);\n    });\n  });\n\n  it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n        <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    const smallCheckbox = page.root.querySelector(\n      \"ic-checkbox#small-checkbox\"\n    ) as HTMLIcCheckboxElement;\n    expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n    const largeCheckbox = page.root.querySelector(\n      \"ic-checkbox:not(#small-checkbox)\"\n    ) as HTMLIcCheckboxElement;\n    expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should change checked state\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.rootInstance.handleClick();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when checkbox is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should emit icCheck on click\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icCheck\", eventSpy);\n\n    page.root\n      .querySelector(\"ic-checkbox\")\n      .shadowRoot.querySelector(\"input\")\n      .click();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form>\n          <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>    \n          <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.root.checked = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}