@awal-solution/tailwind-theming
Version:
<div align="left"> <h1>Tailwind theming</h1> <p>The <b>TailwindCSS Multi-Theming Plugin</b> is a utility for creating and managing multiple themes in your TailwindCSS-based projects. With this library, you can define, add, update, and remove themes dyn
124 lines (123 loc) • 4.73 kB
JavaScript
import { themeManager as e } from "../theme/index.js";
describe("ThemeManager Singleton", () => {
const m = {
"light-theme": {
colors: {
background: "white",
foreground: "black"
}
},
"dark-theme": {
colors: {
background: "black",
foreground: "white"
}
}
};
beforeEach(() => {
e.init({
themes: m,
defaultTheme: "light-theme"
});
}), test("should initialize with default and processed themes", () => {
var t, h;
const o = e.get();
expect((t = o.defaultTheme) == null ? void 0 : t.name).toBe("light-theme"), expect((h = o.themes) == null ? void 0 : h.some((s) => s.name === "light-theme")).toBe(!1), expect(o.themes).toHaveLength(1);
}), test("should add a new theme", () => {
var t;
e.add({
name: "custom-theme",
theme: {
colors: {
background: "gray",
foreground: "blue"
}
}
});
const o = e.get();
expect((t = o.themes) == null ? void 0 : t.some((h) => h.name === "custom-theme")).toBe(!0);
}), test("should throw error when adding a theme with duplicate name", () => {
expect(() => {
e.add({
name: "light-theme",
theme: {
colors: {
background: "white"
}
}
});
}).toThrow('Theme "light-theme" already exists.');
}), test("should update an existing theme", () => {
var h, s;
e.update("dark-theme", {
colors: {
primary: "purple"
}
});
const t = (h = e.get().themes) == null ? void 0 : h.find((r) => r.name === "dark-theme");
expect((s = t == null ? void 0 : t.extend.colors) == null ? void 0 : s.primary).toBe("purple");
}), test("should throw error when updating a non-existent theme", () => {
expect(() => {
e.update("non-existent-theme", {
colors: {
primary: "purple"
}
});
}).toThrow('Theme "non-existent-theme" does not exists.');
}), test("should remove an existing theme", () => {
var t;
e.remove("dark-theme");
const o = e.get();
expect((t = o.themes) == null ? void 0 : t.some((h) => h.name === "dark-theme")).toBe(!1);
}), test("should throw error when removing a non-existent theme", () => {
expect(() => {
e.remove("non-existent-theme");
}).toThrow('Theme "non-existent-theme" does not exist.');
}), test("should update the default theme to an existing theme", () => {
var t, h;
e.defaultTheme("dark-theme");
const o = e.get();
expect((t = o.defaultTheme) == null ? void 0 : t.name).toBe("dark-theme"), expect((h = o.themes) == null ? void 0 : h.some((s) => s.name === "light-theme")).toBe(!0);
}), test("should throw an error for a non-existent theme", () => {
expect(() => e.defaultTheme("non-existent-theme")).toThrow(
'Theme "non-existent-theme" does not exists.'
);
}), test("should not change anything if the theme is already default", () => {
var t, h;
e.defaultTheme("light-theme");
const o = e.get();
expect((t = o.defaultTheme) == null ? void 0 : t.name).toBe("light-theme"), expect((h = o.themes) == null ? void 0 : h.length).toBe(1);
}), test("should deep merge nested objects correctly", () => {
const o = e.deepMerge(
{ colors: { primary: { DEFAULT: "blue", 100: "lightblue", 200: "purple" } } },
{ colors: { primary: { 200: "darkblue", DEFAULT: "navy", 100: "lightblue" } } }
);
expect(o).toEqual({
colors: { primary: { DEFAULT: "navy", 100: "lightblue", 200: "darkblue" } }
});
}), test("should handle empty utilities gracefully", () => {
e.addUtilities({}), expect(e.get().utilities).toEqual({});
});
});
describe("ThemeManager Edge Cases", () => {
test("should throw error if no themes are provided", () => {
expect(() => e.init({ themes: {} })).toThrowError("No themes provided.");
}), test("should handle update for non-existent theme gracefully", () => {
expect(
() => e.update("non-existent-theme", { colors: { primary: "#000" } })
).toThrowError('Theme "non-existent-theme" does not exists.');
}), test("should throw an error if themes object contains invalid keys", () => {
expect(
() => e.init({
themes: { invalidKey: { colors: { background: "white" } } }
})
).toThrow('Object keys must contain theme suffix example: "invalidKey-theme" or "invalidKeyTheme"');
}), test("should set the first theme as default if defaultTheme is not provided", () => {
var m;
e.init({
themes: {
"custom-theme": { colors: { background: "blue" } }
}
}), expect((m = e.get().defaultTheme) == null ? void 0 : m.name).toBe("custom-theme");
});
});