@loadsmart/loadsmart-ui 6.0.9 → 6.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/testing/index.js +1 -1
  4. package/dist/testing/index.js.map +1 -1
  5. package/package.json +1 -2
  6. package/src/components/Select/Select.test.tsx +54 -22
  7. package/src/components/Tag/Tag.tsx +6 -1
  8. package/src/testing/SelectEvent/SelectEvent.ts +39 -17
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("@testing-library/user-event"),r=require("../miranda-compatibility.theme-ec2c3370.js"),o=require("react");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@loadsmart/miranda-tokens");var a=c(n),d=c(o);function l(e){return e.parentNode.parentNode.parentNode.parentNode}function u(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(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 s(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(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 f={getContainer:l,expand:u,collapse:s,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const r=l(n);yield u(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 s(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(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 s(i)}))},getSelectedDates:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=l(i);yield u(i);const n=t.queries.queryAllByRole(e,"checkbox",{checked:!0});return yield s(i),n}))}};function v(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.expand(t)}))}function y(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.collapse(t)}))}const p={getContainer:f.getContainer,expand:v,collapse:y,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=f.getContainer(n);yield v(n);const[r,o]=i;if(null!=r){const i=t.queries.getByTestId(e,"input-date-range-start");yield f.pick(r,i)}if(null!=o){const i=t.queries.getByTestId(e,"input-date-range-end");yield f.pick(o,i)}yield y(n)}))},clear:function(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.clear(t)}))},getSelectedDates:function(t){return e.__awaiter(this,void 0,void 0,(function*(){return f.getSelectedDates(t)}))}},_=e=>e.parentNode,h={dragOver:e=>{const i=_(e),n=t.createEvent.dragOver(i);t.fireEvent(i,n)},dragLeave:e=>{const i=_(e),n=t.createEvent.dragLeave(i);t.fireEvent(i,n)},dropFiles:(e,n)=>{const r=_(e),o=t.createEvent.drop(r);Object.defineProperty(o,"dataTransfer",{value:{files:i.toArray(n)}}),t.fireEvent(r,o)}};function g(e){return e.parentNode.parentNode.parentNode}function w(e){return e.parentNode.parentNode.nextSibling}function x(e){return e.parentNode.nextSibling.nextSibling}function B(e){return e.parentNode}function q(e){return 3==g(e).children.length}function b(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=B(i);t.within(e).queryByTestId("select-trigger-loading")&&(yield t.waitForElementToBeRemoved((()=>t.within(e).queryByTestId("select-trigger-loading")),{timeout:2500}))}))}function m(i){return e.__awaiter(this,void 0,void 0,(function*(){if(yield b(i),q(i))return;const n=x(i);yield t.waitFor((()=>{expect(n).toBeEnabled()})),a.default.click(n),yield t.waitFor((()=>e.__awaiter(this,void 0,void 0,(function*(){expect(yield t.within(g(i)).findByRole("listbox")).toBeInTheDocument()}))))}))}function k(i){return e.__awaiter(this,void 0,void 0,(function*(){if(!q(i))return;const e=x(i);a.default.click(e),yield t.waitFor((()=>{expect(t.within(g(i)).queryByRole("listbox")).not.toBeInTheDocument()}))}))}const E={select:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield m(n);const e=w(n),r=yield t.within(e).findByLabelText(i);r&&"false"==r.getAttribute("aria-selected")&&a.default.click(r),yield k(n)}))},unselect:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield m(n);const e=w(n),r=yield t.within(e).findByLabelText(i);r&&"true"==r.getAttribute("aria-selected")&&a.default.click(r),yield k(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield b(i);const e=B(i),n=t.within(e).getByTestId("select-trigger-clear");t.act((()=>{n&&a.default.click(n)}))}))},search:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=g(n);a.default.type(n,i),yield t.within(e).findAllByRole("option",void 0,{timeout:2500})}))},expand:m,collapse:k,getOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield m(i);const e=w(i),n=t.within(e).queryAllByRole("option");return yield k(i),n}))},getSelectedOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield m(i);const e=w(i);let n=[];try{n=yield t.within(e).findAllByRole("option",{selected:!0})}catch(e){n=[]}return yield k(i),n}))},isMenuExpanded:q};const D={fileList:[],onFilesAdded:jest.fn(),onRetryUpload:jest.fn(),onRemoveFile:jest.fn()};exports.DatePickerEvent=f,exports.DateRangePickerEvent=p,exports.DragDropFileEvent=h,exports.SelectEvent=E,exports.getInterpolatedStyles=function(e){return i.toArray(e).map((e=>{for(;r.isFunction(e);)e=e({theme:r.alice});return e})).join("")},exports.renderWithDragDropFileProvider=(i,n)=>{const r=Object.assign(Object.assign({},D),n);return t.render((o=i,d.default.createElement(e.DragDropFileContext.Provider,{value:r},o)));var o};
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
package/dist/testing/index.js.map CHANGED
@@ -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":"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"}
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.9",
3
+ "version": "6.0.11",
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"
package/src/components/Select/Select.test.tsx CHANGED
@@ -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 selectEvent.getOptions(searchInput)
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
- await selectEvent.expand(searchInput)
100
+ fire.click(triggerHandle)
96
101
 
97
- const options = await selectEvent.getOptions(searchInput)
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
- userEvent.type(searchInput, generator.word())
114
-
115
- await selectEvent.expand(searchInput)
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
- fire.change(searchInput, {
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
- userEvent.click(document.body)
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
- userEvent.keyboard('{Escape}{/Escape}')
216
+ act(() => {
217
+ selectInput.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
218
+ selectInput.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
219
+ })
189
220
 
190
- expect(onBlur).toHaveBeenCalledTimes(2)
221
+ act(() => {
222
+ document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
223
+ document.body.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
224
+ })
191
225
 
192
- expect(onBlur).toHaveBeenNthCalledWith(1, new MouseEvent('mousedown'))
193
- expect(onBlur).toHaveBeenNthCalledWith(2, new KeyboardEvent('keyup'))
194
- expect(selectEvent.isMenuExpanded(selectInput)).toBe(false)
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
- }, 30_000)
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
- fire.change(searchInput, {
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
- }, 30_000)
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
- }, 30_000)
1091
+ })
1060
1092
  })
1061
1093
  })
package/src/components/Tag/Tag.tsx CHANGED
@@ -355,7 +355,12 @@ function Tag(props: TagProps): JSX.Element {
355
355
  {removable && !disabled && (
356
356
  <>
357
357
  <StyledSpacer aria-hidden="true" size={size} />
358
- <StyledCloseButton {...getRemoveButtonProps?.()} size={size} onClick={onRemove}>
358
+ <StyledCloseButton
359
+ type="button"
360
+ {...getRemoveButtonProps?.()}
361
+ size={size}
362
+ onClick={onRemove}
363
+ >
359
364
  <CloseIcon name="close" variant={variant} size={size} />
360
365
  </StyledCloseButton>
361
366
  </>
package/src/testing/SelectEvent/SelectEvent.ts CHANGED
@@ -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 hiddren)
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 == 3
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
- userEvent.click(triggerHandle)
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
- userEvent.click(triggerHandle)
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
- userEvent.click(optionElement)
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') == 'true') {
149
- userEvent.click(optionElement)
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
- act(() => {
169
- if (clearButton) {
170
- userEvent.click(clearButton)
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
- const selectContainer = getSelectContainer(input)
200
+ fireEvent.change(input, {
201
+ target: { value: query },
202
+ })
183
203
 
184
- userEvent.type(input, query)
204
+ await waitForPendingQuery(input)
205
+
206
+ const menuContainer = getSelectMenu(input)
185
207
 
186
- await within(selectContainer).findAllByRole('option', undefined, { timeout: 2500 })
208
+ await within(menuContainer).findAllByRole('option')
187
209
  }
188
210
 
189
211
  /**