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.

Sign up for GitHub

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

Add Test Selector for Checkbox #2302

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Test Selector for Checkbox #2302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions packages/odyssey-react-mui/src/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,30 @@ import {
getControlState,
} from "./inputUtils";
import { FieldComponentProps } from "./FieldComponentProps";
import { type FeatureTestSelector } from "./test-selectors";
import { Typography } from "./Typography";

export const CheckboxTestSelectors = {
// feature: {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

leaving as comment because we will eventually convert this as either a label or a different selector as discussed with @KevinGhadyani-Okta

Copy link
Contributor

Choose a reason for hiding this comment

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

Can we commented this as:

Suggested change
// feature: {
// label: ["hint"]

That'll make it easier in the future because the API won't match the feature API.

// hint: {
// selector: {
// method: "ByText",
// templateVariableNames: ["hint"],
// text: "${hint}",
// },
// }
// },
// label: ["hint"]
selector: {
method: "ByRole",
options: {
name: "${label}",
},
role: "checkbox",
templateVariableNames: ["label"],
},
} as const satisfies FeatureTestSelector;

export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;

export type CheckboxProps = {
Expand Down
2 changes: 2 additions & 0 deletions packages/odyssey-react-mui/src/test-selectors/odysseyTestSelectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@

import { type FeatureTestSelector } from "./featureTestSelector";
import { CalloutTestSelectors } from "../Callout";
import { CheckboxTestSelectors } from "../Checkbox";
import { TabsTestSelectors } from "../Tabs";
import { TextFieldTestSelectors } from "../TextField";

export const odysseyTestSelectors = {
Callout: CalloutTestSelectors,
Checkbox: CheckboxTestSelectors,
Tabs: TabsTestSelectors,
TextField: TextFieldTestSelectors,
} as const satisfies Record<string, FeatureTestSelector>;
24 changes: 24 additions & 0 deletions packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import { Meta, StoryObj } from "@storybook/react";
import { userEvent, within } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { queryOdysseySelector } from "@okta/odyssey-react-mui/test-selectors";

import { fieldComponentPropsMetaData } from "../../../fieldComponentPropsMetaData";
import { MuiThemeDecorator } from "../../../../.storybook/components";
Expand Down Expand Up @@ -267,6 +268,17 @@ export const ReadOnly: StoryObj<typeof Checkbox> = {
},
play: async ({ canvasElement, step }) => {
await checkTheBox({ canvasElement, step })("ReadOnly Checkbox");
await step("has aria read only set", async () => {
const element = queryOdysseySelector({
canvas: within(canvasElement),
componentName: "Checkbox",
templateArgs: {
label: "Automatically assign Okta Admin Console",
},
}).element;

expect(element?.ariaReadOnly).toBeTruthy();
});
},
};

Expand All @@ -284,6 +296,18 @@ export const Hint: StoryObj<typeof Checkbox> = {
},
play: async ({ canvasElement, step }) => {
await checkTheBox({ canvasElement, step })("Checkbox Hint");
// This is commented because there's a separate ticket to cover this work: OKTA-793465
// await step("has visible hint", async () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

currently fails because the hint is included in the label, which it should not
Screenshot 2024-07-25 at 3 55 42 PM

Copy link
Contributor

Choose a reason for hiding this comment

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

@bryancunningham-okta We'll want this noted in a ticket.

For some reason, the hint is setup as part of the label and not the description in Checkbox.

Copy link
Contributor

Choose a reason for hiding this comment

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

@AnirudhMani-okta Can you put a comment above it saying "This is commented because there's a separate ticket to cover this work: OKTA-XXXXXX".

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Addressed, added ticket: https://oktainc.atlassian.net/browse/OKTA-793465

// const element = queryOdysseySelector({
// canvas: within(canvasElement),
// componentName: "Checkbox",
// templateArgs: {
// label:"I agree to the terms and conditions",
// }
// }).element;

// expect(element).toHaveAccessibleDescription(/Really helpful hint/);
// });
},
};

Expand Down