twd-js 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +20 -24
  2. package/dist/_commonjsHelpers-C6fGbg64.mjs +6 -0
  3. package/dist/_commonjsHelpers-DwGv2jUC.js +1 -0
  4. package/dist/index.cjs.js +35 -35
  5. package/dist/index.d.ts +440 -7
  6. package/dist/index.es.js +2407 -2378
  7. package/dist/mock-sw.js +1 -1
  8. package/dist/runner-ci.cjs.js +1 -1
  9. package/dist/runner-ci.d.ts +28 -12
  10. package/dist/runner-ci.es.js +32 -22
  11. package/dist/runner.cjs.js +1 -1
  12. package/dist/runner.d.ts +55 -41
  13. package/dist/runner.es.js +127 -70
  14. package/dist/vite-plugin.d.ts +21 -1
  15. package/package.json +10 -10
  16. package/dist/asserts/index.d.ts +0 -2
  17. package/dist/commands/mockBridge.d.ts +0 -73
  18. package/dist/commands/url.d.ts +0 -33
  19. package/dist/commands/visit.d.ts +0 -1
  20. package/dist/constants/version.d.ts +0 -1
  21. package/dist/global.d.ts +0 -8
  22. package/dist/initializers/initSidebar.d.ts +0 -22
  23. package/dist/initializers/initTests.d.ts +0 -31
  24. package/dist/plugin/removeMockServiceWorker.d.ts +0 -18
  25. package/dist/proxies/domMessage.d.ts +0 -1
  26. package/dist/proxies/eventsMessage.d.ts +0 -1
  27. package/dist/proxies/screenDom.d.ts +0 -5
  28. package/dist/proxies/userEvent.d.ts +0 -4
  29. package/dist/twd-types.d.ts +0 -106
  30. package/dist/twd.d.ts +0 -178
  31. package/dist/ui/ClosedSidebar.d.ts +0 -6
  32. package/dist/ui/Icons/BaseIcon.d.ts +0 -7
  33. package/dist/ui/Icons/ChevronDown.d.ts +0 -2
  34. package/dist/ui/Icons/ChevronRight.d.ts +0 -2
  35. package/dist/ui/Icons/Loader.d.ts +0 -2
  36. package/dist/ui/Icons/MockRequestIcon.d.ts +0 -2
  37. package/dist/ui/Icons/Play.d.ts +0 -2
  38. package/dist/ui/MockRulesButton.d.ts +0 -1
  39. package/dist/ui/TWDSidebar.d.ts +0 -16
  40. package/dist/ui/TestList.d.ts +0 -17
  41. package/dist/ui/TestListItem.d.ts +0 -39
  42. package/dist/ui/buildTreeFromHandlers.d.ts +0 -14
  43. package/dist/ui/hooks/useLayout.d.ts +0 -6
  44. package/dist/utils/assertionMessage.d.ts +0 -1
  45. package/dist/utils/log.d.ts +0 -1
  46. package/dist/utils/wait.d.ts +0 -3
@@ -1,33 +0,0 @@
1
- /**
2
- * All supported assertion names for the `should` function in url command
3
- *
4
- * @example
5
- * twd.url().should("contain.url", "/new-page");
6
- * twd.url().should("eq", "http://localhost:3000/new-page");
7
- */
8
- export type URLAssertionName = "eq" | "contain.url";
9
- /**
10
- * Negatable assertion names (e.g., 'not.have.text').
11
- */
12
- export type Negatable<T extends string> = T | `not.${T}`;
13
- /**
14
- * All assertion names, including negated ones.
15
- */
16
- export type AnyURLAssertion = Negatable<URLAssertionName>;
17
- export type URLCommandAPI = {
18
- location: Location;
19
- should: (name: AnyURLAssertion, value: string) => URLCommandAPI | string;
20
- };
21
- /**
22
- * Argument types for each assertion.
23
- */
24
- export type URLAssertionArgs = {
25
- (name: "contain.url", urlPart: string): URLCommandAPI;
26
- (name: "not.contain.url", urlPart: string): URLCommandAPI;
27
- };
28
- /**
29
- * URL command for assertions on the current URL.
30
- * @returns URLCommandAPI
31
- */
32
- declare const urlCommand: () => URLCommandAPI;
33
- export default urlCommand;
@@ -1 +0,0 @@
1
- export declare const visit: (url: string, reload?: boolean) => Promise<void>;
@@ -1 +0,0 @@
1
- export declare const TWD_VERSION = "1.1.2";
package/dist/global.d.ts DELETED
@@ -1,8 +0,0 @@
1
- // global.d.ts
2
- export {};
3
-
4
- declare global {
5
- interface Window {
6
- __testRunner?: TestRunner;
7
- }
8
- }
@@ -1,22 +0,0 @@
1
- interface Options {
2
- Component: React.ReactNode;
3
- createRoot: (el: HTMLElement) => {
4
- render: (el: React.ReactNode) => void;
5
- };
6
- }
7
- /**
8
- * Initialize the TWD sidebar.
9
- * @param options - Options for initializing the sidebar.
10
- * @example
11
- * ```ts
12
- * import { initSidebar } from 'twd-js';
13
- *
14
- * // Initialize the sidebar (e.g., in your main app file)
15
- * initSidebar({
16
- * Component: <TWDSidebar open={true} position="left" />,
17
- * createRoot,
18
- * });
19
- * ```
20
- */
21
- export declare const initSidebar: (options: Options) => void;
22
- export {};
@@ -1,31 +0,0 @@
1
- /**
2
- * A record of test module paths to their loader functions.
3
- * Each function returns a promise that resolves when the module is loaded.
4
- * This is typically used with Vite's `import.meta.glob` to dynamically import test modules.
5
- * @example
6
- * ```ts
7
- * const testModules = {
8
- * './test1.twd.test.ts': () => import('./test1.twd.test.ts'),
9
- * './test2.twd.test.ts': () => import('./test2.twd.test.ts'),
10
- * };
11
- * ```
12
- */
13
- type TestModule = Record<string, () => Promise<unknown>>;
14
- /**
15
- * Initialize Vite test loading.
16
- * @param testModules - The test modules to load.
17
- * @param component - The React component to render the sidebar.
18
- * @param createRoot - Function to create a React root.
19
- * @example
20
- * ```ts
21
- * if (import.meta.env.DEV) {
22
- * const testModules = import.meta.glob("./example.twd.test.ts");
23
- * const { initTests, TWDSidebar } = await import('twd-js');
24
- * await initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
25
- * }
26
- * ```
27
- */
28
- export declare const initTests: (testModules: TestModule, Component: React.ReactNode, createRoot: (el: HTMLElement) => {
29
- render: (el: React.ReactNode) => void;
30
- }) => Promise<void>;
31
- export {};
@@ -1,18 +0,0 @@
1
- import { Plugin } from 'vite';
2
- /**
3
- * Vite plugin to remove the mock service worker file from the build output.
4
- * This is useful for production builds where you don't want the mock service worker to be included.
5
- *
6
- * @example
7
- * ```ts
8
- * import { removeMockServiceWorker } from 'twd-js';
9
- *
10
- * export default defineConfig({
11
- * plugins: [
12
- * // ... other plugins
13
- * removeMockServiceWorker()
14
- * ]
15
- * });
16
- * ```
17
- */
18
- export declare function removeMockServiceWorker(): Plugin;
@@ -1 +0,0 @@
1
- export declare function domMessage(prefix: string, prop: PropertyKey, args: any[]): string;
@@ -1 +0,0 @@
1
- export declare function eventsMessage(prefix: string, prop: PropertyKey, args: any[]): string;
@@ -1,5 +0,0 @@
1
- import { screen, configure } from '@testing-library/dom';
2
- type ScreenDom = typeof screen;
3
- export declare const screenDom: ScreenDom;
4
- export declare const configureScreenDom: typeof configure;
5
- export {};
@@ -1,4 +0,0 @@
1
- import { default as userEventLib } from '@testing-library/user-event';
2
- type UserEvent = typeof userEventLib;
3
- export declare const userEvent: UserEvent;
4
- export {};
@@ -1,106 +0,0 @@
1
- /**
2
- * Types and interfaces for the TWD testing library.
3
- *
4
- * @module twd-types
5
- */
6
- /**
7
- * All supported assertion names for the `should` function.
8
- *
9
- * @example
10
- * api.should("have.text", "Hello");
11
- * api.should("be.empty");
12
- */
13
- export type AssertionName = "have.text" | "contain.text" | "be.empty" | "have.attr" | "have.value" | "be.disabled" | "be.enabled" | "be.checked" | "be.selected" | "be.focused" | "be.visible" | "have.class";
14
- /**
15
- * Negatable assertion names (e.g., 'not.have.text').
16
- */
17
- export type Negatable<T extends string> = T | `not.${T}`;
18
- /**
19
- * All assertion names, including negated ones.
20
- */
21
- export type AnyAssertion = Negatable<AssertionName>;
22
- /**
23
- * Argument types for each assertion.
24
- */
25
- export type AssertionArgs = {
26
- "have.text": [expected: string];
27
- "contain.text": [expected: string];
28
- "be.empty": [];
29
- "have.attr": [attr: string, value: string];
30
- "have.value": [value: string];
31
- "be.disabled": [];
32
- "be.enabled": [];
33
- "be.checked": [];
34
- "be.selected": [];
35
- "be.focused": [];
36
- "be.visible": [];
37
- "have.class": [className: string];
38
- };
39
- /**
40
- * Maps assertion name to its argument tuple.
41
- */
42
- export type ArgsFor<A extends AnyAssertion> = A extends `not.${infer Base extends AssertionName}` ? AssertionArgs[Base] : A extends AssertionName ? AssertionArgs[A] : never;
43
- /**
44
- * Overloads for the `should` function, for best IntelliSense.
45
- *
46
- * @example
47
- * twd.should("have.text", "Hello");
48
- * twd.should("be.empty");
49
- * twd.should("have.class", "active");
50
- */
51
- export type ShouldFn = {
52
- (name: "have.text", expected: string): TWDElemAPI;
53
- (name: "not.have.text", expected: string): TWDElemAPI;
54
- (name: "contain.text", expected: string): TWDElemAPI;
55
- (name: "not.contain.text", expected: string): TWDElemAPI;
56
- (name: "be.empty"): TWDElemAPI;
57
- (name: "not.be.empty"): TWDElemAPI;
58
- (name: "have.attr", attr: string, value: string): TWDElemAPI;
59
- (name: "not.have.attr", attr: string, value: string): TWDElemAPI;
60
- (name: "have.value", value: string): TWDElemAPI;
61
- (name: "not.have.value", value: string): TWDElemAPI;
62
- (name: "be.disabled"): TWDElemAPI;
63
- (name: "not.be.disabled"): TWDElemAPI;
64
- (name: "be.enabled"): TWDElemAPI;
65
- (name: "not.be.enabled"): TWDElemAPI;
66
- (name: "be.checked"): TWDElemAPI;
67
- (name: "not.be.checked"): TWDElemAPI;
68
- (name: "be.selected"): TWDElemAPI;
69
- (name: "not.be.selected"): TWDElemAPI;
70
- (name: "be.focused"): TWDElemAPI;
71
- (name: "not.be.focused"): TWDElemAPI;
72
- (name: "be.visible"): TWDElemAPI;
73
- (name: "not.be.visible"): TWDElemAPI;
74
- (name: "have.class", className: string): TWDElemAPI;
75
- (name: "not.have.class", className: string): TWDElemAPI;
76
- };
77
- /**
78
- * The main API returned by `twd.get()`.
79
- *
80
- * @example
81
- * ```ts
82
- * const btn = await twd.get("button");
83
- * btn.should("have.text", "Clicked").click();
84
- *
85
- * ```
86
- *
87
- */
88
- export interface TWDElemAPI {
89
- /** The underlying DOM element. */
90
- el: Element;
91
- /**
92
- * Asserts something about the element.
93
- * @param name The name of the assertion.
94
- * @param args Arguments for the assertion.
95
- * @returns The same API for chaining.
96
- *
97
- * @example
98
- * ```ts
99
- * const btn = await twd.get("button");
100
- * btn.should("have.text", "Click me").should("not.be.disabled");
101
- *
102
- * ```
103
- *
104
- */
105
- should: ShouldFn;
106
- }
package/dist/twd.d.ts DELETED
@@ -1,178 +0,0 @@
1
- import { Options, Rule } from './commands/mockBridge';
2
- import { AnyAssertion, ArgsFor, TWDElemAPI } from './twd-types';
3
- import { URLCommandAPI } from './commands/url';
4
- interface TWDAPI {
5
- /**
6
- * Finds an element by selector and returns the TWD API for it.
7
- * @param selector CSS selector
8
- * @returns {Promise<TWDElemAPI>} The TWD API for the element
9
- *
10
- * @example
11
- * ```ts
12
- * const btn = await twd.get("button");
13
- *
14
- * ```
15
- *
16
- */
17
- get: (selector: string) => Promise<TWDElemAPI>;
18
- /**
19
- * Sets the value of an input element and dispatches an input event. We recommend using this only for range, color, time inputs.
20
- * @param el The input element
21
- * @param value The value to set
22
- *
23
- * @example
24
- * ```ts
25
- * const input = await twd.get("input[type='time']");
26
- * twd.setInputValue(input.el, "13:30");
27
- *
28
- * ```
29
- */
30
- setInputValue: (el: Element, value: string) => void;
31
- /**
32
- * Finds multiple elements by selector and returns an array of TWD APIs for them.
33
- * @param selector CSS selector
34
- * @returns {Promise<TWDElemAPI[]>} Array of TWD APIs for the elements
35
- *
36
- * @example
37
- * ```ts
38
- * const items = await twd.getAll(".item");
39
- * items.at(0).should("be.visible");
40
- * items.at(1).should("contain.text", "Hello");
41
- * expect(items).to.have.length(3);
42
- * ```
43
- */
44
- getAll: (selector: string) => Promise<TWDElemAPI[]>;
45
- /**
46
- * Simulates visiting a URL (SPA navigation).
47
- * @param url The URL to visit
48
- * @param [reload] Whether to force a reload even if already on the URL (optional)
49
- *
50
- * @example
51
- * ```ts
52
- * twd.visit("/contact");
53
- * // visit with reload
54
- * twd.visit("/contact", true);
55
- * ```
56
- */
57
- visit: (url: string, reload?: boolean) => Promise<void>;
58
- /**
59
- * Mock a network request.
60
- *
61
- * @param alias Identifier for the mock rule. Useful for `waitFor()`.
62
- * @param options Options to configure the mock:
63
- * - `method`: HTTP method ("GET", "POST", …)
64
- * - `url`: URL string or RegExp to match
65
- * - `response`: Body of the mocked response
66
- * - `status`: (optional) HTTP status code (default: 200)
67
- * - `headers`: (optional) Response headers
68
- *
69
- * @example
70
- * ```ts
71
- * mockRequest("getUser", {
72
- * method: "GET",
73
- * url: /\/api\/user\/\d+/,
74
- * response: { id: 1, name: "Kevin" },
75
- * status: 200,
76
- * headers: { "x-mock": "true" }
77
- * });
78
- * ```
79
- */
80
- mockRequest: (alias: string, options: Options) => Promise<void>;
81
- /**
82
- * Wait for a mocked request to be made.
83
- * @param alias The alias of the mock rule to wait for
84
- * @return The matched rule (with body if applicable)
85
- *
86
- * @example
87
- * ```ts
88
- * const rule = await twd.waitFor("aliasId");
89
- * console.log(rule.body);
90
- *
91
- * ```
92
- */
93
- waitForRequest: (alias: string) => Promise<Rule>;
94
- /**
95
- * wait for a list of mocked requests to be made.
96
- * @param aliases The aliases of the mock rules to wait for
97
- * @returns The matched rules (with body if applicable)
98
- * @example
99
- * ```ts
100
- * const rules = await waitForRequests(["getUser", "postComment"]);
101
- * ```
102
- */
103
- waitForRequests: (aliases: string[]) => Promise<Rule[]>;
104
- /**
105
- * URL-related assertions.
106
- *
107
- * @example
108
- * ```ts
109
- * twd.url().should("eq", "http://localhost:3000/contact");
110
- * twd.url().should("contain.url", "/contact");
111
- *
112
- * ```
113
- */
114
- url: () => URLCommandAPI;
115
- /**
116
- * Initializes request mocking (registers the service worker).
117
- * Must be called before using `twd.mockRequest()`.
118
- *
119
- * @example
120
- * ```ts
121
- * await twd.initRequestMocking();
122
- *
123
- * ```
124
- */
125
- initRequestMocking: () => Promise<void>;
126
- /**
127
- * Clears all request mock rules.
128
- *
129
- * @example
130
- * ```ts
131
- * twd.clearRequestMockRules();
132
- *
133
- * ```
134
- */
135
- clearRequestMockRules: () => void;
136
- /**
137
- * Gets all current request mock rules.
138
- *
139
- * @example
140
- * ```ts
141
- * const rules = twd.getRequestMockRules();
142
- * console.log(rules);
143
- * ```
144
- */
145
- getRequestMockRules: () => Rule[];
146
- /**
147
- * Waits for a specified time.
148
- * @param time Time in milliseconds to wait
149
- * @returns A promise that resolves after the specified time
150
- * @example
151
- * ```ts
152
- * await twd.wait(500); // wait for 500ms
153
- * ```
154
- */
155
- wait: (time: number) => Promise<void>;
156
- /**
157
- * Asserts something about the element.
158
- * @param el The element to assert on
159
- * @param name The name of the assertion.
160
- * @param args Arguments for the assertion.
161
- * @returns The same API for chaining.
162
- * @example
163
- * ```ts
164
- * const button = await twd.get("button");
165
- * const text = screenDom.getByText("Hello");
166
- * twd.should(button.el, "have.text", "Hello");
167
- * twd.should(text, "be.empty");
168
- * twd.should(button.el, "have.class", "active");
169
- * ```
170
- */
171
- should: (el: Element, name: AnyAssertion, ...args: ArgsFor<AnyAssertion>) => void;
172
- }
173
- /**
174
- * Mini Cypress-style helpers for DOM testing.
175
- * @namespace twd
176
- */
177
- export declare const twd: TWDAPI;
178
- export {};
@@ -1,6 +0,0 @@
1
- interface ClosedSidebarProps {
2
- setOpen: (open: boolean) => void;
3
- position: "left" | "right";
4
- }
5
- export declare const ClosedSidebar: ({ setOpen, position }: ClosedSidebarProps) => import("react/jsx-runtime").JSX.Element;
6
- export {};
@@ -1,7 +0,0 @@
1
- interface BaseIconProps {
2
- className: string;
3
- children: React.ReactNode;
4
- dataTestId: string;
5
- }
6
- declare const BaseIcon: ({ className, children, dataTestId }: BaseIconProps) => import("react/jsx-runtime").JSX.Element;
7
- export default BaseIcon;
@@ -1,2 +0,0 @@
1
- declare const ChevronDown: () => import("react/jsx-runtime").JSX.Element;
2
- export default ChevronDown;
@@ -1,2 +0,0 @@
1
- declare const ChevronRight: () => import("react/jsx-runtime").JSX.Element;
2
- export default ChevronRight;
@@ -1,2 +0,0 @@
1
- declare const Loader: () => import("react/jsx-runtime").JSX.Element;
2
- export default Loader;
@@ -1,2 +0,0 @@
1
- declare const MockRequestIcon: () => import("react/jsx-runtime").JSX.Element;
2
- export default MockRequestIcon;
@@ -1,2 +0,0 @@
1
- declare const Play: () => import("react/jsx-runtime").JSX.Element;
2
- export default Play;
@@ -1 +0,0 @@
1
- export declare const MockRulesButton: () => import("react/jsx-runtime").JSX.Element;
@@ -1,16 +0,0 @@
1
- interface TWDSidebarProps {
2
- /**
3
- * Whether the sidebar is open by default
4
- */
5
- open: boolean;
6
- /**
7
- * Sidebar position
8
- * - left: Sidebar on the left side (default)
9
- * - right: Sidebar on the right side
10
- *
11
- * @default "left"
12
- */
13
- position?: "left" | "right";
14
- }
15
- export declare const TWDSidebar: ({ open, position }: TWDSidebarProps) => import("react/jsx-runtime").JSX.Element;
16
- export {};
@@ -1,17 +0,0 @@
1
- interface Test {
2
- name: string;
3
- depth: number;
4
- status?: "idle" | "pass" | "fail" | "skip" | "running";
5
- logs?: string[];
6
- parent?: string;
7
- id: string;
8
- type: "test" | "suite";
9
- only?: boolean;
10
- skip?: boolean;
11
- }
12
- interface TestListProps {
13
- runTest: (id: string) => Promise<void>;
14
- tests: Test[];
15
- }
16
- export declare const TestList: ({ tests, runTest }: TestListProps) => import("react/jsx-runtime").JSX.Element;
17
- export {};
@@ -1,39 +0,0 @@
1
- interface Test {
2
- name: string;
3
- depth: number;
4
- status?: "idle" | "pass" | "fail" | "skip" | "running";
5
- logs?: string[];
6
- id: string;
7
- parent?: string;
8
- type: "test" | "suite";
9
- only?: boolean;
10
- skip?: boolean;
11
- }
12
- interface TestListItemProps {
13
- node: Test;
14
- depth: number;
15
- id: string;
16
- runTest: (i: string) => void;
17
- }
18
- export declare const statusStyles: (node: Test) => {
19
- item: {
20
- background: string;
21
- };
22
- container: {
23
- borderLeft: string;
24
- };
25
- } | {
26
- item: {
27
- background: string;
28
- };
29
- container?: undefined;
30
- };
31
- export declare const assertStyles: (text: string) => {
32
- color: string;
33
- fontWeight: string;
34
- } | {
35
- color?: undefined;
36
- fontWeight?: undefined;
37
- };
38
- export declare const TestListItem: ({ node, depth, id, runTest, }: TestListItemProps) => import("react/jsx-runtime").JSX.Element;
39
- export {};
@@ -1,14 +0,0 @@
1
- interface Test {
2
- name: string;
3
- depth: number;
4
- status?: "idle" | "pass" | "fail" | "skip" | "running";
5
- logs?: string[];
6
- id: string;
7
- parent?: string;
8
- type: "test" | "suite";
9
- }
10
- export type Node = Test & {
11
- childrenNodes?: Node[];
12
- };
13
- export declare const buildTreeFromHandlers: (handlers: Test[]) => Node[];
14
- export {};
@@ -1,6 +0,0 @@
1
- interface UseLayoutProps {
2
- isOpen: boolean;
3
- position: "left" | "right";
4
- }
5
- export declare const useLayout: ({ isOpen, position }: UseLayoutProps) => void;
6
- export {};
@@ -1 +0,0 @@
1
- export declare const assertionMessage: (valid: boolean, isNegated: boolean, correctMessage: string, errorMessage: string) => string;
@@ -1 +0,0 @@
1
- export declare const log: (msg: string) => void;
@@ -1,3 +0,0 @@
1
- export declare const waitForElement: (selector: string, fn: () => HTMLElement | null, timeout?: number, interval?: number) => Promise<HTMLElement>;
2
- export declare const waitForElements: (selector: string, fn: () => NodeListOf<Element> | null, timeout?: number, interval?: number) => Promise<Element[]>;
3
- export declare const wait: (time: number) => Promise<void>;