Packages
noora
0.85.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
js/web-components/Badge.test.js
// @vitest-environment happy-dom
import { afterEach, beforeAll, describe, expect, it } from "vitest";
import { registerNooraBadge } from "./Badge.js";
beforeAll(() => {
registerNooraBadge();
});
afterEach(() => {
document.body.replaceChildren();
});
describe("NooraBadge", () => {
it("renders the shared defaults and label", async () => {
const badge = document.createElement("noora-badge");
badge.label = "Available";
document.body.append(badge);
await badge.updateComplete;
const container = badge.shadowRoot.querySelector('[part="badge"]');
expect(container.dataset.style).toBe("fill");
expect(container.dataset.color).toBe("neutral");
expect(container.dataset.size).toBe("small");
expect(container.textContent.trim()).toBe("Available");
});
it("updates its appearance, color, size, and disabled state", async () => {
const badge = document.createElement("noora-badge");
document.body.append(badge);
await badge.updateComplete;
badge.appearance = "light-fill";
badge.color = "success";
badge.size = "large";
badge.disabled = true;
await badge.updateComplete;
const container = badge.shadowRoot.querySelector('[part="badge"]');
expect(container.dataset.style).toBe("light-fill");
expect(container.dataset.color).toBe("success");
expect(container.dataset.size).toBe("large");
expect(container.hasAttribute("data-disabled")).toBe(true);
});
it("falls back to contract defaults for unsupported values", async () => {
const badge = document.createElement("noora-badge");
badge.appearance = "unsupported";
badge.color = "unsupported";
badge.size = "unsupported";
document.body.append(badge);
await badge.updateComplete;
const container = badge.shadowRoot.querySelector('[part="badge"]');
expect(container.dataset.style).toBe("fill");
expect(container.dataset.color).toBe("neutral");
expect(container.dataset.size).toBe("small");
});
it("renders a generated dot when the icon slot is empty", async () => {
const badge = document.createElement("noora-badge");
badge.dot = true;
document.body.append(badge);
await badge.updateComplete;
const container = badge.shadowRoot.querySelector('[part="badge"]');
const icon = badge.shadowRoot.querySelector('[part="icon"]');
expect(container.hasAttribute("data-dot")).toBe(true);
expect(icon.querySelector("svg")).not.toBeNull();
});
it("gives a slotted icon precedence over the generated dot", async () => {
const badge = document.createElement("noora-badge");
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
icon.slot = "icon";
badge.dot = true;
badge.append(icon, "Warning");
document.body.append(badge);
await badge.updateComplete;
await badge.updateComplete;
const container = badge.shadowRoot.querySelector('[part="badge"]');
const iconSlot = badge.shadowRoot.querySelector('slot[name="icon"]');
expect(iconSlot.assignedElements()).toEqual([icon]);
expect(container.hasAttribute("data-icon")).toBe(true);
expect(container.hasAttribute("data-dot")).toBe(false);
expect(badge.shadowRoot.querySelector('[part="icon"] > svg')).toBeNull();
});
});