@loadsmart/loadsmart-ui 6.0.9 → 6.0.10
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/testing/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../DragDropFile.context-c7cd1441.js"),t=require("@testing-library/react"),i=require("../toArray-b56541b4.js"),n=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../DragDropFile.context-c7cd1441.js"),t=require("@testing-library/react"),i=require("../toArray-b56541b4.js"),n=require("../miranda-compatibility.theme-ec2c3370.js"),r=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@loadsmart/miranda-tokens");var c=o(r);function a(e){return e.parentNode.parentNode.parentNode.parentNode}function d(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=a(i);t.queries.queryByRole(n,"menu")||(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(i),expect(yield t.queries.findByRole(n,"menu")).toBeInTheDocument()})))))}))}function u(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=a(i);t.queries.queryByRole(n,"menu")&&(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(t.queries.getByText(n,"Close")),yield t.waitForElementToBeRemoved((()=>t.queries.queryByRole(n,"menu")))})))))}))}const l={getContainer:a,expand:d,collapse:u,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const r=a(n);yield d(n),yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){n.focus();const e=t.queries.getByLabelText(r,i);e&&"false"==e.getAttribute("aria-checked")&&t.fireEvent.click(e)})))),yield u(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=a(i);yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){const e=t.queries.getByLabelText(n,"Clear selection");t.fireEvent.click(e)})))),yield u(i)}))},getSelectedDates:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(i);yield d(i);const n=t.queries.queryAllByRole(e,"checkbox",{checked:!0});return yield u(i),n}))}};function s(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.expand(t)}))}function f(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.collapse(t)}))}const v={getContainer:l.getContainer,expand:s,collapse:f,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=l.getContainer(n);yield s(n);const[r,o]=i;if(null!=r){const i=t.queries.getByTestId(e,"input-date-range-start");yield l.pick(r,i)}if(null!=o){const i=t.queries.getByTestId(e,"input-date-range-end");yield l.pick(o,i)}yield f(n)}))},clear:function(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.clear(t)}))},getSelectedDates:function(t){return e.__awaiter(this,void 0,void 0,(function*(){return l.getSelectedDates(t)}))}},y=e=>e.parentNode,p={dragOver:e=>{const i=y(e),n=t.createEvent.dragOver(i);t.fireEvent(i,n)},dragLeave:e=>{const i=y(e),n=t.createEvent.dragLeave(i);t.fireEvent(i,n)},dropFiles:(e,n)=>{const r=y(e),o=t.createEvent.drop(r);Object.defineProperty(o,"dataTransfer",{value:{files:i.toArray(n)}}),t.fireEvent(r,o)}};function _(e){return e.parentNode.parentNode.parentNode}function h(e){return e.parentNode.parentNode.nextSibling}function g(e){return e.parentNode.nextSibling.nextSibling}function w(e){return e.parentNode}function x(e){return 3===_(e).children.length}function E(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=w(i);t.within(e).queryByTestId("select-trigger-loading")&&(yield t.waitForElementToBeRemoved((()=>t.within(e).queryByTestId("select-trigger-loading")),{timeout:2500}))}))}function b(i){return e.__awaiter(this,void 0,void 0,(function*(){if(yield E(i),x(i))return;const n=g(i);yield t.waitFor((()=>{expect(n).toBeEnabled()})),t.act((()=>{i.dispatchEvent(new MouseEvent("click",{bubbles:!0}))})),yield t.waitFor((()=>e.__awaiter(this,void 0,void 0,(function*(){expect(yield t.within(_(i)).findByRole("listbox")).toBeInTheDocument()}))))}))}function B(i){return e.__awaiter(this,void 0,void 0,(function*(){if(!x(i))return;const e=g(i);t.fireEvent.click(e),yield t.waitFor((()=>{expect(t.within(_(i)).queryByRole("listbox")).not.toBeInTheDocument()}))}))}const q={select:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield b(n);const e=h(n),r=yield t.within(e).findByLabelText(i);r&&"false"==r.getAttribute("aria-selected")&&(t.fireEvent.mouseDown(r),t.act((()=>{r.focus()})),t.fireEvent.mouseUp(r),t.fireEvent.click(r)),yield B(n)}))},unselect:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield b(n);const e=h(n),r=yield t.within(e).findByLabelText(i);r&&"true"===r.getAttribute("aria-selected")&&t.fireEvent.click(r),yield B(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield E(i);const e=w(i),n=t.within(e).getByTestId("select-trigger-clear");n&&t.fireEvent.click(n)}))},search:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.change(n,{target:{value:i}}),yield E(n);const e=h(n);yield t.within(e).findAllByRole("option")}))},expand:b,collapse:B,getOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield b(i);const e=h(i),n=t.within(e).queryAllByRole("option");return yield B(i),n}))},getSelectedOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield b(i);const e=h(i);let n=[];try{n=yield t.within(e).findAllByRole("option",{selected:!0})}catch(e){n=[]}return yield B(i),n}))},isMenuExpanded:x};const m={fileList:[],onFilesAdded:jest.fn(),onRetryUpload:jest.fn(),onRemoveFile:jest.fn()};exports.DatePickerEvent=l,exports.DateRangePickerEvent=v,exports.DragDropFileEvent=p,exports.SelectEvent=q,exports.getInterpolatedStyles=function(e){return i.toArray(e).map((e=>{for(;n.isFunction(e);)e=e({theme:n.alice});return e})).join("")},exports.renderWithDragDropFileProvider=(i,n)=>{const r=Object.assign(Object.assign({},m),n);return t.render((o=i,c.default.createElement(e.DragDropFileContext.Provider,{value:r},o)));var o};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/testing/DatePickerEvent/DatePickerEvent.ts","../../src/testing/DatePickerEvent/DateRangePickerEvent.ts","../../src/testing/DragDropFileEvent/DragDropFileEvent.ts","../../src/testing/SelectEvent/SelectEvent.ts","../../src/testing/renderWithDragDropFileProvider/renderWithDragDropFileProvider.tsx","../../src/testing/getInterpolatedStyles/getInterpolatedStyles.ts"],"sourcesContent":["/* eslint-disable */\nimport { act, queries, fireEvent, waitForElementToBeRemoved } from '@testing-library/react'\n\n// find the date picker container from its input field 🤷\nfunction getContainerFromInput(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n // if menu is rendered, then the select is already expanded\n if (queries.queryByRole(datePickerContainer, 'menu')) {\n return\n }\n\n await act(async () => {\n fireEvent.click(input)\n\n expect(await queries.findByRole(datePickerContainer, 'menu')).toBeInTheDocument()\n })\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n // if menu is not rendered, then the select is already collapsed\n if (!queries.queryByRole(datePickerContainer, 'menu')) {\n return\n }\n\n await act(async () => {\n fireEvent.click(queries.getByText(datePickerContainer, 'Close'))\n\n await waitForElementToBeRemoved(() => queries.queryByRole(datePickerContainer, 'menu'))\n })\n}\n\n/**\n * Pick (select) the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(day: string, input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n await expand(input)\n\n await act(async () => {\n input.focus()\n\n const dayElement = queries.getByLabelText(datePickerContainer, day)\n\n if (dayElement && dayElement.getAttribute('aria-checked') == 'false') {\n fireEvent.click(dayElement)\n }\n })\n\n await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n await act(async () => {\n const clearButton = queries.getByLabelText(datePickerContainer, 'Clear selection')\n\n fireEvent.click(clearButton)\n })\n\n await collapse(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n const datePickerContainer = getContainerFromInput(input)\n\n await expand(input)\n\n const selectedDays: HTMLElement[] = queries.queryAllByRole(datePickerContainer, 'checkbox', {\n checked: true,\n })\n\n await collapse(input)\n\n return selectedDays\n}\n\nconst datePickerEvent = {\n getContainer: getContainerFromInput,\n expand,\n collapse,\n pick,\n clear,\n getSelectedDates,\n}\n\nexport default datePickerEvent\n","/* eslint-disable */\nimport { queries } from '@testing-library/react'\n\nimport DatePickerEvent from './DatePickerEvent'\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n await DatePickerEvent.expand(input)\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n await DatePickerEvent.collapse(input)\n}\n\n/**\n * Pick (select) the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(range: [string | null, string | null], input: HTMLElement): Promise<void> {\n const dateRangePickerContainer = DatePickerEvent.getContainer(input)\n\n await expand(input)\n\n const [rangeStart, rangeEnd] = range\n\n if (rangeStart != null) {\n const dateRangeStartInput = queries.getByTestId(\n dateRangePickerContainer,\n 'input-date-range-start'\n )\n\n await DatePickerEvent.pick(rangeStart, dateRangeStartInput)\n }\n\n if (rangeEnd != null) {\n const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, 'input-date-range-end')\n\n await DatePickerEvent.pick(rangeEnd, dateRangeEndInput)\n }\n\n await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n await DatePickerEvent.clear(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n return DatePickerEvent.getSelectedDates(input)\n}\n\nexport const dateRangePickerEvent = {\n getContainer: DatePickerEvent.getContainer,\n expand,\n collapse,\n pick,\n clear,\n getSelectedDates,\n}\n\nexport default dateRangePickerEvent\n","import { createEvent, fireEvent } from '@testing-library/react'\n\nimport toArray from 'utils/toolset/toArray'\n\n/**\n * Get the input dropzone, which is the input parent (label).\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst getDropZoneFromInput = (input: HTMLInputElement): HTMLLabelElement =>\n input.parentNode as HTMLLabelElement\n\n/**\n * Simulates the onDragOver event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragOver = (input: HTMLInputElement) => {\n const dropzone = getDropZoneFromInput(input)\n\n const dragOverEvent = createEvent.dragOver(dropzone)\n\n fireEvent(dropzone, dragOverEvent)\n}\n\n/**\n * Simulates the onDragLeave event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragLeave = (input: HTMLInputElement) => {\n const dropzone = getDropZoneFromInput(input)\n\n const dragLeaveEvent = createEvent.dragLeave(dropzone)\n\n fireEvent(dropzone, dragLeaveEvent)\n}\n\n/**\n * Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dropFiles = (input: HTMLInputElement, files: File | File[]) => {\n const dropzone = getDropZoneFromInput(input)\n\n const fileDropEvent = createEvent.drop(dropzone)\n\n Object.defineProperty(fileDropEvent, 'dataTransfer', { value: { files: toArray(files) } })\n\n fireEvent(dropzone, fileDropEvent)\n}\n\nexport const DragDropFileEvent = {\n dragOver,\n dragLeave,\n dropFiles,\n}\n\nexport default DragDropFileEvent\n","import { act, waitFor, within, waitForElementToBeRemoved } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\n\n// based on https://github.com/romgain/react-select-event/blob/master/src/index.ts\n\n// find the select container from its input field 🤷\nfunction getSelectContainer(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Please, make sure to call expand before trying to get the menu container\n */\nfunction getSelectMenu(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.parentNode!.nextSibling as HTMLElement\n}\n\nfunction getSelectTriggerHandle(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.nextSibling!.nextSibling as HTMLElement\n}\n\nfunction getSelectSearchContainer(input: HTMLElement): HTMLElement {\n return input.parentNode as HTMLElement\n}\n\nfunction isSelectMenuExpanded(input: HTMLElement): boolean {\n const selectContainer = getSelectContainer(input)\n\n /**\n * Once the select is expanded, we have the following structure:\n * +-------------+\n * | Close button (visually hiddren)\n * +-------------+\n * | DropdownTrigger\n * +-------------+\n * | Popover\n * +-------------+\n *\n * This, if the container has 3 children, we assume the menu is expanded\n */\n return selectContainer.children.length == 3\n}\n\n/**\n * This is needed because some datasources might be asynchronous.\n * To ensure that the data they retrieve will be available, we wait for the\n * querying phase to finish.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n */\nasync function waitForPendingQuery(input: HTMLElement) {\n const searchContainer = getSelectSearchContainer(input)\n\n if (!within(searchContainer).queryByTestId('select-trigger-loading')) {\n return\n }\n\n await waitForElementToBeRemoved(\n () => within(searchContainer).queryByTestId('select-trigger-loading'),\n { timeout: 2500 }\n )\n}\n\n/**\n * Expand the `Select` menu, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n await waitForPendingQuery(input)\n\n if (isSelectMenuExpanded(input)) {\n return\n }\n\n const triggerHandle = getSelectTriggerHandle(input)\n\n await waitFor(() => {\n expect(triggerHandle).toBeEnabled()\n })\n\n userEvent.click(triggerHandle)\n\n await waitFor(async () => {\n expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()\n })\n}\n\n/**\n * Collapse the `Select` menu, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n if (!isSelectMenuExpanded(input)) {\n return\n }\n\n const triggerHandle = getSelectTriggerHandle(input)\n\n userEvent.click(triggerHandle)\n\n await waitFor(() => {\n expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()\n })\n}\n\n/**\n * Select the provided option(s), if they are present in the menu.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string} option - Label for the option to be selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function select(option: string, input: HTMLElement): Promise<void> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n\n const optionElement = await within(menuContainer).findByLabelText(option)\n\n // click the option if exists; Select currently closes when an item is clicked.\n if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {\n userEvent.click(optionElement)\n }\n\n // we collapse in the case the option was not clicked\n await collapse(input)\n}\n\n/**\n * Unselect the provided option(s), if they are present in the menu AND are selected.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string} option - Label for the option to be unselected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function unselect(option: string, input: HTMLElement): Promise<void> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n\n const optionElement = await within(menuContainer).findByLabelText(option)\n\n // ensures that the option exists and IS selected\n if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {\n userEvent.click(optionElement)\n }\n\n // we collapse in the case the option was not clicked\n await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n await waitForPendingQuery(input)\n\n const searchContainer = getSelectSearchContainer(input)\n\n const clearButton = within(searchContainer).getByTestId('select-trigger-clear')\n\n act(() => {\n if (clearButton) {\n userEvent.click(clearButton)\n }\n })\n}\n\n/**\n * Perform search based on the given `query`. It will fail if the option is not found.\n * @param {string} query - Search term.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function search(query: string, input: HTMLElement): Promise<void> {\n const selectContainer = getSelectContainer(input)\n\n userEvent.type(input, query)\n\n await within(selectContainer).findAllByRole('option', undefined, { timeout: 2500 })\n}\n\n/**\n * Get options elements currently available in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getOptions(input: HTMLElement): Promise<HTMLElement[]> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n\n const options = within(menuContainer).queryAllByRole('option')\n\n await collapse(input)\n\n return options\n}\n\n/**\n * Get options elements currently selected in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n let selectedOptions: HTMLElement[] = []\n\n try {\n selectedOptions = await within(menuContainer).findAllByRole('option', {\n selected: true,\n })\n } catch (err) {\n selectedOptions = []\n }\n\n await collapse(input)\n\n return selectedOptions\n}\n\nexport const selectEvent = {\n select,\n unselect,\n clear,\n search,\n expand,\n collapse,\n getOptions,\n getSelectedOptions,\n isMenuExpanded: isSelectMenuExpanded,\n}\n\nexport default selectEvent\n","import React, { ReactNode } from 'react'\nimport { render } from '@testing-library/react'\nimport type { RenderResult } from '@testing-library/react'\n\nimport type { DragDropFileContextValue } from '../../components/DragDropFile/types'\nimport { DragDropFileContext } from '../../components/DragDropFile/DragDropFile.context'\n\nconst defaultContextValueMock: DragDropFileContextValue = {\n fileList: [],\n onFilesAdded: jest.fn(),\n onRetryUpload: jest.fn(),\n onRemoveFile: jest.fn(),\n}\n\nconst renderWithDragDropFileProvider = (\n ui: ReactNode,\n customContext?: Partial<DragDropFileContextValue>\n): RenderResult => {\n const contextValue = { ...defaultContextValueMock, ...customContext }\n\n const renderedUi = (children: ReactNode) => (\n <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>\n )\n\n return render(renderedUi(ui))\n}\n\nexport default renderWithDragDropFileProvider\n","import type { Interpolation, ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\n\nimport { Alice } from '../../theming/themes'\nimport type { CustomTheme } from '../../theming'\nimport toArray from 'utils/toolset/toArray'\n\ntype ThemedInterpolation = Interpolation<ThemeProps<CustomTheme>>\n\n/**\n * Use this function to simulate the CSS that would be generated by styled-components\n * @param {Interpolation<ThemeProps<CustomTheme>>} styles - A `css` reference with interpolated styles\n * @returns {string} The final CSS\n */\nexport default function getInterpolatedStyles(styles: ThemedInterpolation): string {\n return toArray(styles)\n .map((interpolation) => {\n while (isFunction(interpolation)) {\n interpolation = interpolation({ theme: Alice })\n }\n\n return interpolation\n })\n .join('')\n}\n"],"names":["getContainerFromInput","input","parentNode","expand","datePickerContainer","queries","queryByRole","act","__awaiter","this","fireEvent","click","expect","findByRole","toBeInTheDocument","collapse","getByText","waitForElementToBeRemoved","datePickerEvent","getContainer","day","focus","dayElement","getByLabelText","getAttribute","clearButton","selectedDays","queryAllByRole","checked","DatePickerEvent","dateRangePickerEvent","pick","range","dateRangePickerContainer","rangeStart","rangeEnd","dateRangeStartInput","getByTestId","dateRangeEndInput","clear","getSelectedDates","getDropZoneFromInput","DragDropFileEvent","dragOver","dropzone","dragOverEvent","createEvent","dragLeave","dragLeaveEvent","dropFiles","files","fileDropEvent","drop","Object","defineProperty","value","toArray","getSelectContainer","getSelectMenu","nextSibling","getSelectTriggerHandle","getSelectSearchContainer","isSelectMenuExpanded","children","length","waitForPendingQuery","searchContainer","within","queryByTestId","timeout","triggerHandle","waitFor","toBeEnabled","userEvent","not","selectEvent","select","option","menuContainer","optionElement","findByLabelText","unselect","search","query","selectContainer","type","findAllByRole","undefined","getOptions","options","getSelectedOptions","selectedOptions","selected","err","isMenuExpanded","defaultContextValueMock","fileList","onFilesAdded","jest","fn","onRetryUpload","onRemoveFile","styles","map","interpolation","isFunction","theme","Alice","join","ui","customContext","contextValue","assign","render","React","createElement","DragDropFileContext","Provider"],"mappings":"obAIA,SAASA,EAAsBC,GAE7B,OAAOA,EAAMC,WAAYA,WAAYA,WAAYA,UACnD,CAOA,SAAeC,EAAOF,sDACpB,MAAMG,EAAsBJ,EAAsBC,GAG9CI,UAAQC,YAAYF,EAAqB,gBAIvCG,EAAAA,KAAI,IAAWC,YAAAC,UAAA,OAAA,GAAA,YACnBC,YAAUC,MAAMV,GAEhBW,aAAaP,EAAAA,QAAQQ,WAAWT,EAAqB,SAASU,mBAC/D,SACF,CAOD,SAAeC,EAASd,sDACtB,MAAMG,EAAsBJ,EAAsBC,GAG7CI,EAAAA,QAAQC,YAAYF,EAAqB,gBAIxCG,EAAAA,KAAI,IAAWC,YAAAC,UAAA,OAAA,GAAA,YACnBC,EAASA,UAACC,MAAMN,EAAOA,QAACW,UAAUZ,EAAqB,gBAEjDa,EAAAA,2BAA0B,IAAMZ,EAAOA,QAACC,YAAYF,EAAqB,SAChF,SACF,CA+DD,MAAMc,EAAkB,CACtBC,aAAcnB,SACdG,WACAY,OAzDF,SAAoBK,EAAanB,sDAC/B,MAAMG,EAAsBJ,EAAsBC,SAE5CE,EAAOF,SAEPM,EAAAA,KAAI,IAAWC,YAAAC,UAAA,OAAA,GAAA,YACnBR,EAAMoB,QAEN,MAAMC,EAAajB,EAAOA,QAACkB,eAAenB,EAAqBgB,GAE3DE,GAAyD,SAA3CA,EAAWE,aAAa,iBACxCd,YAAUC,MAAMW,EAEnB,YAEKP,EAASd,KAChB,QAOD,SAAqBA,sDACnB,MAAMG,EAAsBJ,EAAsBC,SAE5CM,EAAAA,KAAI,IAAWC,YAAAC,UAAA,OAAA,GAAA,YACnB,MAAMgB,EAAcpB,EAAOA,QAACkB,eAAenB,EAAqB,mBAEhEM,YAAUC,MAAMc,EACjB,YAEKV,EAASd,KAChB,mBAOD,SAAgCA,sDAC9B,MAAMG,EAAsBJ,EAAsBC,SAE5CE,EAAOF,GAEb,MAAMyB,EAA8BrB,EAAOA,QAACsB,eAAevB,EAAqB,WAAY,CAC1FwB,SAAS,IAKX,aAFMb,EAASd,GAERyB,IACR,GClGD,SAAevB,EAAOF,4DACd4B,EAAgB1B,OAAOF,KAC9B,CAOD,SAAec,EAASd,4DAChB4B,EAAgBd,SAASd,KAChC,CAoDY,MAAA6B,EAAuB,CAClCX,aAAcU,EAAgBV,oBAC9BhB,WACAY,EACAgB,KA/CF,SAAoBC,EAAuC/B,sDACzD,MAAMgC,EAA2BJ,EAAgBV,aAAalB,SAExDE,EAAOF,GAEb,MAAOiC,EAAYC,GAAYH,EAE/B,GAAkB,MAAdE,EAAoB,CACtB,MAAME,EAAsB/B,EAAOA,QAACgC,YAClCJ,EACA,gCAGIJ,EAAgBE,KAAKG,EAAYE,EACxC,CAED,GAAgB,MAAZD,EAAkB,CACpB,MAAMG,EAAoBjC,EAAOA,QAACgC,YAAYJ,EAA0B,8BAElEJ,EAAgBE,KAAKI,EAAUG,EACtC,OAEKvB,EAASd,KAChB,QAOD,SAAqBA,4DACb4B,EAAgBU,MAAMtC,KAC7B,EAiBCuC,iBAVF,SAAgCvC,sDAC9B,OAAO4B,EAAgBW,iBAAiBvC,KACzC,GC/DKwC,EAAwBxC,GAC5BA,EAAMC,WAwCKwC,EAAoB,CAC/BC,SAnCgB1C,IAChB,MAAM2C,EAAWH,EAAqBxC,GAEhC4C,EAAgBC,EAAAA,YAAYH,SAASC,GAE3ClC,YAAUkC,EAAUC,EAAc,EA+BlCE,UAxBiB9C,IACjB,MAAM2C,EAAWH,EAAqBxC,GAEhC+C,EAAiBF,EAAAA,YAAYC,UAAUH,GAE7ClC,YAAUkC,EAAUI,EAAe,EAoBnCC,UAbgB,CAAChD,EAAyBiD,KAC1C,MAAMN,EAAWH,EAAqBxC,GAEhCkD,EAAgBL,EAAAA,YAAYM,KAAKR,GAEvCS,OAAOC,eAAeH,EAAe,eAAgB,CAAEI,MAAO,CAAEL,MAAOM,EAAOA,QAACN,MAE/ExC,YAAUkC,EAAUO,EAAc,GCxCpC,SAASM,EAAmBxD,GAE1B,OAAOA,EAAMC,WAAYA,WAAYA,UACvC,CAKA,SAASwD,EAAczD,GAErB,OAAOA,EAAMC,WAAYA,WAAYyD,WACvC,CAEA,SAASC,EAAuB3D,GAE9B,OAAOA,EAAMC,WAAYyD,YAAaA,WACxC,CAEA,SAASE,EAAyB5D,GAChC,OAAOA,EAAMC,UACf,CAEA,SAAS4D,EAAqB7D,GAe5B,OAA0C,GAdlBwD,EAAmBxD,GAcpB8D,SAASC,MAClC,CAQA,SAAeC,EAAoBhE,sDACjC,MAAMiE,EAAkBL,EAAyB5D,GAE5CkE,EAAAA,OAAOD,GAAiBE,cAAc,kCAIrCnD,6BACJ,IAAMkD,SAAOD,GAAiBE,cAAc,2BAC5C,CAAEC,QAAS,UAEd,CAOD,SAAelE,EAAOF,sDAGpB,SAFMgE,EAAoBhE,GAEtB6D,EAAqB7D,GACvB,OAGF,MAAMqE,EAAgBV,EAAuB3D,SAEvCsE,EAAOA,SAAC,KACZ3D,OAAO0D,GAAeE,aAAa,IAGrCC,UAAU9D,MAAM2D,SAEVC,EAAAA,SAAQ,IAAW/D,YAAAC,UAAA,OAAA,GAAA,YACvBG,aAAauD,SAAOV,EAAmBxD,IAAQY,WAAW,YAAYC,mBACvE,QACF,CAOD,SAAeC,EAASd,sDACtB,IAAK6D,EAAqB7D,GACxB,OAGF,MAAMqE,EAAgBV,EAAuB3D,GAE7CwE,UAAU9D,MAAM2D,SAEVC,EAAOA,SAAC,KACZ3D,OAAOuD,EAAMA,OAACV,EAAmBxD,IAAQK,YAAY,YAAYoE,IAAI5D,mBAAmB,MAE3F,CA0HY,MAAA6D,EAAc,CACzBC,OAlHF,SAAsBC,EAAgB5E,4DAC9BE,EAAOF,GAEb,MAAM6E,EAAgBpB,EAAczD,GAE9B8E,QAAsBZ,EAAMA,OAACW,GAAeE,gBAAgBH,GAG9DE,GAAgE,SAA/CA,EAAcvD,aAAa,kBAC9CiD,UAAU9D,MAAMoE,SAIZhE,EAASd,KAChB,EAqGCgF,SA5FF,SAAwBJ,EAAgB5E,4DAChCE,EAAOF,GAEb,MAAM6E,EAAgBpB,EAAczD,GAE9B8E,QAAsBZ,EAAMA,OAACW,GAAeE,gBAAgBH,GAG9DE,GAAgE,QAA/CA,EAAcvD,aAAa,kBAC9CiD,UAAU9D,MAAMoE,SAIZhE,EAASd,KAChB,EA+ECsC,MAxEF,SAAqBtC,4DACbgE,EAAoBhE,GAE1B,MAAMiE,EAAkBL,EAAyB5D,GAE3CwB,EAAc0C,EAAAA,OAAOD,GAAiB7B,YAAY,wBAExD9B,EAAAA,KAAI,KACEkB,GACFgD,UAAU9D,MAAMc,EACjB,MAEJ,EA6DCyD,OArDF,SAAsBC,EAAelF,sDACnC,MAAMmF,EAAkB3B,EAAmBxD,GAE3CwE,EAAAA,QAAUY,KAAKpF,EAAOkF,SAEhBhB,EAAMA,OAACiB,GAAiBE,cAAc,cAAUC,EAAW,CAAElB,QAAS,SAC7E,EAgDClE,SACAY,WACAyE,WA3CF,SAA0BvF,4DAClBE,EAAOF,GAEb,MAAM6E,EAAgBpB,EAAczD,GAE9BwF,EAAUtB,EAAAA,OAAOW,GAAenD,eAAe,UAIrD,aAFMZ,EAASd,GAERwF,IACR,EAkCCC,mBA3BF,SAAkCzF,4DAC1BE,EAAOF,GAEb,MAAM6E,EAAgBpB,EAAczD,GACpC,IAAI0F,EAAiC,GAErC,IACEA,QAAwBxB,EAAMA,OAACW,GAAeQ,cAAc,SAAU,CACpEM,UAAU,GAEb,CAAC,MAAOC,GACPF,EAAkB,EACnB,CAID,aAFM5E,EAASd,GAER0F,IACR,EAWCG,eAAgBhC,GCvOlB,MAAMiC,EAAoD,CACxDC,SAAU,GACVC,aAAcC,KAAKC,KACnBC,cAAeF,KAAKC,KACpBE,aAAcH,KAAKC,+ICGG,SAAsBG,GAC5C,OAAO9C,EAAAA,QAAQ8C,GACZC,KAAKC,IACJ,KAAOC,EAAAA,WAAWD,IAChBA,EAAgBA,EAAc,CAAEE,MAAOC,EAAAA,QAGzC,OAAOH,CAAa,IAErBI,KAAK,GACV,yCDVuC,CACrCC,EACAC,KAEA,MAAMC,EAAoB1D,OAAA2D,OAAA3D,OAAA2D,OAAA,GAAAjB,GAA4Be,GAMtD,OAAOG,UAJalD,EAIK8C,EAHvBK,EAAAA,QAACC,cAAAC,EAAAA,oBAAoBC,SAAQ,CAAC9D,MAAOwD,GAAehD,KADnC,IAACA,CAIS"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/testing/DatePickerEvent/DatePickerEvent.ts","../../src/testing/DatePickerEvent/DateRangePickerEvent.ts","../../src/testing/DragDropFileEvent/DragDropFileEvent.ts","../../src/testing/SelectEvent/SelectEvent.ts","../../src/testing/renderWithDragDropFileProvider/renderWithDragDropFileProvider.tsx","../../src/testing/getInterpolatedStyles/getInterpolatedStyles.ts"],"sourcesContent":["/* eslint-disable */\nimport { act, queries, fireEvent, waitForElementToBeRemoved } from '@testing-library/react'\n\n// find the date picker container from its input field 🤷\nfunction getContainerFromInput(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n // if menu is rendered, then the select is already expanded\n if (queries.queryByRole(datePickerContainer, 'menu')) {\n return\n }\n\n await act(async () => {\n fireEvent.click(input)\n\n expect(await queries.findByRole(datePickerContainer, 'menu')).toBeInTheDocument()\n })\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n // if menu is not rendered, then the select is already collapsed\n if (!queries.queryByRole(datePickerContainer, 'menu')) {\n return\n }\n\n await act(async () => {\n fireEvent.click(queries.getByText(datePickerContainer, 'Close'))\n\n await waitForElementToBeRemoved(() => queries.queryByRole(datePickerContainer, 'menu'))\n })\n}\n\n/**\n * Pick (select) the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(day: string, input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n await expand(input)\n\n await act(async () => {\n input.focus()\n\n const dayElement = queries.getByLabelText(datePickerContainer, day)\n\n if (dayElement && dayElement.getAttribute('aria-checked') == 'false') {\n fireEvent.click(dayElement)\n }\n })\n\n await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n const datePickerContainer = getContainerFromInput(input)\n\n await act(async () => {\n const clearButton = queries.getByLabelText(datePickerContainer, 'Clear selection')\n\n fireEvent.click(clearButton)\n })\n\n await collapse(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n const datePickerContainer = getContainerFromInput(input)\n\n await expand(input)\n\n const selectedDays: HTMLElement[] = queries.queryAllByRole(datePickerContainer, 'checkbox', {\n checked: true,\n })\n\n await collapse(input)\n\n return selectedDays\n}\n\nconst datePickerEvent = {\n getContainer: getContainerFromInput,\n expand,\n collapse,\n pick,\n clear,\n getSelectedDates,\n}\n\nexport default datePickerEvent\n","/* eslint-disable */\nimport { queries } from '@testing-library/react'\n\nimport DatePickerEvent from './DatePickerEvent'\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n await DatePickerEvent.expand(input)\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n await DatePickerEvent.collapse(input)\n}\n\n/**\n * Pick (select) the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(range: [string | null, string | null], input: HTMLElement): Promise<void> {\n const dateRangePickerContainer = DatePickerEvent.getContainer(input)\n\n await expand(input)\n\n const [rangeStart, rangeEnd] = range\n\n if (rangeStart != null) {\n const dateRangeStartInput = queries.getByTestId(\n dateRangePickerContainer,\n 'input-date-range-start'\n )\n\n await DatePickerEvent.pick(rangeStart, dateRangeStartInput)\n }\n\n if (rangeEnd != null) {\n const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, 'input-date-range-end')\n\n await DatePickerEvent.pick(rangeEnd, dateRangeEndInput)\n }\n\n await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n await DatePickerEvent.clear(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n return DatePickerEvent.getSelectedDates(input)\n}\n\nexport const dateRangePickerEvent = {\n getContainer: DatePickerEvent.getContainer,\n expand,\n collapse,\n pick,\n clear,\n getSelectedDates,\n}\n\nexport default dateRangePickerEvent\n","import { createEvent, fireEvent } from '@testing-library/react'\n\nimport toArray from 'utils/toolset/toArray'\n\n/**\n * Get the input dropzone, which is the input parent (label).\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst getDropZoneFromInput = (input: HTMLInputElement): HTMLLabelElement =>\n input.parentNode as HTMLLabelElement\n\n/**\n * Simulates the onDragOver event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragOver = (input: HTMLInputElement) => {\n const dropzone = getDropZoneFromInput(input)\n\n const dragOverEvent = createEvent.dragOver(dropzone)\n\n fireEvent(dropzone, dragOverEvent)\n}\n\n/**\n * Simulates the onDragLeave event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragLeave = (input: HTMLInputElement) => {\n const dropzone = getDropZoneFromInput(input)\n\n const dragLeaveEvent = createEvent.dragLeave(dropzone)\n\n fireEvent(dropzone, dragLeaveEvent)\n}\n\n/**\n * Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dropFiles = (input: HTMLInputElement, files: File | File[]) => {\n const dropzone = getDropZoneFromInput(input)\n\n const fileDropEvent = createEvent.drop(dropzone)\n\n Object.defineProperty(fileDropEvent, 'dataTransfer', { value: { files: toArray(files) } })\n\n fireEvent(dropzone, fileDropEvent)\n}\n\nexport const DragDropFileEvent = {\n dragOver,\n dragLeave,\n dropFiles,\n}\n\nexport default DragDropFileEvent\n","import { act, waitFor, within, waitForElementToBeRemoved, fireEvent } from '@testing-library/react'\n\n// based on https://github.com/romgain/react-select-event/blob/master/src/index.ts\n\n// find the select container from its input field 🤷\nfunction getSelectContainer(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Please, make sure to call expand before trying to get the menu container\n */\nfunction getSelectMenu(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.parentNode!.nextSibling as HTMLElement\n}\n\nfunction getSelectTriggerHandle(input: HTMLElement): HTMLElement {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return input.parentNode!.nextSibling!.nextSibling as HTMLElement\n}\n\nfunction getSelectSearchContainer(input: HTMLElement): HTMLElement {\n return input.parentNode as HTMLElement\n}\n\nfunction isSelectMenuExpanded(input: HTMLElement): boolean {\n const selectContainer = getSelectContainer(input)\n\n /**\n * Once the select is expanded, we have the following structure:\n * +-------------+\n * | Close button (visually hidden)\n * +-------------+\n * | DropdownTrigger\n * +-------------+\n * | Popover\n * +-------------+\n *\n * This, if the container has 3 children, we assume the menu is expanded\n */\n return selectContainer.children.length === 3\n}\n\n/**\n * This is needed because some datasources might be asynchronous.\n * To ensure that the data they retrieve will be available, we wait for the\n * querying phase to finish.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n */\nasync function waitForPendingQuery(input: HTMLElement) {\n const searchContainer = getSelectSearchContainer(input)\n\n if (!within(searchContainer).queryByTestId('select-trigger-loading')) {\n return\n }\n\n await waitForElementToBeRemoved(\n () => within(searchContainer).queryByTestId('select-trigger-loading'),\n { timeout: 2500 }\n )\n}\n\n/**\n * Expand the `Select` menu, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n await waitForPendingQuery(input)\n\n if (isSelectMenuExpanded(input)) {\n return\n }\n\n const triggerHandle = getSelectTriggerHandle(input)\n\n await waitFor(() => {\n expect(triggerHandle).toBeEnabled()\n })\n\n /**\n * Using act and a manually dispatched event so we can account for the\n * state changes that happen when the search input is clicked.\n * This is mainly related to the `handleEvent` from the `useClickOutside` hook.\n */\n act(() => {\n input.dispatchEvent(new MouseEvent('click', { bubbles: true }))\n })\n\n await waitFor(async () => {\n expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()\n })\n}\n\n/**\n * Collapse the `Select` menu, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n if (!isSelectMenuExpanded(input)) {\n return\n }\n\n const triggerHandle = getSelectTriggerHandle(input)\n\n fireEvent.click(triggerHandle)\n\n await waitFor(() => {\n expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()\n })\n}\n\n/**\n * Select the provided option(s), if they are present in the menu.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string} option - Label for the option to be selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function select(option: string, input: HTMLElement): Promise<void> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n\n const optionElement = await within(menuContainer).findByLabelText(option)\n\n // click the option if exists; Select currently closes when an item is clicked.\n if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {\n /**\n * This is a replacement for the `userEvent.click`.\n * We are adopting this approach to remove the peer dep to @testing-library/user-event for\n * applications using this helper, so they are not tied to the same user-event as this library.\n * It follows the same sequence of event stated in the documentation available at:\n * https://testing-library.com/docs/guide-events/#interactions-vs-events\n */\n fireEvent.mouseDown(optionElement)\n\n act(() => {\n optionElement.focus()\n })\n\n fireEvent.mouseUp(optionElement)\n fireEvent.click(optionElement)\n }\n\n // we collapse in the case the option was not clicked\n await collapse(input)\n}\n\n/**\n * Unselect the provided option(s), if they are present in the menu AND are selected.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string} option - Label for the option to be unselected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function unselect(option: string, input: HTMLElement): Promise<void> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n\n const optionElement = await within(menuContainer).findByLabelText(option)\n\n // ensures that the option exists and IS selected\n if (optionElement && optionElement.getAttribute('aria-selected') === 'true') {\n fireEvent.click(optionElement)\n }\n\n // we collapse in the case the option was not clicked\n await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n await waitForPendingQuery(input)\n\n const searchContainer = getSelectSearchContainer(input)\n\n const clearButton = within(searchContainer).getByTestId('select-trigger-clear')\n\n if (clearButton) {\n fireEvent.click(clearButton)\n }\n}\n\n/**\n * Perform search based on the given `query`. It will fail if the option is not found.\n * @param {string} query - Search term.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function search(query: string, input: HTMLElement): Promise<void> {\n fireEvent.change(input, {\n target: { value: query },\n })\n\n await waitForPendingQuery(input)\n\n const menuContainer = getSelectMenu(input)\n\n await within(menuContainer).findAllByRole('option')\n}\n\n/**\n * Get options elements currently available in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getOptions(input: HTMLElement): Promise<HTMLElement[]> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n\n const options = within(menuContainer).queryAllByRole('option')\n\n await collapse(input)\n\n return options\n}\n\n/**\n * Get options elements currently selected in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {\n await expand(input)\n\n const menuContainer = getSelectMenu(input)\n let selectedOptions: HTMLElement[] = []\n\n try {\n selectedOptions = await within(menuContainer).findAllByRole('option', {\n selected: true,\n })\n } catch (err) {\n selectedOptions = []\n }\n\n await collapse(input)\n\n return selectedOptions\n}\n\nexport const selectEvent = {\n select,\n unselect,\n clear,\n search,\n expand,\n collapse,\n getOptions,\n getSelectedOptions,\n isMenuExpanded: isSelectMenuExpanded,\n}\n\nexport default selectEvent\n","import React, { ReactNode } from 'react'\nimport { render } from '@testing-library/react'\nimport type { RenderResult } from '@testing-library/react'\n\nimport type { DragDropFileContextValue } from '../../components/DragDropFile/types'\nimport { DragDropFileContext } from '../../components/DragDropFile/DragDropFile.context'\n\nconst defaultContextValueMock: DragDropFileContextValue = {\n fileList: [],\n onFilesAdded: jest.fn(),\n onRetryUpload: jest.fn(),\n onRemoveFile: jest.fn(),\n}\n\nconst renderWithDragDropFileProvider = (\n ui: ReactNode,\n customContext?: Partial<DragDropFileContextValue>\n): RenderResult => {\n const contextValue = { ...defaultContextValueMock, ...customContext }\n\n const renderedUi = (children: ReactNode) => (\n <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>\n )\n\n return render(renderedUi(ui))\n}\n\nexport default renderWithDragDropFileProvider\n","import type { Interpolation, ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\n\nimport { Alice } from '../../theming/themes'\nimport type { CustomTheme } from '../../theming'\nimport toArray from 'utils/toolset/toArray'\n\ntype ThemedInterpolation = Interpolation<ThemeProps<CustomTheme>>\n\n/**\n * Use this function to simulate the CSS that would be generated by styled-components\n * @param {Interpolation<ThemeProps<CustomTheme>>} styles - A `css` reference with interpolated styles\n * @returns {string} The final CSS\n */\nexport default function getInterpolatedStyles(styles: ThemedInterpolation): string {\n return toArray(styles)\n .map((interpolation) => {\n while (isFunction(interpolation)) {\n interpolation = interpolation({ theme: Alice })\n }\n\n return interpolation\n })\n .join('')\n}\n"],"names":["getContainerFromInput","input","parentNode","expand","datePickerContainer","queries","queryByRole","act","__awaiter","this","fireEvent","click","expect","findByRole","toBeInTheDocument","collapse","getByText","waitForElementToBeRemoved","datePickerEvent","getContainer","day","focus","dayElement","getByLabelText","getAttribute","clearButton","selectedDays","queryAllByRole","checked","DatePickerEvent","dateRangePickerEvent","pick","range","dateRangePickerContainer","rangeStart","rangeEnd","dateRangeStartInput","getByTestId","dateRangeEndInput","clear","getSelectedDates","getDropZoneFromInput","DragDropFileEvent","dragOver","dropzone","dragOverEvent","createEvent","dragLeave","dragLeaveEvent","dropFiles","files","fileDropEvent","drop","Object","defineProperty","value","toArray","getSelectContainer","getSelectMenu","nextSibling","getSelectTriggerHandle","getSelectSearchContainer","isSelectMenuExpanded","children","length","waitForPendingQuery","searchContainer","within","queryByTestId","timeout","triggerHandle","waitFor","toBeEnabled","dispatchEvent","MouseEvent","bubbles","not","selectEvent","select","option","menuContainer","optionElement","findByLabelText","mouseDown","mouseUp","unselect","search","query","change","target","findAllByRole","getOptions","options","getSelectedOptions","selectedOptions","selected","err","isMenuExpanded","defaultContextValueMock","fileList","onFilesAdded","jest","fn","onRetryUpload","onRemoveFile","styles","map","interpolation","isFunction","theme","Alice","join","ui","customContext","contextValue","assign","render","React","createElement","DragDropFileContext","Provider"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@loadsmart/loadsmart-ui",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.10",
|
|
4
4
|
"description": "Miranda UI, a React UI library",
|
|
5
5
|
"main": "dist",
|
|
6
6
|
"files": [
|
|
@@ -151,7 +151,6 @@
|
|
|
151
151
|
"peerDependencies": {
|
|
152
152
|
"@loadsmart/miranda-tokens": ">=1.3.0",
|
|
153
153
|
"@testing-library/react": ">=11.2.6",
|
|
154
|
-
"@testing-library/user-event": "^13.5.0",
|
|
155
154
|
"react": ">=16.8.0",
|
|
156
155
|
"react-dom": ">=16.8.0",
|
|
157
156
|
"styled-components": ">=5.3.0"
|
|
@@ -11,7 +11,6 @@ import selectEvent from '../../testing/SelectEvent'
|
|
|
11
11
|
|
|
12
12
|
import type { SelectProps, Option } from './Select.types'
|
|
13
13
|
import Select from './Select'
|
|
14
|
-
import userEvent from '@testing-library/user-event'
|
|
15
14
|
import type { Selectable } from 'hooks/useSelectable'
|
|
16
15
|
|
|
17
16
|
const {
|
|
@@ -78,7 +77,7 @@ describe('Select', () => {
|
|
|
78
77
|
|
|
79
78
|
expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
|
|
80
79
|
|
|
81
|
-
const options = await
|
|
80
|
+
const options = await screen.findAllByRole('option')
|
|
82
81
|
|
|
83
82
|
for (let i = 0; i < FRUITS.length; i++) {
|
|
84
83
|
expect(options[i]).toHaveTextContent(FRUITS[i].label)
|
|
@@ -88,13 +87,21 @@ describe('Select', () => {
|
|
|
88
87
|
it('expands with the available options when trigger handle is clicked', async () => {
|
|
89
88
|
setup({})
|
|
90
89
|
|
|
90
|
+
const triggerHandle = screen.getByTestId('select-trigger-handle')
|
|
91
|
+
|
|
92
|
+
await waitFor(() => {
|
|
93
|
+
expect(triggerHandle).toBeEnabled()
|
|
94
|
+
})
|
|
95
|
+
|
|
91
96
|
const searchInput = screen.getByLabelText('Select your favorite fruit')
|
|
92
97
|
|
|
93
98
|
expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
|
|
94
99
|
|
|
95
|
-
|
|
100
|
+
fire.click(triggerHandle)
|
|
96
101
|
|
|
97
|
-
|
|
102
|
+
expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
|
|
103
|
+
|
|
104
|
+
const options = await screen.findAllByRole('option')
|
|
98
105
|
|
|
99
106
|
for (let i = 0; i < FRUITS.length; i++) {
|
|
100
107
|
expect(options[i]).toHaveTextContent(FRUITS[i].label)
|
|
@@ -110,9 +117,14 @@ describe('Select', () => {
|
|
|
110
117
|
expect(triggerHandle).toBeDisabled()
|
|
111
118
|
expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
|
|
112
119
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
120
|
+
/**
|
|
121
|
+
* using userEvent.type goes beyond the event dispatching we need here to
|
|
122
|
+
* make the select component to react and expand the menu; additionally,
|
|
123
|
+
* it throws the `act` warning in `useClickOutide`'s `handleEvent`, but we do not have any testable evidence
|
|
124
|
+
* that can make for a valid assertion.
|
|
125
|
+
* that's why we use `fireEvent.change` instead of `userEvent.type`.
|
|
126
|
+
*/
|
|
127
|
+
fire.change(searchInput, { target: { value: generator.word() } })
|
|
116
128
|
|
|
117
129
|
expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
|
|
118
130
|
|
|
@@ -162,9 +174,7 @@ describe('Select', () => {
|
|
|
162
174
|
const searchInput = screen.getByLabelText('Select your favorite fruit')
|
|
163
175
|
const searchedFruit = generator.pickone([...FRUITS])
|
|
164
176
|
|
|
165
|
-
|
|
166
|
-
target: { value: searchedFruit.label },
|
|
167
|
-
})
|
|
177
|
+
await selectEvent.search(searchedFruit.label, searchInput)
|
|
168
178
|
|
|
169
179
|
const options = await selectEvent.getOptions(searchInput)
|
|
170
180
|
|
|
@@ -181,17 +191,41 @@ describe('Select', () => {
|
|
|
181
191
|
|
|
182
192
|
await selectEvent.expand(selectInput)
|
|
183
193
|
|
|
184
|
-
|
|
194
|
+
/**
|
|
195
|
+
* we are using `act` with manually triggered elements so RTL waits for
|
|
196
|
+
* all state changes that happen during click and key presses before proceeding to
|
|
197
|
+
* the assetions.
|
|
198
|
+
* If you remove these and replace with userEvent, you will see the `act` warning.
|
|
199
|
+
*/
|
|
200
|
+
act(() => {
|
|
201
|
+
selectInput.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
|
|
202
|
+
selectInput.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
|
|
203
|
+
})
|
|
204
|
+
|
|
205
|
+
act(() => {
|
|
206
|
+
selectInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
|
|
207
|
+
selectInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape', bubbles: true }))
|
|
208
|
+
})
|
|
209
|
+
|
|
210
|
+
await waitFor(() => {
|
|
211
|
+
expect(onBlur).toHaveBeenCalled()
|
|
212
|
+
})
|
|
185
213
|
|
|
186
214
|
await selectEvent.expand(selectInput)
|
|
187
215
|
|
|
188
|
-
|
|
216
|
+
act(() => {
|
|
217
|
+
selectInput.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
|
|
218
|
+
selectInput.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
|
|
219
|
+
})
|
|
189
220
|
|
|
190
|
-
|
|
221
|
+
act(() => {
|
|
222
|
+
document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
|
|
223
|
+
document.body.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
|
|
224
|
+
})
|
|
191
225
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
226
|
+
await waitFor(() => {
|
|
227
|
+
expect(onBlur).toHaveBeenCalled()
|
|
228
|
+
})
|
|
195
229
|
})
|
|
196
230
|
|
|
197
231
|
it('shrinks when an option is selected', async () => {
|
|
@@ -360,7 +394,7 @@ describe('Select', () => {
|
|
|
360
394
|
|
|
361
395
|
expect(firstSelection).toHaveTextContent(firstOption.label)
|
|
362
396
|
expect(secondSelection).toHaveTextContent(secondOption.label)
|
|
363
|
-
}
|
|
397
|
+
})
|
|
364
398
|
|
|
365
399
|
it('unselects a selected option keeping selected the others', async () => {
|
|
366
400
|
const [firstOption, secondOption, thirdOption] = generator.pickset([...FRUITS], 3)
|
|
@@ -453,9 +487,7 @@ describe('Select', () => {
|
|
|
453
487
|
const searchInput = screen.getByLabelText('Select the project manager')
|
|
454
488
|
const searchedUser = generator.pickone([...USERS])
|
|
455
489
|
|
|
456
|
-
|
|
457
|
-
target: { value: searchedUser.name },
|
|
458
|
-
})
|
|
490
|
+
await selectEvent.search(searchedUser.name, searchInput)
|
|
459
491
|
|
|
460
492
|
const options = await selectEvent.getOptions(searchInput)
|
|
461
493
|
|
|
@@ -544,7 +576,7 @@ describe('Select', () => {
|
|
|
544
576
|
const optionText = getOptionText(option)
|
|
545
577
|
expect(selectedOptions[index]).toHaveTextContent(optionText)
|
|
546
578
|
}
|
|
547
|
-
}
|
|
579
|
+
})
|
|
548
580
|
|
|
549
581
|
it.each([[{ multiple: true }], [{ multiple: false }]])(
|
|
550
582
|
'overrides the empty component with %s',
|
|
@@ -1056,6 +1088,6 @@ describe('Select', () => {
|
|
|
1056
1088
|
|
|
1057
1089
|
await selectEvent.expand(searchInput)
|
|
1058
1090
|
expect(screen.getByText('No more options.')).toBeInTheDocument()
|
|
1059
|
-
}
|
|
1091
|
+
})
|
|
1060
1092
|
})
|
|
1061
1093
|
})
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { act, waitFor, within, waitForElementToBeRemoved } from '@testing-library/react'
|
|
2
|
-
import userEvent from '@testing-library/user-event'
|
|
1
|
+
import { act, waitFor, within, waitForElementToBeRemoved, fireEvent } from '@testing-library/react'
|
|
3
2
|
|
|
4
3
|
// based on https://github.com/romgain/react-select-event/blob/master/src/index.ts
|
|
5
4
|
|
|
@@ -32,7 +31,7 @@ function isSelectMenuExpanded(input: HTMLElement): boolean {
|
|
|
32
31
|
/**
|
|
33
32
|
* Once the select is expanded, we have the following structure:
|
|
34
33
|
* +-------------+
|
|
35
|
-
* | Close button (visually
|
|
34
|
+
* | Close button (visually hidden)
|
|
36
35
|
* +-------------+
|
|
37
36
|
* | DropdownTrigger
|
|
38
37
|
* +-------------+
|
|
@@ -41,7 +40,7 @@ function isSelectMenuExpanded(input: HTMLElement): boolean {
|
|
|
41
40
|
*
|
|
42
41
|
* This, if the container has 3 children, we assume the menu is expanded
|
|
43
42
|
*/
|
|
44
|
-
return selectContainer.children.length
|
|
43
|
+
return selectContainer.children.length === 3
|
|
45
44
|
}
|
|
46
45
|
|
|
47
46
|
/**
|
|
@@ -81,7 +80,14 @@ async function expand(input: HTMLElement): Promise<void> {
|
|
|
81
80
|
expect(triggerHandle).toBeEnabled()
|
|
82
81
|
})
|
|
83
82
|
|
|
84
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Using act and a manually dispatched event so we can account for the
|
|
85
|
+
* state changes that happen when the search input is clicked.
|
|
86
|
+
* This is mainly related to the `handleEvent` from the `useClickOutside` hook.
|
|
87
|
+
*/
|
|
88
|
+
act(() => {
|
|
89
|
+
input.dispatchEvent(new MouseEvent('click', { bubbles: true }))
|
|
90
|
+
})
|
|
85
91
|
|
|
86
92
|
await waitFor(async () => {
|
|
87
93
|
expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()
|
|
@@ -100,7 +106,7 @@ async function collapse(input: HTMLElement): Promise<void> {
|
|
|
100
106
|
|
|
101
107
|
const triggerHandle = getSelectTriggerHandle(input)
|
|
102
108
|
|
|
103
|
-
|
|
109
|
+
fireEvent.click(triggerHandle)
|
|
104
110
|
|
|
105
111
|
await waitFor(() => {
|
|
106
112
|
expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()
|
|
@@ -123,7 +129,21 @@ async function select(option: string, input: HTMLElement): Promise<void> {
|
|
|
123
129
|
|
|
124
130
|
// click the option if exists; Select currently closes when an item is clicked.
|
|
125
131
|
if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
|
|
126
|
-
|
|
132
|
+
/**
|
|
133
|
+
* This is a replacement for the `userEvent.click`.
|
|
134
|
+
* We are adopting this approach to remove the peer dep to @testing-library/user-event for
|
|
135
|
+
* applications using this helper, so they are not tied to the same user-event as this library.
|
|
136
|
+
* It follows the same sequence of event stated in the documentation available at:
|
|
137
|
+
* https://testing-library.com/docs/guide-events/#interactions-vs-events
|
|
138
|
+
*/
|
|
139
|
+
fireEvent.mouseDown(optionElement)
|
|
140
|
+
|
|
141
|
+
act(() => {
|
|
142
|
+
optionElement.focus()
|
|
143
|
+
})
|
|
144
|
+
|
|
145
|
+
fireEvent.mouseUp(optionElement)
|
|
146
|
+
fireEvent.click(optionElement)
|
|
127
147
|
}
|
|
128
148
|
|
|
129
149
|
// we collapse in the case the option was not clicked
|
|
@@ -145,8 +165,8 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
|
|
|
145
165
|
const optionElement = await within(menuContainer).findByLabelText(option)
|
|
146
166
|
|
|
147
167
|
// ensures that the option exists and IS selected
|
|
148
|
-
if (optionElement && optionElement.getAttribute('aria-selected')
|
|
149
|
-
|
|
168
|
+
if (optionElement && optionElement.getAttribute('aria-selected') === 'true') {
|
|
169
|
+
fireEvent.click(optionElement)
|
|
150
170
|
}
|
|
151
171
|
|
|
152
172
|
// we collapse in the case the option was not clicked
|
|
@@ -165,11 +185,9 @@ async function clear(input: HTMLElement): Promise<void> {
|
|
|
165
185
|
|
|
166
186
|
const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
|
|
167
187
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
}
|
|
172
|
-
})
|
|
188
|
+
if (clearButton) {
|
|
189
|
+
fireEvent.click(clearButton)
|
|
190
|
+
}
|
|
173
191
|
}
|
|
174
192
|
|
|
175
193
|
/**
|
|
@@ -179,11 +197,15 @@ async function clear(input: HTMLElement): Promise<void> {
|
|
|
179
197
|
* @returns {Promise<void>}
|
|
180
198
|
*/
|
|
181
199
|
async function search(query: string, input: HTMLElement): Promise<void> {
|
|
182
|
-
|
|
200
|
+
fireEvent.change(input, {
|
|
201
|
+
target: { value: query },
|
|
202
|
+
})
|
|
183
203
|
|
|
184
|
-
|
|
204
|
+
await waitForPendingQuery(input)
|
|
205
|
+
|
|
206
|
+
const menuContainer = getSelectMenu(input)
|
|
185
207
|
|
|
186
|
-
await within(
|
|
208
|
+
await within(menuContainer).findAllByRole('option')
|
|
187
209
|
}
|
|
188
210
|
|
|
189
211
|
/**
|