Skip to content

Commit

Permalink
Showing 12 changed files with 38 additions and 41 deletions.
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

import { SyntheticEvent, useCallback, useState } from "react";
import { useCallback, useState } from "react";
import { Meta, StoryObj } from "@storybook/react";

import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -147,14 +147,12 @@ export const Expanded: StoryObj<AccordionProps> = {
children: "This is the content of the box.",
},
render: function C(props: AccordionProps) {
const [expanded, setExpanded] = useState(true);
const onChange = useCallback(
(_event: SyntheticEvent<Element>, expanded: boolean) =>
setExpanded(expanded),
[],
);
const [isExpanded, setIsExpanded] = useState(true);
const onChange = useCallback<
Exclude<AccordionProps["onChange"], undefined>
>((_event, expanded) => setIsExpanded(expanded), []);
return (
<Accordion label="Title" isExpanded={expanded} onChange={onChange}>
<Accordion label="Title" isExpanded={isExpanded} onChange={onChange}>
{props.children}
</Accordion>
);
@@ -163,20 +161,20 @@ export const Expanded: StoryObj<AccordionProps> = {
await step("Accordion Expanded", async ({}) => {
const canvas = within(canvasElement);
const accordion = canvas.getByRole("button");
const accordionRegion = canvas.getByRole("region");
const accordionContent = canvas.getByRole("region");

await waitFor(async () => {
await expect(accordionRegion).toBeVisible();
await waitFor(() => {
expect(accordionContent).toBeVisible();
});

await userEvent.click(accordion);
await waitFor(async () => {
await expect(accordionRegion).not.toBeVisible();
await waitFor(() => {
expect(accordionContent).not.toBeVisible();
});

await userEvent.click(accordion);
await waitFor(async () => {
await expect(accordionRegion).toBeVisible();
await waitFor(() => {
expect(accordionContent).toBeVisible();
});
});
},
Original file line number Diff line number Diff line change
@@ -249,7 +249,7 @@ export const Error: StoryObj<AutocompleteType> = {
},
};

export const Errors: StoryObj<AutocompleteType> = {
export const ErrorsList: StoryObj<AutocompleteType> = {
args: {
hasMultipleChoices: true,
errorMessage: "Select your destination.",
@@ -312,11 +312,8 @@ export const Loading: StoryObj<AutocompleteType> = {
const comboBoxElement = canvas.getByRole("combobox") as HTMLInputElement;
await step("Click for loading to be visible", async () => {
await userEvent.click(comboBoxElement);
const presentationElement = screen.getByRole("presentation");
await expect(presentationElement).toBeVisible();
await expect(presentationElement.firstChild?.textContent).toBe(
"Loading…",
);
const loadingElement = screen.getByText("Loading…");
await expect(loadingElement).toBeVisible();
});
},
};
Original file line number Diff line number Diff line change
@@ -144,7 +144,7 @@ export const Error: StoryObj<CheckboxGroupStoryProps> = {
},
};

export const Errors: StoryObj<CheckboxGroupStoryProps> = {
export const ErrorsList: StoryObj<CheckboxGroupStoryProps> = {
...GroupTemplate,
args: {
isRequired: true,
Original file line number Diff line number Diff line change
@@ -119,7 +119,7 @@ const storybookMeta: Meta<DialogProps> = {

export default storybookMeta;

const checkDialog = async ({
const findDialogElement = async ({
canvasElement,
step,
}: PlaywrightProps<DialogProps>) => {
@@ -181,7 +181,7 @@ export const Default: StoryObj<DialogProps> = {
title: "Initiate self-destruct protocol",
},
play: async ({ canvasElement, step }) => {
await checkDialog({ canvasElement, step });
await findDialogElement({ canvasElement, step });
},
};

@@ -338,7 +338,7 @@ export const Long: StoryObj<DialogProps> = {
title: "Cryosleep liability waiver",
},
play: async ({ canvasElement, step }) => {
await checkDialog({ canvasElement, step });
await findDialogElement({ canvasElement, step });
},
};

@@ -367,6 +367,6 @@ export const NoButtons: StoryObj<DialogProps> = {
title: "Ceres Station docking terms",
},
play: async ({ canvasElement, step }) => {
await checkDialog({ canvasElement, step });
await findDialogElement({ canvasElement, step });
},
};
Original file line number Diff line number Diff line change
@@ -137,12 +137,12 @@ export const External: StoryObj<LinkProps> = {
children: "Visit okta.com",
rel: "noopener",
target: "_blank",
ariaLabel: "external-link",
ariaLabel: "External Link",
},
play: async ({ canvasElement, step }) => {
await step("Link Aria-Label", async ({ args }) => {
const canvas = within(canvasElement);
const link = canvas.getByLabelText("external-link");
const link = canvas.getByRole("link", { name: "External Link" });
expect(link).toHaveAttribute("href", args.href);
expect(link).toHaveAttribute("rel", args.rel);
expect(link).toHaveAttribute("target", args.target);
Original file line number Diff line number Diff line change
@@ -179,7 +179,9 @@ const clickMenuButton =
async (args: MenuButtonProps, actionName: string) => {
const canvas = within(canvasElement);
await step("open menu button", async () => {
const buttonElement = canvas.getByText(args.buttonLabel || "");
const buttonElement = canvas.getByRole("button", {
name: args.buttonLabel,
});
userEvent.click(buttonElement);
await waitFor(() => {
axeRun(actionName);
@@ -262,7 +264,7 @@ export const ButtonVariant: StoryObj<MenuButtonProps> = {
play: async ({ canvasElement, step }: PlaywrightProps<MenuButtonProps>) => {
await step("Filter and Select from listbox", async () => {
const canvas = within(canvasElement);
const button = canvas.getByRole("button");
const button = canvas.getByRole("button", { name: "More actions" });
expect(button).toHaveAttribute("id", "floating-button");
});
},
@@ -339,8 +341,8 @@ export const IconButton: StoryObj<MenuButtonProps> = {
play: async ({ canvasElement, step }: PlaywrightProps<MenuButtonProps>) => {
await step("MenuButton Aria-Label", async () => {
const canvas = within(canvasElement);
const menuButton = canvas.getByLabelText("More actions");
expect(menuButton).toHaveAttribute("type", "button");
const menuButton = canvas.queryByRole("button", { name: "More actions" });
expect(menuButton).not.toBeNull();
});
},
};
Original file line number Diff line number Diff line change
@@ -210,7 +210,7 @@ export const DefaultError: StoryObj<typeof NativeSelect> = {
},
};

export const Errors: StoryObj<typeof NativeSelect> = {
export const ErrorsList: StoryObj<typeof NativeSelect> = {
...Template,
args: {
errorMessage: "Select your destination.",
Original file line number Diff line number Diff line change
@@ -211,7 +211,7 @@ export const Error: StoryObj<typeof PasswordField> = {
},
};

export const Errors: StoryObj<typeof PasswordField> = {
export const ErrorsList: StoryObj<typeof PasswordField> = {
args: {
errorMessage: "Password requires: ",
errorMessageList: [
Original file line number Diff line number Diff line change
@@ -154,7 +154,7 @@ export const Error: StoryObj<typeof RadioGroup> = {
},
};

export const Errors: StoryObj<typeof RadioGroup> = {
export const ErrorsList: StoryObj<typeof RadioGroup> = {
...Template,
args: {
errorMessage: "This field is required.",
Original file line number Diff line number Diff line change
@@ -269,7 +269,7 @@ export const Error: StoryObj<typeof Select> = {
},
};

export const Errors: StoryObj<typeof Select> = {
export const ErrorsList: StoryObj<typeof Select> = {
args: {
isMultiSelect: true,
errorMessage: "Select your destination.",
@@ -281,7 +281,7 @@ export const Errors: StoryObj<typeof Select> = {
},
play: async ({ step }) => {
await step("Check for a11y errors on Select Error", async () => {
await waitFor(() => axeRun("Select Error"));
await waitFor(() => axeRun("Select Errors List"));
});
},
};
Original file line number Diff line number Diff line change
@@ -248,7 +248,7 @@ export const Error: StoryObj<typeof TextField> = {
},
};

export const Errors: StoryObj<typeof TextField> = {
export const ErrorsList: StoryObj<typeof TextField> = {
args: {
errorMessage: "This field is required:",
errorMessageList: ["At least 2 chars", "No more than 20 chars"],
Original file line number Diff line number Diff line change
@@ -272,9 +272,9 @@ export const Dismissible: StoryObj<ToastProps> = {
await waitFor(() => {
const toastElement = canvas.getByRole("status");
if (toastElement) {
const dismissToastButton = toastElement.querySelector(
'[aria-label="close"]',
);
const dismissToastButton = canvas.getByRole("button", {
name: "close",
});
if (dismissToastButton) {
userEvent.click(dismissToastButton);
waitFor(() => {

0 comments on commit c335306

Please sign in to comment.