From 7e55bfbd2ab239fdd30752779593bd386216192a Mon Sep 17 00:00:00 2001 From: brookeangel Date: Mon, 30 Sep 2019 15:29:43 -0700 Subject: [PATCH] also test toggletip and add some accessibility goodies --- src/Nri/Ui/Tooltip/V1.elm | 6 +- styleguide-app/Examples/Tooltip.elm | 1 + tests/Spec/Nri/Ui/Tooltip/V1.elm | 149 +++++++++++++++++++--------- 3 files changed, 105 insertions(+), 51 deletions(-) diff --git a/src/Nri/Ui/Tooltip/V1.elm b/src/Nri/Ui/Tooltip/V1.elm index 63654743..4fd3c08d 100644 --- a/src/Nri/Ui/Tooltip/V1.elm +++ b/src/Nri/Ui/Tooltip/V1.elm @@ -224,17 +224,18 @@ A toggle tip is always triggered by a click. toggleTip : { onTrigger : Bool -> msg , isOpen : Bool + , label : String , extraButtonAttrs : List (Attribute msg) } -> Tooltip msg -> Html msg -toggleTip { isOpen, onTrigger, extraButtonAttrs } tooltip_ = +toggleTip { isOpen, onTrigger, extraButtonAttrs, label } tooltip_ = Nri.Ui.styled Html.div "Nri-Ui-Tooltip-V1-ToggleTip" tooltipContainerStyles [] [ Html.button - ([ Widget.label "More information" + ([ Widget.label label , css ([ Css.width (Css.px 20) , Css.height (Css.px 20) @@ -243,6 +244,7 @@ toggleTip { isOpen, onTrigger, extraButtonAttrs } tooltip_ = ++ buttonStyleOverrides ) , Events.onClickStopPropagation (onTrigger True) + , Events.onBlur (onTrigger False) ] ++ extraButtonAttrs ) diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index 2a68ba69..ccea81d2 100644 --- a/styleguide-app/Examples/Tooltip.elm +++ b/styleguide-app/Examples/Tooltip.elm @@ -93,6 +93,7 @@ example msg model = |> Tooltip.toggleTip { onTrigger = ToggleTooltip ToggleTip >> msg , isOpen = model.openTooltip == Just ToggleTip + , label = "More info" , extraButtonAttrs = [] } ] diff --git a/tests/Spec/Nri/Ui/Tooltip/V1.elm b/tests/Spec/Nri/Ui/Tooltip/V1.elm index 58c40dbe..07563392 100644 --- a/tests/Spec/Nri/Ui/Tooltip/V1.elm +++ b/tests/Spec/Nri/Ui/Tooltip/V1.elm @@ -1,6 +1,7 @@ module Spec.Nri.Ui.Tooltip.V1 exposing (spec) import Accessibility.Aria as Aria +import Accessibility.Widget as Widget import Expect import Html import Html.Styled as HtmlStyled @@ -35,54 +36,104 @@ update msg model = spec : Test spec = describe "Nri.Ui.Tooltip.V1" - ([ Tooltip.OnClick, Tooltip.OnHover ] - |> List.map - (\trigger -> - test ("Tooltip with " ++ Debug.toString trigger ++ " trigger is available on focus") <| - \() -> - ProgramTest.createSandbox - { init = init - , update = update - , view = - \model -> - Tooltip.tooltip [ HtmlStyled.text "This will be the primary label" ] - |> Tooltip.primaryLabel - { trigger = trigger - , triggerHtml = HtmlStyled.text "label-less icon" - , onTrigger = ToggleTooltip - , isOpen = model.tooltipOpen - , extraButtonAttrs = [] - , id = "primary-label" - } - |> HtmlStyled.toUnstyled - } - |> ProgramTest.start () - |> ProgramTest.simulateDomEvent - (Query.find - [ Selector.tag "button" - , Selector.containing [ Selector.text "label-less icon" ] + [ describe "toggleTip" + [ test "Toggletip is available on click and hides on blur" <| + \() -> + ProgramTest.createSandbox + { init = init + , update = update + , view = viewToggleTip + } + |> ProgramTest.start () + |> ProgramTest.simulateDomEvent + (Query.find + [ Selector.tag "button" + , Selector.attribute + (Widget.label "More info") + ] + ) + Event.click + |> ProgramTest.ensureViewHas + [ Selector.text "Toggly" + ] + |> ProgramTest.simulateDomEvent + (Query.find + [ Selector.tag "button" + , Selector.attribute + (Widget.label "More info") + ] + ) + Event.blur + |> ProgramTest.ensureViewHasNot + [ Selector.text "Toggly" + ] + |> ProgramTest.done + ] + , describe "tooltips" + ([ Tooltip.OnClick, Tooltip.OnHover ] + |> List.map + (\trigger -> + test ("Tooltip with " ++ Debug.toString trigger ++ " trigger is available on focus") <| + \() -> + ProgramTest.createSandbox + { init = init + , update = update + , view = viewTooltip trigger + } + |> ProgramTest.start () + |> ProgramTest.simulateDomEvent + (Query.find + [ Selector.tag "button" + , Selector.containing [ Selector.text "label-less icon" ] + ] + ) + Event.focus + |> ProgramTest.ensureViewHas + [ tag "button" + , Selector.attribute (Aria.labeledBy "primary-label") ] - ) - Event.focus - |> ProgramTest.ensureViewHas - [ tag "button" - , Selector.attribute (Aria.labeledBy "primary-label") - ] - |> ProgramTest.ensureViewHas - [ id "primary-label" - , Selector.text "This will be the primary label" - ] - |> ProgramTest.simulateDomEvent - (Query.find - [ Selector.tag "button" - , Selector.containing [ Selector.text "label-less icon" ] + |> ProgramTest.ensureViewHas + [ id "primary-label" + , Selector.text "This will be the primary label" ] - ) - Event.blur - |> ProgramTest.ensureViewHasNot - [ id "primary-label" - , Selector.text "This will be the primary label" - ] - |> ProgramTest.done - ) - ) + |> ProgramTest.simulateDomEvent + (Query.find + [ Selector.tag "button" + , Selector.containing [ Selector.text "label-less icon" ] + ] + ) + Event.blur + |> ProgramTest.ensureViewHasNot + [ id "primary-label" + , Selector.text "This will be the primary label" + ] + |> ProgramTest.done + ) + ) + ] + + +viewTooltip : Tooltip.Trigger -> Model -> Html.Html Msg +viewTooltip trigger model = + Tooltip.tooltip [ HtmlStyled.text "This will be the primary label" ] + |> Tooltip.primaryLabel + { trigger = trigger + , triggerHtml = HtmlStyled.text "label-less icon" + , onTrigger = ToggleTooltip + , isOpen = model.tooltipOpen + , extraButtonAttrs = [] + , id = "primary-label" + } + |> HtmlStyled.toUnstyled + + +viewToggleTip : Model -> Html.Html Msg +viewToggleTip model = + Tooltip.tooltip [ HtmlStyled.text "Toggly!" ] + |> Tooltip.toggleTip + { onTrigger = ToggleTooltip + , isOpen = model.tooltipOpen + , extraButtonAttrs = [] + , label = "More info" + } + |> HtmlStyled.toUnstyled