@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

package/dist/collection/components/ic-data-row/ic-data-row.spec.js

@@ -0,0 +1,185 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DataRow } from "./ic-data-row";
+describe("ic-data-row", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row label="label" value="value"></ic-data-row>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-row label="label" role="listitem" value="value">
+      <mock:shadow-root>
+        <div class="data">
+          <div class="text-cells">
+            <div class="label">
+              <slot name="label">
+                <ic-typography variant="subtitle-large">
+                  label
+                </ic-typography>
+              </slot>
+            </div>
+            <div class="value">
+              <slot name="value">
+                <ic-typography variant="body">
+                  value
+                </ic-typography>
+              </slot>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+      </mock:shadow-root>
+    </ic-data-row>`);
+  });
+  it("should render slotted content in the label slot", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row value="value"><ic-typography slot="label">Label</ic-typography></ic-data-row>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-row role="listitem" value="value">
+      <mock:shadow-root>
+        <div class="data">
+          <div class="text-cells">
+            <div class="label">
+              <slot name="label">
+                <ic-typography variant="subtitle-large"></ic-typography>
+              </slot>
+            </div>
+            <div class="value">
+              <slot name="value">
+                <ic-typography variant="body">
+                  value
+                </ic-typography>
+              </slot>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+      </mock:shadow-root>
+      <ic-typography slot="label">
+        Label
+      </ic-typography>
+    </ic-data-row>`);
+  });
+  it("should render slotted content in the value slot", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row label="label"><ic-status-tag variant="success" label="success" slot="value"></ic-status-tag></ic-data-row>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-row role="listitem" label="label">
+      <mock:shadow-root>
+        <div class="data">
+          <div class="text-cells">
+            <div class="label">
+              <slot name="label">
+                <ic-typography variant="subtitle-large">
+                  label
+                </ic-typography>
+              </slot>
+            </div>
+            <div class="value">
+              <slot name="value">
+                <ic-typography variant="body"></ic-typography>
+              </slot>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+      </mock:shadow-root>
+      <ic-status-tag variant="success" label="success" slot="value"></ic-status-tag>
+    </ic-data-row>`);
+  });
+  it("should render slotted content in the end-component slot", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row label="label" value="test value"><ic-status-tag variant="success" label="success" slot="end-component"></ic-status-tag></ic-data-row>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-data-row role="listitem" label="label" value="test value">
+      <mock:shadow-root>
+        <div class="data">
+          <div class="text-cells">
+            <div class="label">
+              <slot name="label">
+                <ic-typography variant="subtitle-large">
+                  label
+                </ic-typography>
+              </slot>
+            </div>
+            <div class="value">
+              <slot name="value">
+                <ic-typography variant="body">test value</ic-typography>
+              </slot>
+            </div>
+          </div>
+          <div class="end-component">
+            <div role="cell">
+              <slot aria-label="for label row" name="end-component"></slot>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+      </mock:shadow-root>
+      <ic-status-tag variant="success" label="success" slot="end-component"></ic-status-tag>
+    </ic-data-row>`);
+  });
+  it("should render the label variant of typography when entity size is xs", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row label="label"><ic-status-tag variant="success" label="success" slot="value"></ic-status-tag></ic-data-row>`,
+    });
+    page.rootInstance.entitySize = "xs";
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+    <ic-data-row class="breakpoint-xs" role="listitem" label="label">
+      <mock:shadow-root>
+        <div class="data">
+          <div class="text-cells">
+            <div class="label">
+              <slot name="label">
+                <ic-typography variant="label">
+                  label
+                </ic-typography>
+              </slot>
+            </div>
+            <div class="value">
+              <slot name="value">
+                <ic-typography variant="body"></ic-typography>
+              </slot>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+      </mock:shadow-root>
+      <ic-status-tag variant="success" label="success" slot="value"></ic-status-tag>
+    </ic-data-row>`);
+  });
+  it("should call runResizeObserver", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row label="label" value="value"></ic-data-row>`,
+    });
+    await page.rootInstance.runResizeObserver();
+    page.waitForChanges();
+    const resize = new ResizeObserver(() => {
+      page.rootInstance.checkLabelAbove();
+    });
+    expect(page.rootInstance.resizeObserver).toBe(resize);
+    page.setContent("");
+  });
+  it("should change entity size depending on screen size", async () => {
+    const page = await newSpecPage({
+      components: [DataRow],
+      html: `<ic-data-row label="label" value="value"></ic-data-row>`,
+    });
+    Object.defineProperty(page.root.shadowRoot.querySelector(".data"), "clientWidth", {
+      value: 200,
+    });
+    page.waitForChanges();
+    page.rootInstance.checkLabelAbove();
+    expect(page.rootInstance.entitySize).toBe("xs");
+  });
+});
+//# sourceMappingURL=ic-data-row.spec.js.map

package/dist/collection/components/ic-data-row/ic-data-row.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-row.spec.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataRow } from \"./ic-data-row\";\n\ndescribe(\"ic-data-row\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-row label=\"label\" role=\"listitem\" value=\"value\">\n      <mock:shadow-root>\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"subtitle-large\">\n                  label\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">\n                  value\n                </ic-typography>\n              </slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"divider\"></div>\n      </mock:shadow-root>\n    </ic-data-row>`);\n  });\n\n  it(\"should render slotted content in the label slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"><ic-typography slot=\"label\">Label</ic-typography></ic-data-row>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-row role=\"listitem\" value=\"value\">\n      <mock:shadow-root>\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"subtitle-large\"></ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">\n                  value\n                </ic-typography>\n              </slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"divider\"></div>\n      </mock:shadow-root>\n      <ic-typography slot=\"label\">\n        Label\n      </ic-typography>\n    </ic-data-row>`);\n  });\n\n  it(\"should render slotted content in the value slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-row role=\"listitem\" label=\"label\">\n      <mock:shadow-root>\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"subtitle-large\">\n                  label\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\"></ic-typography>\n              </slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"divider\"></div>\n      </mock:shadow-root>\n      <ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag>\n    </ic-data-row>`);\n  });\n\n  it(\"should render slotted content in the end-component slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"test value\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"end-component\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-row role=\"listitem\" label=\"label\" value=\"test value\">\n      <mock:shadow-root>\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"subtitle-large\">\n                  label\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">test value</ic-typography>\n              </slot>\n            </div>\n          </div>\n          <div class=\"end-component\">\n            <div role=\"cell\">\n              <slot aria-label=\"for label row\" name=\"end-component\"></slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"divider\"></div>\n      </mock:shadow-root>\n      <ic-status-tag variant=\"success\" label=\"success\" slot=\"end-component\"></ic-status-tag>\n    </ic-data-row>`);\n  });\n\n  it(\"should render the label variant of typography when entity size is xs\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    page.rootInstance.entitySize = \"xs\";\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-row class=\"breakpoint-xs\" role=\"listitem\" label=\"label\">\n      <mock:shadow-root>\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"label\">\n                  label\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\"></ic-typography>\n              </slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"divider\"></div>\n      </mock:shadow-root>\n      <ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag>\n    </ic-data-row>`);\n  });\n\n  it(\"should call runResizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    await page.rootInstance.runResizeObserver();\n    page.waitForChanges();\n\n    const resize = new ResizeObserver(() => {\n      page.rootInstance.checkLabelAbove();\n    });\n\n    expect(page.rootInstance.resizeObserver).toBe(resize);\n\n    page.setContent(\"\");\n  });\n\n  it(\"should change entity size depending on screen size\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    Object.defineProperty(\n      page.root.shadowRoot.querySelector(\".data\"),\n      \"clientWidth\",\n      {\n        value: 200,\n      }\n    );\n\n    page.waitForChanges();\n\n    page.rootInstance.checkLabelAbove();\n\n    expect(page.rootInstance.entitySize).toBe(\"xs\");\n  });\n});\n"]}