From ed6085a27a82a66686faab58030f45b19bf6d346 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Wed, 18 Dec 2019 15:44:18 -0600 Subject: [PATCH 01/20] fix(Dropdown): rely on list-box height closes #4916 --- packages/components/src/components/dropdown/_dropdown.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss index 2f882c2babeb..56146dfdbe15 100644 --- a/packages/components/src/components/dropdown/_dropdown.scss +++ b/packages/components/src/components/dropdown/_dropdown.scss @@ -51,7 +51,6 @@ border: none; border-bottom: 1px solid $ui-04; width: 100%; - height: rem(40px); cursor: pointer; color: $text-01; outline: 2px solid transparent; From c9ed78af2abb7d4075b1a26b9c1de1f213e74268 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" Date: Mon, 27 Apr 2020 21:21:24 -0500 Subject: [PATCH 02/20] test(multiselect): update tests to RTLish style --- .../__snapshots__/Accordion-test.js.snap | 27 +- .../Accordion.Skeleton-test.js.snap | 36 +- .../__snapshots__/AccordionItem-test.js.snap | 9 +- .../__snapshots__/DataTable-test.js.snap | 92 ++- .../TableBatchAction-test.js.snap | 9 +- .../__snapshots__/TableExpandRow-test.js.snap | 9 +- .../TableToolbarMenu-test.js.snap | 10 +- .../TableToolbarSearch-test.js.snap | 14 +- .../__snapshots__/Dropdown-test.js.snap | 27 +- .../__snapshots__/ListBoxField-test.js.snap | 18 +- .../ListBoxMenuIcon-test.js.snap | 18 +- .../ListBoxSelection-test.js.snap | 18 +- .../__snapshots__/ModalWrapper-test.js.snap | 9 +- .../MultiSelect/__tests__/MultiSelect-test.js | 699 ++++++++++-------- .../FilterableMultiSelect-test.js.snap | 9 +- .../__snapshots__/MultiSelect-test.js.snap | 426 ----------- .../HeaderGlobalAction-test.js.snap | 19 +- .../__snapshots__/HeaderMenu-test.js.snap | 9 +- .../HeaderMenuButton-test.js.snap | 30 +- .../__snapshots__/SideNavFooter-test.js.snap | 18 +- .../__snapshots__/SideNavMenu-test.js.snap | 14 +- .../SideNavSwitcher-test.js.snap | 9 +- packages/test-utils/keyboard.js | 58 +- 23 files changed, 775 insertions(+), 812 deletions(-) delete mode 100644 packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap index bca9d1f586da..8bc0a7cafe33 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap @@ -54,12 +54,17 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -125,12 +130,17 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -196,12 +206,17 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap index 32514d1ad4c3..391f6039161a 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap @@ -32,12 +32,17 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -135,12 +140,17 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -190,12 +200,17 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -245,12 +260,17 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap index 83a6c31d21f5..cbaad3d7657f 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap @@ -47,12 +47,17 @@ exports[`AccordionItem should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index ed7b5cab9b09..35116a468c4c 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -2054,6 +2054,11 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2061,10 +2066,10 @@ exports[`DataTable should render 1`] = ` - @@ -2121,6 +2126,11 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2128,10 +2138,10 @@ exports[`DataTable should render 1`] = ` - @@ -2188,6 +2198,11 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2195,10 +2210,10 @@ exports[`DataTable should render 1`] = ` - @@ -2291,6 +2306,11 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2339,12 +2359,17 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -2443,6 +2468,11 @@ exports[`DataTable should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3030,6 +3060,11 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3037,10 +3072,10 @@ exports[`DataTable sticky header should render 1`] = ` - @@ -3097,6 +3132,11 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3104,10 +3144,10 @@ exports[`DataTable sticky header should render 1`] = ` - @@ -3164,6 +3204,11 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3171,10 +3216,10 @@ exports[`DataTable sticky header should render 1`] = ` - @@ -3267,6 +3312,11 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3315,12 +3365,17 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -3419,6 +3474,11 @@ exports[`DataTable sticky header should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap index bb075fa03830..74704e5be878 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap @@ -54,6 +54,11 @@ exports[`DataTable.TableBatchAction should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -61,10 +66,10 @@ exports[`DataTable.TableBatchAction should render 1`] = ` - diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap index 83057756ece2..60144cdd4353 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap @@ -55,12 +55,17 @@ exports[`DataTable.TableExpandRow should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap index a5203e15e385..864f99c5249b 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap @@ -91,12 +91,20 @@ exports[`DataTable.TableToolbarMenu should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > + Add diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap index de6cd8604e31..85734f4734f0 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap @@ -51,6 +51,11 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -99,12 +104,17 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" + <polygon + points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" /> </svg> </Icon> diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap index b6af42a63a51..18a0f0ada6d5 100644 --- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap +++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap @@ -146,12 +146,17 @@ exports[`Dropdown should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" + <polygon + points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" /> <title> Open menu @@ -453,12 +458,17 @@ exports[`Dropdown should render custom item components 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" + <polygon + points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" /> <title> Close menu @@ -782,12 +792,17 @@ exports[`Dropdown should render with strings as items 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" + <polygon + points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" /> <title> Close menu diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap index 15daf9257bab..cdeb6f19c5f4 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap @@ -38,12 +38,17 @@ exports[`ListBoxField should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" + <polygon + points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" /> </svg> </Icon> @@ -94,12 +99,17 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" + <polygon + points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" /> </svg> </Icon> diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap index e0cc1079df50..4443bbb999a5 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap @@ -28,12 +28,17 @@ exports[`ListBoxMenuIcon should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" + <polygon + points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" /> <title> Close menu @@ -73,12 +78,17 @@ exports[`ListBoxMenuIcon should render 2`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" + <polygon + points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" /> <title> Open menu diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap index 3a867636fcb6..8e7e67e2ee1a 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap @@ -48,12 +48,17 @@ exports[`ListBoxSelection should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" + <polygon + points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" /> </svg> </Icon> @@ -112,12 +117,17 @@ exports[`ListBoxSelection should render 2`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" + <polygon + points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" /> </svg> </Icon> diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap index 163c8a084a52..7f7921682be2 100644 --- a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap +++ b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap @@ -123,12 +123,17 @@ exports[`ModalWrapper should render 1`] = ` height={20} preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <path - d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" + <polygon + points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" /> </svg> </Icon> diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index d52cc2ab215b..cecd7a610d40 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -3,380 +3,461 @@ * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. + * */ -import React from 'react'; -import { mount } from 'enzyme'; -import MultiSelect from '../../MultiSelect'; +import 'carbon-components/src/components/multi-select/_multi-select.scss'; +import { getByText, isElementVisible } from '@carbon/test-utils/dom'; import { - openMenu, - generateItems, - generateGenericItem, -} from '../../ListBox/test-helpers'; -import { settings } from 'carbon-components'; + pressEnter, + pressSpace, + pressTab, + pressArrow, +} from '@carbon/test-utils/keyboard'; +import { render, cleanup } from '@carbon/test-utils/react'; +import React from 'react'; +import { Simulate } from 'react-dom/test-utils'; +import MultiSelect from '../'; +import { generateItems, generateGenericItem } from '../../ListBox/test-helpers'; +import { keys } from '../../../internal/keyboard'; -const { prefix } = settings; +describe('MultiSelect', () => { + afterEach(cleanup); -const mouseDownAndUp = node => { - node.dispatchEvent(new window.MouseEvent('mousedown', { bubbles: true })); - node.dispatchEvent(new window.MouseEvent('mouseup', { bubbles: true })); -}; + describe.skip('automated accessibility tests', () => { + it('should have no axe violations', async () => { + const items = generateItems(4, generateGenericItem); + const { container } = render( + <MultiSelect id="test" label="Field" items={items} /> + ); + await expect(container).toHaveNoAxeViolations(); + }); -describe('MultiSelect', () => { - it('should render', () => { - const wrapper = mount( - <MultiSelect - id="test-multiselect" - label="Field" - items={generateItems(5, generateGenericItem)} - /> + it('should have no DAP violations', async () => { + const items = generateItems(4, generateGenericItem); + const { container } = render( + <MultiSelect id="test" label="Field" items={items} /> + ); + await expect(container).toHaveNoDAPViolations(); + }); + }); + + it('should initially render with a given label', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> ); - expect(wrapper).toMatchSnapshot(); + + const labelNode = getByText(container, label); + expect(isElementVisible(labelNode)).toBe(true); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeNull(); }); - it('should initialize with no selected items if no `initialSelectedItems` are given', () => { - const items = generateItems(5, generateGenericItem); - const wrapper = mount( - <MultiSelect id="test-multiselect" label="Field" items={items} /> + it('should open the menu when a user clicks on the label', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> ); - expect(wrapper.find('Selection').instance().state.selectedItems).toEqual( - [] + + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeInstanceOf(HTMLElement); + }); + + it('should open the menu with a down arrow', () => { + const items = generateItems(4, generateGenericItem); + const { container } = render( + <MultiSelect.Filterable placeholder="catdog" id="test" items={items} /> ); + + pressArrow(container.querySelector('[role="button"]'), 'down'); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeInstanceOf(HTMLElement); }); - it('should initialize with the menu not open', () => { - const items = generateItems(5, generateGenericItem); - const wrapper = mount( - <MultiSelect id="test-multiselect" label="Field" items={items} /> + + it('should open the menu when a user hits space while the field is focused', () => { + const items = generateItems(4, generateGenericItem); + const { container } = render( + <MultiSelect id="test" label="test-label" items={items} /> ); - expect(wrapper.state('isOpen')).toEqual(false); + + pressTab(); + pressSpace(); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeInstanceOf(HTMLElement); }); - it('should initialize with the menu open', () => { - const items = generateItems(5, generateGenericItem); - const wrapper = mount( - <MultiSelect id="test-multiselect" label="Field" items={items} open /> + it.skip('should open the menu when a user hits enter while the field is focused', () => { + const items = generateItems(4, generateGenericItem); + const { container } = render( + <MultiSelect id="test" label="test-label" items={items} /> ); - expect(wrapper.state('isOpen')).toEqual(true); + + pressTab(); + pressEnter(); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeInstanceOf(HTMLElement); }); - describe('#handleOnToggleMenu', () => { - it('should toggle the boolean `isOpen` field', () => { - const items = generateItems(5, generateGenericItem); - const wrapper = mount( - <MultiSelect id="test-multiselect" label="Field" items={items} /> - ); - expect(wrapper.state('isOpen')).toBe(false); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - expect(wrapper.state('isOpen')).toBe(true); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - expect(wrapper.state('isOpen')).toBe(false); + it('should let the user toggle item selection with a mouse', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> + ); + + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + const [item] = items; + const itemNode = getByText(container, item.label); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeNull(); + + Simulate.click(itemNode); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeInstanceOf(HTMLElement); + + Simulate.click(itemNode); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeNull(); + }); + + it('should close the menu when the user hits the Escape key', () => { + const items = generateItems(4, generateGenericItem); + const { container } = render( + <MultiSelect id="test" label="test-label" items={items} /> + ); + + pressTab(); + pressSpace(); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeInstanceOf(HTMLElement); + + Simulate.keyDown(document.activeElement, { + key: 'Escape', }); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeNull(); + }); + + it.skip('close menu with click outside of field', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> + ); + const labelNode = getByText(container, label); + const button = document.createElement('BUTTON'); + button.id = 'button-id'; + document.body.appendChild(button); + const buttonNode = document.getElementById('button-id'); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeFalsy(); + + Simulate.click(labelNode); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeTruthy(); + + Simulate.click(buttonNode); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeFalsy(); + }); + + it.skip('should toggle selection with enter', () => { + // yeah focus is on the field, you hit the arrows to change the active index, and keydown is on the field since it has focus + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> + ); + + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + const [item] = items; + const itemNode = getByText(container, item.label); + console.log(item.label); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeNull(); + + Simulate.keyDown(itemNode, { key: 'Enter' }); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeInstanceOf(HTMLElement); + + Simulate.keyDown(itemNode, { key: 'Enter' }); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeNull(); + }); + + it.skip('toggle selection with space', () => { + // yeah focus is on the field, you hit the arrows to change the active index, and keydown is on the field since it has focus + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> + ); + + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + const [item] = items; + const itemNode = getByText(container, item.label); + console.log(item.label); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeNull(); + + Simulate.keyDown(itemNode, keys.Space); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeInstanceOf(HTMLElement); + + Simulate.keyDown(itemNode, keys.Space); + + expect( + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeNull(); + }); + + it('clear selected items', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" label={label} items={items} /> + ); + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + const [item] = items; + const itemNode = getByText(container, item.label); + Simulate.click(itemNode); + + expect( + document.querySelector('[aria-label="Clear Selection"]') + ).toBeTruthy(); + + Simulate.click(document.querySelector('[aria-label="Clear Selection"]')); + + expect( + document.querySelector('[aria-label="Clear Selection"]') + ).toBeFalsy(); + }); + + it('should not be interactive if disabled', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( + <MultiSelect id="test" disabled label={label} items={items} /> + ); + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + expect( + container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') + ).toBeFalsy(); }); - describe('when `initialSelectedItems` is given', () => { - it('should initialize `selectedItems` with the given initial selected items', () => { - const items = generateItems(5, generateGenericItem); - const wrapper = mount( + describe('Component API', () => { + it('default selected items', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const { container } = render( <MultiSelect id="test-multiselect" - label="Field" + label={label} items={items} initialSelectedItems={[items[0], items[1]]} /> ); - expect(wrapper.find('Selection').instance().state.selectedItems).toEqual([ - items[0], - items[1], - ]); - }); - }); - - describe('MultiSelect with InitialSelectedItems', () => { - let mockProps; - const items = generateItems(5, generateGenericItem); - - beforeEach(() => { - mockProps = { - items: items, - initialSelectedItems: [items[0], items[1], items[2]], - itemToString: ({ label }) => label, - onChange: jest.fn(), - label: 'Label', - }; - }); - it('should allow a user to de-select an item by clicking on initial selected items', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(3); + document.querySelector('[aria-label="Clear Selection"]') + ).toBeTruthy(); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); + const labelNode = getByText(container, label); - expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(2); - }); + Simulate.click(labelNode); - it('should allow a user to de-select an initial selected item by hitting enter on initial selected item', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - const simulateArrowDown = wrapper => - wrapper.find(`.${prefix}--list-box__field`).simulate('keydown', { - key: 'ArrowDown', - }); - - expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(3); - openMenu(wrapper); - simulateArrowDown(wrapper); - wrapper - .find(`.${prefix}--list-box__field`) - .at(0) - .simulate('keydown', { - key: 'Enter', - }); expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(2); + document.querySelector('[aria-selected="true"][role="option"]') + ).toBeInstanceOf(HTMLElement); }); - it('should allow a user to de-select an item after calling setState by clicking on selected item', () => { - const wrapper = mount( + it('should recieve a custom id', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + // eslint-disable-next-line no-unused-vars + const { container } = render( <MultiSelect - id="test-multiselect" - {...mockProps} - items={[{ label: 'foo' }]} - initialSelectedItems={[{ label: 'foo' }]} + id="custom-id" + label={label} + items={items} + initialSelectedItems={[items[0], items[1]]} /> ); - expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(1); - wrapper.setState({ foo: 'bar' }); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); - expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(0); + expect(document.getElementById('custom-id')).toBeTruthy(); }); - it('should select an item when a user clicks on an item', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> + it('should support a custom itemToString with object items', () => { + const items = [ + { text: 'joey' }, + { text: 'johnny' }, + { text: 'tommy' }, + { text: 'dee dee' }, + { text: 'marky' }, + ]; + const label = 'test-label'; + const { container } = render( + <MultiSelect + id="custom-id" + label={label} + items={items} + itemToString={item => (item ? item.text : '')} + /> ); - expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(3); + const labelNode = getByText(container, label); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(4) - .simulate('click'); + Simulate.click(labelNode); - expect( - wrapper.find('Selection').instance().state.selectedItems.length - ).toBe(4); + expect(getByText(container, 'joey')).toBeTruthy(); + expect(getByText(container, 'johnny')).toBeTruthy(); + expect(getByText(container, 'tommy')).toBeTruthy(); + expect(getByText(container, 'dee dee')).toBeTruthy(); + expect(getByText(container, 'marky')).toBeTruthy(); }); - }); - describe('e2e', () => { - let mockProps; - - beforeEach(() => { - mockProps = { - items: generateItems(5, generateGenericItem), - initialSelectedItems: [], - itemToString: ({ label }) => label, - onChange: jest.fn(), - label: 'Label', - }; - }); + it('translateWithId', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + const translateWithId = jest.fn(() => 'message'); - it('should open the menu when a user clicks on the ListBox field', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - expect(wrapper.find(`.${prefix}--list-box__menu`).length).toBe(1); - expect(wrapper.find(`.${prefix}--list-box__menu-item`).length).toBe( - mockProps.items.length + // eslint-disable-next-line no-unused-vars + const { container } = render( + <MultiSelect + id="custom-id" + translateWithId={translateWithId} + label={label} + items={items} + /> ); - }); - it('should open the menu when a user focuses and hits space on the ListBox field', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - wrapper.find(`.${prefix}--list-box__field`).simulate('keydown', { - key: ' ', - }); - expect(wrapper.find(`.${prefix}--list-box__menu`).length).toBe(1); - expect(wrapper.find(`.${prefix}--list-box__menu-item`).length).toBe( - mockProps.items.length - ); + expect(translateWithId).toHaveBeenCalled(); }); - it('should select an item when a user clicks on an item', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - openMenu(wrapper); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .first() - .simulate('click'); - expect(wrapper.find('Selection').instance().state.selectedItems).toEqual([ - mockProps.items[0], - ]); - }); + it('should call onChange when the selection changes', () => { + const testFunction = jest.fn(); + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; - it('should allow a user to highlight items with the up and down arrow keys', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> + const { container } = render( + <MultiSelect + id="custom-id" + onChange={testFunction} + label={label} + items={items} + /> ); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - const simulateArrowDown = () => - wrapper.find(`.${prefix}--list-box__field`).simulate('keydown', { - key: 'ArrowDown', - }); - const simulateArrowUp = () => - wrapper.find(`.${prefix}--list-box__field`).simulate('keydown', { - key: 'ArrowUp', - }); - const getHighlightedId = () => - wrapper.find(`.${prefix}--list-box__menu-item--highlighted`).prop('id'); - simulateArrowDown(); - expect(getHighlightedId()).toBe('downshift-13-item-0'); - simulateArrowDown(); - expect(getHighlightedId()).toBe('downshift-13-item-1'); - // Simulate "wrap" behavior - simulateArrowDown(); - simulateArrowDown(); - simulateArrowDown(); - simulateArrowDown(); - expect(getHighlightedId()).toBe('downshift-13-item-0'); - simulateArrowUp(); - expect(getHighlightedId()).toBe('downshift-13-item-4'); - }); - it('should close the menu when a user clicks outside of the control', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - mouseDownAndUp(document.body); - expect(wrapper.state('isOpen')).toBe(false); - }); + const labelNode = getByText(container, label); + Simulate.click(labelNode); - it('should show a badge that mirrors the number of selected items', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - openMenu(wrapper); - for (let i = 0; i < mockProps.items.length; i++) { - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(i) - .simulate('click'); - expect(wrapper.find(`.${prefix}--list-box__selection`).text()).toEqual( - expect.stringContaining(`${i + 1}`) - ); - } - expect(wrapper.find('Selection').instance().state.selectedItems).toEqual( - mockProps.items - ); - }); + const [item] = items; + const itemNode = getByText(container, item.label); + Simulate.click(itemNode); - it('should allow a user to de-select an item by clicking on a selected item', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - wrapper.find(`.${prefix}--list-box__field`).simulate('click'); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); - expect( - wrapper.find(`.${prefix}--list-box__menu-item--active`).length - ).toBe(1); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); - expect( - wrapper.find(`.${prefix}--list-box__menu-item--active`).length - ).toBe(0); + expect(testFunction).toHaveBeenCalled(); }); - it('should allow a user to de-select an item by hitting enter on a selected item', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> - ); - const simulateArrowDown = wrapper => - wrapper.find(`.${prefix}--list-box__field`).simulate('keydown', { - key: 'ArrowDown', - }); - openMenu(wrapper); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); - expect( - wrapper.find(`.${prefix}--list-box__menu-item--active`).length - ).toBe(1); - simulateArrowDown(wrapper); - wrapper.find(`.${prefix}--list-box__field`).simulate('keydown', { - key: 'Enter', - }); - expect( - wrapper.find(`.${prefix}--list-box__menu-item--active`).length - ).toBe(0); - }); + it('invalid, invalidText', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; - it('should allow a user to click on the clear icon to clear all selected items', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> + const { container } = render( + <MultiSelect + id="custom-id" + invalid + invalidText="Fool of a Took!" + label={label} + items={items} + /> ); - openMenu(wrapper); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); - wrapper.find(`.${prefix}--list-box__selection`).simulate('click'); - expect(wrapper.find('Selection').instance().state.selectedItems).toEqual( - [] + + expect(getByText(container, 'Fool of a Took!')).toBeTruthy(); + + expect(document.querySelector('[data-invalid="true"')).toBeInstanceOf( + HTMLElement ); }); - it('should allow a user to focus the clear icon and hit enter to clear all selected items', () => { - const wrapper = mount( - <MultiSelect id="test-multiselect" {...mockProps} /> + it('selectionFeedback', () => { + const items = generateItems(4, generateGenericItem); + const label = 'test-label'; + // eslint-disable-next-line no-unused-vars + const [firstItem, secondItem, thirdItem, fourthItem] = items; + const { container } = render( + <MultiSelect + id="custom-id" + selectionFeedback="top" + label={label} + items={items} + /> ); - openMenu(wrapper); - wrapper - .find(`.${prefix}--list-box__menu-item`) - .at(0) - .simulate('click'); - wrapper.find(`.${prefix}--list-box__selection`).simulate('keydown', { - keyCode: 13, - }); - expect(wrapper.find('Selection').instance().state.selectedItems).toEqual( - [] + + // click the label to open the multiselect options menu + const labelNode = getByText(container, label); + Simulate.click(labelNode); + + // click the third option down in the list + const itemNode = getByText(container, thirdItem.label); + Simulate.click(itemNode); + + // get an array of all the options + const optionsArray = Array.from( + document.querySelectorAll('[role="option"]') ); + + // the first option in the list to the the former third option in the list + expect(optionsArray[0].title).toMatch('Item 2'); }); }); }); diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap index d5817b08c30f..ee72fbfad7a8 100644 --- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap +++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap @@ -162,12 +162,17 @@ exports[`MultiSelect.Filterable should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" + <polygon + points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" /> <title> Open menu diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap deleted file mode 100644 index 3a8e765bb454..000000000000 --- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap +++ /dev/null @@ -1,426 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MultiSelect should render 1`] = ` -<MultiSelect - compareItems={[Function]} - direction="bottom" - disabled={false} - id="test-multiselect" - initialSelectedItems={Array []} - itemToString={[Function]} - items={ - Array [ - Object { - "id": "id-0", - "label": "Item 0", - "value": 0, - }, - Object { - "id": "id-1", - "label": "Item 1", - "value": 1, - }, - Object { - "id": "id-2", - "label": "Item 2", - "value": 2, - }, - Object { - "id": "id-3", - "label": "Item 3", - "value": 3, - }, - Object { - "id": "id-4", - "label": "Item 4", - "value": 4, - }, - ] - } - label="Field" - light={false} - locale="en" - open={false} - selectionFeedback="top-after-reopen" - sortItems={[Function]} - title={false} - type="default" -> - <div - className="bx--multi-select__wrapper bx--list-box__wrapper" - > - <Selection - disabled={false} - initialSelectedItems={Array []} - onChange={[Function]} - render={[Function]} - > - <Downshift - breakingChanges={Object {}} - defaultHighlightedIndex={null} - defaultInputValue="" - defaultIsOpen={false} - defaultSelectedItem={null} - environment={[Window]} - getA11yStatusMessage={[Function]} - highlightedIndex={null} - isOpen={false} - itemToString={[Function]} - onChange={[Function]} - onInputValueChange={[Function]} - onOuterClick={[Function]} - onSelect={[Function]} - onStateChange={[Function]} - onUserAction={[Function]} - render={[Function]} - selectedItem={Array []} - selectedItemChanged={[Function]} - stateReducer={[Function]} - > - <ListBox - className="bx--multi-select" - disabled={false} - id="test-multiselect" - innerRef={[Function]} - isOpen={false} - light={false} - type="default" - > - <div - className="bx--multi-select bx--list-box" - id="test-multiselect" - onClick={[Function]} - onKeyDown={[Function]} - > - <ListBoxField - aria-disabled={false} - aria-expanded={false} - aria-haspopup={true} - aria-labelledby="multiselect-label-1 multiselect-field-label-1" - data-toggle={true} - disabled={false} - id="test-multiselect" - onBlur={[Function]} - onClick={[Function]} - onKeyDown={[Function]} - role="button" - tabIndex="0" - type="button" - > - <div - aria-controls={null} - aria-disabled={false} - aria-expanded={false} - aria-haspopup={true} - aria-labelledby="multiselect-label-1 multiselect-field-label-1" - aria-owns={null} - className="bx--list-box__field" - data-toggle={true} - onBlur={[Function]} - onClick={[Function]} - onKeyDown={[Function]} - role="button" - tabIndex="0" - type="button" - > - <span - className="bx--list-box__label" - id="multiselect-field-label-1" - > - Field - </span> - <ListBoxMenuIcon - isOpen={false} - translateWithId={[Function]} - > - <div - className="bx--list-box__menu-icon" - > - <ForwardRef(ChevronDown16) - aria-label="Open menu" - name="chevron--down" - > - <Icon - aria-label="Open menu" - height={16} - name="chevron--down" - preserveAspectRatio="xMidYMid meet" - viewBox="0 0 16 16" - width={16} - xmlns="http://www.w3.org/2000/svg" - > - <svg - aria-label="Open menu" - focusable="false" - height={16} - name="chevron--down" - preserveAspectRatio="xMidYMid meet" - role="img" - viewBox="0 0 16 16" - width={16} - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" - /> - <title> - Open menu - - - - - - - - - -
- -
-
-
- - - Item 0 - - -
-
-
- - -
-
-
- - - Item 1 - - -
-
-
- - -
-
-
- - - Item 2 - - -
-
-
- - -
-
-
- - - Item 3 - - -
-
-
- - -
-
-
- - - Item 4 - - -
-
-
- -
- - - - - - - -`; diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap index d37bcc5e3970..e2bbd4ca378c 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap @@ -26,12 +26,29 @@ exports[`HeaderGlobalAction should render 1`] = ` focusable="false" height={32} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={32} xmlns="http://www.w3.org/2000/svg" > + + + + diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap index 6fe0cbfb56cf..1a7792aae6b0 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap @@ -38,12 +38,17 @@ exports[`HeaderMenu should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap index d18138ab8ea0..f668021474a3 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap @@ -27,12 +27,38 @@ exports[`HeaderMenuButton should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" > - + + + diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap index f54c2dc424f5..c83f95a5d044 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap @@ -31,12 +31,17 @@ exports[`SideNavFooter should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - @@ -84,12 +89,17 @@ exports[`SideNavFooter should render 2`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap index cf12806f7463..2ddbe252b96a 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap @@ -32,12 +32,13 @@ exports[`SideNavMenu should render 1`] = ` focusable="false" height="20" preserveAspectRatio="xMidYMid meet" + style="will-change: transform;" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg" > - @@ -108,12 +109,17 @@ exports[`SideNavMenu should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap index 65bd2303b92f..e62e6baf90bc 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap @@ -75,12 +75,17 @@ exports[`SideNavSwitcher should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" + style={ + Object { + "willChange": "transform", + } + } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/test-utils/keyboard.js b/packages/test-utils/keyboard.js index 5735363b61b4..b14ef76abb0a 100644 --- a/packages/test-utils/keyboard.js +++ b/packages/test-utils/keyboard.js @@ -132,7 +132,7 @@ export function pressSpace(node = document.activeElement) { }), ]; - if (node.tagName === 'BUTTON') { + if (node.tagName === 'BUTTON' || node.getAttribute('role') === 'button') { events.push( new MouseEvent('click', { bubbles: true, @@ -147,3 +147,59 @@ export function pressSpace(node = document.activeElement) { return node; } + +export function pressArrow(node = document.activeElement, direction) { + let events; + + if (direction === 'up') { + events = [ + new KeyboardEvent('keydown', { + key: 'ArrowUp', + bubbles: true, + cancelable: true, + }), + ]; + } + + if (direction === 'right') { + events = [ + new KeyboardEvent('keydown', { + key: 'ArrowRight', + bubbles: true, + cancelable: true, + }), + ]; + } + + if (direction === 'down') { + events = [ + new KeyboardEvent('keydown', { + key: 'ArrowDown', + bubbles: true, + cancelable: true, + }), + ]; + } + + if (direction === 'left') { + events = [ + new KeyboardEvent('keydown', { + key: 'ArrowLeft', + bubbles: true, + cancelable: true, + }), + ]; + } + + if (events === undefined) { + return console.error( + "'up', 'down', 'left', 'right' arrow direction required!" + ); + } + + for (const event of events) { + node.dispatchEvent(event); + } + + return node; +} From b793e504a849e519981ad4db4794263ce1618718 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 28 Apr 2020 10:19:51 -0500 Subject: [PATCH 03/20] test(project): update snapshots --- .../__snapshots__/Accordion-test.js.snap | 27 ++---- .../Accordion.Skeleton-test.js.snap | 36 ++------ .../__snapshots__/AccordionItem-test.js.snap | 9 +- .../__snapshots__/DataTable-test.js.snap | 92 ++++--------------- .../TableBatchAction-test.js.snap | 9 +- .../__snapshots__/TableExpandRow-test.js.snap | 9 +- .../TableToolbarMenu-test.js.snap | 10 +- .../TableToolbarSearch-test.js.snap | 14 +-- .../__snapshots__/Dropdown-test.js.snap | 27 ++---- .../__snapshots__/ListBoxField-test.js.snap | 18 +--- .../ListBoxMenuIcon-test.js.snap | 18 +--- .../ListBoxSelection-test.js.snap | 18 +--- .../__snapshots__/ModalWrapper-test.js.snap | 9 +- .../FilterableMultiSelect-test.js.snap | 9 +- .../HeaderGlobalAction-test.js.snap | 19 +--- .../__snapshots__/HeaderMenu-test.js.snap | 9 +- .../HeaderMenuButton-test.js.snap | 30 +----- .../__snapshots__/SideNavFooter-test.js.snap | 18 +--- .../__snapshots__/SideNavMenu-test.js.snap | 14 +-- .../SideNavSwitcher-test.js.snap | 9 +- 20 files changed, 76 insertions(+), 328 deletions(-) diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap index 8bc0a7cafe33..bca9d1f586da 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap @@ -54,17 +54,12 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -130,17 +125,12 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -206,17 +196,12 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap index 391f6039161a..32514d1ad4c3 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap @@ -32,17 +32,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -140,17 +135,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -200,17 +190,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -260,17 +245,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap index cbaad3d7657f..83a6c31d21f5 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap @@ -47,17 +47,12 @@ exports[`AccordionItem should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index 35116a468c4c..ed7b5cab9b09 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -2054,11 +2054,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2066,10 +2061,10 @@ exports[`DataTable should render 1`] = ` - @@ -2126,11 +2121,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2138,10 +2128,10 @@ exports[`DataTable should render 1`] = ` - @@ -2198,11 +2188,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2210,10 +2195,10 @@ exports[`DataTable should render 1`] = ` - @@ -2306,11 +2291,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2359,17 +2339,12 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -2468,11 +2443,6 @@ exports[`DataTable should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3060,11 +3030,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3072,10 +3037,10 @@ exports[`DataTable sticky header should render 1`] = ` - @@ -3132,11 +3097,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3144,10 +3104,10 @@ exports[`DataTable sticky header should render 1`] = ` - @@ -3204,11 +3164,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3216,10 +3171,10 @@ exports[`DataTable sticky header should render 1`] = ` - @@ -3312,11 +3267,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3365,17 +3315,12 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - @@ -3474,11 +3419,6 @@ exports[`DataTable sticky header should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap index 74704e5be878..bb075fa03830 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap @@ -54,11 +54,6 @@ exports[`DataTable.TableBatchAction should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -66,10 +61,10 @@ exports[`DataTable.TableBatchAction should render 1`] = ` - diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap index 60144cdd4353..83057756ece2 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap @@ -55,17 +55,12 @@ exports[`DataTable.TableExpandRow should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap index 864f99c5249b..a5203e15e385 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap @@ -91,20 +91,12 @@ exports[`DataTable.TableToolbarMenu should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - Add diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap index 85734f4734f0..de6cd8604e31 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap @@ -51,11 +51,6 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -104,17 +99,12 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap index 18a0f0ada6d5..b6af42a63a51 100644 --- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap +++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap @@ -146,17 +146,12 @@ exports[`Dropdown should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Open menu @@ -458,17 +453,12 @@ exports[`Dropdown should render custom item components 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Close menu @@ -792,17 +782,12 @@ exports[`Dropdown should render with strings as items 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Close menu diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap index cdeb6f19c5f4..15daf9257bab 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap @@ -38,17 +38,12 @@ exports[`ListBoxField should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> @@ -99,17 +94,12 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap index 4443bbb999a5..e0cc1079df50 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap @@ -28,17 +28,12 @@ exports[`ListBoxMenuIcon should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Close menu @@ -78,17 +73,12 @@ exports[`ListBoxMenuIcon should render 2`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Open menu diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap index 8e7e67e2ee1a..3a867636fcb6 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap @@ -48,17 +48,12 @@ exports[`ListBoxSelection should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> @@ -117,17 +112,12 @@ exports[`ListBoxSelection should render 2`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap index 7f7921682be2..163c8a084a52 100644 --- a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap +++ b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap @@ -123,17 +123,12 @@ exports[`ModalWrapper should render 1`] = ` height={20} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap index ee72fbfad7a8..d5817b08c30f 100644 --- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap +++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap @@ -162,17 +162,12 @@ exports[`MultiSelect.Filterable should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Open menu diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap index e2bbd4ca378c..d37bcc5e3970 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap @@ -26,29 +26,12 @@ exports[`HeaderGlobalAction should render 1`] = ` focusable="false" height={32} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={32} xmlns="http://www.w3.org/2000/svg" > <path - d="M8.24,25.14,7,26.67a13.79,13.79,0,0,0,4.18,2.44l.69-1.87A12,12,0,0,1,8.24,25.14Z" - /> - <path - d="M4.19,18l-2,.41A14.09,14.09,0,0,0,3.86,23L5.59,22A12.44,12.44,0,0,1,4.19,18Z" - /> - <path - d="M11.82,4.76l-.69-1.87A13.79,13.79,0,0,0,7,5.33L8.24,6.86A12,12,0,0,1,11.82,4.76Z" - /> - <path - d="M5.59,10,3.86,9a14.37,14.37,0,0,0-1.64,4.59l2,.34A12.05,12.05,0,0,1,5.59,10Z" - /> - <path - d="M16,2V4a12,12,0,0,1,0,24v2A14,14,0,0,0,16,2Z" + d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap index 1a7792aae6b0..6fe0cbfb56cf 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap @@ -38,17 +38,12 @@ exports[`HeaderMenu should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap index f668021474a3..d18138ab8ea0 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap @@ -27,38 +27,12 @@ exports[`HeaderMenuButton should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" > - <rect - height="1.2" - width="16" - x="2" - y="14.8" - /> - <rect - height="1.2" - width="16" - x="2" - y="11.2" - /> - <rect - height="1.2" - width="16" - x="2" - y="7.6" - /> - <rect - height="1.2" - width="16" - x="2" - y="4" + <path + d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap index c83f95a5d044..f54c2dc424f5 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap @@ -31,17 +31,12 @@ exports[`SideNavFooter should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="22,16 12,26 10.6,24.6 19.2,16 10.6,7.4 12,6" + <path + d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z" /> </svg> </Icon> @@ -89,17 +84,12 @@ exports[`SideNavFooter should render 2`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="22,16 12,26 10.6,24.6 19.2,16 10.6,7.4 12,6" + <path + d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap index 2ddbe252b96a..cf12806f7463 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap @@ -32,13 +32,12 @@ exports[`SideNavMenu should render 1`] = ` focusable="false" height="20" preserveAspectRatio="xMidYMid meet" - style="will-change: transform;" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg" > - <polygon - points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12" + <path + d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z" /> </svg> </div> @@ -109,17 +108,12 @@ exports[`SideNavMenu should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12" + <path + d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap index e62e6baf90bc..65bd2303b92f 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap @@ -75,17 +75,12 @@ exports[`SideNavSwitcher should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12" + <path + d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z" /> </svg> </Icon> From 716e500f73b6c9d203049014528db6bcecd7857d Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <dakahn@protonmail.com> Date: Tue, 28 Apr 2020 11:35:46 -0500 Subject: [PATCH 04/20] chore(tests): update snapshots --- .../__snapshots__/Accordion-test.js.snap | 27 ++---- .../Accordion.Skeleton-test.js.snap | 36 ++------ .../__snapshots__/AccordionItem-test.js.snap | 9 +- .../__snapshots__/DataTable-test.js.snap | 92 ++++--------------- .../TableBatchAction-test.js.snap | 9 +- .../__snapshots__/TableExpandRow-test.js.snap | 9 +- .../TableToolbarMenu-test.js.snap | 10 +- .../TableToolbarSearch-test.js.snap | 14 +-- .../__snapshots__/Dropdown-test.js.snap | 27 ++---- .../__snapshots__/ListBoxField-test.js.snap | 18 +--- .../ListBoxMenuIcon-test.js.snap | 18 +--- .../ListBoxSelection-test.js.snap | 18 +--- .../__snapshots__/ModalWrapper-test.js.snap | 9 +- .../FilterableMultiSelect-test.js.snap | 9 +- .../HeaderGlobalAction-test.js.snap | 19 +--- .../__snapshots__/HeaderMenu-test.js.snap | 9 +- .../HeaderMenuButton-test.js.snap | 30 +----- .../__snapshots__/SideNavFooter-test.js.snap | 18 +--- .../__snapshots__/SideNavMenu-test.js.snap | 14 +-- .../SideNavSwitcher-test.js.snap | 9 +- 20 files changed, 76 insertions(+), 328 deletions(-) diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap index 8bc0a7cafe33..bca9d1f586da 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap @@ -54,17 +54,12 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> @@ -130,17 +125,12 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> @@ -206,17 +196,12 @@ exports[`Accordion should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap index 391f6039161a..32514d1ad4c3 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap @@ -32,17 +32,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> @@ -140,17 +135,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> @@ -200,17 +190,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> @@ -260,17 +245,12 @@ exports[`AccordionSkeleton should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap index cbaad3d7657f..83a6c31d21f5 100644 --- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap +++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap @@ -47,17 +47,12 @@ exports[`AccordionItem should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index 35116a468c4c..ed7b5cab9b09 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -2054,11 +2054,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2066,10 +2061,10 @@ exports[`DataTable should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> @@ -2126,11 +2121,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2138,10 +2128,10 @@ exports[`DataTable should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> @@ -2198,11 +2188,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2210,10 +2195,10 @@ exports[`DataTable should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> @@ -2306,11 +2291,6 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -2359,17 +2339,12 @@ exports[`DataTable should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> @@ -2468,11 +2443,6 @@ exports[`DataTable should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3060,11 +3030,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3072,10 +3037,10 @@ exports[`DataTable sticky header should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> @@ -3132,11 +3097,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3144,10 +3104,10 @@ exports[`DataTable sticky header should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> @@ -3204,11 +3164,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3216,10 +3171,10 @@ exports[`DataTable sticky header should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> @@ -3312,11 +3267,6 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -3365,17 +3315,12 @@ exports[`DataTable sticky header should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> @@ -3474,11 +3419,6 @@ exports[`DataTable sticky header should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap index 74704e5be878..bb075fa03830 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap @@ -54,11 +54,6 @@ exports[`DataTable.TableBatchAction should render 1`] = ` height={16} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" @@ -66,10 +61,10 @@ exports[`DataTable.TableBatchAction should render 1`] = ` <path d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z" /> - <polygon + <path + d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z" data-icon-path="inner-path" fill="none" - points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15" /> </svg> </Icon> diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap index 60144cdd4353..83057756ece2 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap @@ -55,17 +55,12 @@ exports[`DataTable.TableExpandRow should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3" + <path + d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" /> </svg> </Icon> diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap index 864f99c5249b..a5203e15e385 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap @@ -91,20 +91,12 @@ exports[`DataTable.TableToolbarMenu should render 1`] = ` onKeyDown={[Function]} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="13,7 12.3,6.3 8.5,10.1 8.5,1 7.5,1 7.5,10.1 3.7,6.3 3,7 8,12" - /> <path - d="M13,12v2H3v-2H2v2l0,0c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1l0,0v-2H13z" + d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z" /> <title> Add diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap index 85734f4734f0..de6cd8604e31 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap @@ -51,11 +51,6 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" @@ -104,17 +99,12 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap index 18a0f0ada6d5..b6af42a63a51 100644 --- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap +++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap @@ -146,17 +146,12 @@ exports[`Dropdown should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Open menu @@ -458,17 +453,12 @@ exports[`Dropdown should render custom item components 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Close menu @@ -792,17 +782,12 @@ exports[`Dropdown should render with strings as items 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Close menu diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap index cdeb6f19c5f4..15daf9257bab 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap @@ -38,17 +38,12 @@ exports[`ListBoxField should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> @@ -99,17 +94,12 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap index 4443bbb999a5..e0cc1079df50 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap @@ -28,17 +28,12 @@ exports[`ListBoxMenuIcon should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Close menu @@ -78,17 +73,12 @@ exports[`ListBoxMenuIcon should render 2`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Open menu diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap index 8e7e67e2ee1a..3a867636fcb6 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap @@ -48,17 +48,12 @@ exports[`ListBoxSelection should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> @@ -117,17 +112,12 @@ exports[`ListBoxSelection should render 2`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap index 7f7921682be2..163c8a084a52 100644 --- a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap +++ b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap @@ -123,17 +123,12 @@ exports[`ModalWrapper should render 1`] = ` height={20} preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4" + <path + d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> </Icon> diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap index ee72fbfad7a8..d5817b08c30f 100644 --- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap +++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap @@ -162,17 +162,12 @@ exports[`MultiSelect.Filterable should render 1`] = ` name="chevron--down" preserveAspectRatio="xMidYMid meet" role="img" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> <title> Open menu diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap index e2bbd4ca378c..d37bcc5e3970 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap @@ -26,29 +26,12 @@ exports[`HeaderGlobalAction should render 1`] = ` focusable="false" height={32} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={32} xmlns="http://www.w3.org/2000/svg" > <path - d="M8.24,25.14,7,26.67a13.79,13.79,0,0,0,4.18,2.44l.69-1.87A12,12,0,0,1,8.24,25.14Z" - /> - <path - d="M4.19,18l-2,.41A14.09,14.09,0,0,0,3.86,23L5.59,22A12.44,12.44,0,0,1,4.19,18Z" - /> - <path - d="M11.82,4.76l-.69-1.87A13.79,13.79,0,0,0,7,5.33L8.24,6.86A12,12,0,0,1,11.82,4.76Z" - /> - <path - d="M5.59,10,3.86,9a14.37,14.37,0,0,0-1.64,4.59l2,.34A12.05,12.05,0,0,1,5.59,10Z" - /> - <path - d="M16,2V4a12,12,0,0,1,0,24v2A14,14,0,0,0,16,2Z" + d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap index 1a7792aae6b0..6fe0cbfb56cf 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap @@ -38,17 +38,12 @@ exports[`HeaderMenu should render 1`] = ` focusable="false" height={16} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 16 16" width={16} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6" + <path + d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap index f668021474a3..d18138ab8ea0 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap @@ -27,38 +27,12 @@ exports[`HeaderMenuButton should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 20 20" width={20} xmlns="http://www.w3.org/2000/svg" > - <rect - height="1.2" - width="16" - x="2" - y="14.8" - /> - <rect - height="1.2" - width="16" - x="2" - y="11.2" - /> - <rect - height="1.2" - width="16" - x="2" - y="7.6" - /> - <rect - height="1.2" - width="16" - x="2" - y="4" + <path + d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap index c83f95a5d044..f54c2dc424f5 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap @@ -31,17 +31,12 @@ exports[`SideNavFooter should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="22,16 12,26 10.6,24.6 19.2,16 10.6,7.4 12,6" + <path + d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z" /> </svg> </Icon> @@ -89,17 +84,12 @@ exports[`SideNavFooter should render 2`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="22,16 12,26 10.6,24.6 19.2,16 10.6,7.4 12,6" + <path + d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap index 2ddbe252b96a..cf12806f7463 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap @@ -32,13 +32,12 @@ exports[`SideNavMenu should render 1`] = ` focusable="false" height="20" preserveAspectRatio="xMidYMid meet" - style="will-change: transform;" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg" > - <polygon - points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12" + <path + d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z" /> </svg> </div> @@ -109,17 +108,12 @@ exports[`SideNavMenu should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12" + <path + d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z" /> </svg> </Icon> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap index e62e6baf90bc..65bd2303b92f 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap @@ -75,17 +75,12 @@ exports[`SideNavSwitcher should render 1`] = ` focusable="false" height={20} preserveAspectRatio="xMidYMid meet" - style={ - Object { - "willChange": "transform", - } - } viewBox="0 0 32 32" width={20} xmlns="http://www.w3.org/2000/svg" > - <polygon - points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12" + <path + d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z" /> </svg> </Icon> From fae23533c65b7f8ea26da91746c8864f645107a8 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:25:35 -0500 Subject: [PATCH 05/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index cecd7a610d40..35483888ffcc 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -258,7 +258,7 @@ describe('MultiSelect', () => { ).toBeNull(); }); - it('clear selected items', () => { + it('should clear selected items when the user clicks the clear selection button', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; const { container } = render( From f1e80387a7304655a19358c6feff770850f4972b Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:25:44 -0500 Subject: [PATCH 06/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 35483888ffcc..e5e06f6c2975 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -297,7 +297,7 @@ describe('MultiSelect', () => { }); describe('Component API', () => { - it('default selected items', () => { + it('should set the default selected items with the `initialSelectedItems` prop', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; const { container } = render( From c8918a80f361c27b5b50f3d422a47f9d13cab5b7 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:25:56 -0500 Subject: [PATCH 07/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index e5e06f6c2975..fbf3b452411e 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -322,7 +322,7 @@ describe('MultiSelect', () => { ).toBeInstanceOf(HTMLElement); }); - it('should recieve a custom id', () => { + it('should place the given id on the ___ node when passed in as a prop', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; // eslint-disable-next-line no-unused-vars From 10a36f2a0eb8a5ef259e7cae8c68512cfe05e449 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:26:05 -0500 Subject: [PATCH 08/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index fbf3b452411e..194765b6c12a 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -366,7 +366,7 @@ describe('MultiSelect', () => { expect(getByText(container, 'marky')).toBeTruthy(); }); - it('translateWithId', () => { + it('should support custom translation with translateWithId', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; const translateWithId = jest.fn(() => 'message'); From 7b719c0cb3b6b75ec3be0ed67bed46fb559e09cd Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:26:18 -0500 Subject: [PATCH 09/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 194765b6c12a..94c1c29cba02 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -408,7 +408,7 @@ describe('MultiSelect', () => { expect(testFunction).toHaveBeenCalled(); }); - it('invalid, invalidText', () => { + it('should support an invalid state with invalidText that describes the field', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; From 5c1b55a87d0a9763890b3875db2fd2adc94ed04b Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:26:29 -0500 Subject: [PATCH 10/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 94c1c29cba02..5e6cc325d4c4 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -239,7 +239,6 @@ describe('MultiSelect', () => { const [item] = items; const itemNode = getByText(container, item.label); - console.log(item.label); expect( document.querySelector('[aria-selected="true"][role="option"]') From 7146ad8fcd4e8e1e235ff59776baeb309ede1bc4 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 28 Apr 2020 12:39:25 -0500 Subject: [PATCH 11/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 5e6cc325d4c4..0f38a12b69b1 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -428,7 +428,7 @@ describe('MultiSelect', () => { ); }); - it('selectionFeedback', () => { + it('should support different feedback modes with selectionFeedback', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; // eslint-disable-next-line no-unused-vars From 970a632886ffffa6bef39da0ef7df20f92b19415 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <dakahn@protonmail.com> Date: Tue, 28 Apr 2020 12:44:53 -0500 Subject: [PATCH 12/20] fix(multiselect-test): remove unused import --- .../MultiSelect/__tests__/MultiSelect-test.js | 16 +++--- packages/test-utils/keyboard.js | 56 ------------------- 2 files changed, 7 insertions(+), 65 deletions(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 5e6cc325d4c4..6e15096877ce 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -8,12 +8,7 @@ import 'carbon-components/src/components/multi-select/_multi-select.scss'; import { getByText, isElementVisible } from '@carbon/test-utils/dom'; -import { - pressEnter, - pressSpace, - pressTab, - pressArrow, -} from '@carbon/test-utils/keyboard'; +import { pressEnter, pressSpace, pressTab } from '@carbon/test-utils/keyboard'; import { render, cleanup } from '@carbon/test-utils/react'; import React from 'react'; import { Simulate } from 'react-dom/test-utils'; @@ -78,7 +73,9 @@ describe('MultiSelect', () => { <MultiSelect.Filterable placeholder="catdog" id="test" items={items} /> ); - pressArrow(container.querySelector('[role="button"]'), 'down'); + Simulate.keyDown(container.querySelector('[role="button"]'), { + key: 'ArrowDown', + }); expect( container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') @@ -192,6 +189,8 @@ describe('MultiSelect', () => { expect( container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') ).toBeFalsy(); + + document.body.removeChild(button); }); it.skip('should toggle selection with enter', () => { @@ -370,8 +369,7 @@ describe('MultiSelect', () => { const label = 'test-label'; const translateWithId = jest.fn(() => 'message'); - // eslint-disable-next-line no-unused-vars - const { container } = render( + render( <MultiSelect id="custom-id" translateWithId={translateWithId} diff --git a/packages/test-utils/keyboard.js b/packages/test-utils/keyboard.js index b14ef76abb0a..a05d7e4ffd4c 100644 --- a/packages/test-utils/keyboard.js +++ b/packages/test-utils/keyboard.js @@ -147,59 +147,3 @@ export function pressSpace(node = document.activeElement) { return node; } - -export function pressArrow(node = document.activeElement, direction) { - let events; - - if (direction === 'up') { - events = [ - new KeyboardEvent('keydown', { - key: 'ArrowUp', - bubbles: true, - cancelable: true, - }), - ]; - } - - if (direction === 'right') { - events = [ - new KeyboardEvent('keydown', { - key: 'ArrowRight', - bubbles: true, - cancelable: true, - }), - ]; - } - - if (direction === 'down') { - events = [ - new KeyboardEvent('keydown', { - key: 'ArrowDown', - bubbles: true, - cancelable: true, - }), - ]; - } - - if (direction === 'left') { - events = [ - new KeyboardEvent('keydown', { - key: 'ArrowLeft', - bubbles: true, - cancelable: true, - }), - ]; - } - - if (events === undefined) { - return console.error( - "'up', 'down', 'left', 'right' arrow direction required!" - ); - } - - for (const event of events) { - node.dispatchEvent(event); - } - - return node; -} From aedf877352c843ac495993c4a766a2e930b5a8f7 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <dakahn@protonmail.com> Date: Tue, 28 Apr 2020 20:26:27 -0500 Subject: [PATCH 13/20] test(FilterableMultiselect): remove checks against state --- .../__tests__/FilterableMultiSelect-test.js | 25 ++++++++++++++++--- .../MultiSelect/__tests__/MultiSelect-test.js | 15 ----------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js index f5726a02686d..1558bf24be47 100644 --- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js @@ -46,7 +46,14 @@ describe('MultiSelect.Filterable', () => { it('should initially have the menu open when open prop is provided', () => { const wrapper = mount(<MultiSelect.Filterable {...mockProps} open />); - expect(wrapper.state('isOpen')).toBe(true); + assertMenuOpen(wrapper, mockProps); + }); + + it('should open the menu with a down arrow', () => { + const wrapper = mount(<MultiSelect.Filterable {...mockProps} />); + + findMenuIconNode(wrapper).simulate('keyDown', { key: 'ArrowDown' }); + assertMenuOpen(wrapper, mockProps); }); it('should let the user toggle the menu by the menu icon', () => { @@ -71,7 +78,12 @@ describe('MultiSelect.Filterable', () => { const wrapper = mount(<MultiSelect.Filterable {...mockProps} />); openMenu(wrapper); expect(wrapper.find(listItemName).length).toBe(mockProps.items.length); - wrapper.setState({ inputValue: '3' }); + + wrapper + .find('[role="combobox"]') + .at(0) + .simulate('change', { target: { value: '3' } }); + expect(wrapper.find(listItemName).length).toBe(1); }); @@ -154,12 +166,17 @@ describe('MultiSelect.Filterable', () => { const wrapper = mount(<MultiSelect.Filterable {...mockProps} />); const inputValue = 'Item'; openMenu(wrapper); - wrapper.setState({ inputValue }); + + wrapper + .find('[role="combobox"]') + .at(0) + .simulate('change', { target: { value: 'Item' } }); + wrapper .find(listItemName) .at(0) .simulate('click'); - expect(wrapper.state('inputValue')).toEqual(inputValue); + expect(wrapper.find('[role="combobox"]').props().value).toEqual(inputValue); }); }); diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 96a0e68f5364..d4af992e56c6 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -67,21 +67,6 @@ describe('MultiSelect', () => { ).toBeInstanceOf(HTMLElement); }); - it('should open the menu with a down arrow', () => { - const items = generateItems(4, generateGenericItem); - const { container } = render( - <MultiSelect.Filterable placeholder="catdog" id="test" items={items} /> - ); - - Simulate.keyDown(container.querySelector('[role="button"]'), { - key: 'ArrowDown', - }); - - expect( - container.querySelector('[aria-expanded="true"][aria-haspopup="true"]') - ).toBeInstanceOf(HTMLElement); - }); - it('should open the menu when a user hits space while the field is focused', () => { const items = generateItems(4, generateGenericItem); const { container } = render( From 725f049941421f6ed7ef100dc8a5db981e791986 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 29 Apr 2020 11:01:03 -0500 Subject: [PATCH 14/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index d4af992e56c6..1cfddcb288f5 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -3,7 +3,6 @@ * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. - * */ import 'carbon-components/src/components/multi-select/_multi-select.scss'; From 8672a1ef4e55d9c45c628a55be9e4448a20366c3 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 29 Apr 2020 11:01:11 -0500 Subject: [PATCH 15/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 1cfddcb288f5..0769ce7f4766 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -5,7 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -import 'carbon-components/src/components/multi-select/_multi-select.scss'; import { getByText, isElementVisible } from '@carbon/test-utils/dom'; import { pressEnter, pressSpace, pressTab } from '@carbon/test-utils/keyboard'; import { render, cleanup } from '@carbon/test-utils/react'; From 154c60cabec248482a1dffd66f7d02608ea34d48 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 29 Apr 2020 11:01:19 -0500 Subject: [PATCH 16/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 0769ce7f4766..660f8d4aad6f 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import { getByText, isElementVisible } from '@carbon/test-utils/dom'; +import { getByText } from '@carbon/test-utils/dom'; import { pressEnter, pressSpace, pressTab } from '@carbon/test-utils/keyboard'; import { render, cleanup } from '@carbon/test-utils/react'; import React from 'react'; From 3aa6674e4da99b4bfb06c6ed49184bb96e3f4572 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 29 Apr 2020 11:01:27 -0500 Subject: [PATCH 17/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 660f8d4aad6f..200e04553975 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -413,7 +413,6 @@ describe('MultiSelect', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; // eslint-disable-next-line no-unused-vars - const [firstItem, secondItem, thirdItem, fourthItem] = items; const { container } = render( <MultiSelect id="custom-id" From 4b3108f598737f362b72c14801043957906f2f42 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 29 Apr 2020 11:01:36 -0500 Subject: [PATCH 18/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 200e04553975..f13c4159e0fb 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -436,7 +436,7 @@ describe('MultiSelect', () => { ); // the first option in the list to the the former third option in the list - expect(optionsArray[0].title).toMatch('Item 2'); + expect(optionsArray[0].title).toBe('Item 2'); }); }); }); From 74a1c32b2db145f01eb9cfbfe00e2a60aa172ebe Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 29 Apr 2020 11:01:47 -0500 Subject: [PATCH 19/20] Update packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js Co-Authored-By: Josh Black <josh@josh.black> --- .../src/components/MultiSelect/__tests__/MultiSelect-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index f13c4159e0fb..7013e2497625 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -385,7 +385,7 @@ describe('MultiSelect', () => { const itemNode = getByText(container, item.label); Simulate.click(itemNode); - expect(testFunction).toHaveBeenCalled(); + expect(testFunction).toHaveBeenCalledTimes(1); }); it('should support an invalid state with invalidText that describes the field', () => { From e0b267e015f944cb900ed17a849d4faa6c993fc1 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <dakahn@protonmail.com> Date: Wed, 29 Apr 2020 12:40:56 -0500 Subject: [PATCH 20/20] test(multiselect): fix undefined vars --- .../components/MultiSelect/__tests__/MultiSelect-test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 7013e2497625..c08e7413ab90 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import { getByText } from '@carbon/test-utils/dom'; +import { getByText, isElementVisible } from '@carbon/test-utils/dom'; import { pressEnter, pressSpace, pressTab } from '@carbon/test-utils/keyboard'; import { render, cleanup } from '@carbon/test-utils/react'; import React from 'react'; @@ -306,8 +306,8 @@ describe('MultiSelect', () => { it('should place the given id on the ___ node when passed in as a prop', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; - // eslint-disable-next-line no-unused-vars - const { container } = render( + + render( <MultiSelect id="custom-id" label={label} @@ -412,7 +412,7 @@ describe('MultiSelect', () => { it('should support different feedback modes with selectionFeedback', () => { const items = generateItems(4, generateGenericItem); const label = 'test-label'; - // eslint-disable-next-line no-unused-vars + const [_firstItem, _secondItem, thirdItem] = items; const { container } = render( <MultiSelect id="custom-id"