From 61f184de4f2dcf8e30f80e3a623ee198042ee2ba Mon Sep 17 00:00:00 2001 From: Emir Hasan Date: Tue, 5 Nov 2024 11:30:40 +0100 Subject: [PATCH 1/9] Add custom property with default value for multisuggest dropdown max-height --- src/components/MultiSelect/multiselect.scss | 8 ++++++++ src/components/index.scss | 1 + 2 files changed, 9 insertions(+) create mode 100644 src/components/MultiSelect/multiselect.scss diff --git a/src/components/MultiSelect/multiselect.scss b/src/components/MultiSelect/multiselect.scss new file mode 100644 index 00000000..059400fc --- /dev/null +++ b/src/components/MultiSelect/multiselect.scss @@ -0,0 +1,8 @@ +@import "~@blueprintjs/select/src/components/multi-select/multi-select"; + +.#{$ns}-multi-select-popover { + .#{$ns}-menu { + max-width: unset; + max-height: var(--multisuggest-max-height, 45vh); + } +} diff --git a/src/components/index.scss b/src/components/index.scss index 191b8ebd..6cf05616 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -41,3 +41,4 @@ @import "./AutoSuggestion/AutoSuggestion"; @import "./Badge/badge"; @import "./PropertyValuePair/propertyvalue"; +@import "./MultiSelect/multiselect"; From 07c16c5617794f7088b6546040fe3458bd2d1d64 Mon Sep 17 00:00:00 2001 From: Emir Hasan Date: Tue, 5 Nov 2024 11:33:25 +0100 Subject: [PATCH 2/9] Calculate the multisuggest dropdown max-height property when prop is provided --- src/components/MultiSelect/MultiSelect.tsx | 41 ++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index 9637f442..b36e06fe 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -122,6 +122,10 @@ interface MultiSelectCommonProps * If not provided, values are filtered by their labels */ searchPredicate?: (item: T, query: string) => boolean; + /** + * Used to calculate the max height of the dropdown. + */ + maxHeight?: boolean | number; } export type MultiSelectProps = MultiSelectCommonProps & @@ -177,6 +181,7 @@ export function MultiSelect({ "data-testid": dataTestid, wrapperProps, searchPredicate, + maxHeight, ...otherMultiSelectProps }: MultiSelectProps) { // Options created by a user @@ -189,6 +194,8 @@ export function MultiSelect({ const [selectedItems, setSelectedItems] = React.useState(() => prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : [] ); + // Max height of the menu + const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState(null); //currently focused element in popover list const [focusedItem, setFocusedItem] = React.useState(null); @@ -249,6 +256,39 @@ export function MultiSelect({ setSelectedItems(externalSelectedItems); }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]); + React.useEffect(() => { + if (!maxHeight) return; + + const maxHeightToProcess = typeof maxHeight === "number" ? maxHeight : 100; + + const calculateMaxHeight = () => { + if (inputRef.current) { + const viewportHeight = window.innerHeight; + + // Get the distance from the top of the page to the bottom of the input + const dropdownHeight = + inputRef.current.getBoundingClientRect().top + inputRef.current.getBoundingClientRect().bottom; + + const availableSpace = viewportHeight - dropdownHeight; + + // Calculate the intended max height in vh + const intendedHeight = (maxHeightToProcess / 100) * viewportHeight; + + // Determine the max height to apply in vh units + const maxAllowedHeight = Math.min(intendedHeight, availableSpace); + + setCalculatedMaxHeight(Math.floor((maxAllowedHeight / viewportHeight) * 100)); + } + }; + + calculateMaxHeight(); + window.addEventListener("resize", calculateMaxHeight); + + return () => { + window.removeEventListener("resize", calculateMaxHeight); + }; + }, [maxHeight]); + /** * using the equality prop specified checks if an item has already been selected * @param matcher @@ -519,6 +559,7 @@ export function MultiSelect({ { "data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined, "data-testid": dataTestid ? dataTestid + "_dropdown" : undefined, + style: { "--multisuggest-max-height": `${calculatedMaxHeight}vh` } as React.CSSProperties, } as BlueprintMultiSelectProps["popoverContentProps"] } /> From 89f0e9d0f382abb8ac4007b3f5310a957a156a7d Mon Sep 17 00:00:00 2001 From: Emir Hasan Date: Wed, 13 Nov 2024 07:49:24 +0100 Subject: [PATCH 3/9] Resolve comments --- src/components/MultiSelect/MultiSelect.tsx | 22 ++++++++++++------- .../_multisuggestfield.scss} | 2 +- src/components/index.scss | 2 +- 3 files changed, 16 insertions(+), 10 deletions(-) rename src/components/{MultiSelect/multiselect.scss => MultiSuggestField/_multisuggestfield.scss} (69%) diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index f4918a9d..d2191083 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -120,7 +120,9 @@ interface MultiSelectCommonProps */ searchPredicate?: (item: T, query: string) => boolean; /** - * Used to calculate the max height of the dropdown. + * Used to set the max height of the dropdown. + * Alowed range is 45-100. If set to true, the dropdown will take the full height of the viewport, if not provided default is 45. + * The unit is vh (counts of 1/100 viewport height). */ maxHeight?: boolean | number; } @@ -252,7 +254,7 @@ function MultiSelect({ }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]); React.useEffect(() => { - if (!maxHeight) return; + if (!maxHeight || (typeof maxHeight === "number" && maxHeight > 100)) return; const maxHeightToProcess = typeof maxHeight === "number" ? maxHeight : 100; @@ -260,11 +262,11 @@ function MultiSelect({ if (inputRef.current) { const viewportHeight = window.innerHeight; - // Get the distance from the top of the page to the bottom of the input - const dropdownHeight = - inputRef.current.getBoundingClientRect().top + inputRef.current.getBoundingClientRect().bottom; + // Get the height of the input target + const inputTargetHeight = + inputRef.current.getBoundingClientRect().height + inputRef.current.getBoundingClientRect().bottom; - const availableSpace = viewportHeight - dropdownHeight; + const availableSpace = viewportHeight - inputTargetHeight; // Calculate the intended max height in vh const intendedHeight = (maxHeightToProcess / 100) * viewportHeight; @@ -282,7 +284,7 @@ function MultiSelect({ return () => { window.removeEventListener("resize", calculateMaxHeight); }; - }, [maxHeight]); + }, [maxHeight, selectedItems, filteredItems, externalItems]); /** * using the equality prop specified checks if an item has already been selected @@ -554,7 +556,11 @@ function MultiSelect({ { "data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined, "data-testid": dataTestid ? dataTestid + "_dropdown" : undefined, - style: { "--multisuggest-max-height": `${calculatedMaxHeight}vh` } as React.CSSProperties, + style: calculatedMaxHeight + ? ({ + "--eccgui-multisuggestfield-max-height": `${calculatedMaxHeight}vh`, + } as React.CSSProperties) + : undefined, } as BlueprintMultiSelectProps["popoverContentProps"] } /> diff --git a/src/components/MultiSelect/multiselect.scss b/src/components/MultiSuggestField/_multisuggestfield.scss similarity index 69% rename from src/components/MultiSelect/multiselect.scss rename to src/components/MultiSuggestField/_multisuggestfield.scss index 059400fc..265621b7 100644 --- a/src/components/MultiSelect/multiselect.scss +++ b/src/components/MultiSuggestField/_multisuggestfield.scss @@ -3,6 +3,6 @@ .#{$ns}-multi-select-popover { .#{$ns}-menu { max-width: unset; - max-height: var(--multisuggest-max-height, 45vh); + max-height: var(--eccgui-multisuggestfield-max-height, 45vh); } } diff --git a/src/components/index.scss b/src/components/index.scss index 6cf05616..ea2a3dd8 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -41,4 +41,4 @@ @import "./AutoSuggestion/AutoSuggestion"; @import "./Badge/badge"; @import "./PropertyValuePair/propertyvalue"; -@import "./MultiSelect/multiselect"; +@import "./MultiSuggestField/multisuggestfield"; From d260fc0932afa3b6b638b27816321ce323db7adc Mon Sep 17 00:00:00 2001 From: Emir Hasan Date: Wed, 13 Nov 2024 07:49:53 +0100 Subject: [PATCH 4/9] Add tests --- .../tests/MultiSuggestField.test.tsx | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx b/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx index 0a440a2f..d1850b3e 100644 --- a/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx +++ b/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx @@ -549,5 +549,99 @@ describe("MultiSuggestField", () => { const tagsAfterRemove = container.querySelectorAll("span[data-tag-index]"); expect(tagsAfterRemove.length).toBe(0); }); + + it("should not contain the custom css property when maxHeight not provided", async () => { + const { container } = render( + + ); + + const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect"); + + fireEvent.click(inputTargetContainer); + + await waitFor(() => { + const dropdown = screen.getByTestId("multi-suggest-field_dropdown"); + const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue( + "--eccgui-multisuggestfield-max-height" + ); + + expect(customProperty).toBeFalsy(); + }); + }); + + it("should notcontain the custom css property when maxHeight greater than 100", async () => { + const { container } = render( + + ); + + const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect"); + + fireEvent.click(inputTargetContainer); + + await waitFor(() => { + const dropdown = screen.getByTestId("multi-suggest-field_dropdown"); + + const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue( + "--eccgui-multisuggestfield-max-height" + ); + + expect(customProperty).toBeFalsy(); + }); + }); + + it("should contain the custom css property when maxHeight is true", async () => { + const { container } = render( + + ); + + const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect"); + + fireEvent.click(inputTargetContainer); + + await waitFor(() => { + const dropdown = screen.getByTestId("multi-suggest-field_dropdown"); + + const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue( + "--eccgui-multisuggestfield-max-height" + ); + + expect(customProperty).toBeDefined(); + }); + }); + + it("should contain the custom css property when maxHeight a valid number value", async () => { + const { container } = render( + + ); + + const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect"); + + fireEvent.click(inputTargetContainer); + + await waitFor(() => { + const dropdown = screen.getByTestId("multi-suggest-field_dropdown"); + + const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue( + "--eccgui-multisuggestfield-max-height" + ); + + expect(customProperty).toBeDefined(); + }); + }); }); }); From e15f8d5300043a71756103feb957d1c2dcea602c Mon Sep 17 00:00:00 2001 From: Emir Hasan Date: Wed, 13 Nov 2024 07:50:21 +0100 Subject: [PATCH 5/9] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c65f082a..9173238b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `noTogglerContentSuffix`: Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary. This allows to add non-string elements to both the full-view content and the pure string content. - `` - An optional custom search function property has been added, it defines how to filter elements. + - Added a prop `maxHeight` to limit the height of the dropdown by automatically calculating the available height in vh. - `` and `` - helper components to create flex layouts for positioning sub elements - stop misusing `Toolbar*` components to do that (anti pattern) From 80f09c9537e74d4735c467980579176fdbbad615 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 13 Nov 2024 16:02:53 +0100 Subject: [PATCH 6/9] rename property and improve its description --- CHANGELOG.md | 2 +- src/components/MultiSelect/MultiSelect.tsx | 16 ++++++++-------- .../tests/MultiSuggestField.test.tsx | 14 +++++++------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a62c92ab..6a1b437e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `noTogglerContentSuffix`: Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary. This allows to add non-string elements to both the full-view content and the pure string content. - `` - An optional custom search function property has been added, it defines how to filter elements. - - Added a prop `maxHeight` to limit the height of the dropdown by automatically calculating the available height in vh. + - Added a prop `limitHeightOpened` to limit the height of the dropdown by automatically calculating the available height in vh. - `` and `` - helper components to create flex layouts for positioning sub elements - stop misusing `Toolbar*` components to do that (anti pattern) diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index d2191083..ca4bbcab 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -120,11 +120,11 @@ interface MultiSelectCommonProps */ searchPredicate?: (item: T, query: string) => boolean; /** - * Used to set the max height of the dropdown. - * Alowed range is 45-100. If set to true, the dropdown will take the full height of the viewport, if not provided default is 45. - * The unit is vh (counts of 1/100 viewport height). + * Limits the height of the input target plus its dropdown menu when it is opened. + * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100). + * If not set than the dropdown menu cannot be larger that appr. the half of the available viewport hight. */ - maxHeight?: boolean | number; + limitHeightOpened?: boolean | number; } /** @deprecated (v25) use MultiSuggestFieldProps */ @@ -178,7 +178,7 @@ function MultiSelect({ "data-testid": dataTestid, wrapperProps, searchPredicate, - maxHeight, + limitHeightOpened, ...otherMultiSelectProps }: MultiSelectProps) { // Options created by a user @@ -254,9 +254,9 @@ function MultiSelect({ }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]); React.useEffect(() => { - if (!maxHeight || (typeof maxHeight === "number" && maxHeight > 100)) return; + if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100)) return; - const maxHeightToProcess = typeof maxHeight === "number" ? maxHeight : 100; + const maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100; const calculateMaxHeight = () => { if (inputRef.current) { @@ -284,7 +284,7 @@ function MultiSelect({ return () => { window.removeEventListener("resize", calculateMaxHeight); }; - }, [maxHeight, selectedItems, filteredItems, externalItems]); + }, [limitHeightOpened, selectedItems, filteredItems, externalItems]); /** * using the equality prop specified checks if an item has already been selected diff --git a/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx b/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx index d1850b3e..94fdf8a6 100644 --- a/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx +++ b/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx @@ -550,7 +550,7 @@ describe("MultiSuggestField", () => { expect(tagsAfterRemove.length).toBe(0); }); - it("should not contain the custom css property when maxHeight not provided", async () => { + it("should not contain the custom css property when limitHeightOpened not provided", async () => { const { container } = render( ); @@ -569,12 +569,12 @@ describe("MultiSuggestField", () => { }); }); - it("should notcontain the custom css property when maxHeight greater than 100", async () => { + it("should notcontain the custom css property when limitHeightOpened greater than 100", async () => { const { container } = render( ); @@ -594,12 +594,12 @@ describe("MultiSuggestField", () => { }); }); - it("should contain the custom css property when maxHeight is true", async () => { + it("should contain the custom css property when limitHeightOpened is true", async () => { const { container } = render( ); @@ -619,12 +619,12 @@ describe("MultiSuggestField", () => { }); }); - it("should contain the custom css property when maxHeight a valid number value", async () => { + it("should contain the custom css property when limitHeightOpened a valid number value", async () => { const { container } = render( ); From c4d974c59f6438325ef530592d321b8899837c98 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 13 Nov 2024 16:17:42 +0100 Subject: [PATCH 7/9] fix overlays provider in example story --- .../MultiSuggestField.stories.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx index 23fb1cb0..50b6cb6d 100644 --- a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx +++ b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useMemo, useState } from "react"; import { loremIpsum } from "react-lorem-ipsum"; +import { OverlaysProvider } from "@blueprintjs/core"; import { Meta, StoryFn } from "@storybook/react"; import { fn } from "@storybook/test"; @@ -36,9 +37,9 @@ export default { const Template: StoryFn = (args) => { return ( -
+ -
+ ); }; @@ -91,7 +92,7 @@ const DeferredSelectionTemplate: StoryFn = () => { const identity = useCallback((item: string): string => item, []); return ( - <> +
Selected items loaded: {loaded.toString()}

@@ -107,7 +108,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
- + ); }; @@ -142,14 +143,16 @@ const CreationTemplate: StoryFn = () => { }, []); return ( - - items={items} - selectedItems={selectedValues} - onSelection={handleOnSelect} - itemId={identity} - itemLabel={identity} - createNewItemFromQuery={identity} - /> + + + items={items} + selectedItems={selectedValues} + onSelection={handleOnSelect} + itemId={identity} + itemLabel={identity} + createNewItemFromQuery={identity} + /> + ); }; @@ -173,7 +176,7 @@ const WithResetButtonComponent = (): JSX.Element => { }; return ( -
+

@@ -185,7 +188,7 @@ const WithResetButtonComponent = (): JSX.Element => { itemLabel={({ testLabel }) => testLabel} createNewItemFromQuery={(query) => ({ testId: `${query}-id`, testLabel: query })} /> -
+ ); }; @@ -215,7 +218,7 @@ const WithinModal = (): JSX.Element => { }; return ( - <> + setIsOpen(false)} canOutsideClickClose> @@ -233,7 +236,7 @@ const WithinModal = (): JSX.Element => { /> - + ); }; From 3bf57a636c570fbc6ede717500288843580b8a63 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 13 Nov 2024 17:48:44 +0100 Subject: [PATCH 8/9] fix the calculation --- src/components/MultiSelect/MultiSelect.tsx | 40 +++++++------------ .../MultiSuggestField.stories.tsx | 6 +-- 2 files changed, 18 insertions(+), 28 deletions(-) diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index ca4bbcab..091d83c9 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -192,7 +192,7 @@ function MultiSelect({ prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : [] ); // Max height of the menu - const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState(null); + const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState(null); //currently focused element in popover list const [focusedItem, setFocusedItem] = React.useState(null); @@ -254,37 +254,27 @@ function MultiSelect({ }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]); React.useEffect(() => { - if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100)) return; - - const maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100; - const calculateMaxHeight = () => { if (inputRef.current) { - const viewportHeight = window.innerHeight; - // Get the height of the input target - const inputTargetHeight = - inputRef.current.getBoundingClientRect().height + inputRef.current.getBoundingClientRect().bottom; - - const availableSpace = viewportHeight - inputTargetHeight; - - // Calculate the intended max height in vh - const intendedHeight = (maxHeightToProcess / 100) * viewportHeight; - - // Determine the max height to apply in vh units - const maxAllowedHeight = Math.min(intendedHeight, availableSpace); - - setCalculatedMaxHeight(Math.floor((maxAllowedHeight / viewportHeight) * 100)); + const inputTargetHeight = inputRef.current.getBoundingClientRect().height; + // Calculate the menu dropdown by using the limited height reduced by the target height + setCalculatedMaxHeight(`calc(${maxHeightToProcess}vh - ${inputTargetHeight}px)`); } }; - calculateMaxHeight(); - window.addEventListener("resize", calculateMaxHeight); - - return () => { + const removeListener = () => { window.removeEventListener("resize", calculateMaxHeight); }; - }, [limitHeightOpened, selectedItems, filteredItems, externalItems]); + + if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100)) + return removeListener; + const maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100; + + calculateMaxHeight(); + window.addEventListener("resize", calculateMaxHeight); + return removeListener; + }, [limitHeightOpened, selectedItems]); /** * using the equality prop specified checks if an item has already been selected @@ -558,7 +548,7 @@ function MultiSelect({ "data-testid": dataTestid ? dataTestid + "_dropdown" : undefined, style: calculatedMaxHeight ? ({ - "--eccgui-multisuggestfield-max-height": `${calculatedMaxHeight}vh`, + "--eccgui-multisuggestfield-max-height": `${calculatedMaxHeight}`, } as React.CSSProperties) : undefined, } as BlueprintMultiSelectProps["popoverContentProps"] diff --git a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx index 50b6cb6d..eb66659b 100644 --- a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx +++ b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx @@ -8,7 +8,7 @@ import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from const testLabels = loremIpsum({ p: 1, - avgSentencesPerParagraph: 5, + avgSentencesPerParagraph: 100, avgWordsPerSentence: 1, startWithLoremIpsum: false, random: false, @@ -17,9 +17,9 @@ const testLabels = loremIpsum({ .split(".") .map((item) => item.trim()); -const items = new Array(5).fill(undefined).map((_, id) => { +const items = new Array(100).fill(undefined).map((_, id) => { const testLabel = testLabels[id]; - return { testLabel, testId: `${testLabel}-id` }; + return { testLabel, testId: `${testLabel}-${id}` }; }); export default { From abf10408ec86a4f81e44f815ee9637b9b3cd4ab9 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 13 Nov 2024 18:31:23 +0100 Subject: [PATCH 9/9] dix tests --- .../MultiSuggestField.stories.tsx | 8 ++++---- .../tests/MultiSuggestField.test.tsx | 18 +++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx index eb66659b..370d87b7 100644 --- a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx +++ b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx @@ -8,7 +8,7 @@ import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from const testLabels = loremIpsum({ p: 1, - avgSentencesPerParagraph: 100, + avgSentencesPerParagraph: 50, avgWordsPerSentence: 1, startWithLoremIpsum: false, random: false, @@ -17,9 +17,9 @@ const testLabels = loremIpsum({ .split(".") .map((item) => item.trim()); -const items = new Array(100).fill(undefined).map((_, id) => { - const testLabel = testLabels[id]; - return { testLabel, testId: `${testLabel}-${id}` }; +const items = new Array(50).fill(undefined).map((_, id) => { + const testLabel = `${testLabels[id]}${id + 1}`; + return { testLabel, testId: `${testLabel}-id` }; }); export default { diff --git a/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx b/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx index 94fdf8a6..c01e1b52 100644 --- a/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx +++ b/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx @@ -6,10 +6,10 @@ import "@testing-library/jest-dom"; import { MultiSuggestField } from "../../../../index"; import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories"; -const testLabels = ["label1", "label2", "label3", "label4", "label5"]; +//const testLabels = ["label1", "label2", "label3", "label4", "label5"]; -const items = new Array(5).fill(undefined).map((_, id) => { - const testLabel = testLabels[id]; +const items = new Array(50).fill(undefined).map((_, id) => { + const testLabel = `label${id + 1}`; return { testLabel, testId: `${testLabel}-id` }; }); @@ -108,7 +108,7 @@ describe("MultiSuggestField", () => { expect(menuItems.length).toBe(dropdownOnFocus.args.items.length); }); - fireEvent.change(input, { target: { value: "ex" } }); + fireEvent.change(input, { target: { value: "cras" } }); await waitFor(() => { const listbox = screen.getByRole("listbox"); @@ -277,7 +277,7 @@ describe("MultiSuggestField", () => { expect(menuItems.length).toBe(CustomSearch.args.items.length); }); - fireEvent.change(input, { target: { value: "label1" } }); + fireEvent.change(input, { target: { value: "label11" } }); await waitFor(() => { const listbox = screen.getByRole("listbox"); @@ -289,10 +289,10 @@ describe("MultiSuggestField", () => { const item = menuItems[0]; const [div] = item.getElementsByTagName("div"); - expect(div.textContent).toBe("label1"); + expect(div.textContent).toBe("label11"); }); - fireEvent.change(input, { target: { value: "label1-id" } }); + fireEvent.change(input, { target: { value: "label11-id" } }); await waitFor(() => { const listbox = screen.getByRole("listbox"); @@ -304,10 +304,10 @@ describe("MultiSuggestField", () => { const item = menuItems[0]; const [div] = item.getElementsByTagName("div"); - expect(div.textContent).toBe("label1"); + expect(div.textContent).toBe("label11"); }); - fireEvent.change(input, { target: { value: "label1-id-other" } }); + fireEvent.change(input, { target: { value: "label11-id-other" } }); await waitFor(() => { const listbox = screen.getByRole("listbox");