@leaflink/dom-testing-utils 5.2.2 → 5.3.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 (5) hide show
  1. package/README.md +74 -65
  2. package/dist/mocks/IntersectionObserverMock.d.ts +3 -2
  3. package/dist/setup-env.spec.js +2 -2
  4. package/dist/setup-env.spec.js.map +1 -1
  5. package/package.json +14 -6
package/README.md CHANGED
@@ -11,28 +11,31 @@
11
11
  <!-- START doctoc generated TOC please keep comment here to allow auto update -->
12
12
  <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
13
13
 
14
- - [Installation](#installation)
15
- - [Usage](#usage)
16
- - [Setup file](#setup-file)
17
- - [Global setup](#global-setup)
18
- - [Utilities](#utilities)
19
- - [`cleanupNoty`](#cleanupnoty)
20
- - [`waitForLoading`](#waitforloading)
21
- - [`cleanupDropdowns`](#cleanupdropdowns)
22
- - [`assertAndDismissNoty`](#assertanddismissnoty)
23
- - [`getByDescriptionTerm`](#getbydescriptionterm)
24
- - [`getAllByDescriptionTerm`](#getallbydescriptionterm)
25
- - [`getSelectedOption`](#getselectedoption)
26
- - [`getSelectedOptions`](#getselectedoptions)
27
- - [`createFixtureGenerator`](#createfixturegenerator)
28
- - [Mocking API Endpoints](#mocking-api-endpoints)
14
+ - [@leaflink/dom-testing-utils](#leaflinkdom-testing-utils)
15
+ - [Installation](#installation)
16
+ - [Usage](#usage)
17
+ - [Setup file](#setup-file)
18
+ - [Global setup](#global-setup)
19
+ - [Utilities](#utilities)
20
+ - [`cleanupNoty`](#cleanupnoty)
21
+ - [`waitForLoading`](#waitforloading)
22
+ - [`cleanupDropdowns`](#cleanupdropdowns)
23
+ - [`assertAndDismissNoty`](#assertanddismissnoty)
24
+ - [`getByDescriptionTerm`](#getbydescriptionterm)
25
+ - [`getAllByDescriptionTerm`](#getallbydescriptionterm)
26
+ - [`getSelectedOption`](#getselectedoption)
27
+ - [`getSelectedOptions`](#getselectedoptions)
28
+ - [`createFixtureGenerator`](#createfixturegenerator)
29
+ - [Mocking API Endpoints](#mocking-api-endpoints)
29
30
 
30
31
  <!-- END doctoc generated TOC please keep comment here to allow auto update -->
31
32
 
32
33
  ## Installation
33
34
 
35
+ **Requirements:** Node.js >= 24
36
+
34
37
  ```sh
35
- npm install --save-dev @leaflink/dom-testing-utils
38
+ pnpm add -D @leaflink/dom-testing-utils
36
39
  ```
37
40
 
38
41
  ## Usage
@@ -71,7 +74,7 @@ setupFiles: ['tests/setup-env.js'],
71
74
  setupFilesAfterEnv: ['<rootDir>/tests/setup-env.js']
72
75
  ```
73
76
 
74
- This will be run once before *each* test file. See <https://vitest.dev/config/#setupfiles>.
77
+ This will be run once before _each_ test file. See <https://vitest.dev/config/#setupfiles>.
75
78
 
76
79
  ### Global setup
77
80
 
@@ -85,7 +88,7 @@ globalSetup: ['node_modules/@leaflink/dom-testing-utils/dist/global-setup.js'],
85
88
  globalSetup: ['<rootDir>/node_modules/@leaflink/dom-testing-utils/dist/global-setup.js']
86
89
  ```
87
90
 
88
- This will run once *before everything*. See <https://vitest.dev/config/#globalsetup>.
91
+ This will run once _before everything_. See <https://vitest.dev/config/#globalsetup>.
89
92
 
90
93
  ## Utilities
91
94
 
@@ -101,11 +104,11 @@ Helper method to remove all noty alerts from the DOM.
101
104
 
102
105
  Utility that waits for all loading elements to be removed from the DOM. The `data-test` argument defaults to `ll-loading` **or** `loading-spinner` if `testId` is not specified.
103
106
 
104
- | **Parameters** | **Type** | **Default** | **Summary** |
105
- | ----------- | ----------- | ----------- |----------- |
106
- | testId | `string` | `ll-loading` && `loading-spinner` |The data test ID to target. |
107
- | timeout | number | 2000 | How long to wait for loading elements to be removed |
108
- | failIfNull | boolean | false | Throws an error if no loading elements are found |
107
+ | **Parameters** | **Type** | **Default** | **Summary** |
108
+ | -------------- | -------- | --------------------------------- | --------------------------------------------------- |
109
+ | testId | `string` | `ll-loading` && `loading-spinner` | The data test ID to target. |
110
+ | timeout | number | 2000 | How long to wait for loading elements to be removed |
111
+ | failIfNull | boolean | false | Throws an error if no loading elements are found |
109
112
 
110
113
  **Returns**: `Promise<void>`
111
114
 
@@ -123,11 +126,11 @@ Helper method to remove all floating Stash Dropdown elements from the DOM.
123
126
 
124
127
  ### `assertAndDismissNoty`
125
128
 
126
- Helper to assert and manually dismiss a notification. This is useful in scenarios where cleanupNoty() does not work as expected, such as when validating error messages in test suites.
129
+ Helper to assert and manually dismiss a notification. This is useful in scenarios where cleanupNoty() does not work as expected, such as when validating error messages in test suites.
127
130
 
128
- | **Parameters** | **Type** | **Default** | **Summary** |
129
- | ----------- | ----------- | ----------- |----------- |
130
- | text | `string` | *Required* | Expected notification text. |
131
+ | **Parameters** | **Type** | **Default** | **Summary** |
132
+ | -------------- | -------- | ----------- | --------------------------- |
133
+ | text | `string` | _Required_ | Expected notification text. |
131
134
 
132
135
  **Returns**: `void`
133
136
 
@@ -135,46 +138,43 @@ Helper to assert and manually dismiss a notification. This is useful in scenari
135
138
 
136
139
  Finds the first HTML element with the role "definition" (DD) that matches the specified text for the description term.
137
140
 
138
- | **Parameters** | **Type** | **Default** | **Summary** |
139
- | ----------- | ----------- | ----------- |----------- |
140
- | text | `string \| RegExp` | *Required* | Expected description term text or regex |
141
+ | **Parameters** | **Type** | **Default** | **Summary** |
142
+ | -------------- | ------------------ | ----------- | --------------------------------------- |
143
+ | text | `string \| RegExp` | _Required_ | Expected description term text or regex |
141
144
 
142
145
  **Returns**: `HTMLElement | undefined` - The first matching description detail element or undefined if no match is found.
143
146
 
144
-
145
147
  ### `getAllByDescriptionTerm`
146
148
 
147
149
  Queries and returns an array of HTML elements with the role "definition" (DD) that matches the specified text of a description term.
148
150
 
149
- | **Parameters** | **Type** | **Default** | **Summary** |
150
- | ----------- | ----------- | ----------- |----------- |
151
- | textMatch | `string \| RegExp` | *Required* | The text to match within the HTML elements. It can be a string or a regular expression. |
151
+ | **Parameters** | **Type** | **Default** | **Summary** |
152
+ | -------------- | ------------------ | ----------- | --------------------------------------------------------------------------------------- |
153
+ | textMatch | `string \| RegExp` | _Required_ | The text to match within the HTML elements. It can be a string or a regular expression. |
152
154
 
153
155
  **Returns**: `HTMLElement[]` - An array of HTML description detail elements that match the given text.
154
156
 
155
-
156
157
  ### `getSelectedOption`
157
158
 
158
159
  Finds the first selected HTML element with the role "definition" (LI) "listitem" inside the specified select element.
159
160
 
160
- | **Parameters** | **Type** | **Default** | **Summary** |
161
- | ----------- | ----------- | ----------- |----------- |
162
- | element | HTMLSelectElement | *Required* | Stash Select element to be checked. |
163
- | selectedClass | string | 'is-selected' | Selected class added on selected items |
164
- | options | ByRoleOptions | null | `getAllByRole()` options values using `ByRoleOptions` type |
161
+ | **Parameters** | **Type** | **Default** | **Summary** |
162
+ | -------------- | ----------------- | ------------- | ---------------------------------------------------------- |
163
+ | element | HTMLSelectElement | _Required_ | Stash Select element to be checked. |
164
+ | selectedClass | string | 'is-selected' | Selected class added on selected items |
165
+ | options | ByRoleOptions | null | `getAllByRole()` options values using `ByRoleOptions` type |
165
166
 
166
167
  **Returns**: `HTMLElement | undefined` - The first selected HTML listitem element or undefined if no match is found.
167
168
 
168
-
169
169
  ### `getSelectedOptions`
170
170
 
171
171
  Finds all the selected HTML elements with the role "definition" (LI) "listitem" inside the specified select element.
172
172
 
173
- | **Parameters** | **Type** | **Default** | **Summary** |
174
- | ----------- | ----------- | ----------- |----------- |
175
- | element | HTMLSelectElement | *Required* | Stash Select element to be checked. |
176
- | selectedClass | string | 'is-selected' | Selected class added on selected items |
177
- | options | ByRoleOptions | null | `getAllByRole()` options values using `ByRoleOptions` type |
173
+ | **Parameters** | **Type** | **Default** | **Summary** |
174
+ | -------------- | ----------------- | ------------- | ---------------------------------------------------------- |
175
+ | element | HTMLSelectElement | _Required_ | Stash Select element to be checked. |
176
+ | selectedClass | string | 'is-selected' | Selected class added on selected items |
177
+ | options | ByRoleOptions | null | `getAllByRole()` options values using `ByRoleOptions` type |
178
178
 
179
179
  **Returns**: `HTMLElement[]` - An array of selected HTML listitem elements.
180
180
 
@@ -182,9 +182,9 @@ Finds all the selected HTML elements with the role "definition" (LI) "listitem"
182
182
 
183
183
  Higher order function that takes a method whose responsibility is to create a **single** data fixture object and returns a new generator function that allows you to create 1 or more of those fixtures. Fixture generator function that's returned supports passing optional `num` and `overrides` params.
184
184
 
185
- | **Parameters** | **Type** | **Default** | **Summary** |
186
- | ----------- | ----------- | ----------- |----------- |
187
- | `fixtureFn` | `function` | *Required* | Method that generates and returns a single data object. |
185
+ | **Parameters** | **Type** | **Default** | **Summary** |
186
+ | -------------- | ---------- | ----------- | ------------------------------------------------------- |
187
+ | `fixtureFn` | `function` | _Required_ | Method that generates and returns a single data object. |
188
188
 
189
189
  **Returns**
190
190
 
@@ -206,25 +206,30 @@ When calling the returned function, you'll get an array OR object of fixture dat
206
206
  Quick example:
207
207
 
208
208
  ```ts
209
- const generateInvoice = (overrides) => ({ id: uuid(), balance: 15799, classification: "Adult Use", ...overrides});
209
+ const generateInvoice = (overrides) => ({
210
+ id: uuid(),
211
+ balance: 15799,
212
+ classification: 'Adult Use',
213
+ ...overrides,
214
+ });
210
215
  const generateInvoices = createFixtureGenerator(generateInvoice);
211
216
 
212
- generateInvoices()
217
+ generateInvoices();
213
218
  // => Single invoice object
214
219
 
215
- generateInvoices(1)
220
+ generateInvoices(1);
216
221
  // => Single invoice object
217
222
 
218
- generateInvoices(1, { foo: 'bar' })
223
+ generateInvoices(1, { foo: 'bar' });
219
224
  // => Single invoice object, override `foo` to equal `'bar'`
220
225
 
221
- generateInvoices({ foo: 'bar' })
226
+ generateInvoices({ foo: 'bar' });
222
227
  // => Single invoice object, override `foo` to equal `'bar'`
223
228
 
224
- generateInvoices(10)
229
+ generateInvoices(10);
225
230
  // => Array of 10 invoice objects
226
231
 
227
- generateInvoices(10, { foo: 'bar' })
232
+ generateInvoices(10, { foo: 'bar' });
228
233
  // => Array of 10 invoice objects, override `foo` to equal `'bar'` in each
229
234
  ```
230
235
 
@@ -249,7 +254,7 @@ export default createFixtureGenerator(generateProduct);
249
254
  import generateProducts from '@/tests/fixtures/products';
250
255
 
251
256
  // ...
252
- const mockProducts = generateProducts(10, { cases: 25 })
257
+ const mockProducts = generateProducts(10, { cases: 25 });
253
258
  // ...
254
259
  ```
255
260
 
@@ -270,20 +275,24 @@ const {
270
275
  ```
271
276
 
272
277
  There are two flavors of mocking utility functions:
278
+
273
279
  1. mock{VERB}Data - mocks response with a singular data object
274
280
  2. mock{VERB}Endpoint - mocks a response endpoint with a function like msw's [Response Resolver](https://mswjs.io/docs/getting-started/mocks/rest-api#response-resolver)
275
281
 
276
282
  To mock an endpoint with simple return data
283
+
277
284
  ```ts
278
- mockGetData('/relative-url', myMockObj);
285
+ mockGetData('/relative-url', myMockObj);
279
286
  ```
287
+
280
288
  or you can customize the response
289
+
281
290
  ```ts
282
- mockGetEndpoint('/relative-url', (req, res, ctx) => {
283
- if (someConditional()) {
284
- HttpResponse.json({ foo: 'bar' });
285
- } else {
286
- HttpResponse.json({ foo: 'baz' });
287
- }
288
- });
291
+ mockGetEndpoint('/relative-url', (req, res, ctx) => {
292
+ if (someConditional()) {
293
+ HttpResponse.json({ foo: 'bar' });
294
+ } else {
295
+ HttpResponse.json({ foo: 'baz' });
296
+ }
297
+ });
289
298
  ```
package/dist/mocks/IntersectionObserverMock.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- export interface IntersectionObserverMock extends IntersectionObserver {
1
+ export interface IntersectionObserverMockInterface extends IntersectionObserver {
2
2
  target: Element | null;
3
3
  scrollCallback: IntersectionObserverCallback;
4
4
  onScroll(e: Event): void;
5
5
  }
6
- export declare class IntersectionObserverMock implements IntersectionObserverMock {
6
+ export declare class IntersectionObserverMock implements IntersectionObserverMockInterface {
7
7
  root: IntersectionObserver['root'];
8
8
  rootMargin: IntersectionObserver['rootMargin'];
9
9
  thresholds: IntersectionObserver['thresholds'];
@@ -13,6 +13,7 @@ export declare class IntersectionObserverMock implements IntersectionObserverMoc
13
13
  takeRecords: IntersectionObserver['takeRecords'];
14
14
  unobserve: IntersectionObserver['unobserve'];
15
15
  scrollCallback: IntersectionObserverCallback;
16
+ onScroll(e: Event): void;
16
17
  constructor(callback: IntersectionObserverCallback);
17
18
  }
18
19
  export declare function mockIntersectionObserver(): void;
package/dist/setup-env.spec.js CHANGED
@@ -13,10 +13,10 @@ it('should stub fetch method', async () => {
13
13
  await fetch(url);
14
14
  expect(fetchSpy).toHaveBeenCalledWith(url);
15
15
  });
16
- it.each([['disconnect'], ['observe'], ['takeRecords'], ['unobserve']])('should stub intersection observer %s method', (method) => {
16
+ it.each(['disconnect', 'observe', 'takeRecords', 'unobserve'])('should stub intersection observer %s method', (method) => {
17
17
  const observer = new globalThis.IntersectionObserver(() => ({}), {});
18
18
  const methodSpy = vi.spyOn(observer, method);
19
- observer[method]();
19
+ observer[method](document.createElement('div'));
20
20
  expect(methodSpy).toHaveBeenCalled();
21
21
  });
22
22
  //# sourceMappingURL=setup-env.spec.js.map
package/dist/setup-env.spec.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"setup-env.spec.js","sourceRoot":"src/","sources":["setup-env.spec.ts"],"names":[],"mappings":";AAAA,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;IACxC,MAAM,GAAG,GAAG,QAAQ,CAAC;IAErB,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEzC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAEvC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjB,MAAM,CAAC,OAAO,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC5C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,GAAG,GAAG,QAAQ,CAAC;IAErB,MAAM,QAAQ,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAE/C,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAExC,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CACpE,6CAA6C,EAC7C,CAAC,MAAW,EAAE,EAAE;IACd,MAAM,QAAQ,GAAG,IAAI,UAAU,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAE7C,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;IAEnB,MAAM,CAAC,SAAS,CAAC,CAAC,gBAAgB,EAAE,CAAC;AACvC,CAAC,CACF,CAAC"}
1
+ {"version":3,"file":"setup-env.spec.js","sourceRoot":"src/","sources":["setup-env.spec.ts"],"names":[],"mappings":";AAAA,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;IACxC,MAAM,GAAG,GAAG,QAAQ,CAAC;IAErB,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEzC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAEvC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjB,MAAM,CAAC,OAAO,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC5C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,GAAG,GAAG,QAAQ,CAAC;IAErB,MAAM,QAAQ,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAE/C,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAExC,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,IAAI,CAAyD,CAAC,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CACpH,6CAA6C,EAC7C,CAAC,MAA8D,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,IAAI,UAAU,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAE7C,QAAQ,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhD,MAAM,CAAC,SAAS,CAAC,CAAC,gBAAgB,EAAE,CAAC;AACvC,CAAC,CACF,CAAC"}
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@leaflink/dom-testing-utils",
3
- "version": "5.2.2",
3
+ "version": "5.3.0",
4
4
  "description": "Frontend DOM testing utilities",
5
+ "packageManager": "pnpm@10.12.2",
5
6
  "engines": {
6
- "node": ">=18",
7
- "npm": ">=8"
7
+ "node": ">=24",
8
+ "pnpm": ">=10"
8
9
  },
9
10
  "exports": {
10
11
  ".": {
@@ -33,7 +34,7 @@
33
34
  ],
34
35
  "scripts": {
35
36
  "build": "tsc",
36
- "fix": "npm run lint -- --fix",
37
+ "fix": "pnpm lint --fix",
37
38
  "lint": "eslint .",
38
39
  "lint:commits": "commitlint",
39
40
  "test": "vitest --reporter verbose"
@@ -43,15 +44,17 @@
43
44
  "msw": "^2.7.3"
44
45
  },
45
46
  "devDependencies": {
47
+ "@leaflink/eslint-config": "^4.4.2",
46
48
  "@vitest/coverage-v8": "^3.0.9",
47
- "eslint": "^8.49.0",
48
- "eslint-config-leaflink": "^3.5.0",
49
+ "commitlint": "^20.3.1",
50
+ "eslint": "^9.39.2",
49
51
  "jsdom": "^22.1.0",
50
52
  "typescript": "^5.8.2",
51
53
  "vite": "^6.2.2",
52
54
  "vitest": "^3.0.9"
53
55
  },
54
56
  "peerDependencies": {
57
+ "@testing-library/dom": "^7 || ^8 || ^9 || ^10",
55
58
  "@testing-library/jest-dom": "^5 || ^6",
56
59
  "@testing-library/user-event": "^12 || ^13 || ^14",
57
60
  "@testing-library/vue": "^7 || ^8",
@@ -62,5 +65,10 @@
62
65
  "extends": [
63
66
  "leaflink"
64
67
  ]
68
+ },
69
+ "commitlint": {
70
+ "extends": [
71
+ "@leaflink/eslint-config/commitlint"
72
+ ]
65
73
  }
66
74
  }