) => (
19 |
24 | ),
25 | );
26 |
27 | TestComponent.displayName = "@styleless-ui/TestComponent";
28 |
29 | const { container: withTag } = render(
30 | ,
35 | );
36 |
37 | const { container: withComponent } = render(
38 | ,
42 | );
43 |
44 | expect(getTarget(withTag).tagName).toBe("A");
45 | expect(getTarget(withComponent).tagName).toBe("SPAN");
46 | });
47 | };
48 |
49 | export default itIsPolymorphic;
50 |
--------------------------------------------------------------------------------
/tests/utils/itShouldMount.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { render } from ".";
3 |
4 | const itShouldMount = (
5 | Component: React.ComponentType
,
6 | requiredProps: P,
7 | ): void => {
8 | it(`component could be mounted and unmounted without errors`, () => {
9 | const elem = () as React.ReactElement;
10 |
11 | const result = render(elem);
12 |
13 | expect(() => {
14 | result.rerender(elem);
15 | result.unmount();
16 | }).not.toThrow();
17 | });
18 | };
19 |
20 | export default itShouldMount;
21 |
--------------------------------------------------------------------------------
/tests/utils/itSupportsClassName.tsx:
--------------------------------------------------------------------------------
1 | // Cherry picked from https://github.com/mantinedev/mantine/blob/master/src/mantine-tests/src/it-supports-classname.tsx
2 |
3 | import * as React from "react";
4 | import { render } from ".";
5 |
6 | const cls = "styleless-component-test-classname";
7 |
8 | const itSupportsClassName = (
9 | Component: React.ComponentType,
10 | requiredProps: T,
11 | ): void => {
12 | it("supports className prop", () => {
13 | const { container } = render(
14 | ,
18 | );
19 |
20 | expect(container.firstChild).toHaveClass(cls);
21 | });
22 | };
23 |
24 | export default itSupportsClassName;
25 |
--------------------------------------------------------------------------------
/tests/utils/itSupportsDataSetProps.tsx:
--------------------------------------------------------------------------------
1 | // Cherry picked from https://github.com/mantinedev/mantine/blob/master/src/mantine-tests/src/it-supports-others.tsx
2 |
3 | import * as React from "react";
4 | import { render } from ".";
5 |
6 | const itSupportsDataSetProps = (
7 | Component: React.ComponentType,
8 | requiredProps: T,
9 | selector?: string,
10 | options?: { withPortal?: boolean },
11 | ): void => {
12 | it("supports `data-*` props", () => {
13 | const { withPortal = false } = options ?? {};
14 |
15 | const getTarget = (container: HTMLElement): HTMLElement => {
16 | const portal = withPortal
17 | ? document.querySelector("[data-slot='Portal:Root']")
18 | : null;
19 |
20 | return selector
21 | ? portal
22 | ? (portal.querySelector(selector) as HTMLElement)
23 | : (container.querySelector(selector) as HTMLElement)
24 | : portal
25 | ? (container.firstChild as HTMLElement)
26 | : (container.firstChild as HTMLElement);
27 | };
28 |
29 | const { container } = render(
30 | ,
34 | );
35 |
36 | expect(getTarget(container)).toHaveAttribute(
37 | "data-other-attribute",
38 | "test",
39 | );
40 | });
41 | };
42 |
43 | export default itSupportsDataSetProps;
44 |
--------------------------------------------------------------------------------
/tests/utils/itSupportsFocusEvents.tsx:
--------------------------------------------------------------------------------
1 | // Cherry picked from https://github.com/mantinedev/mantine/blob/master/src/mantine-tests/src/it-supports-focus-events.tsx
2 |
3 | import { fireEvent } from "@testing-library/react";
4 | import * as React from "react";
5 | import { render } from ".";
6 |
7 | const itSupportsFocusEvents = (
8 | Component: React.ComponentType,
9 | requiredProps: T,
10 | selector: string,
11 | ): void => {
12 | it("supports focus events", () => {
13 | const onFocusSpy = jest.fn();
14 | const onBlurSpy = jest.fn();
15 |
16 | const { container } = render(
17 | ,
22 | );
23 |
24 | fireEvent.focus(container.querySelector(selector) as Element);
25 | expect(onFocusSpy).toHaveBeenCalled();
26 |
27 | fireEvent.blur(container.querySelector(selector) as Element);
28 | expect(onBlurSpy).toHaveBeenCalled();
29 | });
30 | };
31 |
32 | export default itSupportsFocusEvents;
33 |
--------------------------------------------------------------------------------
/tests/utils/itSupportsRef.tsx:
--------------------------------------------------------------------------------
1 | // Cherry picked from https://github.com/mantinedev/mantine/blob/master/src/mantine-tests/src/it-supports-ref.tsx
2 |
3 | import * as React from "react";
4 | import { render } from ".";
5 |
6 | const itSupportsRef = (
7 | Component: React.ComponentType,
8 | requiredProps: T,
9 | refType: unknown,
10 | ): void => {
11 | it(`supports forwarding ref`, () => {
12 | const ref = React.createRef();
13 |
14 | render(
15 | ,
19 | );
20 | expect(ref.current).toBeInstanceOf(refType);
21 | });
22 | };
23 |
24 | export default itSupportsRef;
25 |
--------------------------------------------------------------------------------
/tests/utils/itSupportsStyle.tsx:
--------------------------------------------------------------------------------
1 | // Cherry picked from https://github.com/mantinedev/mantine/blob/master/src/mantine-tests/src/it-supports-style.tsx
2 |
3 | import * as React from "react";
4 | import { render } from ".";
5 |
6 | const itSupportsStyle = (
7 | Component: React.ComponentType,
8 | requiredProps: T,
9 | selector?: string,
10 | options?: { withPortal?: boolean },
11 | ): void => {
12 | it("supports style prop", () => {
13 | const { withPortal = false } = options ?? {};
14 |
15 | const getTarget = (container: HTMLElement): HTMLElement => {
16 | const portal = withPortal
17 | ? document.querySelector("[data-slot='Portal:Root']")
18 | : null;
19 |
20 | return selector
21 | ? portal
22 | ? (portal.querySelector(selector) as HTMLElement)
23 | : (container.querySelector(selector) as HTMLElement)
24 | : portal
25 | ? (container.firstChild as HTMLElement)
26 | : (container.firstChild as HTMLElement);
27 | };
28 |
29 | const style = { border: "1px solid red", backgroundColor: "black" };
30 |
31 | const { container } = render(
32 | ,
36 | );
37 |
38 | expect(getTarget(container)).toHaveStyle(style);
39 | });
40 | };
41 |
42 | export default itSupportsStyle;
43 |
--------------------------------------------------------------------------------
/tests/utils/wait.ts:
--------------------------------------------------------------------------------
1 | const wait = (durationInMillis: number) =>
2 | new Promise(resolve => {
3 | setTimeout(resolve, durationInMillis);
4 | });
5 |
6 | export default wait;
7 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "noEmit": false,
5 | "jsx": "react-jsx",
6 | "declaration": true
7 | },
8 | "include": ["lib/**/*.ts", "lib/**/*.tsx"],
9 | "exclude": ["**/*.test.ts", "**/*.test.tsx"]
10 | }
11 |
--------------------------------------------------------------------------------
/tsconfig.cjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.build.json",
3 | "compilerOptions": {
4 | "module": "CommonJS",
5 | "outDir": "./dist"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/tsconfig.esm.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.build.json",
3 | "compilerOptions": {
4 | "module": "ESNext",
5 | "outDir": "./dist/esm"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "pretty": true,
4 | "strictNullChecks": true,
5 | "noFallthroughCasesInSwitch": true,
6 | "noImplicitReturns": true,
7 | "noImplicitOverride": true,
8 | "noUnusedLocals": true,
9 | "noImplicitAny": true,
10 | "noUnusedParameters": true,
11 | "incremental": true,
12 | "target": "ES5",
13 | "useDefineForClassFields": true,
14 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
15 | "allowJs": false,
16 | "skipLibCheck": true,
17 | "esModuleInterop": true,
18 | "allowSyntheticDefaultImports": true,
19 | "strict": true,
20 | "forceConsistentCasingInFileNames": true,
21 | "module": "ESNext",
22 | "moduleResolution": "Node",
23 | "resolveJsonModule": true,
24 | "isolatedModules": true,
25 | "noUncheckedIndexedAccess": true,
26 | "noEmit": true,
27 | "jsx": "preserve"
28 | },
29 | "include": ["**/*.ts", "**/*.tsx"],
30 | "exclude": ["node_modules", "dist"]
31 | }
32 |
--------------------------------------------------------------------------------
/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": { "noEmit": true, "jsx": "react-jsx" }
4 | }
5 |
--------------------------------------------------------------------------------
3 | 
4 |