From ba7766b3b97d709d6f8ad922302bb047821d9fb5 Mon Sep 17 00:00:00 2001 From: Casey Webb Date: Mon, 21 Aug 2023 21:01:14 -0500 Subject: [PATCH 1/9] Prevent default/stop propagation on Tooltip.disclosure click --- src/Nri/Ui/Tooltip/V3.elm | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm index 72df40cb..1add6b31 100644 --- a/src/Nri/Ui/Tooltip/V3.elm +++ b/src/Nri/Ui/Tooltip/V3.elm @@ -87,6 +87,7 @@ import Content import Css exposing (Color, Px, Style) import Css.Global as Global import Css.Media +import EventExtras as Event import Html.Styled as Root import Html.Styled.Attributes as Attributes import Html.Styled.Events as Events @@ -940,7 +941,7 @@ viewTooltip_ { trigger, id } tooltip = , tabForwardAction = msg False } ] - , [ Events.onClick (msg (not tooltip.isOpen)) + , [ Event.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) , Key.onKeyDown [ Key.escape (msg False) ] ] ) From 8e8692a35493d027db6e2a0f7d6fa204b309bf3f Mon Sep 17 00:00:00 2001 From: Casey Webb Date: Tue, 22 Aug 2023 10:05:47 -0500 Subject: [PATCH 2/9] WIP --- src/Nri/Ui/Tooltip/V3.elm | 3 +- tests/Spec/Nri/Ui/Tooltip.elm | 80 ++++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 3 deletions(-) diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm index 1add6b31..8c0a82b1 100644 --- a/src/Nri/Ui/Tooltip/V3.elm +++ b/src/Nri/Ui/Tooltip/V3.elm @@ -941,7 +941,8 @@ viewTooltip_ { trigger, id } tooltip = , tabForwardAction = msg False } ] - , [ Event.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) + , [ -- Event.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) + Events.onClick (msg (not tooltip.isOpen)) , Key.onKeyDown [ Key.escape (msg False) ] ] ) diff --git a/tests/Spec/Nri/Ui/Tooltip.elm b/tests/Spec/Nri/Ui/Tooltip.elm index 1de1ed30..e9222052 100644 --- a/tests/Spec/Nri/Ui/Tooltip.elm +++ b/tests/Spec/Nri/Ui/Tooltip.elm @@ -1,17 +1,26 @@ module Spec.Nri.Ui.Tooltip exposing (spec) import Accessibility.Aria as Aria -import Html.Attributes as Attributes +import Expect +import Html.Attributes import Html.Styled as HtmlStyled +import Html.Styled.Events as Events +import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Tooltip.V3 as Tooltip import ProgramTest exposing (ProgramTest, ensureViewHas, ensureViewHasNot) import Spec.Helpers exposing (nriDescription) +import Spec.Nri.Ui.Checkbox exposing (Msg(..)) import Test exposing (..) import Test.Html.Event as Event import Test.Html.Query as Query import Test.Html.Selector as Selector exposing (id, text) +type Msg + = ParentClicked + | ToggleTooltip Bool + + spec : Test spec = describe "Nri.Ui.Tooltip.V3" @@ -82,6 +91,68 @@ spec = ] |> ProgramTest.ensureViewHasNot (id tooltipId :: tooltipContentSelector tooltipContent) |> ProgramTest.done + , test "Prevents default on disclosures" <| + \() -> + let + tooltipContent = + "This will be the primary label" + + triggerContent = + "label-less icon" + + tooltipId = + "primary-label" + + triggerId = + "trigger" + + program_ = + ProgramTest.createSandbox + { init = { parentClicked = False, isOpen = False } + , update = + \msg model -> + case Debug.log "msg" msg of + ParentClicked -> + { model | parentClicked = True } + + ToggleTooltip isOpen -> + { model | isOpen = isOpen } + , view = + \model -> + HtmlStyled.div + [ Events.onClick ParentClicked + ] + [ Tooltip.view + { trigger = + \attributes -> + ClickableText.button triggerContent + [ ClickableText.custom attributes + , ClickableText.id triggerId + ] + , id = tooltipId + } + [ Tooltip.open model.isOpen + , Tooltip.plaintext tooltipContent + , Tooltip.primaryLabel + , Tooltip.onToggle ToggleTooltip + , Tooltip.disclosure + { triggerId = triggerId + , lastId = Nothing + } + ] + ] + |> HtmlStyled.toUnstyled + } + |> ProgramTest.start () + in + program_ + |> ensureViewHasNot (tooltipContentSelector tooltipContent) + |> clickById triggerId + |> ensureViewHas (tooltipContentSelector tooltipContent) + |> ProgramTest.expectModel + (\model -> + Expect.equal False model.parentClicked + ) ] @@ -102,7 +173,7 @@ program view attributes = tooltipContentSelector : String -> List Selector.Selector tooltipContentSelector tooltipContent = - [ Selector.attribute (Attributes.attribute "data-tooltip-visible" "true") + [ Selector.attribute (Html.Attributes.attribute "data-tooltip-visible" "true") , Selector.containing [ text tooltipContent ] ] @@ -127,6 +198,11 @@ focus selectors = ProgramTest.simulateDomEvent (Query.find selectors) Event.focus +clickById : String -> ProgramTest model msg effect -> ProgramTest model msg effect +clickById id = + ProgramTest.simulateDomEvent (Query.find [ Selector.id id ]) Event.click + + clickButtonByLabel : String -> ProgramTest model msg effect -> ProgramTest model msg effect clickButtonByLabel label = ProgramTest.simulateDomEvent From cfe53f1afcbe2fbece5a4349696945a974a95d65 Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Tue, 22 Aug 2023 12:20:23 -0300 Subject: [PATCH 3/9] Assert rendered disclosure tooltip does stopPropagation and preventDefault --- src/Nri/Ui/Tooltip/V3.elm | 3 +- tests/Spec/Nri/Ui/Tooltip.elm | 79 +++++++++++++---------------------- 2 files changed, 29 insertions(+), 53 deletions(-) diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm index 8c0a82b1..1add6b31 100644 --- a/src/Nri/Ui/Tooltip/V3.elm +++ b/src/Nri/Ui/Tooltip/V3.elm @@ -941,8 +941,7 @@ viewTooltip_ { trigger, id } tooltip = , tabForwardAction = msg False } ] - , [ -- Event.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) - Events.onClick (msg (not tooltip.isOpen)) + , [ Event.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) , Key.onKeyDown [ Key.escape (msg False) ] ] ) diff --git a/tests/Spec/Nri/Ui/Tooltip.elm b/tests/Spec/Nri/Ui/Tooltip.elm index e9222052..9edb6e70 100644 --- a/tests/Spec/Nri/Ui/Tooltip.elm +++ b/tests/Spec/Nri/Ui/Tooltip.elm @@ -9,7 +9,6 @@ import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Tooltip.V3 as Tooltip import ProgramTest exposing (ProgramTest, ensureViewHas, ensureViewHasNot) import Spec.Helpers exposing (nriDescription) -import Spec.Nri.Ui.Checkbox exposing (Msg(..)) import Test exposing (..) import Test.Html.Event as Event import Test.Html.Query as Query @@ -106,53 +105,36 @@ spec = triggerId = "trigger" - program_ = - ProgramTest.createSandbox - { init = { parentClicked = False, isOpen = False } - , update = - \msg model -> - case Debug.log "msg" msg of - ParentClicked -> - { model | parentClicked = True } - - ToggleTooltip isOpen -> - { model | isOpen = isOpen } - , view = - \model -> - HtmlStyled.div - [ Events.onClick ParentClicked - ] - [ Tooltip.view - { trigger = - \attributes -> - ClickableText.button triggerContent - [ ClickableText.custom attributes - , ClickableText.id triggerId - ] - , id = tooltipId - } - [ Tooltip.open model.isOpen - , Tooltip.plaintext tooltipContent - , Tooltip.primaryLabel - , Tooltip.onToggle ToggleTooltip - , Tooltip.disclosure - { triggerId = triggerId - , lastId = Nothing - } + view model = + HtmlStyled.div + [ Events.onClick ParentClicked + ] + [ Tooltip.view + { trigger = + \attributes -> + ClickableText.button triggerContent + [ ClickableText.custom attributes + , ClickableText.id triggerId ] - ] - |> HtmlStyled.toUnstyled - } - |> ProgramTest.start () + , id = tooltipId + } + [ Tooltip.open model.isOpen + , Tooltip.plaintext tooltipContent + , Tooltip.primaryLabel + , Tooltip.onToggle ToggleTooltip + , Tooltip.disclosure + { triggerId = triggerId + , lastId = Nothing + } + ] + ] + |> HtmlStyled.toUnstyled in - program_ - |> ensureViewHasNot (tooltipContentSelector tooltipContent) - |> clickById triggerId - |> ensureViewHas (tooltipContentSelector tooltipContent) - |> ProgramTest.expectModel - (\model -> - Expect.equal False model.parentClicked - ) + view { isOpen = False } + |> Query.fromHtml + |> Query.find [ Selector.id triggerId ] + |> Event.simulate Event.click + |> Expect.all [ Event.expectStopPropagation, Event.expectPreventDefault ] ] @@ -198,11 +180,6 @@ focus selectors = ProgramTest.simulateDomEvent (Query.find selectors) Event.focus -clickById : String -> ProgramTest model msg effect -> ProgramTest model msg effect -clickById id = - ProgramTest.simulateDomEvent (Query.find [ Selector.id id ]) Event.click - - clickButtonByLabel : String -> ProgramTest model msg effect -> ProgramTest model msg effect clickButtonByLabel label = ProgramTest.simulateDomEvent From ad74f8a7869b0a23e9da1f89aeadcaa949bab178 Mon Sep 17 00:00:00 2001 From: Casey Webb Date: Tue, 22 Aug 2023 10:34:02 -0500 Subject: [PATCH 4/9] Remove dead-end test approach --- src/Nri/Ui/Tooltip/V3.elm | 4 ++-- tests/Spec/Nri/Ui/Tooltip.elm | 41 ++++++++++++++--------------------- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm index 1add6b31..d512fa85 100644 --- a/src/Nri/Ui/Tooltip/V3.elm +++ b/src/Nri/Ui/Tooltip/V3.elm @@ -87,7 +87,7 @@ import Content import Css exposing (Color, Px, Style) import Css.Global as Global import Css.Media -import EventExtras as Event +import EventExtras as Events import Html.Styled as Root import Html.Styled.Attributes as Attributes import Html.Styled.Events as Events @@ -941,7 +941,7 @@ viewTooltip_ { trigger, id } tooltip = , tabForwardAction = msg False } ] - , [ Event.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) + , [ Events.onClickPreventDefaultAndStopPropagation (msg (not tooltip.isOpen)) , Key.onKeyDown [ Key.escape (msg False) ] ] ) diff --git a/tests/Spec/Nri/Ui/Tooltip.elm b/tests/Spec/Nri/Ui/Tooltip.elm index 9edb6e70..ad5474e5 100644 --- a/tests/Spec/Nri/Ui/Tooltip.elm +++ b/tests/Spec/Nri/Ui/Tooltip.elm @@ -15,11 +15,6 @@ import Test.Html.Query as Query import Test.Html.Selector as Selector exposing (id, text) -type Msg - = ParentClicked - | ToggleTooltip Bool - - spec : Test spec = describe "Nri.Ui.Tooltip.V3" @@ -106,27 +101,23 @@ spec = "trigger" view model = - HtmlStyled.div - [ Events.onClick ParentClicked - ] - [ Tooltip.view - { trigger = - \attributes -> - ClickableText.button triggerContent - [ ClickableText.custom attributes - , ClickableText.id triggerId - ] - , id = tooltipId + Tooltip.view + { trigger = + \attributes -> + ClickableText.button triggerContent + [ ClickableText.custom attributes + , ClickableText.id triggerId + ] + , id = tooltipId + } + [ Tooltip.open model.isOpen + , Tooltip.plaintext tooltipContent + , Tooltip.primaryLabel + , Tooltip.onToggle (\_ -> ()) + , Tooltip.disclosure + { triggerId = triggerId + , lastId = Nothing } - [ Tooltip.open model.isOpen - , Tooltip.plaintext tooltipContent - , Tooltip.primaryLabel - , Tooltip.onToggle ToggleTooltip - , Tooltip.disclosure - { triggerId = triggerId - , lastId = Nothing - } - ] ] |> HtmlStyled.toUnstyled in From c5511a4a216766d645c667ece7b75a7518e2ab3f Mon Sep 17 00:00:00 2001 From: Casey Webb Date: Tue, 22 Aug 2023 10:35:00 -0500 Subject: [PATCH 5/9] elm-reviwe --- tests/Spec/Nri/Ui/Tooltip.elm | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/Spec/Nri/Ui/Tooltip.elm b/tests/Spec/Nri/Ui/Tooltip.elm index ad5474e5..1a266b71 100644 --- a/tests/Spec/Nri/Ui/Tooltip.elm +++ b/tests/Spec/Nri/Ui/Tooltip.elm @@ -4,7 +4,6 @@ import Accessibility.Aria as Aria import Expect import Html.Attributes import Html.Styled as HtmlStyled -import Html.Styled.Events as Events import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Tooltip.V3 as Tooltip import ProgramTest exposing (ProgramTest, ensureViewHas, ensureViewHasNot) From cae1f55e216e21843100bce4945f6b13bce2681f Mon Sep 17 00:00:00 2001 From: Casey Webb Date: Tue, 22 Aug 2023 10:36:08 -0500 Subject: [PATCH 6/9] Changelog --- src/Nri/Ui/Tooltip/V3.elm | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm index d512fa85..991ccfd9 100644 --- a/src/Nri/Ui/Tooltip/V3.elm +++ b/src/Nri/Ui/Tooltip/V3.elm @@ -33,6 +33,7 @@ module Nri.Ui.Tooltip.V3 exposing - adds `paragraph` and `markdown` support - add partially-transparent white border around tooltips - Use Nri.Ui.WhenFocusLeaves.V2 + - prevent default and stop propagation on click for disclosure tooltips Changes from V2: From accaf792023da489e786eed323fdbf4104a651bc Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Thu, 24 Aug 2023 12:00:52 -0300 Subject: [PATCH 7/9] Add clickable container to disclosure --- component-catalog/src/Examples/Tooltip.elm | 64 ++++++++++++++-------- 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/component-catalog/src/Examples/Tooltip.elm b/component-catalog/src/Examples/Tooltip.elm index 14fcb242..da814c1f 100644 --- a/component-catalog/src/Examples/Tooltip.elm +++ b/component-catalog/src/Examples/Tooltip.elm @@ -18,6 +18,7 @@ import Debug.Control.View as ControlView import EllieLink import Example exposing (Example) import Html.Styled.Attributes exposing (css, href, id) +import Html.Styled.Events as Events import KeyboardSupport exposing (Key(..)) import Markdown import Nri.Ui.ClickableSvg.V2 as ClickableSvg @@ -93,6 +94,7 @@ example = type alias State = { openTooltip : Maybe TooltipId , staticExampleSettings : Control (List ( String, Tooltip.Attribute Never )) + , disclosureModel : { parentClicks : Int } , pageSettings : Control PageSettings } @@ -101,6 +103,7 @@ init : State init = { openTooltip = Nothing , staticExampleSettings = initStaticExampleSettings + , disclosureModel = { parentClicks = 0 } , pageSettings = Control.record PageSettings |> Control.field "backgroundColor" @@ -129,6 +132,11 @@ type Msg | SetControl (Control (List ( String, Tooltip.Attribute Never ))) | UpdatePageSettings (Control PageSettings) | Log String + | DisclosureMsg DisclosureMsg + + +type DisclosureMsg + = ParentClick update : Msg -> State -> ( State, Cmd Msg ) @@ -150,6 +158,9 @@ update msg model = Log message -> ( Debug.log "Tooltip Log:" |> always model, Cmd.none ) + DisclosureMsg ParentClick -> + ( { model | disclosureModel = { parentClicks = model.disclosureModel.parentClicks + 1 } }, Cmd.none ) + view : EllieLink.Config -> State -> List (Html Msg) view ellieLinkConfig model = @@ -238,7 +249,7 @@ Sometimes a tooltip trigger doesn't have any functionality itself outside of rev This behavior is analogous to disclosure behavior, except that it's presented different visually. (For more information, please read [Sarah Higley's "Tooltips in the time of WCAG 2.1" post](https://sarahmhigley.com/writing/tooltips-in-wcag-21).) """ - , example = viewDisclosureToolip model.openTooltip + , example = viewDisclosureToolip model.openTooltip model.disclosureModel , tooltipId = Disclosure } , { name = "Tooltip.viewToggleTip" @@ -304,8 +315,8 @@ viewAuxillaryDescriptionToolip openTooltip = ] -viewDisclosureToolip : Maybe TooltipId -> Html Msg -viewDisclosureToolip openTooltip = +viewDisclosureToolip : Maybe TooltipId -> { parentClicks : Int } -> Html Msg +viewDisclosureToolip openTooltip { parentClicks } = let triggerId = "tooltip__disclosure-trigger" @@ -313,29 +324,36 @@ viewDisclosureToolip openTooltip = lastId = "tooltip__disclosure-what-is-mastery" in - Tooltip.view - { id = "tooltip__disclosure" - , trigger = - \eventHandlers -> - ClickableSvg.button "Previously mastered" - (Svg.withColor Colors.green UiIcon.starFilled) - [ ClickableSvg.custom eventHandlers - , ClickableSvg.id triggerId + Html.button + [ css [ Css.padding (Css.px 40) ] + , Events.onClick (DisclosureMsg ParentClick) + , id "parent-button" + ] + [ Tooltip.view + { id = "tooltip__disclosure" + , trigger = + \eventHandlers -> + ClickableSvg.button "Previously mastered" + (Svg.withColor Colors.green UiIcon.starFilled) + [ ClickableSvg.custom eventHandlers + , ClickableSvg.id triggerId + ] + } + [ Tooltip.html + [ Html.text "You mastered this skill in a previous year! Way to go! " + , Html.a + [ id lastId + , href "https://noredink.zendesk.com/hc/en-us/articles/203022319-What-is-mastery-" ] - } - [ Tooltip.html - [ Html.text "You mastered this skill in a previous year! Way to go! " - , Html.a - [ id lastId - , href "https://noredink.zendesk.com/hc/en-us/articles/203022319-What-is-mastery-" + [ Html.text "Learn more about NoRedInk Mastery" ] ] - [ Html.text "Learn more about NoRedInk Mastery" ] + , Tooltip.disclosure { triggerId = triggerId, lastId = Just lastId } + , Tooltip.onToggle (ToggleTooltip Disclosure) + , Tooltip.open (openTooltip == Just Disclosure) + , Tooltip.smallPadding + , Tooltip.alignEndForMobile (Css.px 148) ] - , Tooltip.disclosure { triggerId = triggerId, lastId = Just lastId } - , Tooltip.onToggle (ToggleTooltip Disclosure) - , Tooltip.open (openTooltip == Just Disclosure) - , Tooltip.smallPadding - , Tooltip.alignEndForMobile (Css.px 148) + , Html.div [ id "parent-button-clicks" ] [ Html.text ("Parent Clicks: " ++ String.fromInt parentClicks) ] ] From f506146b58f8931217393c595650655720425f2d Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Thu, 24 Aug 2023 16:56:32 -0300 Subject: [PATCH 8/9] Add puppeteer test for tooltip disclosure --- script/puppeteer-tests.js | 46 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index f74abe8f..bd7b5d7e 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -170,10 +170,55 @@ describe("UI tests", function () { handleAxeResults(name, results); }; + const tooltipProcessing = async (name, location) => { + await defaultProcessing(name, location); + await page.waitForSelector("#parent-button-clicks"); + + const buttonClick = async () => { + const button = await page.$('#parent-button'); + await page.evaluate(el => el.click(), button); + await page.waitForTimeout(100); + }; + + const getCounterText = async () => { + const counter = await page.$('#parent-button-clicks'); + const text = await page.evaluate(el => el.innerText, counter); + return text; + }; + + const tooltipTriggerClick = async () => { + const button = await page.$('#tooltip__disclosure-trigger'); + await page.evaluate(el => el.click(), button); + await page.waitForTimeout(100); + }; + + const isTooltipVisible = async () => { + let res = await page.evaluate(() => { + return getComputedStyle(document.getElementById('tooltip__disclosure').parentElement).getPropertyValue('display') != 'none'; + }); + + return res; + } + + assert.equal(await getCounterText(), "Parent Clicks: 0"); + assert.equal(await isTooltipVisible(), false); + await tooltipTriggerClick(); + assert.equal(await isTooltipVisible(), true); + await tooltipTriggerClick(); + assert.equal(await isTooltipVisible(), false); + assert.equal(await getCounterText(), "Parent Clicks: 0"); + await buttonClick(); + assert.equal(await getCounterText(), "Parent Clicks: 1"); + await buttonClick(); + assert.equal(await getCounterText(), "Parent Clicks: 2"); + } + const skippedRules = { // Loading's color contrast check seems to change behavior depending on whether Percy snapshots are taken or not Loading: ["color-contrast"], RadioButton: ["duplicate-id"], + // We need nested-interactive to test the tooltip behavior + Tooltip: ["nested-interactive"], }; const specialProcessing = { @@ -184,6 +229,7 @@ describe("UI tests", function () { UiIcon: iconProcessing, Logo: iconProcessing, Pennant: iconProcessing, + Tooltip: tooltipProcessing, }; it("All", async function () { From 680961c16900cb6da33dc0a8bd74acf85f778e3b Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Thu, 24 Aug 2023 17:01:21 -0300 Subject: [PATCH 9/9] Run prettier --- script/puppeteer-tests.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index bd7b5d7e..913ef3d4 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -175,30 +175,34 @@ describe("UI tests", function () { await page.waitForSelector("#parent-button-clicks"); const buttonClick = async () => { - const button = await page.$('#parent-button'); - await page.evaluate(el => el.click(), button); + const button = await page.$("#parent-button"); + await page.evaluate((el) => el.click(), button); await page.waitForTimeout(100); }; const getCounterText = async () => { - const counter = await page.$('#parent-button-clicks'); - const text = await page.evaluate(el => el.innerText, counter); + const counter = await page.$("#parent-button-clicks"); + const text = await page.evaluate((el) => el.innerText, counter); return text; }; const tooltipTriggerClick = async () => { - const button = await page.$('#tooltip__disclosure-trigger'); - await page.evaluate(el => el.click(), button); + const button = await page.$("#tooltip__disclosure-trigger"); + await page.evaluate((el) => el.click(), button); await page.waitForTimeout(100); }; const isTooltipVisible = async () => { let res = await page.evaluate(() => { - return getComputedStyle(document.getElementById('tooltip__disclosure').parentElement).getPropertyValue('display') != 'none'; + return ( + getComputedStyle( + document.getElementById("tooltip__disclosure").parentElement + ).getPropertyValue("display") != "none" + ); }); return res; - } + }; assert.equal(await getCounterText(), "Parent Clicks: 0"); assert.equal(await isTooltipVisible(), false); @@ -211,7 +215,7 @@ describe("UI tests", function () { assert.equal(await getCounterText(), "Parent Clicks: 1"); await buttonClick(); assert.equal(await getCounterText(), "Parent Clicks: 2"); - } + }; const skippedRules = { // Loading's color contrast check seems to change behavior depending on whether Percy snapshots are taken or not