Make the stories code more DRY

This commit is contained in:
David Langley 2026-01-30 16:03:54 +00:00
parent 30d177f956
commit 9b1f118886
2 changed files with 25 additions and 65 deletions

View File

@ -73,23 +73,19 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
// Closed state
export const Default: Story = {
args: {
canMarkAsRead: false,
canMarkAsUnread: true,
isFavourite: false,
isLowPriority: false,
},
// Reusable play function to open the menu
const openMenu: Story["play"] = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
};
// Closed state
export const Default: Story = {};
// Open state - default (can mark as unread, favourite off, low priority off)
export const Open: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
},
play: openMenu,
};
// Open state - can mark as read (has unread messages)
@ -98,11 +94,7 @@ export const OpenCanMarkAsRead: Story = {
canMarkAsRead: true,
canMarkAsUnread: false,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
},
play: openMenu,
};
// Open state - favourite enabled
@ -110,11 +102,7 @@ export const OpenFavouriteOn: Story = {
args: {
isFavourite: true,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
},
play: openMenu,
};
// Open state - low priority enabled
@ -122,11 +110,7 @@ export const OpenLowPriorityOn: Story = {
args: {
isLowPriority: true,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
},
play: openMenu,
};
// Open state - without invite option (DM or no permission)
@ -134,11 +118,7 @@ export const OpenWithoutInvite: Story = {
args: {
canInvite: false,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
},
play: openMenu,
};
// Open state - without copy room link (DM room)
@ -146,9 +126,5 @@ export const OpenWithoutCopyLink: Story = {
args: {
canCopyRoomLink: false,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "More Options" });
await userEvent.click(trigger);
},
play: openMenu,
};

View File

@ -73,12 +73,15 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
roomNotifState: RoomNotifState.AllMessages,
},
// Reusable play function to open the menu
const openMenu: Story["play"] = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "Notification options" });
await userEvent.click(trigger);
};
export const Default: Story = {};
export const Muted: Story = {
args: {
roomNotifState: RoomNotifState.Mute,
@ -86,45 +89,26 @@ export const Muted: Story = {
};
export const Open: Story = {
args: {
roomNotifState: RoomNotifState.AllMessages,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "Notification options" });
await userEvent.click(trigger);
},
play: openMenu,
};
export const OpenMuted: Story = {
args: {
roomNotifState: RoomNotifState.Mute,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "Notification options" });
await userEvent.click(trigger);
},
play: openMenu,
};
export const AllMessagesLoud: Story = {
args: {
roomNotifState: RoomNotifState.AllMessagesLoud,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "Notification options" });
await userEvent.click(trigger);
},
play: openMenu,
};
export const MentionsOnly: Story = {
args: {
roomNotifState: RoomNotifState.MentionsOnly,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const trigger = canvas.getByRole("button", { name: "Notification options" });
await userEvent.click(trigger);
},
play: openMenu,
};