feat(input): Add component #72
Conversation
adamledwards
force-pushed
the
feature/input
branch
from
020688a to
1888e52
Compare
| test('displays the error message', async ({ page }) => { | ||
| await expect(page.getByRole('paragraph')).toHaveText('Error: Enter an event name') | ||
| }) | ||
| }) |
There was a problem hiding this comment.
I'm not to happy with this spec I wanted to use a locator similar to this https://testing-library.com/docs/queries/byrole/#description
There was a problem hiding this comment.
Hmm there's a related open feature request: microsoft/playwright#18332
There was a problem hiding this comment.
It probably wouldn't be much effort to add a custom toHaveDescription expect matcher to playwright.config.ts and global.d.ts also
| @@ -0,0 +1,55 @@ | |||
| {% from "moduk/components/input/macro.njk" import modukInput %} | |||
|
|
|||
| {{ modukInput({ | |||
There was a problem hiding this comment.
Think we'll need to wrap these in a <div> because the visual regression test only takes a screenshot of the first element (or maybe it should do something else when there's more than one element).
| label: { | ||
| text: "What is the name of the event?" | ||
| }, | ||
| id: "event-name", |
There was a problem hiding this comment.
We haven't been doing it so much to date but I was thinking it might be a good idea to keep the ids and names unique in case we embed the examples directly on a page for the component the docs site.
adamledwards
force-pushed
the
feature/input
branch
2 times, most recently
from
f3dae84 to
aa992cd
Compare
playwright.config.ts
Outdated
| @@ -30,6 +30,44 @@ expect.extend({ | |||
| pass: false, | |||
| } | |||
| }, | |||
| async toHaveDescription(this: ReturnType<Expect['getState']>, locator: Locator, describeBy: string) { | |||
There was a problem hiding this comment.
Does expected or description make more sense than describeBy?
| async toHaveDescription(this: ReturnType<Expect['getState']>, locator: Locator, describeBy: string) { | |
| async toHaveDescription(this: ReturnType<Expect['getState']>, locator: Locator, expected: string) { |
|
|
||
| const count = await receivedResult.count() | ||
| for (let i = 0; i < count; i += 1) { | ||
| receivedTextPromises.push(receivedResult.nth(i).textContent()) |
There was a problem hiding this comment.
I wonder if it makes sense to call .trim() on the text content (only a cosmetic thing).
adamledwards
force-pushed
the
feature/input
branch
from
5b24d73 to
c615759
Compare
adamledwards
force-pushed
the
feature/input
branch
from
c615759 to
655fe6d
Compare
| promise: this.promise, | ||
| }) | ||
| }\n | ||
| Received: ${this.utils.printReceived(receivedText.map((text) => text?.trim()).join('\n'))}`, |
There was a problem hiding this comment.
@jpveooys I had to run the trim through a loop here because the loop returns a promise and we have a eslint lint rule that forbids using await inside a loop
Adds input component no changes from the gov frontend