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

add a separate checked attribute for writing tests against

Browse Source 
The basic problem here: `node.checked = true` in a real browser does not
modify the DOM; it only modifies the internal state of the element. It shows
up in our tests because `Test.Html.Query` makes all the elements and properties
visible for testing.

To get around this, we just add a `data-nri-checked` for automated tests
to use.
This commit is contained in:
Brian Hicks 2020-08-17 11:18:32 -05:00
parent 3bbcc27d20
commit dface805bc
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Nri/Ui/SegmentedControl/V11.elm
View File

@ -29,6 +29,7 @@ import EventExtras
import Html.Styled
import Html.Styled.Attributes as Attributes exposing (css, href)
import Html.Styled.Events as Events
import Json.Encode as Encode
import Nri.Ui
import Nri.Ui.Colors.Extra exposing (withAlpha)
import Nri.Ui.Colors.V1 as Colors
@ -96,7 +97,13 @@ viewRadioGroup config =
(radio name (config.toString option.value) isSelected <|
(Events.onCheck (\_ -> config.onSelect option.value)
:: css [ Css.opacity Css.zero ]
:: Attributes.checked isSelected
:: Attributes.attribute "data-nri-checked"
(if isSelected then
"true"
else
"false"
)
:: Style.invisible
)
)

4
tests/Spec/Nri/Ui/SegmentedControl.elm
View File

@ -54,7 +54,7 @@ spec =
, Selector.containing
[ Selector.tag "input"
, Selector.attribute (Attributes.type_ "radio")
, Selector.attribute (Attributes.checked True)
, Selector.attribute (Attributes.attribute "data-nri-checked" "true")
]
]
]
@ -69,7 +69,7 @@ spec =
, Selector.containing
[ Selector.tag "input"
, Selector.attribute (Attributes.type_ "radio")
, Selector.attribute (Attributes.checked False)
, Selector.attribute (Attributes.attribute "data-nri-checked" "false")
]
]
]