@khanacademy/wonder-blocks-birthday-picker 1.0.0

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@khanacademy/wonder-blocks-birthday-picker",
+  "version": "1.0.0",
+  "design": "v1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
+  "source": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.2.0",
+    "@khanacademy/wonder-blocks-dropdown": "^2.6.3",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
+  },
+  "peerDependencies": {
+    "aphrodite": "^1.2.5",
+    "moment": "^2.24.0",
+    "react": "16.14.0"
+  },
+  "devDependencies": {
+    "wb-dev-build-settings": "^0.3.0"
+  },
+  "author": "",
+  "license": "MIT"
+}

package/src/components/__docs__/birthday-picker.argtypes.js

@@ -0,0 +1,38 @@
+// @flow
+import {defaultLabels} from "../birthday-picker.js";
+
+export default {
+    defaultValue: {
+        control: {type: "text"},
+        description:
+            "The default value to populate the birthdate with. Should be in the format: `YYYY-MM-DD` (e.g. 2021-05-26). It's only used to populate the initial value as this is an uncontrolled component.",
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+    },
+    labels: {
+        control: {type: "object"},
+        description:
+            "The object containing the custom labels used inside this component.",
+        defaultValue: defaultLabels,
+        table: {
+            type: {
+                summary: "Labels",
+                detail: "{month?: string, year?: string, day?: string, errorMessage?: string}",
+            },
+        },
+    },
+    onChange: {
+        action: "onChanged",
+        description:
+            "Listen for changes to the birthdate. Could be a string in the `YYYY-MM-DD` format or `null`.",
+        table: {
+            category: "Events",
+            type: {
+                summary: "(date: ?string) => mixed",
+            },
+        },
+    },
+};

package/src/components/__docs__/birthday-picker.stories.js

@@ -0,0 +1,89 @@
+// @flow
+import * as React from "react";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+
+import type {StoryComponentType} from "@storybook/react";
+
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import {name, version} from "../../../package.json";
+
+import ArgTypes from "./birthday-picker.argtypes.js";
+import BirthdayPicker from "../birthday-picker.js";
+
+export default {
+    title: "BirthdayPicker",
+    component: BirthdayPicker,
+    argTypes: ArgTypes,
+    parameters: {
+        componentSubtitle: ((
+            <ComponentInfo name={name} version={version} />
+        ): any),
+        docs: {
+            description: {
+                component: null,
+            },
+            source: {
+                // See https://github.com/storybookjs/storybook/issues/12596
+                excludeDecorators: true,
+            },
+        },
+    },
+    decorators: [(Story: any): React.Node => <View>{Story()}</View>],
+};
+
+/**
+ * Default BirthdayPicker example. It will be rendered as the first/default
+ * story and it can be interacted with the controls panel in the Browser.
+ */
+const Template = (args) => <BirthdayPicker {...args} />;
+
+export const BirthdayPickerDefault: StoryComponentType = Template.bind({});
+
+BirthdayPickerDefault.args = {
+    onChange: () => {},
+    defaultValue: "",
+};
+
+BirthdayPickerDefault.parameters = {
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+export const BirthdayPickerWithDefaultValue: StoryComponentType = Template.bind(
+    {},
+);
+
+BirthdayPickerWithDefaultValue.args = {
+    onChange: () => {},
+    defaultValue: "2021-07-19",
+};
+
+BirthdayPickerWithDefaultValue.parameters = {
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+export const InvalidBirthdayPicker: StoryComponentType = Template.bind({});
+
+InvalidBirthdayPicker.args = {
+    onChange: () => {},
+    defaultValue: "2030-07-19",
+};
+
+export const BirthdayPickerWithCustomLabels: StoryComponentType = Template.bind(
+    {},
+);
+
+BirthdayPickerWithCustomLabels.args = {
+    onChange: () => {},
+    defaultValue: "",
+    labels: {
+        day: "Día",
+        month: "Mes",
+        year: "Año",
+        errorMessage: "Por favor seleccione una fecha válida.",
+    },
+};

package/src/components/__tests__/birthday-picker.test.js

@@ -0,0 +1,420 @@
+// @flow
+import * as React from "react";
+import moment from "moment";
+import {render, screen} from "@testing-library/react";
+import * as DateMock from "jest-date-mock";
+import userEvent from "../../../../../utils/testing/user-event.js";
+
+import BirthdayPicker, {defaultLabels} from "../birthday-picker.js";
+
+import type {Labels} from "../birthday-picker.js";
+
+describe("BirthdayPicker", () => {
+    const today = new Date("2021-07-19T09:30:00Z");
+
+    describe("render", () => {
+        beforeEach(() => {
+            jest.useRealTimers();
+            DateMock.advanceTo(today);
+        });
+
+        it("renders without a default value", () => {
+            // Arrange
+
+            // Act
+            render(<BirthdayPicker onChange={() => {}} />);
+
+            const monthPicker = screen.getByTestId("birthday-picker-month");
+            const dayPicker = screen.getByTestId("birthday-picker-day");
+            const yearPicker = screen.getByTestId("birthday-picker-year");
+
+            // Assert
+            expect(monthPicker).toHaveTextContent("Month");
+            expect(dayPicker).toHaveTextContent("Day");
+            expect(yearPicker).toHaveTextContent("Year");
+        });
+
+        it("renders with a valid default value", () => {
+            // Arrange
+            const date = moment(today);
+            const defaultValue = date.format("YYYY-MM-DD");
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue={defaultValue}
+                    onChange={() => {}}
+                />,
+            );
+
+            const monthPicker = screen.getByTestId("birthday-picker-month");
+            const dayPicker = screen.getByTestId("birthday-picker-day");
+            const yearPicker = screen.getByTestId("birthday-picker-year");
+
+            // Assert
+            expect(monthPicker).toHaveTextContent("Jul");
+            expect(dayPicker).toHaveTextContent("19");
+            expect(yearPicker).toHaveTextContent("2021");
+            expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+        });
+
+        it("renders with a invalid default future value", () => {
+            // Arrange
+            jest.useRealTimers();
+            DateMock.advanceTo(today);
+            const date = moment(today).add(1, "day");
+            const defaultValue = date.format("YYYY-MM-DD");
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue={defaultValue}
+                    onChange={() => {}}
+                />,
+            );
+
+            const monthPicker = screen.getByTestId("birthday-picker-month");
+            const dayPicker = screen.getByTestId("birthday-picker-day");
+            const yearPicker = screen.getByTestId("birthday-picker-year");
+
+            // Assert
+            expect(monthPicker).toHaveTextContent("Jul");
+            expect(dayPicker).toHaveTextContent("20");
+            expect(yearPicker).toHaveTextContent("2021");
+        });
+
+        it("renders an error with a invalid default future value", async () => {
+            // Arrange
+            const date = moment(today).add(1, "day");
+            const defaultValue = date.format("YYYY-MM-DD");
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue={defaultValue}
+                    onChange={() => {}}
+                />,
+            );
+
+            // Assert
+            expect(screen.getByRole("alert")).toBeInTheDocument();
+        });
+
+        it("renders with an invalid default value", () => {
+            // Arrange
+            const defaultValue = "2021-02-31"; // There is no Feb 31st
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue={defaultValue}
+                    onChange={() => {}}
+                />,
+            );
+
+            const monthPicker = screen.getByTestId("birthday-picker-month");
+            const dayPicker = screen.getByTestId("birthday-picker-day");
+            const yearPicker = screen.getByTestId("birthday-picker-year");
+
+            // Assert
+            expect(monthPicker).toHaveTextContent("Month");
+            expect(dayPicker).toHaveTextContent("Day");
+            expect(yearPicker).toHaveTextContent("Year");
+        });
+
+        it("renders an error with an invalid default value", async () => {
+            // Arrange
+            const defaultValue = "2021-02-31";
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue={defaultValue}
+                    onChange={() => {}}
+                />,
+            );
+
+            // Assert
+            expect(screen.getByRole("alert")).toBeInTheDocument();
+        });
+    });
+
+    describe("onChange", () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+
+        afterEach(() => {
+            jest.runOnlyPendingTimers();
+            jest.useRealTimers();
+        });
+
+        it("onChange triggers when a new value is selected", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            // Act
+            render(<BirthdayPicker onChange={onChange} />);
+
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Jul",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-day"));
+            const dayOption = await screen.findByRole("option", {name: "5"});
+            userEvent.click(dayOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2021",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            expect(onChange).toHaveBeenCalledWith("2021-07-05");
+        });
+
+        it("onChange triggers multiple times when a new value is selected", async () => {
+            // Arrange
+            const onChange = jest.fn();
+            render(<BirthdayPicker onChange={onChange} />);
+            // Pick one date
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Jul",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-day"));
+            const dayOption = await screen.findByRole("option", {name: "5"});
+
+            userEvent.click(dayOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2021",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Act
+            // Pick Another Date
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOptionNew = await screen.findByRole("option", {
+                name: "Aug",
+            });
+            userEvent.click(monthOptionNew, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-day"));
+            const dayOptionNew = await screen.findByRole("option", {name: "9"});
+            userEvent.click(dayOptionNew, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOptionNew = await screen.findByRole("option", {
+                name: "2020",
+            });
+            userEvent.click(yearOptionNew, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            expect(onChange).toHaveBeenLastCalledWith("2020-08-09");
+        });
+
+        it("onChange triggers when a new value is selected after a default value is set", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue="2017-07-17"
+                    onChange={onChange}
+                />,
+            );
+
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Aug",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-day"));
+            const dayOption = await screen.findByRole("option", {name: "9"});
+
+            userEvent.click(dayOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2018",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            expect(onChange).toHaveBeenCalledWith("2018-08-09");
+        });
+
+        it("onChange triggers with null when an invalid value is selected after a default value is set", () => {
+            // Arrange
+            const onChange = jest.fn();
+            let maybeInstance: ?BirthdayPicker = null;
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue="2017-07-17"
+                    onChange={onChange}
+                    ref={(node) => (maybeInstance = node)}
+                />,
+            );
+
+            if (!maybeInstance) {
+                throw new Error("BirthdayPicker instance is undefined");
+            }
+            const instance = maybeInstance;
+
+            // This test was written by calling methods on the instance because
+            // react-window (used by SingleSelect) doesn't show all of the items
+            // in the dropdown.
+            instance.handleMonthChange("1");
+            instance.handleDayChange("31");
+            instance.handleYearChange("2021");
+
+            // Assert
+            expect(onChange).toHaveBeenCalledWith(null);
+        });
+
+        it("onChange triggers only one null when multiple invalid values are selected after a default value is set", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue="2021-02-31"
+                    onChange={onChange}
+                />,
+            );
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2020",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            expect(onChange).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe("labels", () => {
+        const translatedLabels: $Shape<Labels> = {
+            month: "Mes",
+            day: "Día",
+            year: "Año",
+            errorMessage: "Por favor ingrese una fecha valida.",
+        };
+
+        beforeEach(() => {
+            jest.useRealTimers();
+            DateMock.advanceTo(today);
+        });
+
+        it.each([defaultLabels.month, defaultLabels.day, defaultLabels.year])(
+            "renders the placeholder as %s",
+            (label) => {
+                // Arrange
+
+                // Act
+                render(<BirthdayPicker onChange={() => {}} />);
+
+                // Assert
+                expect(screen.getByText(label)).toBeInTheDocument();
+            },
+        );
+
+        it.each([
+            translatedLabels.month,
+            translatedLabels.day,
+            translatedLabels.year,
+        ])("renders the translated placeholder as %s", (translatedLabel) => {
+            // Arrange
+
+            // Act
+            render(
+                <BirthdayPicker
+                    onChange={() => {}}
+                    labels={translatedLabels}
+                />,
+            );
+
+            // Assert
+            expect(screen.getByText(translatedLabel)).toBeInTheDocument();
+        });
+
+        it("merges correctly the labels", () => {
+            // Arrange
+
+            // Only passing some of the labels to verify if the others are
+            // merged correctly.
+            const partialLabels: $Shape<Labels> = {
+                month: "Mes",
+                year: "Año",
+            };
+
+            // Act
+            render(
+                <BirthdayPicker onChange={() => {}} labels={partialLabels} />,
+            );
+
+            // Assert
+            expect(screen.getByText("Mes")).toBeInTheDocument(); // es
+            expect(screen.getByText("Año")).toBeInTheDocument(); // es
+            expect(screen.getByText("Day")).toBeInTheDocument(); // EN
+        });
+
+        it("renders a translated error with an invalid default value", async () => {
+            // Arrange
+            const defaultValue = "2021-02-31"; // There is no Feb 31st
+
+            // Act
+            render(
+                <BirthdayPicker
+                    defaultValue={defaultValue}
+                    onChange={() => {}}
+                    labels={translatedLabels}
+                />,
+            );
+
+            // Assert
+            expect(
+                screen.getByText(translatedLabels.errorMessage),
+            ).toBeInTheDocument();
+        });
+    });
+});