= [];
35 | const { queryAllByTestId } = render(
36 | {(value) => {value}
}
37 | );
38 |
39 | expect(queryAllByTestId("child").length).toBe(0);
40 | });
41 |
42 | it("passes the correct value and index to children", () => {
43 | const each = [
44 | { id: 1, name: "Musah", school: "Hacettepe", from: "Kumasi" },
45 | { id: 2, name: "Shakino", school: "Okess", from: "Oman" },
46 | { id: 3, name: "Sala", school: "UOEW", from: "Kumasi" },
47 | ];
48 | const { queryAllByText } = render(
49 |
50 | {(value, index) => (
51 | {`Name: ${value.name}, School ${value.school}, From ${value.from}, Index: ${index}`}
54 | )}
55 |
56 | );
57 |
58 | each.forEach((value, index) => {
59 | expect(
60 | queryAllByText(
61 | `Name: ${value.name}, School ${value.school}, From ${value.from}, Index: ${index}`
62 | ).length
63 | ).toBe(1);
64 | });
65 | });
66 |
67 | it("passes the correct value and index to children with multiple nodes", () => {
68 | const each = [{ name: "Musah", school: "Hacettepe", from: "Kumasi" }];
69 | const { queryByTestId } = render(
70 |
71 | {(value, index) => (
72 |
73 | Name: {value.name}
74 | School: {value.school}
75 | From: {value.from}
76 | Index: {index}
77 |
78 | )}
79 |
80 | );
81 | expect(queryByTestId("name")?.textContent).toEqual("Name: Musah");
82 | expect(queryByTestId("school")?.textContent).toEqual("School: Hacettepe");
83 | expect(queryByTestId("from")?.textContent).toEqual("From: Kumasi");
84 | expect(queryByTestId("index")?.textContent).toEqual("Index: 0");
85 | });
86 | });
87 |
88 | describe(" snapshots", () => {
89 | it("matches the snapshot with an array of numbers", () => {
90 | snapshotTest(
91 |
92 | {(value, index) => {value}
}
93 |
94 | );
95 | });
96 |
97 | it("matches the snapshot with an array of strings", () => {
98 | snapshotTest(
99 |
100 | {(value, index) => {value}
}
101 |
102 | );
103 | });
104 |
105 | it("matches the snapshot with an empty array", () => {
106 | snapshotTest(
107 | {(value, index) => {value}
}
108 | );
109 | });
110 |
111 | it("passes the correct value and index to children", () => {
112 | const each = [
113 | { id: 1, name: "Musah", school: "Hacettepe", from: "Kumasi" },
114 | { id: 2, name: "Shakino", school: "Okess", from: "Oman" },
115 | { id: 3, name: "Sala", school: "UOEW", from: "Kumasi" },
116 | ];
117 |
118 | snapshotTest(
119 |
120 | {(value, index) => (
121 | {`Name: ${value.name}, School ${value.school}, From ${value.from}, Index: ${index}`}
124 | )}
125 |
126 | );
127 | });
128 | });
129 |
--------------------------------------------------------------------------------
/src/components/tests/Switch.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, cleanup } from "@testing-library/react";
3 | import { snapshotTest, truthyFalsyMap } from "../../helpers/test-helpers";
4 | import { Switch } from "../Switch";
5 | import { Case } from "../Case";
6 | import { Default } from "../Default";
7 |
8 | afterEach(cleanup);
9 |
10 | describe("Switch, Case and Default", () => {
11 | describe("", () => {
12 | it("renders the first Case whose when prop returns truthy value", () => {
13 | truthyFalsyMap.forEach((value) => {
14 | const { getByText, queryByText, unmount } = render(
15 |
16 |
17 | Case 1
18 |
19 |
20 | Case 2
21 |
22 |
23 | Case 3
24 |
25 |
26 | Default
27 |
28 |
29 | );
30 | expect(queryByText("Case 1")).toBeNull();
31 | expect(getByText("Case 2")).toBeInTheDocument();
32 | expect(queryByText("Case 3")).toBeNull();
33 | expect(queryByText("Default")).toBeNull();
34 | unmount();
35 | });
36 | });
37 |
38 | it("renders the first Case whose when prop function returns true", () => {
39 | truthyFalsyMap.forEach((value) => {
40 | const { getByText, queryByText, unmount } = render(
41 |
42 | value.falsy}>
43 | Case 1
44 |
45 | value.truthy}>
46 | Case 2
47 |
48 |
49 | Case 3
50 |
51 |
52 | Default
53 |
54 |
55 | );
56 | expect(queryByText("Case 1")).toBeNull();
57 | expect(getByText("Case 2")).toBeInTheDocument();
58 | expect(queryByText("Case 3")).toBeNull();
59 | expect(queryByText("Default")).toBeNull();
60 | unmount();
61 | });
62 | });
63 |
64 | it("renders the Default component if no Case's when prop returns true", () => {
65 | const { getByText, queryByText, unmount } = render(
66 |
67 |
68 | Case 1
69 |
70 |
71 | Case 2
72 |
73 |
74 | Default
75 |
76 |
77 | );
78 | expect(queryByText("Case 1")).toBeNull();
79 | expect(queryByText("Case 2")).toBeNull();
80 | expect(getByText("Default")).toBeInTheDocument();
81 | unmount();
82 | });
83 | });
84 |
85 | describe("", () => {
86 | it("renders children if when prop returns true", () => {
87 | const { getByText, unmount } = render(
88 |
89 | Case
90 |
91 | );
92 | expect(getByText("Case")).toBeInTheDocument();
93 | unmount();
94 | });
95 |
96 | it("renders children if when prop function returns true", () => {
97 | const { getByText, unmount } = render(
98 | true}>
99 | Case
100 |
101 | );
102 | expect(getByText("Case")).toBeInTheDocument();
103 | unmount();
104 | });
105 |
106 | it("does not render children if when prop returns false", () => {
107 | const { queryByText, unmount } = render(
108 |
109 | Case
110 |
111 | );
112 | expect(queryByText("Case")).toBeNull();
113 | unmount();
114 | });
115 | });
116 |
117 | describe("", () => {
118 | it("Should render whatever child it receives", () => {
119 | const { getByText, unmount } = render(
120 |
121 | Default
122 |
123 | );
124 | expect(getByText("Default")).toBeInTheDocument();
125 | unmount();
126 | });
127 | });
128 | });
129 |
130 | describe(" snapshots", () => {
131 | it("matches the snapshot with the matching case", () => {
132 | snapshotTest(
133 |
134 |
135 | Case 1
136 |
137 |
138 | Case 2
139 |
140 |
141 | );
142 | snapshotTest(
143 |
144 |
145 | Case 1
146 |
147 |
148 | Case 2
149 |
150 |
151 | Case 3
152 |
153 |
154 | Default
155 |
156 |
157 | );
158 | });
159 |
160 | it("matches the snapshot with the default case", () => {
161 | snapshotTest(
162 |
163 |
164 | Case 1
165 |
166 |
167 | Default case
168 |
169 |
170 | );
171 | snapshotTest(
172 |
173 |
174 | Case 1
175 |
176 | ,
177 | "No default case"
178 | );
179 | });
180 | });
181 |
--------------------------------------------------------------------------------
/src/components/tests/__snapshots__/For.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` snapshots matches the snapshot with an array of numbers 1`] = `
4 | [
5 |
6 | 1
7 |
,
8 |
9 | 2
10 |
,
11 |
12 | 3
13 |
,
14 | ]
15 | `;
16 |
17 | exports[` snapshots matches the snapshot with an array of strings 1`] = `
18 | [
19 |
20 | a
21 |
,
22 |
23 | b
24 |
,
25 |
26 | c
27 |
,
28 | ]
29 | `;
30 |
31 | exports[` snapshots matches the snapshot with an empty array 1`] = `null`;
32 |
33 | exports[` snapshots passes the correct value and index to children 1`] = `
34 | [
35 |
36 | Name: Musah, School Hacettepe, From Kumasi, Index: 0
37 |
,
38 |
39 | Name: Shakino, School Okess, From Oman, Index: 1
40 |
,
41 |
42 | Name: Sala, School UOEW, From Kumasi, Index: 2
43 |
,
44 | ]
45 | `;
46 |
--------------------------------------------------------------------------------
/src/components/tests/__snapshots__/Switch.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` snapshots matches the snapshot with the default case 1`] = `
4 |
5 | Default case
6 |
7 | `;
8 |
9 | exports[` snapshots matches the snapshot with the default case: No default case 1`] = `null`;
10 |
11 | exports[` snapshots matches the snapshot with the matching case 1`] = `
12 |
13 | Case 1
14 |
15 | `;
16 |
17 | exports[` snapshots matches the snapshot with the matching case 2`] = `
18 |
19 | Case 2
20 |
21 | `;
22 |
--------------------------------------------------------------------------------
/src/directives/elements.ts:
--------------------------------------------------------------------------------
1 | // From styled-components
2 |
3 | export const elements = [
4 | "a",
5 | "abbr",
6 | "address",
7 | "area",
8 | "article",
9 | "aside",
10 | "audio",
11 | "b",
12 | "base",
13 | "bdi",
14 | "bdo",
15 | "big",
16 | "blockquote",
17 | "body",
18 | "br",
19 | "button",
20 | "canvas",
21 | "caption",
22 | "cite",
23 | "code",
24 | "col",
25 | "colgroup",
26 | "data",
27 | "datalist",
28 | "dd",
29 | "del",
30 | "details",
31 | "dfn",
32 | "dialog",
33 | "div",
34 | "dl",
35 | "dt",
36 | "em",
37 | "embed",
38 | "fieldset",
39 | "figcaption",
40 | "figure",
41 | "footer",
42 | "form",
43 | "h1",
44 | "h2",
45 | "h3",
46 | "h4",
47 | "h5",
48 | "h6",
49 | "head",
50 | "header",
51 | "hgroup",
52 | "hr",
53 | "html",
54 | "i",
55 | "iframe",
56 | "img",
57 | "input",
58 | "ins",
59 | "kbd",
60 | "keygen",
61 | "label",
62 | "legend",
63 | "li",
64 | "link",
65 | "main",
66 | "map",
67 | "mark",
68 | "menu",
69 | "menuitem",
70 | "meta",
71 | "meter",
72 | "nav",
73 | "noscript",
74 | "object",
75 | "ol",
76 | "optgroup",
77 | "option",
78 | "output",
79 | "p",
80 | "param",
81 | "picture",
82 | "pre",
83 | "progress",
84 | "q",
85 | "rp",
86 | "rt",
87 | "ruby",
88 | "s",
89 | "samp",
90 | "script",
91 | "section",
92 | "select",
93 | "small",
94 | "source",
95 | "span",
96 | "strong",
97 | "style",
98 | "sub",
99 | "summary",
100 | "sup",
101 | "table",
102 | "tbody",
103 | "td",
104 | "textarea",
105 | "tfoot",
106 | "th",
107 | "thead",
108 | "time",
109 | "title",
110 | "tr",
111 | "track",
112 | "u",
113 | "ul",
114 | "use",
115 | "var",
116 | "video",
117 | "wbr", // SVG
118 | "circle",
119 | "clipPath",
120 | "defs",
121 | "ellipse",
122 | "foreignObject",
123 | "g",
124 | "image",
125 | "line",
126 | "linearGradient",
127 | "marker",
128 | "mask",
129 | "path",
130 | "pattern",
131 | "polygon",
132 | "polyline",
133 | "radialGradient",
134 | "rect",
135 | "stop",
136 | "svg",
137 | "text",
138 | "tspan",
139 | ] as const;
140 |
--------------------------------------------------------------------------------
/src/directives/index.ts:
--------------------------------------------------------------------------------
1 | import { DirectiveMap } from "../types/directive";
2 | import { elements } from "./elements";
3 | import { makeDirective } from "./makeDirective";
4 |
5 | const directive = {} as DirectiveMap;
6 |
7 | elements.forEach((element) => {
8 | directive[element] = makeDirective(element);
9 | });
10 |
11 | export default directive;
12 |
--------------------------------------------------------------------------------
/src/directives/makeDirective.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useClassName } from "../hooks/useClassName";
3 | import { DirectiveProps } from "../types/directive";
4 |
5 | export const getKey = (
6 | item: any,
7 | index: number,
8 | dirKey?: string | ((currentItem: any) => string | number)
9 | ): string | number => {
10 | if (!(dirKey && item)) return index;
11 | if (dirKey === "this") return item.toString();
12 | if (typeof dirKey === "string")
13 | return (item[dirKey] && item[dirKey].toString()) ?? index;
14 | if (typeof dirKey === "function") return dirKey(item);
15 | return index;
16 | };
17 |
18 | export const makeDirective = (
19 | component: T
20 | ) => {
21 | type DirectivePropsWithValue = DirectiveProps &
22 | Omit;
23 |
24 | const DirectiveComponent = ({
25 | dirIf = true,
26 | dirShow = true,
27 | classNameDeps,
28 | dirFor,
29 | dirKey,
30 | children,
31 | style,
32 | dirRef,
33 | className,
34 | ...props
35 | }: DirectivePropsWithValue): React.ReactElement | null => {
36 | const classString = useClassName(className, classNameDeps);
37 |
38 | if (!dirIf) return null;
39 |
40 | const extraProps: Record = {
41 | style:
42 | style || !dirShow
43 | ? { ...style, display: !dirShow ? "none" : style && style.display }
44 | : undefined,
45 | className: classString || undefined,
46 | };
47 |
48 | return dirFor
49 | ? React.createElement(
50 | React.Fragment,
51 | null,
52 | dirFor.map((item, i) =>
53 | React.createElement(
54 | component,
55 | {
56 | ...props,
57 | ...extraProps,
58 | key: getKey(item, i, dirKey),
59 | },
60 | typeof children === "function"
61 | ? children(item, i)
62 | : (children as React.ReactNode)
63 | )
64 | )
65 | )
66 | : React.createElement(
67 | component,
68 | { ...props, ...extraProps, ref: dirRef },
69 | children as React.ReactNode
70 | );
71 | };
72 |
73 | return DirectiveComponent;
74 | };
75 |
--------------------------------------------------------------------------------
/src/directives/tests/__snapshots__/dir.snapshot.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`anchor element renderes anchor elements correctly Anchor with classNames 1`] = `
4 |
7 | Some text content
8 |
9 | `;
10 |
11 | exports[`anchor element renderes anchor elements correctly Anchor with dirIf set to false 1`] = `null`;
12 |
13 | exports[`anchor element renderes anchor elements correctly Anchor with dirShow set to false 1`] = `
14 |
21 | Some text content
22 |
23 | `;
24 |
25 | exports[`anchor element renderes anchor elements correctly Anchor with href and title 1`] = `
26 |
30 | `;
31 |
32 | exports[`div element renders correctly for div with class generated by useClassName hook 1`] = `
33 |
36 | `;
37 |
38 | exports[`div element renders correctly for div with className 1`] = `
39 |
42 | `;
43 |
44 | exports[`div element renders correctly for div with dirFor 1`] = `
45 | [
46 |
47 | 1
48 |
,
49 |
50 | 2
51 |
,
52 |
53 | 3
54 |
,
55 | ]
56 | `;
57 |
58 | exports[`div element renders correctly for div with dirIf set to false 1`] = `null`;
59 |
60 | exports[`div element renders correctly for div with dirShow set to false 1`] = `
61 |
68 | `;
69 |
70 | exports[`div element renders correctly for div with no properties 1`] = ``;
71 |
--------------------------------------------------------------------------------
/src/directives/tests/dir.snapshot.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import directive from "..";
3 | import { snapshotTest } from "../../helpers/test-helpers";
4 |
5 | describe("anchor element", () => {
6 | describe("renderes anchor elements correctly", () => {
7 | it("Anchor with href and title", () => {
8 | snapshotTest(
9 |
10 | );
11 | });
12 | it("Anchor with dirShow set to false", () => {
13 | snapshotTest(
14 | Some text content
15 | );
16 | });
17 | it("Anchor with dirIf set to false", () => {
18 | snapshotTest(Some text content);
19 | });
20 |
21 | it("Anchor with classNames", () => {
22 | snapshotTest(
23 |
26 | Some text content
27 |
28 | );
29 | });
30 | });
31 | });
32 |
33 | describe("div element", () => {
34 | it("renders correctly for div with no properties", () => {
35 | snapshotTest();
36 | });
37 |
38 | it("renders correctly for div with dirIf set to false", () => {
39 | snapshotTest();
40 | });
41 |
42 | it("renders correctly for div with dirShow set to false", () => {
43 | snapshotTest();
44 | });
45 |
46 | it("renders correctly for div with className", () => {
47 | snapshotTest();
48 | });
49 |
50 | it("renders correctly for div with class generated by useClassName hook", () => {
51 | snapshotTest();
52 | });
53 |
54 | it("renders correctly for div with dirFor", () => {
55 | snapshotTest(
56 | {(item) => item}
57 | );
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/src/directives/tests/makeDirective.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import { getKey, makeDirective } from "../makeDirective";
4 | import { truthyValues, falsyValues } from "../../helpers/test-helpers";
5 |
6 | describe("getKey()", () => {
7 | it("returns index when dirKey is not defined", () => {
8 | expect(getKey(undefined, 0)).toBe(0);
9 | });
10 |
11 | it('returns passed item itself when dirKey is "this"', () => {
12 | expect(getKey("item", 0, "this")).toBe("item");
13 | });
14 |
15 | it("returns value of dirKey property when dirKey is a string", () => {
16 | const item = { id: 1 };
17 | expect(getKey(item, 0, "id")).toBe("1");
18 | });
19 |
20 | it("returns result of calling the function when dirKey is a function", () => {
21 | const item = { id: 1 };
22 | const dirKey = jest.fn((i) => i.id);
23 | expect(getKey(item, 0, dirKey)).toBe(1);
24 | expect(dirKey).toHaveBeenCalledWith(item);
25 | });
26 |
27 | it("returns index if any other type of value is passed as key", () => {
28 | expect(getKey({}, 0, 4 as any)).toBe(0);
29 | });
30 | });
31 |
32 | describe("makeDirective", () => {
33 | it("renders a component with the correct class name when dirIf is truthy", () => {
34 | truthyValues.forEach((value) => {
35 | const TestComponent = makeDirective("div");
36 | const { getByTestId, unmount } = render(
37 |
42 | Test Content
43 |
44 | );
45 |
46 | const element = getByTestId("test-element");
47 | expect(element).toHaveClass("test-class");
48 | unmount();
49 | });
50 | });
51 |
52 | it("does not render a component when dirIf is falsy", () => {
53 | falsyValues.forEach((value) => {
54 | const TestComponent = makeDirective("div");
55 | const { queryByTestId, unmount } = render(
56 |
57 | Test Content
58 |
59 | );
60 |
61 | const element = queryByTestId("test-element");
62 | expect(element).toBeNull();
63 | unmount();
64 | });
65 | });
66 |
67 | it("shows a component when dirShow is truthy", () => {
68 | truthyValues.forEach((value) => {
69 | const TestComponent = makeDirective("div");
70 | const { getByTestId, unmount } = render(
71 |
72 | Test Content
73 |
74 | );
75 |
76 | const element = getByTestId("test-element");
77 | expect(element).not.toHaveStyle("display: none");
78 | unmount();
79 | });
80 | });
81 |
82 | it("hides a component when dirShow is falsy", () => {
83 | falsyValues.forEach((value) => {
84 | const TestComponent = makeDirective("div");
85 | const { getByTestId, unmount } = render(
86 |
87 | Test Content
88 |
89 | );
90 |
91 | const element = getByTestId("test-element");
92 | expect(element).toHaveStyle("display: none");
93 | unmount();
94 | });
95 | });
96 |
97 | it("when other styles exists and hides a component with dirShow set to false", () => {
98 | const TestComponent = makeDirective("div");
99 | const { getByTestId, unmount } = render(
100 |
105 | Test Content
106 |
107 | );
108 |
109 | const element = getByTestId("test-element");
110 | expect(element).toHaveStyle("display: none");
111 | expect(element).toHaveStyle("text-align: center");
112 | expect(element).toHaveStyle("font-size: 30px");
113 | unmount();
114 | });
115 |
116 | it("when display style is specified without dirShow set to false", () => {
117 | const TestComponent = makeDirective("div");
118 | const { getByTestId, unmount } = render(
119 |
123 | Test Content
124 |
125 | );
126 | const element = getByTestId("test-element");
127 | expect(element).toHaveStyle("display: flex");
128 | expect(element).toHaveStyle("margin: 20px");
129 | unmount();
130 | });
131 |
132 | it("dirShow should override style property's display value", () => {
133 | const TestComponent = makeDirective("div");
134 | const { getByTestId, unmount } = render(
135 |
140 | Test Content
141 |
142 | );
143 | const element = getByTestId("test-element");
144 | expect(element).toHaveStyle("display: none");
145 | unmount();
146 | });
147 |
148 | it("renders a component when dirFor is present", () => {
149 | const TestComponent = makeDirective("div");
150 | const { getAllByTestId, unmount } = render(
151 |
156 | Test Content
157 |
158 | );
159 |
160 | const elements = getAllByTestId("test-element");
161 | expect(elements).toHaveLength(2);
162 | unmount();
163 | });
164 |
165 | it("renders a component when dirFor is present using dirKey function", () => {
166 | const TestComponent = makeDirective("div");
167 | const { getAllByTestId, unmount } = render(
168 | value.id}
171 | data-testid="test-element"
172 | >
173 | Test Content
174 |
175 | );
176 |
177 | const elements = getAllByTestId("test-element");
178 | expect(elements).toHaveLength(2);
179 | unmount();
180 | });
181 |
182 | it("adds the class string to the component", () => {
183 | const TestComponent = makeDirective("div");
184 | const { getByTestId, unmount } = render(
185 |
190 | Test Content
191 |
192 | );
193 |
194 | const element = getByTestId("test-element");
195 | expect(element).toHaveClass("test-class");
196 | expect(element).toHaveClass("test-class-2");
197 | unmount();
198 | });
199 | });
200 |
--------------------------------------------------------------------------------
/src/helpers/test-helpers.ts:
--------------------------------------------------------------------------------
1 | import { ReactElement } from "react";
2 | // eslint-disable-next-line import/no-extraneous-dependencies
3 | import renderer from "react-test-renderer";
4 |
5 | export const snapshotTest = (
6 | render: ReactElement,
7 | title?: string
8 | ) => {
9 | const tree = renderer.create(render).toJSON();
10 | expect(tree).toMatchSnapshot(title || "");
11 | };
12 |
13 | export const truthyValues = ["value", true, 1, Infinity, -1, -Infinity, {}, []];
14 | export const falsyValues = ["", false, 0, null];
15 | export const truthyFalsyMap = truthyValues
16 | .map((value) =>
17 | falsyValues.map((falsyValue) => ({ truthy: value, falsy: falsyValue }))
18 | )
19 | .flat();
20 |
--------------------------------------------------------------------------------
/src/hooks/tests/useClassName.test.ts:
--------------------------------------------------------------------------------
1 | import { renderHook } from "@testing-library/react";
2 | import { useClassName } from "../useClassName";
3 |
4 | describe("useClassName", () => {
5 | it("should return empty string if it gets not args", () => {
6 | const { result } = renderHook(() => useClassName());
7 | expect(result.current).toBe("");
8 | });
9 |
10 | describe("When string is received", () => {
11 | it("returns class names passed to it", () => {
12 | const classes = "some class";
13 | const { result } = renderHook(() => useClassName(classes));
14 | expect(result.current).toBe("some class");
15 | });
16 | });
17 |
18 | describe("When array is received", () => {
19 | it("returns class names", () => {
20 | const classes = [{ foo: true, bar: false }];
21 | const { result } = renderHook(() => useClassName(classes));
22 | expect(result.current).toBe("foo");
23 | });
24 |
25 | it("returns class names with other class names", () => {
26 | const classes = ["some-other-class", { foo: true, bar: false }];
27 | const { result } = renderHook(() => useClassName(classes));
28 | expect(result.current).toBe("some-other-class foo");
29 | });
30 |
31 | it("returns class names with other multiple class names", () => {
32 | const classes = [
33 | "some-other-class",
34 | { foo: true, bar: false },
35 | "another-class",
36 | ];
37 | const { result } = renderHook(() => useClassName(classes));
38 | expect(result.current).toBe("some-other-class foo another-class");
39 | });
40 | });
41 |
42 | describe("When object is received", () => {
43 | it("returns class names", () => {
44 | const classes = { foo: true, bar: false };
45 | const { result } = renderHook(() => useClassName(classes));
46 | expect(result.current).toBe("foo");
47 | });
48 | it("returns class names with truthy or falsy values", () => {
49 | const classes = {
50 | foo: 1,
51 | bar: 0,
52 | something: "",
53 | name: null,
54 | blue: true,
55 | yellow: false,
56 | value: undefined,
57 | userName: "jdoe",
58 | };
59 | const { result } = renderHook(() => useClassName(classes));
60 | expect(result.current).toBe("foo blue userName");
61 | });
62 | it("returns an empty string when no classes are passed", () => {
63 | const classes = {};
64 | const { result } = renderHook(() => useClassName(classes));
65 | expect(result.current).toBe("");
66 | });
67 | it("returns an empty string when all classes are falsy", () => {
68 | const classes = {
69 | value1: false,
70 | value2: "",
71 | value3: 0,
72 | value4: null,
73 | value5: undefined,
74 | };
75 | const { result } = renderHook(() => useClassName(classes));
76 | expect(result.current).toBe("");
77 | });
78 | it("returns multiple class names when multiple classes are passed", () => {
79 | const classes = { foo: true, bar: true, something: false, smooth: true };
80 | const { result } = renderHook(() => useClassName(classes));
81 | expect(result.current).toBe("foo bar smooth");
82 | });
83 | it("returns class names without leading or trailing spaces", () => {
84 | const classes = { foo: true, bar: false };
85 | const { result } = renderHook(() => useClassName(classes));
86 | expect(result.current).not.toMatch(/^ | $/);
87 | });
88 | it("returns class names with a single space between each class", () => {
89 | const classes = { foo: true, bar: true };
90 | const { result } = renderHook(() => useClassName(classes));
91 | expect(result.current).toEqual("foo bar");
92 | });
93 |
94 | describe("Dependencies and effects", () => {
95 | it("falls back to classes when deps are not provided", () => {
96 | let myClasses = { foo: true, bar: false };
97 | const { result, rerender } = renderHook(
98 | ({ classes }) => useClassName(classes),
99 | {
100 | initialProps: {
101 | classes: myClasses,
102 | },
103 | }
104 | );
105 | expect(result.current).toBe("foo");
106 |
107 | rerender({ classes: myClasses });
108 | expect(result.current).toBe("foo");
109 |
110 | myClasses.bar = true;
111 | rerender({ classes: myClasses });
112 | expect(result.current).toBe("foo"); // same object in memory, will not cause re-calculation
113 |
114 | myClasses = { foo: true, bar: true }; // same values but different object in memory
115 | rerender({ classes: myClasses });
116 | expect(result.current).toBe("foo bar");
117 | });
118 | it("updates class names on dependency change", () => {
119 | const { result, rerender } = renderHook(
120 | ({ classes, deps }) => useClassName(classes, deps),
121 | {
122 | initialProps: {
123 | classes: { foo: true, bar: false },
124 | deps: [true, false],
125 | },
126 | }
127 | );
128 | expect(result.current).toBe("foo");
129 | rerender({ classes: { foo: false, bar: true }, deps: [false, true] });
130 | expect(result.current).toBe("bar");
131 | });
132 | });
133 | });
134 | });
135 |
--------------------------------------------------------------------------------
/src/hooks/useClassName.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from "react";
2 | import { Classes, ClassesDependencies } from "../types/classes";
3 |
4 | export const useClassName = (classes?: Classes, deps?: ClassesDependencies) => {
5 | const dependencies = deps || [classes];
6 |
7 | const isMounted = useRef(false);
8 |
9 | const getNames = useCallback((receivedClasses = classes): string => {
10 | if (!receivedClasses) return "";
11 | if (typeof receivedClasses === "string") return receivedClasses;
12 | if (Array.isArray(receivedClasses)) {
13 | return receivedClasses
14 | .map((value) => (typeof value === "string" ? value : getNames(value)))
15 | .join(" ");
16 | }
17 | return Object.keys(receivedClasses).reduce((acc, v) => {
18 | if (!receivedClasses[v]) return acc;
19 |
20 | return acc ? `${acc} ${v}` : v;
21 | }, "");
22 | }, []);
23 |
24 | const [classNames, setClassNames] = useState(getNames);
25 |
26 | useEffect(() => {
27 | if (isMounted.current === false) {
28 | // We don't need to recalculate on the first render because useState will do it.
29 | isMounted.current = true;
30 | return;
31 | }
32 | setClassNames(getNames(classes));
33 | }, dependencies);
34 |
35 | return classNames;
36 | };
37 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import directive from "./directives";
2 |
3 | export * from "./components/For";
4 |
5 | export * from "./components/Switch";
6 |
7 | export * from "./components/Case";
8 |
9 | export * from "./components/Default";
10 |
11 | export * from "./hooks/useClassName";
12 |
13 | export default directive;
14 |
--------------------------------------------------------------------------------
/src/types/classes.ts:
--------------------------------------------------------------------------------
1 | export type Classes =
2 | | Record
3 | | Array>
4 | | string;
5 |
6 | export type ClassesDependencies = Array<
7 | boolean | string | number | bigint | null | undefined
8 | >;
9 |
--------------------------------------------------------------------------------
/src/types/directive.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeDirective } from "../directives/makeDirective";
3 | import { Classes, ClassesDependencies } from "./classes";
4 |
5 | export type Mapper = (currentItem: T, index: number) => React.ReactNode;
6 |
7 | export type DirectiveChildren = Mapper | React.ReactNode;
8 |
9 | export interface DirectiveProps {
10 | dirIf?: any;
11 | dirShow?: any;
12 | className?: Classes;
13 | classNameDeps?: ClassesDependencies;
14 | dirFor?: Array;
15 | dirRef?: React.Ref<
16 | E extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[E] : any
17 | >;
18 | children?: T extends undefined ? React.ReactNode : DirectiveChildren;
19 | dirKey?: T extends undefined
20 | ? never
21 | : string | ((currentItem: T) => string | number);
22 | }
23 |
24 | export type DirectiveMap = {
25 | [Key in keyof JSX.IntrinsicElements]: ReturnType>;
26 | };
27 |
--------------------------------------------------------------------------------
/src/types/for.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export interface ForProps {
4 | each: T[];
5 | children: (value: T, index: number) => React.ReactNode;
6 | }
7 |
--------------------------------------------------------------------------------
/src/types/switch.ts:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from "react";
2 |
3 | export interface CaseProps {
4 | when: any | (() => any);
5 | children: React.ReactNode;
6 | }
7 |
8 | export interface DefaultProps {
9 | children: React.ReactNode;
10 | }
11 |
12 | type SwitchChildrenProps = CaseProps | DefaultProps;
13 |
14 | export interface SwitchProps {
15 | children:
16 | | ReactElement
17 | | ReactElement[];
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.eslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src"],
4 | "exclude": ["node_modules"]
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": false,
6 | "skipLibCheck": true,
7 | "outDir": "./dist",
8 | "rootDir": "./src",
9 | "esModuleInterop": true,
10 | "removeComments": true,
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "forceConsistentCasingInFileNames": true,
14 | "module": "CommonJS",
15 | "declaration": true,
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": false,
20 | "jsx": "react",
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "exclude": [
25 | "src/**/*.spec.ts",
26 | "src/**/*.spec.tsx",
27 | "src/**/*.test.ts",
28 | "src/**/*.test.tsx",
29 | "node_modules"
30 | ]
31 | }
--------------------------------------------------------------------------------