add docs and spec for helpfully disabled button

This commit is contained in:
charbelrami 2023-09-11 15:21:22 -03:00
parent b0bcdf28d6
commit 4a65db396a
2 changed files with 64 additions and 1 deletions

View File

@ -39,7 +39,10 @@ The next version of `Button` should also remove `delete` and `toggleButton`
- adds `tertiary` style
- adds `submit` and `opensModal`
- 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:

View File

@ -1,17 +1,20 @@
module Spec.Nri.Ui.Button exposing (spec)
import Accessibility.Aria as Aria
import Expect exposing (Expectation)
import Html.Styled exposing (Html, toUnstyled)
import Nri.Ui.Button.V10 as Button
import ProgramTest exposing (..)
import Test exposing (..)
import Test.Html.Selector exposing (..)
import Test.Runner
spec : Test
spec =
describe "Nri.Ui.Button.V10"
[ 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 init view =
ProgramTest.createSandbox