avh4 / avh4/elm-program-test

"Password" and "Repeat Password" labels result in "PLEASE REPORT THIS"

Open
#200 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Elm
Stars
95
Forks
28
PR merge metrics
No merged PRs in 30d

Description

I'm using `elm-ui`, so some of the final layout is not fully under my control. The html that ProgramTest sees contains something like `

{label text}
`. `elm-ui` doesn't use IDs, so I've been trying to write tests using the label text - and it mostly works. But on my signup page, where I have "password" and "repeat password" prompts, something weird is happening with `fillIn`.

The relevant test code:
```elm
test : Test.Test
test =
Test.describe "program tests"
[ Test.test "mismatched passwords result in an error" <|
\() ->
start "" { width = 1920, height = 1080, serverAddr = "http://localhost" }
|> ProgramTest.clickLink "Login" "/login"
|> ProgramTest.clickLink "Don't have an account? Sign up!" "/signup"
|> ProgramTest.fillIn "" "Email:" "foo@bar"
|> ProgramTest.fillIn "" "Password:" "123"
|> ProgramTest.fillIn "" "Repeat Password:" "1234"
|> ProgramTest.clickButton "Sign Up"
|> ProgramTest.expectViewHas
[ HtmlSel.text "passwords do not match" ]
]
```

1. Without changing my business logic, I get a `PLEASE REPORT THIS AT...` error on the `Password:` input. This happens regardless of order - if I move the `fillIn "" "Repeat Password:" "1234"` step earlier, then it properly fills in the Repeat Password input (I can see the value set to `1234` in the failure output) and still fails on `Password:`.

$ elm-test
Compiling > Starting tests

elm-test 0.19.1-revision17
--------------------------

Running 9 tests. To reproduce these results, run: elm-test --fuzz 100 --seed 128001132243677

↓ TestMain
↓ program integration tests
✗ mismatched passwords result in an error

▼ Query.fromHtml



...

...


...



...




...






...






...





...

...




▼ ProgramTest.fillIn "Password:"

Expected one of the following to exist and have an "oninput" handler:
- with parent
✓ find label:
✓ has tag "label"
✓ has containing [ text "Password:" ]
✗ PLEASE REPORT THIS AT : firstErrorOf: couldn't parse failure report: Expecting Keyword ▼ Query.has at row 375, col 84
- with parent <label>
✓ find label:
✓ has tag "label"
✓ has containing [ text "Password:" ]
✗ PLEASE REPORT THIS AT <https://github.com/avh4/elm-program-test/issues>: firstErrorOf: couldn't parse failure report: Expecting Keyword ▼ Query.has at row 375, col 84
- <input> with aria-label
✓ has tag "input"
✗ has attribute "aria-label" "Password:"

TEST RUN FAILED

Duration: 493 ms
Passed: 8
Failed: 1
</details>
2. If I use `Element.Region.description {label text}` to add an aria-label containing the same text as the label, then the `Password:` prompt works correctly, but `Repeat Password:` finds an element (I'm not sure if it's the same element) two different ways.
<details>
$ elm-test
Compiling > Starting tests

elm-test 0.19.1-revision17
--------------------------

Running 9 tests. To reproduce these results, run: elm-test --fuzz 100 --seed 91488979786809

↓ TestMain
↓ program integration tests
✗ mismatched passwords result in an error

▼ Query.fromHtml

<body>
<div class="bg-255-255-255-0 fc-0-0-0-255 font-size-20 font-open-sanshelveticaverdanasans-serif s e ui s e">
<div>...</div>
<div>...</div>
<div class="hf bg-38-38-38-255 fc-230-230-230-255 s c wf ct cl">
<div class="hc bg-51-77-0-255 fc-230-230-230-255 txt510px510px128px38-38-38-255 bs b-0-0-1-0 bc-0-128-0-255 s c wf ct cl">...</div>
<div class="hc p-30 s r wf cl ccy">
<div class="hc spacing-10-10 s c wf ct cl">
<h1 class="hc s e wc">...</h1>
<div class="hc fc-200-0-0-255 s e wc"></div>
<label class="ctxt spacing-5-5 hc s r wf lbl" aria-live="polite">
<div class="we width-px-170 s e">...</div>
<div class="pad-0-3060-0-3060 br-3 bc-186-189-182-255 bg-255-255-255-255 b-1 spacing-5-5 hc we width-px-200 s e focus-within">
<input class="spacing-5-5 s e wf it" style="height:calc(1.0em + 24px);line-height:calc(1.0em + 24px);" autocomplete="email" type="email" value="foo@bar"></input>
</div>
</label>
<label class="ctxt spacing-5-5 hc s r wf lbl" aria-live="polite">
<div class="we width-px-170 s e">...</div>
<div class="pad-0-3060-0-3060 br-3 bc-186-189-182-255 bg-255-255-255-255 b-1 spacing-5-5 hc we width-px-200 s e focus-within">
<input class="spacing-5-5 s e wf it" style="height:calc(1.0em + 24px);line-height:calc(1.0em + 24px);" aria-label="Password:" autocomplete="new-password" type="password" value="123"></input>
</div>
</label>
<label class="ctxt spacing-5-5 hc s r wf lbl" aria-live="polite">
<div class="we width-px-170 s e">...</div>
<div class="pad-0-3060-0-3060 br-3 bc-186-189-182-255 bg-255-255-255-255 b-1 spacing-5-5 hc we width-px-200 s e focus-within">
<input class="spacing-5-5 s e wf it" style="height:calc(1.0em + 24px);line-height:calc(1.0em + 24px);" aria-label="Repeat Password:" autocomplete="new-password" type="password" value="123"></input>
</div>
</label>
<div class="hc s r wc cl ccy">...</div>
<a class="hc fc-20-20-100-255 fc-20-100-100-255-hv s e wc ccx ccy lnk">...</a>
</div>
</div>
</div>
</div>
</body>

▼ ProgramTest.fillIn "Repeat Password:"

Expected one of the following to exist and have an "oninput" handler, but there were multiple successful matches:
- <input> with parent <label>
- <input> with aria-label

If that's what you intended, use `ProgramTest.within` to focus in on a portion of
the view that contains only one of the matches.

TEST RUN FAILED

Duration: 482 ms
Passed: 8
Failed: 1
</details>
3. If I replace spaces with dashes in the aria-label (i.e. `Region.description (String.replace " " "-" label)` ), then the tests pass. Note that I do not have to change the `fillIn` call at all - I'm still using `fillIn "" "Repeat Password:" "1234"`.
<details>
$ elm-test
Compiling > Starting tests

elm-test 0.19.1-revision17
--------------------------

Running 9 tests. To reproduce these results, run: elm-test --fuzz 100 --seed 213935651006096

TEST RUN PASSED

Duration: 387 ms
Passed: 9
Failed: 0
</details>
4. The tests also pass if I remove all aria-labels *except* for the one on the `Password:` prompt.
<details>
$ elm-test
Compiling > Starting tests

elm-test 0.19.1-revision17
--------------------------

Running 9 tests. To reproduce these results, run: elm-test --fuzz 100 --seed 312183938098107

TEST RUN PASSED

Duration: 379 ms
Passed: 9
Failed: 0
</details>

So it looks like `elm-program-test` is getting confused by the `Password` prompt. That kind of makes sense to me - there's another input with a label that contains the text "Password:", so it makes at least some sense that it might find more than one matching input element and fail the test. The main problem is the failure output. If it said, "more than one match found" then I would realize pretty quickly what happened.

So I think it's pretty clear that the error message needs an update. Would it also make sense to check the results and prefer closer matches? In my (non-elm-programmer) mind, even if it's inside of a `<div></div>`, an exact match is pretty clearly preferable to something that has extra words/characters.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the shown elm-test program and the three Password/Repeat Password variants. Trace the fillIn query matching and failure-report formatting, then add coverage for ambiguous matches and verify that the resulting message explains the multiple-match case rather than reporting a parse failure.

Written by the indexing model from the issue text.

Assessment

Domain
testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.