Skip to content

[BOOKINGSG-9329][GZ] phone number input visual test#1185

Open
ghazwan-gt wants to merge 2 commits into
pre-release/v4from
BOOKINGSG-9329/phone-number-input
Open

[BOOKINGSG-9329][GZ] phone number input visual test#1185
ghazwan-gt wants to merge 2 commits into
pre-release/v4from
BOOKINGSG-9329/phone-number-input

Conversation

@ghazwan-gt
Copy link
Copy Markdown

Checklist

  • Migrated the component styles
    • className is chained correctly with clsx
    • User style prop is set as CSS variable
  • Changes follow the project guidelines in CONVENTIONS_V4.md
  • Updated Storybook documentation
  • Added/updated unit tests
  • Added visual tests
  • Listed breaking changes

Breaking changes

List breaking style or api changes to be added to the migration docs

Additional information

Provide additional information that might be useful to the reviewer

@ghazwan-gt ghazwan-gt marked this pull request as ready for review May 15, 2026 07:57
@ghazwan-gt ghazwan-gt changed the title [BOOKINGSG-9329][GZ] migrate phone number input [BOOKINGSG-9329][GZ] phone number input visual test May 15, 2026
Comment on lines +132 to +152
it("should update the selector label and reformat the number when a country is selected", () => {
render(
<PhoneNumberInput
value={{ countryCode: "+994", number: "12345678" }}
/>
);

fireEvent.click(screen.getByTestId(SELECTOR_TESTID));
fireEvent.click(
screen.getByRole("option", { name: /Singapore/i })
);

expect(screen.queryByTestId(SELECTOR_TESTID)).toHaveTextContent(
"+65"
);
expect(screen.queryByTestId(INPUT_TESTID)).toHaveValue(
"1234 5678"
);
});

it("should call onChange with the reformatted number and new country code when a country is selected", () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

this is the same scenario? we could combine into 1 test case

screen.getByRole("option", { name: /Singapore/i })
);

expect(onChange).not.toHaveBeenCalled();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

hmm this assertion doesn't seem useful

Comment on lines +14 to +18
<Form.PhoneNumberInput
data-testid="phone-number-input-selected"
label="Selected"
value={{ countryCode: "+213", number: "91234567" }}
/>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

separate prefilled into its own form-variants-prefilled page

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

wrong mode

also looks like the clear button right spacing is incorrect. can address this separately

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

did you mean to exclude grid-layout? I guess it's covered by InputGroup already

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.

3 participants