Skip to content

Commit

Permalink
removed some test from fab to test code coverage comment
Browse files Browse the repository at this point in the history
  • Loading branch information
@DE7924
DE7924 committed Dec 4, 2024
1 parent bbc7712 commit 0af1c0f
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 168 deletions.
132 changes: 66 additions & 66 deletions src/test/avatar/avatar.test.ts
View file
Original file line number Diff line number Diff line change
@@ -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 = `<zeta-avatar></zeta-avatar>`) => {
// // // prettier-ignore
// // return fixture<ZetaAvatar>(html`${unsafeStatic(template)}`);
// // };
// const createComponent = (template = `<zeta-avatar></zeta-avatar>`) => {
// // prettier-ignore
// return fixture<ZetaAvatar>(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`<zeta-avatar size="xl"></zeta-avatar>`);
// 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`<zeta-avatar size="xl"></zeta-avatar>`);
await expect(avatar.size).to.equal("xl");
});

// it("renders the avatar with the ring", async () => {
// const avatar: ZetaAvatar = await fixture(html`<zeta-avatar show-ring></zeta-avatar>`);
// return expect(avatar.showRing).to.be.true;
// });
it("renders the avatar with the ring", async () => {
const avatar: ZetaAvatar = await fixture(html`<zeta-avatar show-ring></zeta-avatar>`);
return expect(avatar.showRing).to.be.true;
});

// it("renders the avatar without the ring", async () => {
// const avatar: ZetaAvatar = await fixture(html`<zeta-avatar></zeta-avatar>`);
// return expect(avatar.showRing).to.be.false;
// });
it("renders the avatar without the ring", async () => {
const avatar: ZetaAvatar = await fixture(html`<zeta-avatar></zeta-avatar>`);
return expect(avatar.showRing).to.be.false;
});

// it("renders the avatar with the close icon", async () => {
// const avatar: ZetaAvatar = await fixture(html`<zeta-avatar show-close></zeta-avatar>`);
// return expect(avatar.showClose).to.be.true;
// });
it("renders the avatar with the close icon", async () => {
const avatar: ZetaAvatar = await fixture(html`<zeta-avatar show-close></zeta-avatar>`);
return expect(avatar.showClose).to.be.true;
});

// it("renders the avatar without the close icon", async () => {
// const avatar: ZetaAvatar = await fixture(html`<zeta-avatar></zeta-avatar>`);
// return expect(avatar.showClose).to.be.false;
// });
it("renders the avatar without the close icon", async () => {
const avatar: ZetaAvatar = await fixture(html`<zeta-avatar></zeta-avatar>`);
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`<zeta-avatar><img src=${url} /></zeta-avatar>`);
// 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`<zeta-avatar><img src=${url} /></zeta-avatar>`);
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`<zeta-avatar><zeta-icon>${iconName}</zeta-icon></zeta-avatar>`);
// 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`<zeta-avatar><zeta-icon>${iconName}</zeta-icon></zeta-avatar>`);
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`<zeta-avatar><zeta-icon-indicator icon="star" slot="status"></zeta-icon-indicator></zeta-avatar>`);
// const slot: HTMLSlotElement | null | undefined = avatar.shadowRoot?.querySelector("#STATUS_SLOT");
it("renders the badge on the avatar", async () => {
const avatar: ZetaAvatar = await fixture(html`<zeta-avatar><zeta-icon-indicator icon="star" slot="status"></zeta-icon-indicator></zeta-avatar>`);
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", () => {});
});
103 changes: 1 addition & 102 deletions src/test/fab/fab.test.ts
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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`<zeta-fab size="large"></zeta-fab>`);

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`<zeta-fab size="small"></zeta-fab>`);

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`<zeta-fab size="large"></zeta-fab>`);

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`<zeta-fab size="large"></zeta-fab>`);

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", () => {});
Expand Down

0 comments on commit 0af1c0f

Please sign in to comment.