NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-11 03:28:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

add highlighter test: only one el in tab sequence

Browse Source
This commit is contained in:
charbelrami 2022-09-27 11:36:43 -03:00
parent 72c84e1671
commit e260fe6da6
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Nri/Ui/Highlighter/V1.elm
View File

@ -670,7 +670,7 @@ viewHighlightable highlighterId marker focusIndex highlightable =
viewStaticHighlightable : String -> Highlightable marker -> Html msg viewStaticHighlightable : String -> Highlightable marker -> Html msg
viewStaticHighlightable highlighterId = viewStaticHighlightable highlighterId =
viewHighlightableSegment False (Just -1) highlighterId [] Nothing viewHighlightableSegment False Nothing highlighterId [] Nothing
viewHighlightableSegment : Bool -> Maybe Int -> String -> List (Attribute msg) -> Maybe (Tool.Tool marker) -> Highlightable marker -> Html msg viewHighlightableSegment : Bool -> Maybe Int -> String -> List (Attribute msg) -> Maybe (Tool.Tool marker) -> Highlightable marker -> Html msg

38
tests/Spec/Nri/Ui/Highlighter.elm
View File

@ -30,6 +30,12 @@ keyboardTests =
|> program marker |> program marker
|> ensureFocusOn "Pothos" |> ensureFocusOn "Pothos"
|> done |> done
, test "has only one element included in the tab sequence" <|
\() ->
Highlightable.initFragments Nothing "Pothos indirect light"
|> program marker
|> ensureOnlyOneInTabSequence (String.words "Pothos indirect light")
|> done
, test "moves focus right on right arrow key" <| , test "moves focus right on right arrow key" <|
\() -> \() ->
Highlightable.initFragments Nothing "Pothos indirect light" Highlightable.initFragments Nothing "Pothos indirect light"
@ -37,6 +43,7 @@ keyboardTests =
|> ensureFocusOn "Pothos" |> ensureFocusOn "Pothos"
|> rightArrow |> rightArrow
|> ensureFocusOn "indirect" |> ensureFocusOn "indirect"
|> ensureOnlyOneInTabSequence (String.words "Pothos indirect light")
|> rightArrow |> rightArrow
|> ensureFocusOn "light" |> ensureFocusOn "light"
-- once we're on the final element, pressing right arrow again should -- once we're on the final element, pressing right arrow again should
@ -53,6 +60,7 @@ keyboardTests =
|> ensureFocusOn "indirect" |> ensureFocusOn "indirect"
|> leftArrow |> leftArrow
|> ensureFocusOn "Pothos" |> ensureFocusOn "Pothos"
|> ensureOnlyOneInTabSequence (String.words "Pothos indirect light")
-- once we're on the first element, pressing left arrow again should -- once we're on the first element, pressing left arrow again should
-- _not_ wrap the focus. We should stay right where we are! -- _not_ wrap the focus. We should stay right where we are!
|> leftArrow |> leftArrow
@ -88,13 +96,13 @@ keyboardTests =
|> program marker |> program marker
|> shiftRight |> shiftRight
|> releaseShiftRight |> releaseShiftRight
|> ensureMarked [ "Pothos", "", "indirect" ] |> ensureMarked [ "Pothos", " ", "indirect" ]
|> shiftRight |> shiftRight
|> releaseShiftRight |> releaseShiftRight
|> ensureMarked [ "Pothos", "", "indirect", "", "light" ] |> ensureMarked [ "Pothos", " ", "indirect", " ", "light" ]
|> shiftRight |> shiftRight
|> releaseShiftRight |> releaseShiftRight
|> ensureMarked [ "Pothos", "", "indirect", "", "light" ] |> ensureMarked [ "Pothos", " ", "indirect", " ", "light" ]
|> done |> done
, test "expands selection one element to the left on shift + left arrow and highlight selected elements" <| , test "expands selection one element to the left on shift + left arrow and highlight selected elements" <|
\() -> \() ->
@ -104,13 +112,13 @@ keyboardTests =
|> rightArrow |> rightArrow
|> shiftLeft |> shiftLeft
|> releaseShiftLeft |> releaseShiftLeft
|> ensureMarked [ "indirect", "", "light" ] |> ensureMarked [ "indirect", " ", "light" ]
|> shiftLeft |> shiftLeft
|> releaseShiftLeft |> releaseShiftLeft
|> ensureMarked [ "Pothos", "", "indirect", "", "light" ] |> ensureMarked [ "Pothos", " ", "indirect", " ", "light" ]
|> shiftLeft |> shiftLeft
|> releaseShiftLeft |> releaseShiftLeft
|> ensureMarked [ "Pothos", "", "indirect", "", "light" ] |> ensureMarked [ "Pothos", " ", "indirect", " ", "light" ]
|> done |> done
, test "merges highlights" <| , test "merges highlights" <|
\() -> \() ->
@ -119,13 +127,13 @@ keyboardTests =
|> ensureFocusOn "Pothos" |> ensureFocusOn "Pothos"
|> shiftRight |> shiftRight
|> releaseShiftRight |> releaseShiftRight
|> ensureMarked [ "Pothos", "", "indirect" ] |> ensureMarked [ "Pothos", " ", "indirect" ]
|> ensureFocusOn "indirect" |> ensureFocusOn "indirect"
|> rightArrow |> rightArrow
|> ensureFocusOn "light" |> ensureFocusOn "light"
|> shiftLeft |> shiftLeft
|> releaseShiftLeft |> releaseShiftLeft
|> ensureMarked [ "Pothos", "", "indirect", "", "light" ] |> ensureMarked [ "Pothos", " ", "indirect", " ", "light" ]
|> done |> done
, test "selects element on MouseDown and highlights selected element on MouseUp" <| , test "selects element on MouseDown and highlights selected element on MouseUp" <|
\() -> \() ->
@ -144,7 +152,7 @@ keyboardTests =
|> mouseDown "Pothos" |> mouseDown "Pothos"
|> mouseOver "indirect" |> mouseOver "indirect"
|> mouseUp "Pothos" |> mouseUp "Pothos"
|> ensureMarked [ "Pothos", "", "indirect" ] |> ensureMarked [ "Pothos", " ", "indirect" ]
|> done |> done
, test "Highlights element on Space" <| , test "Highlights element on Space" <|
\() -> \() ->
@ -173,7 +181,7 @@ keyboardTests =
|> ensureFocusOn "Pothos" |> ensureFocusOn "Pothos"
|> shiftRight |> shiftRight
|> releaseShiftRight |> releaseShiftRight
|> ensureMarked [ "Pothos", "", "indirect" ] |> ensureMarked [ "Pothos", " ", "indirect" ]
|> mouseDown "indirect" |> mouseDown "indirect"
|> mouseUp "indirect" |> mouseUp "indirect"
|> expectViewHasNot |> expectViewHasNot
@ -199,16 +207,18 @@ ensureFocusOn word textContext =
(Query.find [ Selector.attribute (Key.tabbable True) ] (Query.find [ Selector.attribute (Key.tabbable True) ]
>> Query.has [ Selector.text word ] >> Query.has [ Selector.text word ]
) )
ensureOnlyOneInTabSequence : List String -> TestContext marker -> TestContext marker
ensureOnlyOneInTabSequence words textContext =
textContext
|> ensureView |> ensureView
(Query.findAll [ Selector.attribute (Key.tabbable True) ] (Query.findAll [ Selector.attribute (Key.tabbable True) ]
>> Query.count (Expect.equal 1) >> Query.count (Expect.equal 1)
) )
-- We only manage focus for interactive elements.
-- Static elements should not have explicit tabindex -1 as it is redundant,
-- they are never included in the tab sequence
|> ensureView |> ensureView
(Query.findAll [ Selector.attribute (Key.tabbable False) ] (Query.findAll [ Selector.attribute (Key.tabbable False) ]
>> Query.count (Expect.equal 2) >> Query.count (Expect.equal (List.length words - 1))
) )