@scm-manager/ui-components 2.28.0 → 2.28.1-20220005-140541

package/src/markdown/MarkdownView.stories.tsx

@@ -46,8 +46,11 @@ const Spacing = styled.div`
 `;
 
 storiesOf("MarkdownView", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((story) => <Spacing>{story()}</Spacing>)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(story => <Spacing>{story()}</Spacing>)
+  // Add async parameter, because the tests needs to render async before snapshot is taken so that
+  // code fragments get highlighted properly
+  .addParameters({ storyshots: { async: true } })
   .add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
   .add("Skip Html", () => <MarkdownView content={TestPage} skipHtml={true} />)
   .add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
@@ -63,7 +66,7 @@ storiesOf("MarkdownView", module)
     const binder = new Binder("custom protocol link renderer");
     binder.bind("markdown-renderer.link.protocol", {
       protocol: "scw",
-      renderer: ProtocolLinkRenderer,
+      renderer: ProtocolLinkRenderer
     } as ProtocolLinkRendererExtension);
     return (
       <BinderContext.Provider value={binder}>
@@ -75,7 +78,7 @@ storiesOf("MarkdownView", module)
     const binder = new Binder("custom protocol link renderer");
     binder.bind("markdown-renderer.link.protocol", {
       protocol: "scw",
-      renderer: ProtocolLinkRenderer,
+      renderer: ProtocolLinkRenderer
     } as ProtocolLinkRendererExtension);
     return (
       <BinderContext.Provider value={binder}>

package/src/storyshots.test.ts

@@ -24,23 +24,63 @@
 
 import path from "path";
 import initStoryshots, { snapshotWithOptions } from "@storybook/addon-storyshots";
+import { act, create, ReactTestRenderer } from "react-test-renderer";
+import { StoryContext } from "@storybook/react";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createNodeMock = (element: any) => {
   if (element.type === "tr") {
     return {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
-      querySelector: (selector: string) => {},
+      querySelector: () => {}
     };
   }
 };
 
+async function wait(delay: number) {
+  return act(
+    () =>
+      new Promise(resolve => {
+        setTimeout(resolve, delay);
+      })
+  );
+}
+
+async function runAsyncTest(story: StoryContext) {
+  const storyElement = story.render();
+  let renderer: ReactTestRenderer | undefined;
+  act(() => {
+    renderer = create(storyElement);
+  });
+
+  // For Flow's benefit
+  if (!renderer) {
+    return;
+  }
+
+  // Let one render cycle pass before rendering snapshot
+  await wait(0);
+  expect(renderer).toMatchSnapshot();
+
+  renderer.unmount();
+}
+
+const syncTest = snapshotWithOptions({
+  // @ts-ignore types seems not to match
+  createNodeMock
+});
+
 initStoryshots({
+  asyncJest: true,
   configPath: path.resolve(__dirname, "..", ".storybook"),
-  // fix snapshot tests with react-diff-view which uses a ref on tr
-  // @see https://github.com/storybookjs/storybook/pull/1090
-  test: snapshotWithOptions({
-    // @ts-ignore types seems not to match
-    createNodeMock,
-  }),
+  test: ({ story, context, done, ...rest }) => {
+    if (story.parameters?.storyshots?.async) {
+      runAsyncTest(story).then(done);
+    } else {
+      syncTest({ story, context, ...rest });
+      if (done) {
+        done();
+      }
+    }
+  }
 });