vega-testing-library

What is userEvent api

user-event is a companion library for Testing Library that simulates user interactions by dispatching the events that would happen if the interaction took place in a browser

Why we need to extending user event api

Currently, when using the test library for interactive operations, it becomes very troublesome and cumbersome to find triggerable elements because Shadow DOM is used

const shadowInput: Element = document
.querySelector("vega-input")
?.shadowRoot?.querySelector("input") as Element;

userEvent.type(shadowInput, "input text");

When should use this library

Components that involve user interaction should all use this library to simplify operations and make user events simple and efficient.

Usage

V14

npm i @testing-library/user-event -D
npm i @heartlandone/vega-testing-library -D

import userEvent, { UserEvent } from '@testing-library/user-event'; // v14
import { createUserEventForVega, CompatibleUserEventMethods, UserEventCompatible } from '@heartlandone/vega-testing-library';
let user: UserEvent = userEvent.setup();
const userForVega: CompatibleUserEventMethods<UserEventCompatible> = createUserEventForVega(user);
// Example using vega-input
const vegaInputElement = document.querySelector('vega-input');
await userForVega.type(vegaInputElement, 'input text');
expect(vegaInputElement.value).toBe('input text');
....

V13

npm i @testing-library/[email protected] -D
npm i @heartlandone/vega-testing-library -D

import userEvent from '@testing-library/user-event'; // v13
import { createUserEventForVega, CompatibleUserEventMethods, UserEventType13 } from '@heartlandone/vega-testing-library';
const userForVega: CompatibleUserEventMethods<UserEventType13<typeof userEvent>> = createUserEventForVega(userEvent);
// Example using vega-input
const vegaInputElement = document.querySelector('vega-input');
userEvent.type(vegaInputElement, 'input text');
expect(vegaInputElement.value).toBe('input text');
....

Supported Components

| Component Name | User Event API supported | |:-------------------|:-----------------------------| | vega-accordion | click: simulates a user clicking on the accordionUsage example:V14 await userForVega.click(vegaAccordion); // will click to toggle expandV13 userForVega.click(vegaAccordion); // will click to toggle expandhover: simulates a user hovering the pointer over the accordionUsage example:V14 await userForVega.hover(vegaAccordion); // will hover toggle buttonV13 userForVega.hover(vegaAccordion); // will hover toggle buttonunhover: simulates a user moving the pointer away from the accordionUsage example:V14 await userForVega.unhover(vegaAccordion); // will unhover toggle buttonV13 userForVega.unhover(vegaAccordion); // will unhover toggle button | | vega-breadcrumb | click: simulates a user clicking on the breadcrumbUsage example:V14 await userForVega.click(vegaBreadcrumb, { index: 0 }); // will click breadcrumb item by indexawait userForVega.click(vegaBreadcrumb, { label: 'level2' }); // will click item by label (visible or in dropdown)V13 userForVega.click(vegaBreadcrumb, undefined, { index: 0 }); // will click breadcrumb item by indexuserForVega.click(vegaBreadcrumb, undefined, { label: 'level2' }); // will click item by label (visible or in dropdown)hover: simulates a user hovering the pointer over the breadcrumbUsage example:V14 await userForVega.hover(vegaBreadcrumb, { index: 0 }); // will hover breadcrumb item by indexawait userForVega.hover(vegaBreadcrumb, { label: 'level2' }); // will hover item by label (visible or in dropdown)V13 userForVega.hover(vegaBreadcrumb, undefined, { index: 0 }); // will hover breadcrumb item by indexuserForVega.hover(vegaBreadcrumb, undefined, { label: 'level2' }); // will hover item by label (visible or in dropdown)unhover: simulates a user moving the pointer away from the breadcrumbUsage example:V14 await userForVega.unhover(vegaBreadcrumb, { index: 0 }); // will unhover breadcrumb item by indexawait userForVega.unhover(vegaBreadcrumb, { label: 'level2' }); // will unhover item by label (visible or in dropdown)V13 userForVega.unhover(vegaBreadcrumb, undefined, { index: 0 }); // will unhover breadcrumb item by indexuserForVega.unhover(vegaBreadcrumb, undefined, { label: 'level2' }); // will unhover item by label (visible or in dropdown) | | vega-button | click: simulates a user clicking on the buttonUsage example:V14 await userForVega.click(vegaButton); // will click buttonV13 userForVega.click(vegaButton); // will click buttonhover: simulates a user hovering the pointer over the buttonUsage example:V14 await userForVega.hover(vegaButton); // will hover buttonV13 userForVega.hover(vegaButton); // will hover buttonunhover: simulates a user moving the pointer away from the buttonUsage example:V14 await userForVega.unhover(vegaButton); // will unhover buttonV13 userForVega.unhover(vegaButton); // will unhover button | | vega-button-circle | click: simulates a user clicking on the button circleUsage example:V14 await userForVega.click(vegaButtonCircle); // will click button circleV13 userForVega.click(vegaButtonCircle); // will click button circlehover: simulates a user hovering the pointer over the button circleUsage example:V14 await userForVega.hover(vegaButtonCircle); // will hover button circleV13 userForVega.hover(vegaButtonCircle); // will hover button circleunhover: simulates a user moving the pointer away from the button circleUsage example:V14 await userForVega.unhover(vegaButtonCircle); // will unhover button circleV13 userForVega.unhover(vegaButtonCircle); // will unhover button circle | | vega-button-link | click: simulates a user clicking on the button linkUsage example:V14 await userForVega.click(vegaButtonLink); // will click button linkV13 userForVega.click(vegaButtonLink); // will click button linkhover: simulates a user hovering the pointer over the button linkUsage example:V14 await userForVega.hover(vegaButtonLink); // will hover button linkV13 userForVega.hover(vegaButtonLink); // will hover button linkunhover: simulates a user moving the pointer away from the button linkUsage example:V14 await userForVega.unhover(vegaButtonLink); // will unhover button linkV13 userForVega.unhover(vegaButtonLink); // will unhover button link | | vega-carousel | click: simulates a user clicking on the carouselUsage example:V14 await userForVega.click(vegaCarousel); // Click page 1await userForVega.click(vegaCarousel, { page: 2 }); // Click page 2V13 userForVega.click(vegaCarousel); // Click page 1userForVega.click(vegaCarousel, undefined, { page: 2 }); // Click page 2hover: simulates a user hovering the pointer over the carouselUsage example:V14 await userForVega.hover(vegaCarousel); // Hover on carouselV13 userForVega.hover(vegaCarousel); // Hover on carouselunhover: simulates a user moving the pointer away from the carouselUsage example:V14 await userForVega.unhover(vegaCarousel); // Unhover on carouselV13 userForVega.unhover(vegaCarousel); // Unhover on carousel | | vega-checkbox | click: simulates a user clicking on the checkboxUsage example:V14 await userForVega.click(vegaCheckbox); // will click checkboxV13 userForVega.click(vegaCheckbox); // will click checkboxhover: simulates a user hovering the pointer over the checkboxUsage example:V14 await userForVega.hover(vegaCheckbox); // will hover checkboxV13 userForVega.hover(vegaCheckbox); // will hover checkboxunhover: simulates a user moving the pointer away from the checkboxUsage example:V14 await userForVega.unhover(vegaCheckbox); // will unhover checkboxV13 userForVega.unhover(vegaCheckbox); // will unhover checkbox | | vega-chip | click: simulates a user clicking on the chipUsage example:V14 await userForVega.click(vegaChip, { iconClose: true }); // will click close iconawait userForVega.click(vegaChip); // will click vega-chip buttonV13 userForVega.click(vegaChip, { iconClose: true }); // will click close iconuserForVega.click(vegaChip); // will click vega-chip buttonhover: simulates a user hovering the pointer over the chipUsage example:V14 await userForVega.hover(vegaChip); // will hover chipV13 userForVega.hover(vegaChip); // will hover chipunhover: simulates a user moving the pointer away from the chipUsage example:V14 await userForVega.unhover(vegaChip); // will unhover chipV13 userForVega.unhover(vegaChip); // will unhover chip | | vega-color-picker | click: simulates a user clicking on the color pickerUsage example:V14 await userForVega.click(vegaColorPicker, {value: '#00BBFF'}); // will selected the colorV13 userForVega.click(vegaColorPicker, undefined, {value: '#00BBFF'}); // will selected the color | | vega-combo-box | clear: simulates a user clearing the value of the combo boxUsage example:V14 await userForVega.clear(vegaComboBox, 'key', {keyOrLabel: 'key'}); // will clear chip by keyawait userForVega.clear(vegaComboBox, 'label', {keyOrLabel: 'label'}); // will clear chip by labelawait userForVega.clear(vegaComboBox, ['label', ...], {keyOrLabel: 'label'}); // will clear multiple chips by labelawait userForVega.clear(vegaComboBox, ['key', ...], {keyOrLabel: 'key'}); // will clear multiple chips by keyV13 userForVega.clear(vegaComboBox, 'key', {keyOrLabel: 'key'}); // will clear chip by keyuserForVega.clear(vegaComboBox, 'label', {keyOrLabel: 'label'}); // will clear chip by labeluserForVega.clear(vegaComboBox, ['label', ...], {keyOrLabel: 'label'}); // will clear multiple chips by labeluserForVega.clear(vegaComboBox, ['key', ...], {keyOrLabel: 'key'}); // will clear multiple chips by keyclick: simulates a user clicking on the combo boxUsage example:V14 await userForVega.click(vegaComboBox, {triggerDynamicAdd: true}); // will trigger the "Add" button in the dropdownV13 userForVega.click(vegaComboBox, undefined, {triggerDynamicAdd: true}); // will trigger the "Add" button in the dropdowndeselectOptions: simulates a user deselecting options from a multi-selectUsage example:V14 await userForVega.deselectOptions(vegaComboBox, ['key', ...], {keyOrLabel: 'key'}); // will deselect the options according to keyawait userForVega.deselectOptions(vegaComboBox, ['label', ...], {keyOrLabel: 'label'}); // will deselect the options according to labelV13 userForVega.deselectOptions(vegaComboBox, ['key', ...], {keyOrLabel: 'key'}); // will deselect the options according to keyuserForVega.deselectOptions(vegaComboBox, ['label', ...], {keyOrLabel: 'label'}); // will deselect the options according to labelselectOptions: simulates a user selecting options from a selectUsage example:V14 await userForVega.selectOptions(vegaComboBox, 'label', {keyOrLabel: 'label'}); // will select the option according to labelawait userForVega.selectOptions(vegaComboBox, 'key', {keyOrLabel: 'key'}); // will select the option according to keyawait userForVega.selectOptions(vegaComboBox, ['label', ...], {keyOrLabel: 'label'}); // will select the options according to labelawait userForVega.selectOptions(vegaComboBox, ['key', ...], {keyOrLabel: 'key'}); // will select the options according to keyV13 userForVega.selectOptions(vegaComboBox, 'label', {keyOrLabel: 'label'}); // will select the option according to labeluserForVega.selectOptions(vegaComboBox, 'key', {keyOrLabel: 'key'}); // will select the option according to keyuserForVega.selectOptions(vegaComboBox, ['label', ...], {keyOrLabel: 'label'}); // will select the options according to labeluserForVega.selectOptions(vegaComboBox, ['key', ...], {keyOrLabel: 'key'}); // will select the options according to keytype: simulates a user typing text into the combo boxUsage example:V14 await userForVega.type(vegaComboBox, 'Peaches'); // will type 'Peaches' in the input boxV13 userForVega.type(vegaComboBox, 'Peaches'); // will type 'Peaches' in the input box | | vega-date-picker | clear: simulates a user clearing the value of the date pickerUsage example:V14 await userForVega.clear(vegaDatePicker); //For both single & range modeV13 userForVega.clear(vegaDatePicker); //For both single & range modeclick: simulates a user clicking on the date pickerUsage example:V14 await userForVega.click(vegaDatePicker); //Click start inputawait userForVega.click(vegaDatePicker, {startOrEnd: 'start'}); //Click start inputawait userForVega.click(vegaDatePicker, {startOrEnd: 'end'}); //Click end inputV13 userForVega.click(vegaDatePicker); //Click start inputuserForVega.click(vegaDatePicker, undefined, {startOrEnd: 'start'}); //Click start inputuserForVega.click(vegaDatePicker, undefined, {startOrEnd: 'end'}); //Click end inputtype: simulates a user typing text into the date pickerUsage example:V14 await userForVega.type(vegaDatePicker, '12/12/2000'); //Type in start inputawait userForVega.type(vegaDatePicker, '12/12/2000', {startOrEnd: 'start', delay: 0}); //Type in start inputawait userForVega.type(vegaDatePicker, '12/12/2000', {startOrEnd: 'end', delay: 0}); //Type in start inputV13 userForVega.type(vegaDatePicker, '12/12/2000'); //Type in start inputuserForVega.type(vegaDatePicker, '12/12/2000', {startOrEnd: 'start', delay: 0}); //Type in start inputuserForVega.type(vegaDatePicker, '12/12/2000', {startOrEnd: 'end', delay: 0}); //Type in start input | | vega-dropdown | clear: simulates a user clearing the value of the dropdownUsage example:V14 await userForVega.clear(vegaDropdown, 'string'); // Will open dropdown and clear search inputV13 userForVega.clear(vegaDropdown, 'string'); // Will open dropdown and clear search inputclick: simulates a user clicking on the dropdownUsage example:V14 await userForVega.click(vegaDropdown); // will click to openawait userForVega.click(vegaDropdown, { keyOrLabel: 'key', value: 'key' }); // will click dropdown item by item keyawait userForVega.click(vegaDropdown, { keyOrLabel: 'key', value: ['key1', 'key2', 'key3'] }); // will click multiple dropdown items by item keyawait userForVega.click(vegaDropdown, { keyOrLabel: 'label', value: 'Label 1' }); // will click dropdown item by item labelawait userForVega.click(vegaDropdown, { keyOrLabel: 'label', value: ['Label 1', 'Label 2', 'Label 3'] }); // will click multiple dropdown items by item labelawait userForVega.click(vegaDropdown, { action: 'reset' }); // will click reset selection button when items are selectedawait userForVega.click(vegaDropdown, { action: 'add' }); // will click add item button when searched item is not foundV13 userForVega.click(vegaDropdown); // will click to openuserForVega.click(vegaDropdown, undefined, { keyOrLabel: 'key', value: 'key' }); // will click dropdown item by item keyuserForVega.click(vegaDropdown, undefined, { keyOrLabel: 'key', value: ['key1', 'key2', 'key3'] }); // will click multiple dropdown items by item keyuserForVega.click(vegaDropdown, undefined, { keyOrLabel: 'label', value: 'Label 1' }); // will click dropdown item by item labeluserForVega.click(vegaDropdown, undefined, { keyOrLabel: 'label', value: ['Label 1', 'Label 2', 'Label 3'] }); // will click multiple dropdown items by item labeluserForVega.click(vegaDropdown, undefined, { action: 'reset' }); // will click reset selection button when items are selecteduserForVega.click(vegaDropdown, undefined, { action: 'add' }); // will click add item button when searched item is not foundtype: simulates a user typing text into the dropdownUsage example:V14 await userForVega.type(vegaDropdown, 'string'); // Will open dropdown and search by stringV13 userForVega.type(vegaDropdown, 'string'); // Will open dropdown and search by string | | vega-dropdown-group | click: simulates a user clicking on the dropdown groupUsage example:V14 await userForVega.click(vegaDropdownGroup); // will click dropdown group first itemawait userForVega.click(vegaDropdownGroup, { keyOrLabel: 'key', value: 'item1' }); // will click dropdown item by keyawait userForVega.click(vegaDropdownGroup, { keyOrLabel: 'label', value: 'Item 1' }); // will click dropdown item by labelV13 userForVega.click(vegaDropdownGroup); // will click dropdown group first itemuserForVega.click(vegaDropdownGroup, undefined, { keyOrLabel: 'key', value: 'item1' }); // will click dropdown item by keyuserForVega.click(vegaDropdownGroup, undefined, { keyOrLabel: 'label', value: 'Item 1' }); // will click dropdown item by label | | vega-dropdown-item | click: simulates a user clicking on the dropdown itemUsage example:V14 await userForVega.click(vegaDropdownItem); // will click dropdown itemV13 userForVega.click(vegaDropdownItem); // will click dropdown itemhover: simulates a user hovering the pointer over the dropdown itemUsage example:V14 await userForVega.hover(vegaDropdownItem); // will hover dropdown itemV13 userForVega.hover(vegaDropdownItem); // will hover dropdown itemunhover: simulates a user moving the pointer away from the dropdown itemUsage example:V14 await userForVega.unhover(vegaDropdownItem); // will unhover dropdown itemV13 userForVega.unhover(vegaDropdownItem); // will unhover dropdown item | | vega-file-uploader | clear: simulates a user clearing the value of the file uploaderUsage example:V14 await userForVega.clear(vegaFileUploader, {values: 'file name', indexOrName: 'name'}); // Delete file by nameawait userForVega.clear(vegaFileUploader, {values: ['file name1', 'file name2', ...], indexOrName: 'name'}); // Delete files by nameawait userForVega.clear(vegaFileUploader, {values: '0', indexOrName: 'index'}); // Delete file by indexawait userForVega.clear(vegaFileUploader, {values: ['0', '1', ...], indexOrName: 'index'}); // Delete files by indexV13 userForVega.clear(vegaFileUploader, {values: 'file name', indexOrName: 'name'}); // Delete file by nameuserForVega.clear(vegaFileUploader, {values: ['file name1', 'file name2', ...], indexOrName: 'name'}); // Delete files by nameuserForVega.clear(vegaFileUploader, {values: '0', indexOrName: 'index'}); // Delete file by indexuserForVega.clear(vegaFileUploader, {values: ['0', '1', ...], indexOrName: 'index'}); // Delete files by indexupload: simulates a user uploading files to the file uploaderUsage example:V14 await userForVega.upload(vegaFileUploader, 'file name'); // will upload the single file according to file nameawait userForVega.upload(vegaFileUploader, '['file name', 'file name 1', ....]); // will upload the multiple files according to file namesV13 userForVega.upload(vegaFileUploader, 'file name'); // will upload the single file according to file nameuserForVega.upload(vegaFileUploader, '['file name', 'file name 1', ....]); // will upload the multiple files according to file names | | vega-image-uploader | clear: simulates a user clearing the value of the image uploaderUsage example:V14 await userForVega.clear(vegaImageUploader); //Delete uploaded imageV13 userForVega.clear(vegaImageUploader); //Delete uploaded imageclick: simulates a user clicking on the image uploaderUsage example:V14 await userForVega.click(vegaImageUploader, { action: 'replace', file: file }); //Replace imageawait userForVega.click(vegaImageUploader, { action: 'delete' }); //Remove uploaded imageawait userForVega.click(vegaImageUploader, { action: 'cancel' }); //Cancel upload of imageawait userForVega.click(vegaImageUploader, { action: 'preview' }); //Preview uploaded imageV13 userForVega.click(vegaImageUploader, undefined, { action: 'replace', file: file }); //Replace imageuserForVega.click(vegaImageUploader, undefined, { action: 'delete' }); //Remove uploaded imageuserForVega.click(vegaImageUploader, undefined, { action: 'cancel' }); //Cancel upload of imageuserForVega.click(vegaImageUploader, undefined, { action: 'preview' }); //Preview uploaded imageupload: simulates a user uploading files to the image uploaderUsage example:V14 await userForVega.upload(vegaImageUploader, imageFile); //Upload imageV13 userForVega.upload(vegaImageUploader, imageFile); //Upload image | | vega-input | clear: simulates a user clearing the value of the inputUsage example:V14 await userForVega.clear(vegaInput, { iconClear: true }); // Clear input field by clicking the clear iconawait userForVega.clear(vegaInput); // Clear input field by userEvent.clearV13 userForVega.clear(vegaInput, { iconClear: true }); // Clear input field by clicking the clear iconuserForVega.clear(vegaInput); // Clear input field by userEvent.clearclick: simulates a user clicking on the inputUsage example:V14 await userForVega.click(vegaInput); // will click the input boxV13 userForVega.click(vegaInput); // will click the input boxtype: simulates a user typing text into the inputUsage example:V14 await userForVega.type(vegaInput, 'Hello World'); // will type 'Hello World' in the input boxV13 userForVega.type(vegaInput, 'Hello World'); // will type 'Hello World' in the input box | | vega-input-credit-card | clear: simulates a user clearing the value of the credit card inputUsage example:V14 await userForVega.clear(vegaInputCreditCard); // Clear input field by userEvent.clearV13 userForVega.clear(vegaInputCreditCard); // Clear input field by userEvent.clearclick: simulates a user clicking on the credit card inputUsage example:V14 await userForVega.click(vegaInputCreditCard); // Click input field by userEvent.clickV13 userForVega.click(vegaInputCreditCard); // Click input field by userEvent.clicktype: simulates a user typing text into the credit card inputUsage example:V14 await userForVega.type(vegaInputCreditCard, '1234'); // Type into input field by userEvent.typeV13 userForVega.type(vegaInputCreditCard, '1234'); // Type into input field by userEvent.type | | vega-input-numeric | clear: simulates a user clearing the value of the numeric inputUsage example:V14 await userForVega.clear(vegaInputNumeric, { iconClear: true }); // Clear input field by clicking the clear iconawait userForVega.clear(vegaInputNumeric); // Clear input field by userEvent.clearV13 userForVega.clear(vegaInputNumeric, { iconClear: true }); // Clear input field by clicking the clear iconuserForVega.clear(vegaInputNumeric); // Clear input field by userEvent.clearclick: simulates a user clicking on the numeric inputUsage example:V14 await userForVega.click(vegaInputNumeric); // will click the input boxV13 userForVega.click(vegaInputNumeric); // will click the input boxtype: simulates a user typing text into the numeric inputUsage example:V14 await userForVega.type(vegaInputNumeric, '12345'); // will type '12345' in the input boxV13 userForVega.type(vegaInputNumeric, '12345'); // will type '12345' in the input box | | vega-input-phone-number | clear: simulates a user clearing the value of the phone number inputUsage example:V14 await userForVega.clear(vegaInputPhoneNumber); // Clear input field with userEvent clear methodawait userForVega.clear(vegaInputPhoneNumber, { source: 'input' }); // Clear input field with userEvent clear methodawait userForVega.clear(vegaInputPhoneNumber, { source: 'dropDown' }); // Clear drop down input field with userEvent clear methodawait userForVega.clear(vegaInputPhoneNumber, { iconClear: true }); // Clear input field with clear icon buttonawait userForVega.clear(vegaInputPhoneNumber, { source: 'dropDown', iconClear: true }); // Clear drop down input field with clear icon buttonV13 userForVega.clear(vegaInputPhoneNumber); // Clear input field with userEvent clear methoduserForVega.clear(vegaInputPhoneNumber, { source: 'input' }); // Clear input field with userEvent clear methoduserForVega.clear(vegaInputPhoneNumber, { source: 'dropDown' }); // Clear drop down input field with userEvent clear methoduserForVega.clear(vegaInputPhoneNumber, { iconClear: true }); // Clear input field with clear icon buttonuserForVega.clear(vegaInputPhoneNumber, { source: 'dropDown', iconClear: true }); // Clear drop down input field with clear icon buttonselectOptions: simulates a user selecting options from a selectUsage example:V14 await userForVega.selectOptions(vegaInputPhoneNumber, 'key', {keyOrLabel: 'key'}); // Select option by key using userEvent.clickawait userForVega.selectOptions(vegaInputPhoneNumber, 'label', {keyOrLabel: 'label'}); // Select option by label using userEvent.clickV13 userForVega.selectOptions(vegaInputPhoneNumber, 'key', {keyOrLabel: 'key'}); // Select option by key using userEvent.clickuserForVega.selectOptions(vegaInputPhoneNumber, 'label', {keyOrLabel: 'label'}); // Select option by label using userEvent.clicktype: simulates a user typing text into the phone number inputUsage example:V14 await userForVega.type(vegaInputPhoneNumber, '123', {source: 'input'}); // Type into input field or dropdown input field using userEvent.typeV13 userForVega.type(vegaInputPhoneNumber, '123', {source: 'input', delay: 0}); // Type into input field or dropdown input field using userEvent.type | | vega-input-range | clear: simulates a user clearing the value of the range inputUsage example:V14 await userForVega.clear(vegaInputRange); // Clear minimum input field using userEvent.clear (keyboard action)await userForVega.clear(vegaInputRange, {minOrMax: 'min'}); // Clear minimum input field using userEvent.clear (keyboard action)await userForVega.clear(vegaInputRange, {minOrMax: 'max'}); // Clear maximum input field using userEvent.clear (keyboard action)await userForVega.clear(vegaInputRange, {iconClear: true}); // Clear both fields (min and max) using the clear iconV13 userForVega.clear(vegaInputRange); // Clear minimum input field using userEvent.clear (keyboard action)userForVega.clear(vegaInputRange, {minOrMax: 'min'}); // Clear minimum input field using userEvent.clear (keyboard action)userForVega.clear(vegaInputRange, {minOrMax: 'max'}); // Clear maximum input field using userEvent.clear (keyboard action)userForVega.clear(vegaInputRange, {iconClear: true}); // Clear both fields (min and max) using the clear iconclick: simulates a user clicking on the range inputUsage example:V14 await userForVega.click(vegaInputRange, {minOrMax: 'min'}); // will click the minimum input boxawait userForVega.click(vegaInputRange, {minOrMax: 'max'}); // will click the maximum input boxV13 userForVega.click(vegaInputRange, undefined, {minOrMax: 'max'}); // will click the maximum input boxtype: simulates a user typing text into the range inputUsage example:V14 await userForVega.type(vegaInputRange, '10', {minOrMax: 'min'}); // will type '10' in the minimum input boxawait userForVega.type(vegaInputRange, '10', {minOrMax: 'max'}); // will type '10' in the maximum input boxV13 userForVega.type(vegaInputRange, '10', {minOrMax: 'min', delay: 0}); // will type '10' in the minimum input boxuserForVega.type(vegaInputRange, '10', {minOrMax: 'max', delay: 0}); // will type '10' in the maximum input box | | vega-input-select | deselectOptions: simulates a user deselecting options from a multi-selectUsage example:V14 await userForVega.deselectOptions(vegaInputSelect, ['key', 'key1', ...], {keyOrLabel: 'key'}); // will deselect the option with specified keyawait userForVega.deselectOptions(vegaInputSelect, ['label', 'label1', ...], {keyOrLabel: 'label'}); // will deselect the option with specified labelV13 userForVega.deselectOptions(vegaInputSelect, ['key', 'key1', ...], {keyOrLabel: 'key'}); // will deselect the option with specified keyuserForVega.deselectOptions(vegaInputSelect, ['label', 'label1', ...], {keyOrLabel: 'label'}); // will deselect the option with specified labelselectOptions: simulates a user selecting options from a selectUsage example:V14 await userForVega.selectOptions(vegaInputSelect, 'key', {keyOrLabel: 'key'}); // will select the option with specified keyawait userForVega.selectOptions(vegaInputSelect, ['label', 'label1', ...], {keyOrLabel: 'label'}); // will select the option with specified labelV13 userForVega.selectOptions(vegaInputSelect, 'label', {keyOrLabel: 'label'}); // will select the option with specified labeluserForVega.selectOptions(vegaInputSelect, ['key', 'key1', ...], {keyOrLabel: 'key'}); // will select the options with specified keystype: simulates a user typing text into the select inputUsage example:V14 await userForVega.type(vegaInputSelect, 'Peaches'); // will type 'text' in the input box and filter options by labelV13 userForVega.type(vegaInputSelect, 'Peaches'); // will type 'text' in the input box and filter options by label | | vega-item-toggle | click: simulates a user clicking on the item toggleUsage example:V14 await userForVega.click(vegaItemToggle); // will click item toggleawait waitFor(() => { expect(vegaItemToggle.isToggled).toBe(true); }, { timeout: 1550 }); // wait for the toggle animation to finishV13 userForVega.click(vegaItemToggle); // will click item toggleawait waitFor(() => { expect(vegaItemToggle.isToggled).toBe(true); }, { timeout: 1550 }); // wait for the toggle animation to finish | | vega-left-nav-group | click: simulates a user clicking on the left nav groupUsage example:V14 await userForVega.click(vegaLeftNavGroup); //Click left nav groupV13 userForVega.click(vegaLeftNavGroup); //Click left nav grouphover: simulates a user hovering the pointer over the left nav groupUsage example:V14 await userForVega.hover(vegaLeftNavGroup); //hover left nav groupV13 userForVega.hover(vegaLeftNavGroup); //hover left nav groupunhover: simulates a user moving the pointer away from the left nav groupUsage example:V14 await userForVega.unhover(vegaLeftNavGroup); //unhover left nav groupV13 userForVega.unhover(vegaLeftNavGroup); //unhover left nav group | | vega-left-nav-link | click: simulates a user clicking on the left nav linkUsage example:V14 await userForVega.click(vegaLeftNavLink); //Click left nav linkV13 userForVega.click(vegaLeftNavLink); //Click left nav linkhover: simulates a user hovering the pointer over the left nav linkUsage example:V14 await userForVega.hover(vegaLeftNavLink); //hover left nav linkV13 userForVega.hover(vegaLeftNavLink); //hover left nav linkunhover: simulates a user moving the pointer away from the left nav linkUsage example:V14 await userForVega.unhover(vegaLeftNavLink); //unhover left nav linkV13 userForVega.unhover(vegaLeftNavLink); //unhover left nav link | | vega-left-nav-section | click: simulates a user clicking on the left nav sectionUsage example:V14 await userForVega.click(vegaLeftNavSection); //Click left nav section action button link if action title is setV13 userForVega.click(vegaLeftNavSection); //Click left nav section action button link if action title is sethover: simulates a user hovering the pointer over the left nav sectionUsage example:V14 await userForVega.hover(vegaLeftNavSection); //hover left nav section action button link if action title is setV13 userForVega.hover(vegaLeftNavSection); //hover left nav section action button link if action title is setunhover: simulates a user moving the pointer away from the left nav sectionUsage example:V14 await userForVega.unhover(vegaLeftNavSection); //unhover left nav sectionV13 userForVega.unhover(vegaLeftNavSection); //unhover left nav section | | vega-modal | click: simulates a user clicking on the modalUsage example:V14 await userForVega.click(vegaModal); // will simulate click to open modalawait userForVega.click(vegaModal, { action: 'open' }); // will open modalawait userForVega.click(vegaModal, { action: 'close' }); // will close modalawait userForVega.click(vegaModal, { target: 'closeIcon' }); // On open modal, click close iconV13 userForVega.click(vegaModal); // will simulate click to open modaluserForVega.click(vegaModal, undefined, { action: 'open' }); // will open modaluserForVega.click(vegaModal, undefined, { action: 'close' }); // will close modaluserForVega.click(vegaModal, { target: 'closeIcon' }); // On open modal, click close icon | | vega-nav-card | click: simulates a user clicking on the nav cardUsage example:V14 await userForVega.click(vegaNavCard); //Click first vega-left-nav-link by defaultawait userForVega.click(vegaNavCard, { prop: 'key', propValue: 'settings' }); //Click nav item by key:'settings'await userForVega.click(vegaNavCard, { prop: 'url', propValue: '#settings' }); //Click nav item by urlawait userForVega.click(vegaNavCard, { prop: 'label', propValue: 'SETTINGS' }); //Click nav item by label textawait userForVega.click(vegaNavCard, { prop: 'label', propValue: 'Profile', targetType: 'group' }); //Click label for for group elementV13 userForVega.click(vegaNavCard); //Click first vega-left-nav-link by defaultuserForVega.click(vegaNavCard, undefined, { prop: 'key', propValue: 'settings' }); //Click nav item by key:'settings'userForVega.click(vegaNavCard, undefined, { prop: 'url', propValue: '#settings' }); //Click nav item by urluserForVega.click(vegaNavCard, undefined, { prop: 'label', propValue: 'SETTINGS' }); //Click nav item by label textuserForVega.click(vegaNavCard, undefined, { prop: 'label', propValue: 'Profile', targetType: 'group' }); //Click label for for group element | | vega-pagination | click: simulates a user clicking on the paginationUsage example:V14 await userForVega.click(vegaPagination, { next: true }); // go to next pageawait userForVega.click(vegaPagination, { prev: true }); // go to previous pageawait userForVega.click(vegaPagination, { page: 5 }); // go to specific pageV13 userForVega.click(vegaPagination, undefined, { next: true }); // go to next pageuserForVega.click(vegaPagination, undefined, { prev: true }); // go to previous pageuserForVega.click(vegaPagination, undefined, { page: 5 }); // go to specific pageselectOptions: simulates a user selecting options from a selectUsage example:V14 await waitFor(() => { expect(vegaPagination.shadowRoot.querySelector('vega-input-select').classList.contains('hydrated')).toBe(true); }); // wait for the inner input-select to be rendered.await userForVega.selectOptions(vegaPagination, '20'); // change page size to 20V13 await waitFor(() => { expect(vegaPagination.shadowRoot.querySelector('vega-input-select').classList.contains('hydrated')).toBe(true); }); // wait for the inner input-select to be rendered.userForVega.selectOptions(vegaPagination, '20'); // change page size to 20type: simulates a user typing text into the paginationUsage example:V14 await waitFor(() => { expect(vegaPagination.shadowRoot.querySelector('vega-input[data-vega-form="paginationGoTo"]').classList.contains('hydrated')).toBe(true); }); // wait for the inner vega-input to be rendered.await userForVega.type(vegaPagination, '5'); // type target page number and goTo that pageV13 await waitFor(() => { expect(vegaPagination.shadowRoot.querySelector('vega-input[data-vega-form="paginationGoTo"]').classList.contains('hydrated')).toBe(true); }); // wait for the inner vega-input to be rendered.userForVega.type(vegaPagination, '5'); // type target page number and goTo that page | | vega-popover | click: simulates a user clicking on the popoverUsage example:V14 await userForVega.click(vegaPopover); // will click popover-content slot to open or close the popoverV13 userForVega.click(vegaPopover); // will click popover-content slot to open or close the popoverhover: simulates a user hovering the pointer over the popoverUsage example:V14 await userForVega.hover(vegaPopover); // will hover popover-content slot to open or close the popoverV13 userForVega.hover(vegaPopover); // will hover popover-content slot to open or close the popoverunhover: simulates a user moving the pointer away from the popoverUsage example:V14 await userForVega.unhover(vegaPopover); // will unhover popover-content slot to open or close the popoverawait waitFor(() => { expect(vegaPopoverContent).toHaveClass('vega-force-hidden');}); // wait for the popover to be hiddenV13 userForVega.unhover(vegaPopover); // will unhover popover-content slot to open or close the popoverawait waitFor(() => { expect(vegaPopoverContent).toHaveClass('vega-force-hidden');}); // wait for the popover to be hidden | | vega-radio | click: simulates a user clicking on the radioUsage example:V14 await userForVega.click(vegaRadio); // will click radioV13 userForVega.click(vegaRadio); // will click radiohover: simulates a user hovering the pointer over the radioUsage example:V14 await userForVega.hover(vegaRadio); // will hover radioV13 userForVega.hover(vegaRadio); // will hover radiounhover: simulates a user moving the pointer away from the radioUsage example:V14 await userForVega.unhover(vegaRadio); // will unhover radioV13 userForVega.unhover(vegaRadio); // will unhover radio | | vega-segment-control | click: simulates a user clicking on the segment controlUsage example:V14 await userForVega.click(vegaSegmentControl, {value: 'Right', textOrIndexOrKey: 'text'}); // will click the right buttonawait userForVega.click(vegaSegmentControl, {value: 'Center', textOrIndexOrKey: 'text'}); // will click the center buttonawait userForVega.click(vegaSegmentControl, {value: 'left', textOrIndexOrKey: 'text'}); // will click the left buttonawait userForVega.click(vegaSegmentControl, {value: '1', textOrIndexOrKey: 'index'}); // will click the first button by indexawait userForVega.click(vegaSegmentControl, {value: 'right', textOrIndexOrKey: 'key'}); // will click the button with key 'right'await userForVega.click(vegaSegmentControl, {value: 'center', textOrIndexOrKey: 'key'}); // will click the button with key 'center'await userForVega.click(vegaSegmentControl, {value: 'left', textOrIndexOrKey: 'key'}); // will click the button with key 'left'V13 userForVega.click(vegaSegmentControl, undefined, {value: 'Right', textOrIndexOrKey: 'text'}); // will click the right buttonuserForVega.click(vegaSegmentControl, undefined, {value: 'Center', textOrIndexOrKey: 'text'}); // will click the center buttonuserForVega.click(vegaSegmentControl, undefined, {value: 'left', textOrIndexOrKey: 'text'}); // will click the left buttonuserForVega.click(vegaSegmentControl, undefined, {value: '1', textOrIndexOrKey: 'index'}); // will click the first button by indexuserForVega.click(vegaSegmentControl, undefined, {value: 'right', textOrIndexOrKey: 'key'}); // will click the button with key 'right'userForVega.click(vegaSegmentControl, undefined, {value: 'center', textOrIndexOrKey: 'key'}); // will click the button with key 'center'userForVega.click(vegaSegmentControl, undefined, {value: 'left', textOrIndexOrKey: 'key'}); // will click the button with key 'left' | | vega-selection-chip | clear: simulates a user clearing the value of the selection chipUsage example:V14 await userForVega.clear(vegaSelectionChip); //clear selection chipV13 userForVega.clear(vegaSelectionChip); //clear selection chipclick: simulates a user clicking on the selection chipUsage example:V14 await userForVega.click(vegaSelectionChip); //click selection chipV13 userForVega.click(vegaSelectionChip); //click selection chiphover: simulates a user hovering the pointer over the selection chipUsage example:V14 await userForVega.hover(vegaSelectionChip); //hover on selection chipV13 userForVega.hover(vegaSelectionChip); //hover on selection chipunhover: simulates a user moving the pointer away from the selection chipUsage example:V14 await userForVega.unhover(vegaSelectionChip); //unhover selection chipV13 userForVega.unhover(vegaSelectionChip); //unhover selection chip | | vega-selection-chip-group | clear: simulates a user clearing the value of the selection chip groupUsage example:V14 await userForVega.clear(vegaSelectionChipGroup); //clear group selectionV13 userForVega.clear(vegaSelectionChipGroup); //clear group selectionclick: simulates a user clicking on the selection chip groupUsage example:V14 await userForVega.click(vegaSelectionChipGroup, {label: 'Label for ABC'}); //Select by labelawait userForVega.click(vegaSelectionChipGroup, {label: ['Label for ABC', 'Label for DEF']}); //Multi selectawait userForVega.click(vegaSelectionChipGroup, {value: 'ABC'}); //Select by valueawait userForVega.click(vegaSelectionChipGroup, {value: ['ABC', 'DEF']}); //Multi selectV13 userForVega.click(vegaSelectionChipGroup, undefined, {label: 'Label for ABC'}); //Select by labeluserForVega.click(vegaSelectionChipGroup, undefined, {label: ['Label for ABC', 'Label for DEF']}); //Multi selectuserForVega.click(vegaSelectionChipGroup, undefined, {value: 'ABC'}); //Select by valueuserForVega.click(vegaSelectionChipGroup, undefined, {value: ['ABC', 'DEF']}); //Multi select | | vega-selection-tile | clear: simulates a user clearing the value of the selection tileUsage example:V14 await userForVega.clear(vegaSelectionTile); //Clear selectionV13 userForVega.clear(vegaSelectionTile); //Clear selectionclick: simulates a user clicking on the selection tileUsage example:V14 await userForVega.click(vegaSelectionTile); //Click selection tileV13 userForVega.click(vegaSelectionTile); //Click selection tilehover: simulates a user hovering the pointer over the selection tileUsage example:V14 await userForVega.hover(vegaSelectionTile); //Hover on selection tileV13 userForVega.hover(vegaSelectionTile); //Hover on selection tileunhover: simulates a user moving the pointer away from the selection tileUsage example:V14 await userForVega.unhover(vegaSelectionTile); //Unhover on selection tileV13 userForVega.unhover(vegaSelectionTile); //Unhover on selection tile | | vega-selection-tile-group | clear: simulates a user clearing the value of the selection tile groupUsage example:V14 await userForVega.clear(vegaSelectionTileGroup); // Clear selected valuesV13 userForVega.clear(vegaSelectionTileGroup); // Clear selected valuesclick: simulates a user clicking on the selection tile groupUsage example:V14 await userForVega.click(vegaSelectionTileGroup, {value: 'ABC'}); //Select by valueawait userForVega.click(vegaSelectionTileGroup, {value: ['ABC', 'DEF']}); //Select multiple optionsawait userForVega.click(vegaSelectionTileGroup, {title: 'Title for ABC'}); //Select by titleawait userForVega.click(vegaSelectionTileGroup, {title: ['Title ABC', 'Title DEF']}); //Select multiple optionsV13 userForVega.click(vegaSelectionTileGroup, undefined, {value: 'ABC'}); //Select by valueuserForVega.click(vegaSelectionTileGroup, undefined, {value: ['ABC', 'DEF']}); //Select multiple optionsuserForVega.click(vegaSelectionTileGroup, undefined, {title: 'Title for ABC'}); //Select by titleuserForVega.click(vegaSelectionTileGroup, undefined, {title: ['Title ABC', 'Title DEF']}); //Select multiple options | | vega-signature-capture | clear: simulates a user clearing the value of the signature captureUsage example:V14 await userForVega.clear(vegaSignatureCapture); // Clear the signature captureV13 userForVega.clear(vegaSignatureCapture); // Clear the signature capturepointer: simulates a user pointing to the signature captureUsage example:V14 await userForVega.pointer(vegaSignatureCapture, [{ keys: '[MouseLeft>]', coords: { x: 100, y: 200 } },{ coords: { x: 200, y: 200 } },{ keys: '[/MouseLeft]' },]); // Draw a signatureV13 userForVega.pointer(vegaSignatureCapture, [{mouseDown: { clientX: 100, clientY: 200 }, mouseMove: { clientX: 200, clientY: 200 }, mouseUp: { clientX: 200, clientY: 200 },},]); // Draw a signature | | vega-stepper | clear: simulates a user clearing the value of the stepperUsage example:V14 await userForVega.clear(vegaStepper); // will clear the stepper input and set the value to 0V13 userForVega.clear(vegaStepper); // will clear the stepper input and set the value to 0click: simulates a user clicking on the stepperUsage example:V14 await userForVega.click(vegaStepper, {actionSource: 'minus'}); // Decrease valueawait userForVega.click(vegaStepper, {actionSource: 'plus'}); // Increase valueawait userForVega.click(vegaStepper, {actionSource: 'input'}); // To focus on the inputV13 userForVega.click(vegaStepper, undefined, {actionSource: 'minus'}); // Decrease valueuserForVega.click(vegaStepper, undefined, {actionSource: 'plus'}); // Increase valueuserForVega.click(vegaStepper, undefined, {actionSource: 'input'}); // To focus on the inputtype: simulates a user typing text into the stepperUsage example:V14 await userForVega.type(vegaStepper, '10'); // will type '10' in the stepper inputV13 userForVega.type(vegaStepper, '10'); // will type '10' in the stepper input | | vega-textarea | clear: simulates a user clearing the value of the textareaUsage example:V14 await userForVega.clear(vegaTextarea); // Delete all textV13 userForVega.clear(vegaTextarea); // Delete all textclick: simulates a user clicking on the textareaUsage example:V14 await userForVega.click(vegaTextarea); // click textareaV13 userForVega.click(vegaTextarea); // click textareatype: simulates a user typing text into the textareaUsage example:V14 await userForVega.type(vegaTextarea, 'text'); // will type 'text' in the textarea boxV13 userForVega.type(vegaTextarea, 'text'); // will type '12345' in the textarea box | | vega-time-picker | clear: simulates a user clearing the value of the time pickerUsage example:V14 await userForVega.clear(vegaTimePicker); // Clear start time inputawait userForVega.clear(vegaTimePicker, {startOrEnd: 'start'}); // Clear start time inputawait userForVega.clear(vegaTimePicker, {startOrEnd: 'end'}); // Clear end time inputV13 userForVega.clear(vegaTimePicker); // Clear start time inputuserForVega.clear(vegaTimePicker, {startOrEnd: 'start'}); // Clear start time inputuserForVega.clear(vegaTimePicker, {startOrEnd: 'end'}); // Clear end time inputclick: simulates a user clicking on the time pickerUsage example:V14 await userForVega.click(vegaTimePicker); // Click start time input fieldawait userForVega.click(vegaTimePicker, {startOrEnd: 'start'}); // Click start time input fieldawait userForVega.click(vegaTimePicker, {startOrEnd: 'end'}); // Click end time input fieldV13 userForVega.click(vegaTimePicker, undefined, {startOrEnd: 'start'}); // Click start time input fielduserForVega.click(vegaTimePicker, undefined, {startOrEnd: 'end'}); // Click end time input fieldtype: simulates a user typing text into the time pickerUsage example:V14 await userForVega.type(vegaTimePicker, '10:00'); // Type into start time input fieldawait userForVega.type(vegaTimePicker, '10:00', {startOrEnd: 'start'}); // Type into start time input fieldawait userForVega.type(vegaTimePicker, '11:15', {startOrEnd: 'end'}); // Type into end time input fieldV13 userForVega.type(vegaTimePicker, '10:00', {startOrEnd: 'start', delay: 0}); // Type into start time input fielduserForVega.type(vegaTimePicker, '10:00', {startOrEnd: 'end', delay: 0}); // Type into end time input field | | vega-toggle-switch | click: simulates a user clicking on the toggle switchUsage example:V14 await userForVega.click(vegaToggleSwitch); // will click toggle switchV13 userForVega.click(vegaToggleSwitch); // will click toggle switch |