Skip to content

Commit

Permalink
fix: ensure stories get refreshed on update
Browse files Browse the repository at this point in the history
  • Loading branch information
@fwouts
fwouts committed Feb 12, 2024
1 parent e1dcc73 commit 95d2a23
Show file tree
Hide file tree
Showing 8 changed files with 422 additions and 52 deletions.
12 changes: 11 additions & 1 deletion core/src/vite/plugins/preview-script.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ let refresh = () => {};
window.__PREVIEWJS_IFRAME__.refresh = (options) => {
refresh(options);
if (options.refetchPreviewableModule) {
loadFreshPreviewableModule().then(previewableModule => refresh({
...options,
previewableModule,
}));
}
};
import.meta.hot.accept(["/${previewablePath}"], ([previewableModule]) => {
Expand Down Expand Up @@ -82,7 +88,7 @@ const wrapperModulePromise = Promise.all([${detectedGlobalCssFilePaths
// Important: the wrapper must be loaded first as it may monkey-patch
// modules imported by the component module.
wrapperModulePromise.then(wrapperModule => {
import(/* @vite-ignore */ "/${previewablePath}?t=" + Date.now()).then(previewableModule => {
loadFreshPreviewableModule().then(previewableModule => {
refresh = initPreview({
previewableModule,
previewableName: ${JSON.stringify(previewableName)},
Expand All @@ -91,5 +97,9 @@ wrapperModulePromise.then(wrapperModule => {
});
});
});
function loadFreshPreviewableModule() {
return import(/* @vite-ignore */ "/${previewablePath}?t=" + Date.now());
}
`;
}
90 changes: 80 additions & 10 deletions framework-plugins/preact/tests/storybook.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hello, World!')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "Hello, World!",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF2 story with explicit args", async (preview) => {
Expand All @@ -45,6 +52,13 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'explicit')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "explicit",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF2 story with assignment source referring local variable", async (preview) => {
Expand Down Expand Up @@ -74,37 +88,51 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'local value')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "local value",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF2 story with default args", async (preview) => {
test("renders CSF2 story with default export args", async (preview) => {
await preview.fileManager.update(
"src/Button.tsx",
`const Button = ({ label }) => <button>{label}</button>;
export default {
component: Button,
args: {
label: "default"
label: "default export"
}
};
export const ButtonStory = Button.bind({});`
);
await preview.show("src/Button.tsx:ButtonStory");
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'default')]"
"xpath=//button[contains(., 'default export')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "default export",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF2 story with explicit args over default args", async (preview) => {
test("renders CSF2 story with explicit args over default export args", async (preview) => {
await preview.fileManager.update(
"src/Button.tsx",
`const Button = ({ label }) => <button>{label}</button>;
export default {
component: Button,
args: {
label: "default"
label: "default export"
}
};
Expand All @@ -117,6 +145,13 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'explicit')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "explicit",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF3 story with explicit args", async (preview) => {
Expand All @@ -138,6 +173,13 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'explicit')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "explicit",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF3 story with assignment source referring local variable", async (preview) => {
Expand Down Expand Up @@ -168,37 +210,51 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'local value')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "local value",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF3 story with default args", async (preview) => {
test("renders CSF3 story with default export args", async (preview) => {
await preview.fileManager.update(
"src/Button.tsx",
`const Button = ({ label }) => <button>{label}</button>;
export default {
component: Button,
args: {
label: "default"
label: "default export"
}
}
export const ButtonStory = {};`
);
await preview.show("src/Button.tsx:ButtonStory");
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'default')]"
"xpath=//button[contains(., 'default export')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "default export",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF3 story with explicit args over default args", async (preview) => {
test("renders CSF3 story with explicit args over default export args", async (preview) => {
await preview.fileManager.update(
"src/Button.tsx",
`const Button = ({ label }) => <button>{label}</button>;
export default {
component: Button,
args: {
label: "default"
label: "default export"
}
};
Expand All @@ -212,6 +268,13 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'explicit')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "explicit",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});

test("renders CSF3 story with render function", async (preview) => {
Expand All @@ -234,5 +297,12 @@ test.describe.parallel("preact/storybook", () => {
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hello, World!')]"
);
await preview.fileManager.update("src/Button.tsx", {
replace: "Hello, World!",
with: "Hi, World!",
});
await preview.iframe.waitForSelector(
"xpath=//button[contains(., 'Hi, World!')]"
);
});
});
Loading

0 comments on commit 95d2a23

Please sign in to comment.