From 0af1c0f146535b38c0236cb4d86f09625d1868ed Mon Sep 17 00:00:00 2001 From: Daniel Eshkeri Date: Wed, 4 Dec 2024 18:13:04 +0000 Subject: [PATCH] removed some test from fab to test code coverage comment --- src/test/avatar/avatar.test.ts | 132 ++++++++++++++++----------------- src/test/fab/fab.test.ts | 103 +------------------------ 2 files changed, 67 insertions(+), 168 deletions(-) diff --git a/src/test/avatar/avatar.test.ts b/src/test/avatar/avatar.test.ts index 28f74e1..1ea00f8 100644 --- a/src/test/avatar/avatar.test.ts +++ b/src/test/avatar/avatar.test.ts @@ -1,87 +1,87 @@ -// import { fixture, html, expect } from "@open-wc/testing"; -// import type { ZetaAvatar } from "../../components/avatar/avatar.js"; -// import "../../components/avatar/avatar.js"; +import { fixture, html, expect } from "@open-wc/testing"; +import type { ZetaAvatar } from "../../components/avatar/avatar.js"; +import "../../components/avatar/avatar.js"; -// import type { ZetaIcon } from "../../components/icon/icon.js"; -// import type { ZetaIconIndicator } from "../../components/badges/indicators/indicators.js"; -// import { getSlotText } from "../utils.js"; +import type { ZetaIcon } from "../../components/icon/icon.js"; +import type { ZetaIconIndicator } from "../../components/badges/indicators/indicators.js"; +import { getSlotText } from "../utils.js"; -// describe("zeta-avatar", () => { -// // let subject: ZetaAvatar; +describe("zeta-avatar", () => { + // let subject: ZetaAvatar; -// // const createComponent = (template = ``) => { -// // // prettier-ignore -// // return fixture(html`${unsafeStatic(template)}`); -// // }; + // const createComponent = (template = ``) => { + // // prettier-ignore + // return fixture(html`${unsafeStatic(template)}`); + // }; -// // beforeEach(async () => { -// // subject = await createComponent(); -// // }); + // beforeEach(async () => { + // subject = await createComponent(); + // }); -// // describe("Accessibility Tests", () => {}); + // describe("Accessibility Tests", () => {}); -// describe("Content Tests", () => { -// it("renders the avatar with a custom size", async () => { -// const avatar: ZetaAvatar = await fixture(html``); -// await expect(avatar.size).to.equal("xl"); -// }); + describe("Content Tests", () => { + it("renders the avatar with a custom size", async () => { + const avatar: ZetaAvatar = await fixture(html``); + await expect(avatar.size).to.equal("xl"); + }); -// it("renders the avatar with the ring", async () => { -// const avatar: ZetaAvatar = await fixture(html``); -// return expect(avatar.showRing).to.be.true; -// }); + it("renders the avatar with the ring", async () => { + const avatar: ZetaAvatar = await fixture(html``); + return expect(avatar.showRing).to.be.true; + }); -// it("renders the avatar without the ring", async () => { -// const avatar: ZetaAvatar = await fixture(html``); -// return expect(avatar.showRing).to.be.false; -// }); + it("renders the avatar without the ring", async () => { + const avatar: ZetaAvatar = await fixture(html``); + return expect(avatar.showRing).to.be.false; + }); -// it("renders the avatar with the close icon", async () => { -// const avatar: ZetaAvatar = await fixture(html``); -// return expect(avatar.showClose).to.be.true; -// }); + it("renders the avatar with the close icon", async () => { + const avatar: ZetaAvatar = await fixture(html``); + return expect(avatar.showClose).to.be.true; + }); -// it("renders the avatar without the close icon", async () => { -// const avatar: ZetaAvatar = await fixture(html``); -// return expect(avatar.showClose).to.be.false; -// }); + it("renders the avatar without the close icon", async () => { + const avatar: ZetaAvatar = await fixture(html``); + return expect(avatar.showClose).to.be.false; + }); -// it("renders the avatar with an image", async () => { -// const url = "https://example.com/image.jpg"; -// const avatar: ZetaAvatar = await fixture(html``); -// const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#CONTENT_SLOT"); -// const img = slot?.assignedElements()[0] as HTMLImageElement; + it("renders the avatar with an image", async () => { + const url = "https://example.com/image.jpg"; + const avatar: ZetaAvatar = await fixture(html``); + const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#CONTENT_SLOT"); + const img = slot?.assignedElements()[0] as HTMLImageElement; -// expect(img).to.exist; -// return await expect(img?.src).to.equal(url); -// }); + expect(img).to.exist; + return await expect(img?.src).to.equal(url); + }); -// it("renders the avatar with an icon", async () => { -// const iconName = "user"; -// const avatar: ZetaAvatar = await fixture(html`${iconName}`); -// const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#CONTENT_SLOT"); -// const icon = slot?.assignedElements()[0] as ZetaIcon; + it("renders the avatar with an icon", async () => { + const iconName = "user"; + const avatar: ZetaAvatar = await fixture(html`${iconName}`); + const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#CONTENT_SLOT"); + const icon = slot?.assignedElements()[0] as ZetaIcon; -// expect(icon).to.exist; -// await expect(getSlotText(icon)).to.equal(iconName); -// }); + expect(icon).to.exist; + await expect(getSlotText(icon)).to.equal(iconName); + }); -// it("renders the badge on the avatar", async () => { -// const avatar: ZetaAvatar = await fixture(html``); -// const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#STATUS_SLOT"); + it("renders the badge on the avatar", async () => { + const avatar: ZetaAvatar = await fixture(html``); + const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#STATUS_SLOT"); -// const badge = slot?.assignedElements()[0] as ZetaIconIndicator; -// expect(badge).to.exist; -// }); -// }); + const badge = slot?.assignedElements()[0] as ZetaIconIndicator; + expect(badge).to.exist; + }); + }); -// // describe("Dimensions Tests", () => {}); + // describe("Dimensions Tests", () => {}); -// // describe("Styling Tests", () => {}); + // describe("Styling Tests", () => {}); -// // describe("Interaction Tests", () => {}); + // describe("Interaction Tests", () => {}); -// // describe("Golden Tests", () => {}); + // describe("Golden Tests", () => {}); -// // describe("Performance Tests", () => {}); -// }); + // describe("Performance Tests", () => {}); +}); diff --git a/src/test/fab/fab.test.ts b/src/test/fab/fab.test.ts index fdc11b1..9577e97 100644 --- a/src/test/fab/fab.test.ts +++ b/src/test/fab/fab.test.ts @@ -1,6 +1,6 @@ import { expect, fixture, html, unsafeStatic } from "@open-wc/testing"; import type { ZetaFab } from "../../components/fab/fab.js"; -import { getCssVarValue } from "../utils.js"; +// import { getCssVarValue } from "../utils.js"; import "../../components/fab/fab.js"; import "../../index.css"; @@ -29,107 +29,6 @@ describe("zeta-fab", () => { }); }); - describe("Content Tests", () => { - it("renders a button with a label", () => { - expect(subject.shadowRoot?.querySelector("button")).to.exist; - expect(subject.shadowRoot?.querySelector(".label")).to.exist; - }); - - it("renders a button with an icon", () => { - expect(subject.shadowRoot?.querySelector("zeta-icon")).to.exist; - }); - - it("renders no label when label is empty", async () => { - subject.label = ""; - await subject.updateComplete; - expect(subject.shadowRoot?.querySelector(".label")).to.not.exist; - }); - - it("renders an extended fab", async () => { - subject.extended = true; - await subject.updateComplete; - const labelExtentedFab = subject.shadowRoot?.querySelector("button .label"); - const labelDefault = subject.shadowRoot?.querySelector(":host > .label"); - await expect(subject.extended).to.equal(true); - expect(labelExtentedFab).to.exist; - expect(labelDefault).to.not.exist; - }); - - it("renders a default fab", async () => { - const labelExtentedFab = subject.shadowRoot?.querySelector("button .label"); - const labelDefault = subject.shadowRoot?.querySelector(":host > .label"); - await expect(subject.extended).to.equal(false); - expect(labelExtentedFab).to.not.exist; - expect(labelDefault).to.exist; - }); - }); - - describe("Dimensions Tests", () => { - it("renders a small fab", async () => { - const el = subject.shadowRoot?.querySelector("button"); - const height = getComputedStyle(el!).height; - const expectedHeight = parseInt(getCssVarValue(el!, "--spacing-medium")) * 2 + 24 + "px"; - await expect(subject.size).to.equal("small"); - await expect(height).to.equal(expectedHeight); - }); - - it("renders a large fab", async () => { - const fab: ZetaFab = await fixture(html``); - - const el = fab.shadowRoot?.querySelector("button"); - const height = getComputedStyle(el!).height; - const expectedHeight = parseInt(getCssVarValue(el!, "--spacing-xl")) * 2 + 36 + "px"; - await expect(height).to.equal(expectedHeight); - }); - }); - - describe("Styling Tests", () => { - it("renders a full rounded fab", async () => { - const el = subject.shadowRoot?.querySelector("button"); - const borderRadius = getComputedStyle(el!).borderRadius; - const expectedBorderRadius = getCssVarValue(el!, "--radius-full"); - await expect(subject.round).to.equal("full"); - await expect(borderRadius).to.equal(expectedBorderRadius); - }); - - it("renders a rounded small fab", async () => { - const fab: ZetaFab = await fixture(html``); - - const el = fab.shadowRoot?.querySelector("button"); - fab.round = true; - await fab.updateComplete; - const borderRadius = getComputedStyle(el!).borderRadius; - const expectedBorderRadius = getCssVarValue(el!, "--radius-rounded"); - await expect(fab.round).to.equal(true); - await expect(borderRadius).to.equal(expectedBorderRadius); - }); - - it("renders a rounded large fab", async () => { - const fab: ZetaFab = await fixture(html``); - - const el = fab.shadowRoot?.querySelector("button"); - fab.round = true; - await fab.updateComplete; - const borderRadius = getComputedStyle(el!).borderRadius; - const expectedBorderRadius = getCssVarValue(el!, "--radius-large"); - await expect(fab.round).to.equal(true); - await expect(fab.size).to.equal("large"); - await expect(borderRadius).to.equal(expectedBorderRadius); - }); - - it("renders a non-rounded fab", async () => { - const fab: ZetaFab = await fixture(html``); - - const el = fab.shadowRoot?.querySelector("button"); - fab.round = false; - await fab.updateComplete; - const borderRadius = getComputedStyle(el!).borderRadius; - const expectedBorderRadius = getCssVarValue(el!, "--radius-none"); - await expect(fab.round).to.equal(false); - await expect(borderRadius).to.equal(expectedBorderRadius); - }); - }); - // describe("Interaction Tests", () => {}); // describe("Golden Tests", () => {});