apphouse
Version:
Component library for React that uses observable state management and theme-able components.
319 lines (288 loc) • 9.39 kB
text/typescript
// import { ApphousePaletteModeOptions } from "../../constants";
// import { getDefaultColors } from "../Color";
// import { Palette } from "../Palette";
// import ColorUtils, {
// getOpacity,
// fromHexStringToRgbaObject,
// getNameForColor,
// toColorsObjectFull,
// toColorsObjectFlat,
// } from "./color.utils";
// import { makeFirstLetterUppercase } from "./styles.utils";
// import { SampleTestTheme } from "./theme.utils.test";
import ColorUtils from "./color.utils";
// import { makeFirstLetterUppercase } from "./styles.utils";
jest.mock("director/build/director", () => {
// const originalModule = jest.requireActual("director/build/director");
//Mock the default export and named export 'foo'
return {
__esModule: true,
// ...originalModule,
default: jest.fn(() => "mocked director"),
};
});
jest.mock("../../styles/defaults/default.styles", () => {
//Mock the default export and named export 'foo'
return {
__esModule: true,
// ...originalModule,
default: jest.fn(() => "mocked director"),
};
});
// const title = "Example theme";
// const id = "exampleId";
// const description = "Example description";
// describe("colors", () => {
// test("getNameForColor", () => {
// const name = getNameForColor("#ffffff");
// expect(name).toBe("pure white");
// });
// test("getOnColors", () => {
// const onColors = ColorUtils.getOnColors(SampleTestTheme.colors);
// expect(Object.keys(onColors)).toEqual([
// "brand",
// "error",
// "info",
// "success",
// "warning",
// "primary",
// "primaryinverse",
// "selection",
// "surface",
// "surface10",
// "surface20",
// ]);
// Object.keys(onColors).forEach((key) => {
// expect(onColors[key]).toBeTruthy();
// expect(onColors[key].length).toEqual(1);
// if (key === "primaryinverse") {
// expect(onColors[key][0].id).toEqual("onPrimaryInverse");
// } else {
// expect(onColors[key][0].id).toEqual(
// `on${makeFirstLetterUppercase(key)}`
// );
// }
// });
// });
// test("getPairedColors", () => {
// // const paired = ColorUtils.getPairedColors(SampleTestTheme.colors);
// // expect(Object.keys(paired)).toEqual([
// // "brand",
// // "error",
// // "info",
// // "success",
// // "warning",
// // "primary",
// // "primaryinverse",
// // "selection",
// // "surface",
// // "surface10",
// // "surface20",
// // ]);
// // expect(paired.brand).toBeDefined();
// // expect(paired.brand.length).toEqual(3);
// // expect(paired.brand.map((c) => c.id)).toEqual([
// // "onBrand",
// // "brand",
// // "brand",
// // ]);
// // expect(paired.primaryinverse.length).toEqual(3);
// // expect(paired.primaryinverse.map((c) => c.id)).toEqual([
// // "onPrimaryInverse",
// // "primaryInverse",
// // "primaryInverse",
// // ]);
// });
// test("getOpacity", () => {
// let alpha = getOpacity("rgba(0,0,0,0)");
// expect(alpha).toEqual(0);
// alpha = getOpacity("rgba(0,0,0,1)");
// expect(alpha).toEqual(1);
// alpha = getOpacity("rgba(255,255,0,0.5)");
// expect(alpha).toEqual(0.5);
// });
// test("fromHexStringToRgbaObject", () => {
// let rgba = fromHexStringToRgbaObject("#FFFFFF");
// expect(rgba).toEqual({
// r: 255,
// g: 255,
// b: 255,
// a: 1,
// });
// rgba = fromHexStringToRgbaObject("#FFF");
// expect(rgba).toEqual({
// r: 0,
// g: 0,
// b: 0,
// a: 1,
// });
// rgba = fromHexStringToRgbaObject("#000");
// expect(rgba).toEqual({
// r: 0,
// g: 0,
// b: 0,
// a: 1,
// });
// });
// test("ColorUtils.toRgbaObjectFromRgbaString", () => {
// let rgba = ColorUtils.toRgbaObjectFromRgbaString("rgba(0,0,0,1)");
// expect(rgba).toEqual({
// r: 0,
// g: 0,
// b: 0,
// a: 1,
// });
// rgba = ColorUtils.toRgbaObjectFromRgbaString("rgba(0,0,0,0)");
// expect(rgba).toEqual({
// r: 0,
// g: 0,
// b: 0,
// a: 0,
// });
// rgba = ColorUtils.toRgbaObjectFromRgbaString("rgba(255,255,0,0.5)");
// expect(rgba).toEqual({
// r: 255,
// g: 255,
// b: 0,
// a: 0.5,
// });
// });
// describe("toColorsObject", () => {
// test("with details", () => {
// const darkPalette = new Palette({
// title,
// id: "dark",
// description,
// mode: "theme",
// colors: getDefaultColors(ApphousePaletteModeOptions.dark),
// });
// const lightPalette = new Palette({
// title,
// id: "light",
// description,
// mode: "theme",
// colors: getDefaultColors(ApphousePaletteModeOptions.light),
// });
// const basePalette = new Palette({ title, id, description, mode: "base" });
// const palettes = {
// dark: darkPalette,
// light: lightPalette,
// base: basePalette,
// };
// const objPalette: any = toColorsObjectFull(palettes);
// expect(objPalette).toHaveProperty("theme");
// expect(objPalette).toHaveProperty("base");
// expect(objPalette.theme).toHaveProperty("light");
// expect(objPalette.theme).toHaveProperty("dark");
// expect(objPalette.base).toHaveProperty("exampleId");
// });
// test("flat", () => {
// const darkPalette = new Palette({
// title,
// id: "dark",
// description,
// mode: "theme",
// colors: getDefaultColors(ApphousePaletteModeOptions.dark),
// });
// const lightPalette = new Palette({
// title,
// id: "light",
// description,
// mode: "theme",
// colors: getDefaultColors(ApphousePaletteModeOptions.light),
// });
// const basePalette = new Palette({
// title,
// id,
// description,
// mode: "base",
// colors: getDefaultColors(ApphousePaletteModeOptions.base),
// });
// const palettes = {
// dark: darkPalette,
// light: lightPalette,
// base: basePalette,
// };
// const objPalette: any = toColorsObjectFlat(palettes);
// expect(objPalette).toEqual({
// base: {
// base: {
// brand: "rgba(0, 113, 227, 1)",
// brandAlt: "rgba(0, 113, 227, 1)",
// error: "rgba(178, 0, 0, 1)",
// info: "rgba(0, 113, 227, 1)",
// inset: "rgba(0, 0, 0, 1)",
// onBrand: "rgba(236, 236, 236, 1)",
// onError: "rgba(236, 236, 236, 1)",
// onInfo: "rgba(236, 236, 236, 1)",
// onWarning: "rgba(30, 28, 29, 1)",
// required: "rgba(178, 0, 0, 1)",
// selection: "rgba(236, 236, 236, 1)",
// success: "rgba(0, 179, 36, 1)",
// toggleOn: "rgba(0, 113, 227, 1)",
// warning: "rgba(255, 165, 0, 1)",
// },
// },
// theme: {
// dark: {
// brand: "rgba(0, 113, 227, 1)",
// brandAlt: "rgba(0, 113, 227, 1)",
// error: "rgba(178, 0, 0, 1)",
// info: "rgba(0, 113, 227, 1)",
// inset: "rgba(0, 0, 0, 1)",
// onBrand: "rgba(236, 236, 236, 1)",
// onError: "rgba(236, 236, 236, 1)",
// onInfo: "rgba(236, 236, 236, 1)",
// onWarning: "rgba(30, 28, 29, 1)",
// required: "rgba(178, 0, 0, 1)",
// selection: "rgba(236, 236, 236, 1)",
// success: "rgba(0, 179, 36, 1)",
// toggleOn: "rgba(0, 113, 227, 1)",
// warning: "rgba(255, 165, 0, 1)",
// },
// },
// });
// });
// });
// });
// describe("getStringRgbaColor", () => {
// test("should return rgba color", () => {
// let color = {
// r: 299,
// g: 0,
// b: 0,
// a: 0,
// };
// let expectedColor = ColorUtils.toRgbaStringFromRgbaObject(color);
// expect(expectedColor).toEqual(
// `rgba(${color.r}, ${color.g}, ${color.b}, 1)`
// );
// const onBackgroundThemeColor =
// SampleTestTheme.palette.dark.colors.primary.color.rgb;
// expectedColor = ColorUtils.toRgbaStringFromRgbaObject(
// onBackgroundThemeColor
// );
// expect(expectedColor).toEqual(
// `rgba(${onBackgroundThemeColor?.r}, ${onBackgroundThemeColor?.g}, ${onBackgroundThemeColor?.b}, 1)`
// );
// });
// });
describe("ColorUtils", () => {
test("getContrastRatio", () => {
let value = ColorUtils.getContrastRatio("#ffffff", "#000000");
expect(value).toEqual(21);
value = ColorUtils.getContrastRatio("#000000", "#ffffff");
expect(value).toEqual(21);
value = ColorUtils.getContrastRatio("#0071E3", "#FFFFFF");
// 0, 113, 227
expect(value).toEqual(4.7);
});
test("getLuminance", () => {
let value = ColorUtils.getLuminance("#ffffff");
expect(value).toEqual(1);
value = ColorUtils.getLuminance("#000000");
expect(value).toEqual(0);
value = ColorUtils.getLuminance("#0071E3");
expect(value).toEqual(0.17356305833886268);
});
});