Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web components - Input: Create unit tests #79

Open
wants to merge 7 commits into
base: al-text-input-alpha
Choose a base branch
from

Conversation

mahoneycm
Copy link
Contributor

@mahoneycm mahoneycm commented Oct 16, 2024

Summary

Created basic unit tests for Input alpha

Related PR

#17

Preview link

Text input →

Problem statement

Text input needed unit tests for alpha release

Solution

This change added a usa-text-input.spec.js file as well as basic tests to check for internal content and an associated label tag

Major changes

  • Basic unit tests for text input
  • Adde vitest eslint plugin to resolve eslint errors

Testing and review

  1. Run npm test
  2. Confirm the text input tests run without failure
  3. Confirm test patterns are consistent with other web component unit tests
Dependency name Previous version New version
@vitest/eslint-plugin -- ^1.1.7

@mahoneycm mahoneycm changed the base branch from develop to al-text-input-alpha October 16, 2024 16:01
Copy link
Collaborator

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mahoneycm thanks for creating these tests. I've added some thoughts. If the component is mainly light DOM and we're not doing any custom functionality — there isn't much to test.

We should look into how this component will support the variants and test that custom functionality.

`
});

it("Should show props", () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: This test might only be necessary if we progressively enhance the component.

describe("usa-text-input component", async () => {
beforeEach(async () => {
document.body.innerHTML = `
<usa-text-input>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: For discussion, are there any props we want to support in this custom element?

For example: disabled, error, success, width?

Last three are from USWDS text input variants.

image

});

it("Should show props", () => {
expect(getInputElement().getAttribute("id")).toContain("input-type-text");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: Might not be necessary if we're not progressively enhancing or doing validation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants