mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 12:19:03 +03:00
add docs and spec for helpfully disabled button
This commit is contained in:
parent
b0bcdf28d6
commit
4a65db396a
@ -39,7 +39,10 @@ The next version of `Button` should also remove `delete` and `toggleButton`
|
|||||||
- adds `tertiary` style
|
- adds `tertiary` style
|
||||||
- adds `submit` and `opensModal`
|
- adds `submit` and `opensModal`
|
||||||
- adds `secondaryDanger` style
|
- adds `secondaryDanger` style
|
||||||
- marked toggleButton as deprecated and added toggleButtonPressed attribute
|
- marks toggleButton as deprecated and adds toggleButtonPressed attribute
|
||||||
|
- replaces the `disabled` attribute with `aria-disabled="true"`
|
||||||
|
- removes click handler from disabled buttons
|
||||||
|
- prevents default behavior for disabled submit buttons by setting `type="button"`
|
||||||
|
|
||||||
|
|
||||||
# Changes from V9:
|
# Changes from V9:
|
||||||
|
@ -1,17 +1,20 @@
|
|||||||
module Spec.Nri.Ui.Button exposing (spec)
|
module Spec.Nri.Ui.Button exposing (spec)
|
||||||
|
|
||||||
import Accessibility.Aria as Aria
|
import Accessibility.Aria as Aria
|
||||||
|
import Expect exposing (Expectation)
|
||||||
import Html.Styled exposing (Html, toUnstyled)
|
import Html.Styled exposing (Html, toUnstyled)
|
||||||
import Nri.Ui.Button.V10 as Button
|
import Nri.Ui.Button.V10 as Button
|
||||||
import ProgramTest exposing (..)
|
import ProgramTest exposing (..)
|
||||||
import Test exposing (..)
|
import Test exposing (..)
|
||||||
import Test.Html.Selector exposing (..)
|
import Test.Html.Selector exposing (..)
|
||||||
|
import Test.Runner
|
||||||
|
|
||||||
|
|
||||||
spec : Test
|
spec : Test
|
||||||
spec =
|
spec =
|
||||||
describe "Nri.Ui.Button.V10"
|
describe "Nri.Ui.Button.V10"
|
||||||
[ describe "toggleButtonPressed" toggleButtonPressed
|
[ describe "toggleButtonPressed" toggleButtonPressed
|
||||||
|
, describe "helpfullyDisabledButton" helpfullyDisabledButton
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
@ -35,6 +38,63 @@ toggleButtonPressed =
|
|||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
expectFailure : String -> Expectation -> Expectation
|
||||||
|
expectFailure expectedDescriptionSubstring expectation =
|
||||||
|
case Test.Runner.getFailureReason expectation of
|
||||||
|
Nothing ->
|
||||||
|
Expect.fail "Expected a failure, but there was none."
|
||||||
|
|
||||||
|
Just reason ->
|
||||||
|
String.contains expectedDescriptionSubstring reason.description
|
||||||
|
|> Expect.equal True
|
||||||
|
|
||||||
|
|
||||||
|
helpfullyDisabledButton : List Test
|
||||||
|
helpfullyDisabledButton =
|
||||||
|
[ test "does not have `aria-disabled=\"true\" when not disabled" <|
|
||||||
|
\() ->
|
||||||
|
program ()
|
||||||
|
(\_ ->
|
||||||
|
Button.button "Italic"
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
|> ensureViewHasNot [ attribute (Aria.disabled True) ]
|
||||||
|
|> done
|
||||||
|
, test "has `aria-disabled=\"true\" when disabled" <|
|
||||||
|
\() ->
|
||||||
|
program ()
|
||||||
|
(\_ ->
|
||||||
|
Button.button "Italic"
|
||||||
|
[ Button.disabled
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|> ensureViewHas [ attribute (Aria.disabled True) ]
|
||||||
|
|> done
|
||||||
|
, test "is clickable when not disabled" <|
|
||||||
|
\() ->
|
||||||
|
program ()
|
||||||
|
(\_ ->
|
||||||
|
Button.button "Italic"
|
||||||
|
[ Button.onClick ()
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|> clickButton "Italic"
|
||||||
|
|> done
|
||||||
|
, test "is not clickable when disabled" <|
|
||||||
|
\() ->
|
||||||
|
program ()
|
||||||
|
(\_ ->
|
||||||
|
Button.button "Italic"
|
||||||
|
[ Button.onClick ()
|
||||||
|
, Button.disabled
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|> clickButton "Italic"
|
||||||
|
|> done
|
||||||
|
|> expectFailure "Event.expectEvent: I found a node, but it does not listen for \"click\" events like I expected it would."
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
program : model -> (model -> Html model) -> ProgramTest model model ()
|
program : model -> (model -> Html model) -> ProgramTest model model ()
|
||||||
program init view =
|
program init view =
|
||||||
ProgramTest.createSandbox
|
ProgramTest.createSandbox
|
||||||
|
Loading…
Reference in New Issue
Block a user