@react-aria/test-utils 1.0.0-alpha.3 → 1.0.0-alpha.5
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.
- package/dist/combobox.main.js +116 -82
- package/dist/combobox.main.js.map +1 -1
- package/dist/combobox.mjs +117 -83
- package/dist/combobox.module.js +117 -83
- package/dist/combobox.module.js.map +1 -1
- package/dist/events.main.js +42 -4
- package/dist/events.main.js.map +1 -1
- package/dist/events.mjs +42 -4
- package/dist/events.module.js +42 -4
- package/dist/events.module.js.map +1 -1
- package/dist/gridlist.main.js +102 -59
- package/dist/gridlist.main.js.map +1 -1
- package/dist/gridlist.mjs +103 -60
- package/dist/gridlist.module.js +103 -60
- package/dist/gridlist.module.js.map +1 -1
- package/dist/listbox.main.js +135 -0
- package/dist/listbox.main.js.map +1 -0
- package/dist/listbox.mjs +130 -0
- package/dist/listbox.module.js +130 -0
- package/dist/listbox.module.js.map +1 -0
- package/dist/main.js.map +1 -1
- package/dist/menu.main.js +195 -161
- package/dist/menu.main.js.map +1 -1
- package/dist/menu.mjs +196 -162
- package/dist/menu.module.js +196 -162
- package/dist/menu.module.js.map +1 -1
- package/dist/module.js.map +1 -1
- package/dist/select.main.js +116 -70
- package/dist/select.main.js.map +1 -1
- package/dist/select.mjs +117 -71
- package/dist/select.module.js +117 -71
- package/dist/select.module.js.map +1 -1
- package/dist/table.main.js +166 -139
- package/dist/table.main.js.map +1 -1
- package/dist/table.mjs +167 -140
- package/dist/table.module.js +167 -140
- package/dist/table.module.js.map +1 -1
- package/dist/tabs.main.js +133 -0
- package/dist/tabs.main.js.map +1 -0
- package/dist/tabs.mjs +128 -0
- package/dist/tabs.module.js +128 -0
- package/dist/tabs.module.js.map +1 -0
- package/dist/tree.main.js +165 -0
- package/dist/tree.main.js.map +1 -0
- package/dist/tree.mjs +160 -0
- package/dist/tree.module.js +160 -0
- package/dist/tree.module.js.map +1 -0
- package/dist/types.d.ts +607 -145
- package/dist/types.d.ts.map +1 -1
- package/dist/user.main.js +15 -4
- package/dist/user.main.js.map +1 -1
- package/dist/user.mjs +15 -4
- package/dist/user.module.js +15 -4
- package/dist/user.module.js.map +1 -1
- package/package.json +3 -4
- package/src/combobox.ts +105 -36
- package/src/events.ts +29 -4
- package/src/gridlist.ts +146 -59
- package/src/index.ts +1 -1
- package/src/listbox.ts +226 -0
- package/src/menu.ts +152 -62
- package/src/select.ts +137 -44
- package/src/table.ts +130 -69
- package/src/tabs.ts +198 -0
- package/src/tree.ts +248 -0
- package/src/types.ts +133 -0
- package/src/user.ts +62 -37
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
var $5a8bfe1663b8366d$exports = require("./events.main.js");
|
|
2
|
+
var $bAxU9$testinglibraryreact = require("@testing-library/react");
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
function $parcel$export(e, n, v, s) {
|
|
6
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
$parcel$export(module.exports, "ListBoxTester", () => $8ac94de7d2631d04$export$54c24f7ee8577f4f);
|
|
10
|
+
/*
|
|
11
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
12
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
+
*
|
|
16
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
+
* governing permissions and limitations under the License.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
class $8ac94de7d2631d04$export$54c24f7ee8577f4f {
|
|
23
|
+
/**
|
|
24
|
+
* Set the interaction type used by the listbox tester.
|
|
25
|
+
*/ setInteractionType(type) {
|
|
26
|
+
this._interactionType = type;
|
|
27
|
+
}
|
|
28
|
+
// TODO: now that we have listbox, perhaps select can make use of this tester internally
|
|
29
|
+
/**
|
|
30
|
+
* Returns a option matching the specified index or text content.
|
|
31
|
+
*/ findOption(opts) {
|
|
32
|
+
let { optionIndexOrText: optionIndexOrText } = opts;
|
|
33
|
+
let option;
|
|
34
|
+
let options = this.options();
|
|
35
|
+
if (typeof optionIndexOrText === 'number') option = options[optionIndexOrText];
|
|
36
|
+
else if (typeof optionIndexOrText === 'string') option = (0, $bAxU9$testinglibraryreact.within)(this.listbox).getByText(optionIndexOrText).closest('[role=option]');
|
|
37
|
+
return option;
|
|
38
|
+
}
|
|
39
|
+
// TODO: this is basically the same as menu except for the error message, refactor later so that they share
|
|
40
|
+
// TODO: this also doesn't support grid layout yet
|
|
41
|
+
async keyboardNavigateToOption(opts) {
|
|
42
|
+
var _document_activeElement;
|
|
43
|
+
let { option: option } = opts;
|
|
44
|
+
let options = this.options();
|
|
45
|
+
let targetIndex = options.indexOf(option);
|
|
46
|
+
if (targetIndex === -1) throw new Error('Option provided is not in the listbox');
|
|
47
|
+
if (document.activeElement === this._listbox) await this.user.keyboard('[ArrowDown]');
|
|
48
|
+
// TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
|
|
49
|
+
// feels like it could break easily
|
|
50
|
+
if (((_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getAttribute('role')) !== 'option') await (0, $bAxU9$testinglibraryreact.act)(async ()=>{
|
|
51
|
+
option.focus();
|
|
52
|
+
});
|
|
53
|
+
let currIndex = options.indexOf(document.activeElement);
|
|
54
|
+
if (currIndex === -1) throw new Error('ActiveElement is not in the listbox');
|
|
55
|
+
let direction = targetIndex > currIndex ? 'down' : 'up';
|
|
56
|
+
for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
|
|
60
|
+
*/ async toggleOptionSelection(opts) {
|
|
61
|
+
let { option: option, needsLongPress: needsLongPress, keyboardActivation: keyboardActivation = 'Enter', interactionType: interactionType = this._interactionType } = opts;
|
|
62
|
+
if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
|
|
63
|
+
optionIndexOrText: option
|
|
64
|
+
});
|
|
65
|
+
if (!option) throw new Error('Target option not found in the listbox.');
|
|
66
|
+
if (interactionType === 'keyboard') {
|
|
67
|
+
if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
|
|
68
|
+
if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $bAxU9$testinglibraryreact.act)(()=>this._listbox.focus());
|
|
69
|
+
await this.keyboardNavigateToOption({
|
|
70
|
+
option: option
|
|
71
|
+
});
|
|
72
|
+
await this.user.keyboard(`[${keyboardActivation}]`);
|
|
73
|
+
} else if (needsLongPress && interactionType === 'touch') {
|
|
74
|
+
if (this._advanceTimer == null) throw new Error('No advanceTimers provided for long press.');
|
|
75
|
+
await (0, $5a8bfe1663b8366d$exports.triggerLongPress)({
|
|
76
|
+
element: option,
|
|
77
|
+
advanceTimer: this._advanceTimer,
|
|
78
|
+
pointerOpts: {
|
|
79
|
+
pointerType: 'touch'
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
} else await (0, $5a8bfe1663b8366d$exports.pressElement)(this.user, option, interactionType);
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
|
|
86
|
+
*/ async triggerOptionAction(opts) {
|
|
87
|
+
let { option: option, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
|
|
88
|
+
if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
|
|
89
|
+
optionIndexOrText: option
|
|
90
|
+
});
|
|
91
|
+
if (!option) throw new Error('Target option not found in the listbox.');
|
|
92
|
+
if (needsDoubleClick) await this.user.dblClick(option);
|
|
93
|
+
else if (interactionType === 'keyboard') {
|
|
94
|
+
if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
|
|
95
|
+
if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $bAxU9$testinglibraryreact.act)(()=>this._listbox.focus());
|
|
96
|
+
await this.keyboardNavigateToOption({
|
|
97
|
+
option: option
|
|
98
|
+
});
|
|
99
|
+
await this.user.keyboard('[Enter]');
|
|
100
|
+
} else await (0, $5a8bfe1663b8366d$exports.pressElement)(this.user, option, interactionType);
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Returns the listbox.
|
|
104
|
+
*/ get listbox() {
|
|
105
|
+
return this._listbox;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.
|
|
109
|
+
*/ options(opts = {}) {
|
|
110
|
+
let { element: element = this._listbox } = opts;
|
|
111
|
+
let options = [];
|
|
112
|
+
if (element) options = (0, $bAxU9$testinglibraryreact.within)(element).queryAllByRole('option');
|
|
113
|
+
return options;
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Returns the listbox's selected options if any.
|
|
117
|
+
*/ get selectedOptions() {
|
|
118
|
+
return this.options().filter((row)=>row.getAttribute('aria-selected') === 'true');
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Returns the listbox's sections if any.
|
|
122
|
+
*/ get sections() {
|
|
123
|
+
return (0, $bAxU9$testinglibraryreact.within)(this._listbox).queryAllByRole('group');
|
|
124
|
+
}
|
|
125
|
+
constructor(opts){
|
|
126
|
+
let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer } = opts;
|
|
127
|
+
this.user = user;
|
|
128
|
+
this._interactionType = interactionType || 'mouse';
|
|
129
|
+
this._listbox = root;
|
|
130
|
+
this._advanceTimer = advanceTimer;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
//# sourceMappingURL=listbox.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/test-utils/src/listbox.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {act, within} from '@testing-library/react';\nimport {ListBoxTesterOpts, UserOpts} from './types';\nimport {pressElement, triggerLongPress} from './events';\n\ninterface ListBoxToggleOptionOpts {\n /**\n * What interaction type to use when toggling selection for an option. Defaults to the interaction type set on the tester.\n */\n interactionType?: UserOpts['interactionType'],\n /**\n * The index, text, or node of the option to toggle selection for.\n */\n option: number | string | HTMLElement,\n /**\n * Whether the option should be triggered by Space or Enter in keyboard modality.\n * @default 'Enter'\n */\n keyboardActivation?: 'Space' | 'Enter',\n /**\n * Whether the option needs to be long pressed to be selected. Depends on the listbox's implementation.\n */\n needsLongPress?: boolean\n}\n\ninterface ListBoxOptionActionOpts extends Omit<ListBoxToggleOptionOpts, 'keyboardActivation' | 'needsLongPress'> {\n /**\n * Whether or not the option needs a double click to trigger the option action. Depends on the listbox's implementation.\n */\n needsDoubleClick?: boolean\n}\n\nexport class ListBoxTester {\n private user;\n private _interactionType: UserOpts['interactionType'];\n private _advanceTimer: UserOpts['advanceTimer'];\n private _listbox: HTMLElement;\n\n constructor(opts: ListBoxTesterOpts) {\n let {root, user, interactionType, advanceTimer} = opts;\n this.user = user;\n this._interactionType = interactionType || 'mouse';\n this._listbox = root;\n this._advanceTimer = advanceTimer;\n }\n\n /**\n * Set the interaction type used by the listbox tester.\n */\n setInteractionType(type: UserOpts['interactionType']) {\n this._interactionType = type;\n }\n\n // TODO: now that we have listbox, perhaps select can make use of this tester internally\n /**\n * Returns a option matching the specified index or text content.\n */\n findOption(opts: {optionIndexOrText: number | string}): HTMLElement {\n let {\n optionIndexOrText\n } = opts;\n\n let option;\n let options = this.options();\n\n if (typeof optionIndexOrText === 'number') {\n option = options[optionIndexOrText];\n } else if (typeof optionIndexOrText === 'string') {\n option = (within(this.listbox!).getByText(optionIndexOrText).closest('[role=option]'))! as HTMLElement;\n }\n\n return option;\n }\n\n // TODO: this is basically the same as menu except for the error message, refactor later so that they share\n // TODO: this also doesn't support grid layout yet\n private async keyboardNavigateToOption(opts: {option: HTMLElement}) {\n let {option} = opts;\n let options = this.options();\n let targetIndex = options.indexOf(option);\n if (targetIndex === -1) {\n throw new Error('Option provided is not in the listbox');\n }\n\n if (document.activeElement === this._listbox) {\n await this.user.keyboard('[ArrowDown]');\n }\n\n // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,\n // feels like it could break easily\n if (document.activeElement?.getAttribute('role') !== 'option') {\n await act(async () => {\n option.focus();\n });\n }\n\n let currIndex = options.indexOf(document.activeElement as HTMLElement);\n if (currIndex === -1) {\n throw new Error('ActiveElement is not in the listbox');\n }\n let direction = targetIndex > currIndex ? 'down' : 'up';\n\n for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {\n await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);\n }\n };\n\n /**\n * Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.\n */\n async toggleOptionSelection(opts: ListBoxToggleOptionOpts) {\n let {option, needsLongPress, keyboardActivation = 'Enter', interactionType = this._interactionType} = opts;\n\n if (typeof option === 'string' || typeof option === 'number') {\n option = this.findOption({optionIndexOrText: option});\n }\n\n if (!option) {\n throw new Error('Target option not found in the listbox.');\n }\n\n if (interactionType === 'keyboard') {\n if (option?.getAttribute('aria-disabled') === 'true') {\n return;\n }\n\n if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {\n act(() => this._listbox.focus());\n }\n\n await this.keyboardNavigateToOption({option});\n await this.user.keyboard(`[${keyboardActivation}]`);\n } else {\n if (needsLongPress && interactionType === 'touch') {\n if (this._advanceTimer == null) {\n throw new Error('No advanceTimers provided for long press.');\n }\n\n await triggerLongPress({element: option, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});\n } else {\n await pressElement(this.user, option, interactionType);\n }\n }\n }\n\n /**\n * Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.\n */\n async triggerOptionAction(opts: ListBoxOptionActionOpts) {\n let {\n option,\n needsDoubleClick,\n interactionType = this._interactionType\n } = opts;\n\n if (typeof option === 'string' || typeof option === 'number') {\n option = this.findOption({optionIndexOrText: option});\n }\n\n if (!option) {\n throw new Error('Target option not found in the listbox.');\n }\n\n if (needsDoubleClick) {\n await this.user.dblClick(option);\n } else if (interactionType === 'keyboard') {\n if (option?.getAttribute('aria-disabled') === 'true') {\n return;\n }\n\n if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {\n act(() => this._listbox.focus());\n }\n\n await this.keyboardNavigateToOption({option});\n await this.user.keyboard('[Enter]');\n } else {\n await pressElement(this.user, option, interactionType);\n }\n }\n\n /**\n * Returns the listbox.\n */\n get listbox(): HTMLElement {\n return this._listbox;\n }\n\n /**\n * Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.\n */\n options(opts: {element?: HTMLElement} = {}): HTMLElement[] {\n let {element = this._listbox} = opts;\n let options = [];\n if (element) {\n options = within(element).queryAllByRole('option');\n }\n\n return options;\n }\n\n /**\n * Returns the listbox's selected options if any.\n */\n get selectedOptions(): HTMLElement[] {\n return this.options().filter(row => row.getAttribute('aria-selected') === 'true');\n }\n\n /**\n * Returns the listbox's sections if any.\n */\n get sections(): HTMLElement[] {\n return within(this._listbox).queryAllByRole('group');\n }\n}\n"],"names":[],"version":3,"file":"listbox.main.js.map"}
|
package/dist/listbox.mjs
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import {pressElement as $5d1eca18f92ad0e6$export$6ffa3eb717517feb, triggerLongPress as $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b} from "./events.mjs";
|
|
2
|
+
import {within as $fzAUL$within, act as $fzAUL$act} from "@testing-library/react";
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
6
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
8
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13
|
+
* governing permissions and limitations under the License.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
class $bbf72b714b632b99$export$54c24f7ee8577f4f {
|
|
17
|
+
/**
|
|
18
|
+
* Set the interaction type used by the listbox tester.
|
|
19
|
+
*/ setInteractionType(type) {
|
|
20
|
+
this._interactionType = type;
|
|
21
|
+
}
|
|
22
|
+
// TODO: now that we have listbox, perhaps select can make use of this tester internally
|
|
23
|
+
/**
|
|
24
|
+
* Returns a option matching the specified index or text content.
|
|
25
|
+
*/ findOption(opts) {
|
|
26
|
+
let { optionIndexOrText: optionIndexOrText } = opts;
|
|
27
|
+
let option;
|
|
28
|
+
let options = this.options();
|
|
29
|
+
if (typeof optionIndexOrText === 'number') option = options[optionIndexOrText];
|
|
30
|
+
else if (typeof optionIndexOrText === 'string') option = (0, $fzAUL$within)(this.listbox).getByText(optionIndexOrText).closest('[role=option]');
|
|
31
|
+
return option;
|
|
32
|
+
}
|
|
33
|
+
// TODO: this is basically the same as menu except for the error message, refactor later so that they share
|
|
34
|
+
// TODO: this also doesn't support grid layout yet
|
|
35
|
+
async keyboardNavigateToOption(opts) {
|
|
36
|
+
var _document_activeElement;
|
|
37
|
+
let { option: option } = opts;
|
|
38
|
+
let options = this.options();
|
|
39
|
+
let targetIndex = options.indexOf(option);
|
|
40
|
+
if (targetIndex === -1) throw new Error('Option provided is not in the listbox');
|
|
41
|
+
if (document.activeElement === this._listbox) await this.user.keyboard('[ArrowDown]');
|
|
42
|
+
// TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
|
|
43
|
+
// feels like it could break easily
|
|
44
|
+
if (((_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getAttribute('role')) !== 'option') await (0, $fzAUL$act)(async ()=>{
|
|
45
|
+
option.focus();
|
|
46
|
+
});
|
|
47
|
+
let currIndex = options.indexOf(document.activeElement);
|
|
48
|
+
if (currIndex === -1) throw new Error('ActiveElement is not in the listbox');
|
|
49
|
+
let direction = targetIndex > currIndex ? 'down' : 'up';
|
|
50
|
+
for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
|
|
54
|
+
*/ async toggleOptionSelection(opts) {
|
|
55
|
+
let { option: option, needsLongPress: needsLongPress, keyboardActivation: keyboardActivation = 'Enter', interactionType: interactionType = this._interactionType } = opts;
|
|
56
|
+
if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
|
|
57
|
+
optionIndexOrText: option
|
|
58
|
+
});
|
|
59
|
+
if (!option) throw new Error('Target option not found in the listbox.');
|
|
60
|
+
if (interactionType === 'keyboard') {
|
|
61
|
+
if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
|
|
62
|
+
if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $fzAUL$act)(()=>this._listbox.focus());
|
|
63
|
+
await this.keyboardNavigateToOption({
|
|
64
|
+
option: option
|
|
65
|
+
});
|
|
66
|
+
await this.user.keyboard(`[${keyboardActivation}]`);
|
|
67
|
+
} else if (needsLongPress && interactionType === 'touch') {
|
|
68
|
+
if (this._advanceTimer == null) throw new Error('No advanceTimers provided for long press.');
|
|
69
|
+
await (0, $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b)({
|
|
70
|
+
element: option,
|
|
71
|
+
advanceTimer: this._advanceTimer,
|
|
72
|
+
pointerOpts: {
|
|
73
|
+
pointerType: 'touch'
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
} else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, option, interactionType);
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
|
|
80
|
+
*/ async triggerOptionAction(opts) {
|
|
81
|
+
let { option: option, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
|
|
82
|
+
if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
|
|
83
|
+
optionIndexOrText: option
|
|
84
|
+
});
|
|
85
|
+
if (!option) throw new Error('Target option not found in the listbox.');
|
|
86
|
+
if (needsDoubleClick) await this.user.dblClick(option);
|
|
87
|
+
else if (interactionType === 'keyboard') {
|
|
88
|
+
if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
|
|
89
|
+
if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $fzAUL$act)(()=>this._listbox.focus());
|
|
90
|
+
await this.keyboardNavigateToOption({
|
|
91
|
+
option: option
|
|
92
|
+
});
|
|
93
|
+
await this.user.keyboard('[Enter]');
|
|
94
|
+
} else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, option, interactionType);
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Returns the listbox.
|
|
98
|
+
*/ get listbox() {
|
|
99
|
+
return this._listbox;
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.
|
|
103
|
+
*/ options(opts = {}) {
|
|
104
|
+
let { element: element = this._listbox } = opts;
|
|
105
|
+
let options = [];
|
|
106
|
+
if (element) options = (0, $fzAUL$within)(element).queryAllByRole('option');
|
|
107
|
+
return options;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Returns the listbox's selected options if any.
|
|
111
|
+
*/ get selectedOptions() {
|
|
112
|
+
return this.options().filter((row)=>row.getAttribute('aria-selected') === 'true');
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Returns the listbox's sections if any.
|
|
116
|
+
*/ get sections() {
|
|
117
|
+
return (0, $fzAUL$within)(this._listbox).queryAllByRole('group');
|
|
118
|
+
}
|
|
119
|
+
constructor(opts){
|
|
120
|
+
let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer } = opts;
|
|
121
|
+
this.user = user;
|
|
122
|
+
this._interactionType = interactionType || 'mouse';
|
|
123
|
+
this._listbox = root;
|
|
124
|
+
this._advanceTimer = advanceTimer;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
export {$bbf72b714b632b99$export$54c24f7ee8577f4f as ListBoxTester};
|
|
130
|
+
//# sourceMappingURL=listbox.module.js.map
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import {pressElement as $5d1eca18f92ad0e6$export$6ffa3eb717517feb, triggerLongPress as $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b} from "./events.module.js";
|
|
2
|
+
import {within as $fzAUL$within, act as $fzAUL$act} from "@testing-library/react";
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
6
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
8
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13
|
+
* governing permissions and limitations under the License.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
class $bbf72b714b632b99$export$54c24f7ee8577f4f {
|
|
17
|
+
/**
|
|
18
|
+
* Set the interaction type used by the listbox tester.
|
|
19
|
+
*/ setInteractionType(type) {
|
|
20
|
+
this._interactionType = type;
|
|
21
|
+
}
|
|
22
|
+
// TODO: now that we have listbox, perhaps select can make use of this tester internally
|
|
23
|
+
/**
|
|
24
|
+
* Returns a option matching the specified index or text content.
|
|
25
|
+
*/ findOption(opts) {
|
|
26
|
+
let { optionIndexOrText: optionIndexOrText } = opts;
|
|
27
|
+
let option;
|
|
28
|
+
let options = this.options();
|
|
29
|
+
if (typeof optionIndexOrText === 'number') option = options[optionIndexOrText];
|
|
30
|
+
else if (typeof optionIndexOrText === 'string') option = (0, $fzAUL$within)(this.listbox).getByText(optionIndexOrText).closest('[role=option]');
|
|
31
|
+
return option;
|
|
32
|
+
}
|
|
33
|
+
// TODO: this is basically the same as menu except for the error message, refactor later so that they share
|
|
34
|
+
// TODO: this also doesn't support grid layout yet
|
|
35
|
+
async keyboardNavigateToOption(opts) {
|
|
36
|
+
var _document_activeElement;
|
|
37
|
+
let { option: option } = opts;
|
|
38
|
+
let options = this.options();
|
|
39
|
+
let targetIndex = options.indexOf(option);
|
|
40
|
+
if (targetIndex === -1) throw new Error('Option provided is not in the listbox');
|
|
41
|
+
if (document.activeElement === this._listbox) await this.user.keyboard('[ArrowDown]');
|
|
42
|
+
// TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
|
|
43
|
+
// feels like it could break easily
|
|
44
|
+
if (((_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getAttribute('role')) !== 'option') await (0, $fzAUL$act)(async ()=>{
|
|
45
|
+
option.focus();
|
|
46
|
+
});
|
|
47
|
+
let currIndex = options.indexOf(document.activeElement);
|
|
48
|
+
if (currIndex === -1) throw new Error('ActiveElement is not in the listbox');
|
|
49
|
+
let direction = targetIndex > currIndex ? 'down' : 'up';
|
|
50
|
+
for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
|
|
54
|
+
*/ async toggleOptionSelection(opts) {
|
|
55
|
+
let { option: option, needsLongPress: needsLongPress, keyboardActivation: keyboardActivation = 'Enter', interactionType: interactionType = this._interactionType } = opts;
|
|
56
|
+
if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
|
|
57
|
+
optionIndexOrText: option
|
|
58
|
+
});
|
|
59
|
+
if (!option) throw new Error('Target option not found in the listbox.');
|
|
60
|
+
if (interactionType === 'keyboard') {
|
|
61
|
+
if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
|
|
62
|
+
if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $fzAUL$act)(()=>this._listbox.focus());
|
|
63
|
+
await this.keyboardNavigateToOption({
|
|
64
|
+
option: option
|
|
65
|
+
});
|
|
66
|
+
await this.user.keyboard(`[${keyboardActivation}]`);
|
|
67
|
+
} else if (needsLongPress && interactionType === 'touch') {
|
|
68
|
+
if (this._advanceTimer == null) throw new Error('No advanceTimers provided for long press.');
|
|
69
|
+
await (0, $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b)({
|
|
70
|
+
element: option,
|
|
71
|
+
advanceTimer: this._advanceTimer,
|
|
72
|
+
pointerOpts: {
|
|
73
|
+
pointerType: 'touch'
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
} else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, option, interactionType);
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
|
|
80
|
+
*/ async triggerOptionAction(opts) {
|
|
81
|
+
let { option: option, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
|
|
82
|
+
if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
|
|
83
|
+
optionIndexOrText: option
|
|
84
|
+
});
|
|
85
|
+
if (!option) throw new Error('Target option not found in the listbox.');
|
|
86
|
+
if (needsDoubleClick) await this.user.dblClick(option);
|
|
87
|
+
else if (interactionType === 'keyboard') {
|
|
88
|
+
if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
|
|
89
|
+
if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $fzAUL$act)(()=>this._listbox.focus());
|
|
90
|
+
await this.keyboardNavigateToOption({
|
|
91
|
+
option: option
|
|
92
|
+
});
|
|
93
|
+
await this.user.keyboard('[Enter]');
|
|
94
|
+
} else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, option, interactionType);
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Returns the listbox.
|
|
98
|
+
*/ get listbox() {
|
|
99
|
+
return this._listbox;
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.
|
|
103
|
+
*/ options(opts = {}) {
|
|
104
|
+
let { element: element = this._listbox } = opts;
|
|
105
|
+
let options = [];
|
|
106
|
+
if (element) options = (0, $fzAUL$within)(element).queryAllByRole('option');
|
|
107
|
+
return options;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Returns the listbox's selected options if any.
|
|
111
|
+
*/ get selectedOptions() {
|
|
112
|
+
return this.options().filter((row)=>row.getAttribute('aria-selected') === 'true');
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Returns the listbox's sections if any.
|
|
116
|
+
*/ get sections() {
|
|
117
|
+
return (0, $fzAUL$within)(this._listbox).queryAllByRole('group');
|
|
118
|
+
}
|
|
119
|
+
constructor(opts){
|
|
120
|
+
let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer } = opts;
|
|
121
|
+
this.user = user;
|
|
122
|
+
this._interactionType = interactionType || 'mouse';
|
|
123
|
+
this._listbox = root;
|
|
124
|
+
this._advanceTimer = advanceTimer;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
export {$bbf72b714b632b99$export$54c24f7ee8577f4f as ListBoxTester};
|
|
130
|
+
//# sourceMappingURL=listbox.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/test-utils/src/listbox.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {act, within} from '@testing-library/react';\nimport {ListBoxTesterOpts, UserOpts} from './types';\nimport {pressElement, triggerLongPress} from './events';\n\ninterface ListBoxToggleOptionOpts {\n /**\n * What interaction type to use when toggling selection for an option. Defaults to the interaction type set on the tester.\n */\n interactionType?: UserOpts['interactionType'],\n /**\n * The index, text, or node of the option to toggle selection for.\n */\n option: number | string | HTMLElement,\n /**\n * Whether the option should be triggered by Space or Enter in keyboard modality.\n * @default 'Enter'\n */\n keyboardActivation?: 'Space' | 'Enter',\n /**\n * Whether the option needs to be long pressed to be selected. Depends on the listbox's implementation.\n */\n needsLongPress?: boolean\n}\n\ninterface ListBoxOptionActionOpts extends Omit<ListBoxToggleOptionOpts, 'keyboardActivation' | 'needsLongPress'> {\n /**\n * Whether or not the option needs a double click to trigger the option action. Depends on the listbox's implementation.\n */\n needsDoubleClick?: boolean\n}\n\nexport class ListBoxTester {\n private user;\n private _interactionType: UserOpts['interactionType'];\n private _advanceTimer: UserOpts['advanceTimer'];\n private _listbox: HTMLElement;\n\n constructor(opts: ListBoxTesterOpts) {\n let {root, user, interactionType, advanceTimer} = opts;\n this.user = user;\n this._interactionType = interactionType || 'mouse';\n this._listbox = root;\n this._advanceTimer = advanceTimer;\n }\n\n /**\n * Set the interaction type used by the listbox tester.\n */\n setInteractionType(type: UserOpts['interactionType']) {\n this._interactionType = type;\n }\n\n // TODO: now that we have listbox, perhaps select can make use of this tester internally\n /**\n * Returns a option matching the specified index or text content.\n */\n findOption(opts: {optionIndexOrText: number | string}): HTMLElement {\n let {\n optionIndexOrText\n } = opts;\n\n let option;\n let options = this.options();\n\n if (typeof optionIndexOrText === 'number') {\n option = options[optionIndexOrText];\n } else if (typeof optionIndexOrText === 'string') {\n option = (within(this.listbox!).getByText(optionIndexOrText).closest('[role=option]'))! as HTMLElement;\n }\n\n return option;\n }\n\n // TODO: this is basically the same as menu except for the error message, refactor later so that they share\n // TODO: this also doesn't support grid layout yet\n private async keyboardNavigateToOption(opts: {option: HTMLElement}) {\n let {option} = opts;\n let options = this.options();\n let targetIndex = options.indexOf(option);\n if (targetIndex === -1) {\n throw new Error('Option provided is not in the listbox');\n }\n\n if (document.activeElement === this._listbox) {\n await this.user.keyboard('[ArrowDown]');\n }\n\n // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,\n // feels like it could break easily\n if (document.activeElement?.getAttribute('role') !== 'option') {\n await act(async () => {\n option.focus();\n });\n }\n\n let currIndex = options.indexOf(document.activeElement as HTMLElement);\n if (currIndex === -1) {\n throw new Error('ActiveElement is not in the listbox');\n }\n let direction = targetIndex > currIndex ? 'down' : 'up';\n\n for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {\n await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);\n }\n };\n\n /**\n * Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.\n */\n async toggleOptionSelection(opts: ListBoxToggleOptionOpts) {\n let {option, needsLongPress, keyboardActivation = 'Enter', interactionType = this._interactionType} = opts;\n\n if (typeof option === 'string' || typeof option === 'number') {\n option = this.findOption({optionIndexOrText: option});\n }\n\n if (!option) {\n throw new Error('Target option not found in the listbox.');\n }\n\n if (interactionType === 'keyboard') {\n if (option?.getAttribute('aria-disabled') === 'true') {\n return;\n }\n\n if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {\n act(() => this._listbox.focus());\n }\n\n await this.keyboardNavigateToOption({option});\n await this.user.keyboard(`[${keyboardActivation}]`);\n } else {\n if (needsLongPress && interactionType === 'touch') {\n if (this._advanceTimer == null) {\n throw new Error('No advanceTimers provided for long press.');\n }\n\n await triggerLongPress({element: option, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});\n } else {\n await pressElement(this.user, option, interactionType);\n }\n }\n }\n\n /**\n * Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.\n */\n async triggerOptionAction(opts: ListBoxOptionActionOpts) {\n let {\n option,\n needsDoubleClick,\n interactionType = this._interactionType\n } = opts;\n\n if (typeof option === 'string' || typeof option === 'number') {\n option = this.findOption({optionIndexOrText: option});\n }\n\n if (!option) {\n throw new Error('Target option not found in the listbox.');\n }\n\n if (needsDoubleClick) {\n await this.user.dblClick(option);\n } else if (interactionType === 'keyboard') {\n if (option?.getAttribute('aria-disabled') === 'true') {\n return;\n }\n\n if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {\n act(() => this._listbox.focus());\n }\n\n await this.keyboardNavigateToOption({option});\n await this.user.keyboard('[Enter]');\n } else {\n await pressElement(this.user, option, interactionType);\n }\n }\n\n /**\n * Returns the listbox.\n */\n get listbox(): HTMLElement {\n return this._listbox;\n }\n\n /**\n * Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.\n */\n options(opts: {element?: HTMLElement} = {}): HTMLElement[] {\n let {element = this._listbox} = opts;\n let options = [];\n if (element) {\n options = within(element).queryAllByRole('option');\n }\n\n return options;\n }\n\n /**\n * Returns the listbox's selected options if any.\n */\n get selectedOptions(): HTMLElement[] {\n return this.options().filter(row => row.getAttribute('aria-selected') === 'true');\n }\n\n /**\n * Returns the listbox's sections if any.\n */\n get sections(): HTMLElement[] {\n return within(this._listbox).queryAllByRole('group');\n }\n}\n"],"names":[],"version":3,"file":"listbox.module.js.map"}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/test-utils/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {triggerLongPress} from './events';\nexport {installMouseEvent, installPointerEvent} from './testSetup';\nexport {pointerMap} from './userEventMaps';\nexport {User} from './user';\n\nexport type {UserOpts} from './
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/test-utils/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {triggerLongPress} from './events';\nexport {installMouseEvent, installPointerEvent} from './testSetup';\nexport {pointerMap} from './userEventMaps';\nexport {User} from './user';\n\nexport type {UserOpts} from './types';\n"],"names":[],"version":3,"file":"main.js.map"}
|