Fix Storybook runner tests
This commit is contained in:
adilallo
+3
-26
@@ -5,10 +5,9 @@ const config = {
|
||||
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-actions",
|
||||
"@storybook/addon-a11y",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions",
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-a11y",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/nextjs-vite",
|
||||
@@ -16,30 +15,8 @@ const config = {
|
||||
},
|
||||
staticDirs: ["../public"],
|
||||
|
||||
// Auto-detect environment and apply appropriate settings
|
||||
managerHead: (head) => {
|
||||
// Only add base href for GitHub Pages (when CI=true or specific environment)
|
||||
if (process.env.CI || process.env.STORYBOOK_BASE_PATH) {
|
||||
return `${head}<base href="/communityrulestorybook/">`;
|
||||
}
|
||||
return head;
|
||||
},
|
||||
|
||||
previewHead: (head) => {
|
||||
// Only add base href for GitHub Pages
|
||||
if (process.env.CI || process.env.STORYBOOK_BASE_PATH) {
|
||||
return `${head}<base href="/communityrulestorybook/">`;
|
||||
}
|
||||
return head;
|
||||
},
|
||||
|
||||
// Ensure esbuild treats .js as JSX during dep pre-bundling
|
||||
async viteFinal(cfg) {
|
||||
// Set base path for GitHub Pages when needed
|
||||
if (process.env.CI || process.env.STORYBOOK_BASE_PATH) {
|
||||
cfg.base = "/communityrulestorybook/";
|
||||
}
|
||||
|
||||
// Ensure esbuild treats .js as JSX during dep pre-bundling
|
||||
cfg.optimizeDeps ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions.loader = {
|
||||
|
||||
+1
-28
@@ -1,33 +1,8 @@
|
||||
import "../app/globals.css";
|
||||
|
||||
// Import Google Fonts for Storybook
|
||||
import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
variable: "--font-inter",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const bricolageGrotesque = Bricolage_Grotesque({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "700", "800"],
|
||||
variable: "--font-bricolage-grotesque",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const spaceGrotesk = Space_Grotesk({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "700"],
|
||||
variable: "--font-space-grotesk",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
/** @type { import('@storybook/react').Preview } */
|
||||
const preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
@@ -37,9 +12,7 @@ const preview = {
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable} font-sans`}
|
||||
>
|
||||
<div className="font-sans">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
|
||||
Generated
+2276
-2297
File diff suppressed because it is too large
Load Diff
+3
-4
@@ -42,21 +42,20 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.10.2",
|
||||
"@chromatic-com/storybook": "^4.1.0",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@lhci/cli": "^0.15.1",
|
||||
"@playwright/test": "^1.55.0",
|
||||
"@storybook/addon-a11y": "^9.1.2",
|
||||
"@storybook/addon-actions": "^9.0.8",
|
||||
"@storybook/addon-docs": "^9.1.2",
|
||||
"@storybook/addon-essentials": "^8.6.14",
|
||||
"@storybook/addon-interactions": "^8.6.14",
|
||||
"@storybook/addon-essentials": "^9.0.0-alpha.12",
|
||||
"@storybook/addon-interactions": "^9.0.0-alpha.10",
|
||||
"@storybook/addon-onboarding": "^9.1.2",
|
||||
"@storybook/addon-styling-webpack": "^2.0.0",
|
||||
"@storybook/addon-viewport": "^9.0.8",
|
||||
"@storybook/addon-vitest": "^9.1.2",
|
||||
"@storybook/nextjs-vite": "^9.1.2",
|
||||
"@storybook/test": "^8.6.14",
|
||||
"@storybook/test": "^9.0.0-alpha.2",
|
||||
"@storybook/test-runner": "^0.23.0",
|
||||
"@svgr/webpack": "^8.1.0",
|
||||
"@tailwindcss/postcss": "^4.1.11",
|
||||
|
||||
@@ -197,18 +197,18 @@ export const Interactive = {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Click navigation items", async () => {
|
||||
const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
|
||||
const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
|
||||
await userEvent.click(useCasesLink);
|
||||
|
||||
const learnLink = canvas.getByRole("link", { name: /learn/i });
|
||||
const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
|
||||
await userEvent.click(learnLink);
|
||||
|
||||
const aboutLink = canvas.getByRole("link", { name: /about/i });
|
||||
const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
|
||||
await userEvent.click(aboutLink);
|
||||
});
|
||||
|
||||
await step("Click authentication elements", async () => {
|
||||
const loginLink = canvas.getByRole("link", {
|
||||
const loginLink = canvas.getByRole("menuitem", {
|
||||
name: /log in to your account/i,
|
||||
});
|
||||
await userEvent.click(loginLink);
|
||||
@@ -238,22 +238,22 @@ export const HoverStates = {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Hover over navigation items", async () => {
|
||||
const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
|
||||
const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
|
||||
await userEvent.hover(useCasesLink);
|
||||
// Wait for hover state to be visible
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const learnLink = canvas.getByRole("link", { name: /learn/i });
|
||||
const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
|
||||
await userEvent.hover(learnLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const aboutLink = canvas.getByRole("link", { name: /about/i });
|
||||
const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
|
||||
await userEvent.hover(aboutLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
|
||||
await step("Hover over authentication elements", async () => {
|
||||
const loginLink = canvas.getByRole("link", {
|
||||
const loginLink = canvas.getByRole("menuitem", {
|
||||
name: /log in to your account/i,
|
||||
});
|
||||
await userEvent.hover(loginLink);
|
||||
@@ -285,21 +285,21 @@ export const FocusStates = {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Focus on navigation items", async () => {
|
||||
const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
|
||||
const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
|
||||
useCasesLink.focus();
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const learnLink = canvas.getByRole("link", { name: /learn/i });
|
||||
const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
|
||||
learnLink.focus();
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const aboutLink = canvas.getByRole("link", { name: /about/i });
|
||||
const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
|
||||
aboutLink.focus();
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
|
||||
await step("Focus on authentication elements", async () => {
|
||||
const loginLink = canvas.getByRole("link", {
|
||||
const loginLink = canvas.getByRole("menuitem", {
|
||||
name: /log in to your account/i,
|
||||
});
|
||||
loginLink.focus();
|
||||
|
||||
Reference in New Issue
Block a user