File size: 2,568 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import type { CSSProperties } from "react";
// Update the path as needed
import type { Modifiers, ModifiersStyles } from "../types";
import { getStyleForModifiers } from "./getStyleForModifiers";
const defaultModifiers: Modifiers = {
disabled: false,
hidden: false,
outside: false,
range_end: false,
range_middle: false,
range_start: false,
selected: false,
focusable: false,
focused: false,
today: false,
};
test("applies modifier styles to the base style", () => {
const dayModifiers: Modifiers = {
...defaultModifiers,
selected: true,
disabled: false,
};
const modifiersStyles: Partial<ModifiersStyles> = {
selected: { backgroundColor: "blue", color: "white" },
};
const expectedStyle: CSSProperties = {
...modifiersStyles.selected,
};
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
expect(style).toEqual(expectedStyle);
});
test("ignores modifiers that are not active", () => {
const dayModifiers: Modifiers = {
...defaultModifiers,
selected: false,
disabled: true,
};
const modifiersStyles: Partial<ModifiersStyles> = {
disabled: { opacity: 0.5 },
};
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
expect(style).toEqual({ opacity: 0.5 }); // should not have applied the disabled style
});
test("combines multiple active modifier styles", () => {
const dayModifiers: Modifiers = {
...defaultModifiers,
selected: true,
highlighted: true,
};
const modifiersStyles: Partial<ModifiersStyles> = {
selected: { backgroundColor: "blue" },
highlighted: { borderColor: "yellow" },
};
const expectedStyle: CSSProperties = {
...modifiersStyles.selected,
...modifiersStyles.highlighted,
};
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
expect(style).toEqual(expectedStyle);
});
test("applies the most recent modifier style when there are conflicts", () => {
const dayModifiers: Modifiers = {
...defaultModifiers,
selected: true,
highlighted: true,
};
const modifiersStyles: Partial<ModifiersStyles> = {
selected: { backgroundColor: "blue", color: "red" }, // 'color' should be overridden.
highlighted: { backgroundColor: "yellow", color: "green" },
};
const expectedStyle: CSSProperties = {
backgroundColor: "yellow", // from 'highlighted'
color: "green", // from 'highlighted', overriding 'selected'
};
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
expect(style).toEqual(expectedStyle);
});
|