-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
895 additions
and
3,287 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import React from "react"; | ||
| import { render, screen, userEvent } from "../utils/test"; | ||
| import "@testing-library/jest-dom/extend-expect"; | ||
| import Form from "./Form"; | ||
| import Text from "./Text"; | ||
| import Dropdown from "./Dropdown"; | ||
| import Container from "./Container"; | ||
|
|
||
| const movieOptions = [ | ||
| { | ||
| data: { | ||
| name: "Movie 1", | ||
| }, | ||
| value: "movie-1", | ||
| }, | ||
| { | ||
| data: { | ||
| name: "Movie 2", | ||
| }, | ||
| value: "movie-2", | ||
| }, | ||
| { | ||
| data: { | ||
| name: "Movie 3", | ||
| }, | ||
| value: "movie-3", | ||
| }, | ||
| ]; | ||
|
|
||
| /* eslint-disable react/prop-types */ | ||
| function MovieOption({ data }) { | ||
| return <Text>{data.name}</Text>; | ||
| } | ||
| /* eslint-enable react/prop-types */ | ||
|
|
||
| function movieOptionToString({ data }) { | ||
| return data.name; | ||
| } | ||
|
|
||
| const initialValues = { | ||
| movie: "", | ||
| }; | ||
|
|
||
| function FormWithDropdown(props) { | ||
| return ( | ||
| <Form initialValues={initialValues}> | ||
| <Dropdown | ||
| name="movie" | ||
| label="Movie" | ||
| options={movieOptions} | ||
| optionToString={movieOptionToString} | ||
| optionComponent={MovieOption} | ||
| {...props} | ||
| /> | ||
| </Form> | ||
| ); | ||
| } | ||
|
|
||
| function sleep(ms) { | ||
| return new Promise((resolve) => setTimeout(resolve, ms)); | ||
| } | ||
|
|
||
| describe("Dropdown", () => { | ||
| it("renders the label and options are not visible", () => { | ||
| render(<FormWithDropdown />); | ||
|
|
||
| const label = screen.getByText("Movie"); | ||
| const button = screen.getByRole("button", { name: /Please select/ }); | ||
| const buttonId = button.getAttribute("id"); | ||
|
|
||
| expect(buttonId).toBeTruthy(); | ||
| expect(label).toHaveAttribute("for", buttonId); | ||
|
|
||
| expect(screen.queryByText("Movie 1")).not.toBeInTheDocument(); | ||
| expect(screen.queryByText("Movie 2")).not.toBeInTheDocument(); | ||
| expect(screen.queryByText("Movie 3")).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("reveals options", async () => { | ||
| render(<FormWithDropdown />); | ||
|
|
||
| const button = screen.getByRole("button", { name: /Please select/ }); | ||
|
|
||
| userEvent.click(button); | ||
|
|
||
| expect(screen.queryByText("Movie 1")).toBeInTheDocument(); | ||
| expect(screen.queryByText("Movie 2")).toBeInTheDocument(); | ||
| expect(screen.queryByText("Movie 3")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("hides options", async () => { | ||
| render(<FormWithDropdown />); | ||
|
|
||
| const button = screen.getByRole("button", { name: /Please select/ }); | ||
|
|
||
| // Open | ||
| userEvent.click(button); | ||
|
|
||
| await sleep(0); // Without this, the test passes when it should fail. | ||
|
|
||
| // Close | ||
| userEvent.click(button); | ||
|
|
||
| expect(screen.queryByText("Movie 1")).not.toBeInTheDocument(); | ||
| expect(screen.queryByText("Movie 2")).not.toBeInTheDocument(); | ||
| expect(screen.queryByText("Movie 3")).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("hides the label", () => { | ||
| render(<FormWithDropdown hideLabel />); | ||
|
|
||
| expect(screen.getByText("Movie")).toBeVisuallyHidden(); | ||
| }); | ||
|
|
||
| it("inside dark container", () => { | ||
| render( | ||
| <Container bg="grey.t05"> | ||
| <FormWithDropdown /> | ||
| </Container> | ||
| ); | ||
| const button = screen.getByRole("button", { name: /Please select/ }); | ||
|
|
||
| expect(button).toHaveStyle(` | ||
| background-color: #ffffff; | ||
| `); | ||
| }); | ||
|
|
||
| it("with testId", () => { | ||
| const { container } = render(<FormWithDropdown testId="my-dropdown" />); | ||
|
|
||
| expect(container.querySelector("form").firstChild).toHaveAttribute( | ||
| "data-testid", | ||
| "my-dropdown" | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
0528be3There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to following URLs: