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
npm i @heartlandone/vega-testing-library

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]
npm i @heartlandone/vega-testing-library

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.hover(vegaAccordion); // will unhover toggle buttonV13 userForVega.hover(vegaAccordion); // will unhover toggle button | | 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.hover(vegaCarousel); // Unhover on carouselV13 userForVega.hover(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-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 or label', {keyOrLabel: 'key'}); // Select option by key or label using userEvent.clickV13 userForVega.selectOptions(vegaInputPhoneNumber, 'key or label', {keyOrLabel: 'key'}); // Select option by key or 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-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-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 |