@aurelia/storybook 2.1.0 → 2.2.1

package/__tests__/preview.test.ts

@@ -1,139 +1,17 @@
-import { render } from '../src/preview';
+import { defineAureliaStory, render, renderToCanvas } from '../src/preview';
 import * as renderUtils from '../src/preview/render';
 
-jest.mock('../src/preview/render', () => ({
-  ...jest.requireActual('../src/preview/render'),
-  bootstrapAureliaApp: jest.fn(),
-}));
-
 describe('preview', () => {
-  let bootstrapAureliaAppSpy: jest.SpyInstance;
-  let fakeAureliaApp: { start: jest.Mock; stop: jest.Mock };
-
-  beforeEach(() => {
-    bootstrapAureliaAppSpy = jest.spyOn(renderUtils, 'bootstrapAureliaApp');
-    fakeAureliaApp = {
-      start: jest.fn().mockResolvedValue(undefined),
-      stop: jest.fn().mockResolvedValue(undefined),
-    };
-    bootstrapAureliaAppSpy.mockReturnValue(fakeAureliaApp);
-    document.body.innerHTML = '';
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should return a container element', () => {
-    const context = {
-      storyFn: () => ({ Component: class {} }),
-      component: class {},
-    };
-    const container = render({}, context);
-    expect(container).toBeInstanceOf(HTMLElement);
-    expect(container.tagName).toBe('DIV');
+  it('re-exports render', () => {
+    expect(render).toBe(renderUtils.render);
   });
 
-  it('should call storyFn', () => {
-    const storyFn = jest.fn(() => ({ Component: class {} }));
-    const context = {
-      storyFn,
-      component: class {},
-    };
-    render({}, context);
-    expect(storyFn).toHaveBeenCalledTimes(1);
-  });
-
-  it('should not bootstrap Aurelia if story has no Component or template', () => {
-    const context = {
-      storyFn: () => ({}),
-      component: class {},
-    };
-    render({}, context);
-    expect(bootstrapAureliaAppSpy).not.toHaveBeenCalled();
-  });
-
-  it('should bootstrap Aurelia if story has a Component', () => {
-    const DummyComponent = class {};
-    const context = {
-      storyFn: () => ({ Component: DummyComponent }),
-      component: class {},
-    };
-    const args = { a: 1 };
-    const container = render(args, context);
-    expect(bootstrapAureliaAppSpy).toHaveBeenCalledWith(
-      { Component: DummyComponent },
-      args,
-      container,
-      DummyComponent
-    );
-    expect(fakeAureliaApp.start).toHaveBeenCalled();
-  });
-
-  it('should bootstrap Aurelia if story has a template', () => {
-    const template = '<div></div>';
-    const context = {
-      storyFn: () => ({ template }),
-      component: class {},
-    };
-    const args = { a: 1 };
-    const container = render(args, context);
-    expect(bootstrapAureliaAppSpy).toHaveBeenCalledWith(
-      { template },
-      args,
-      container,
-      context.component
-    );
-    expect(fakeAureliaApp.start).toHaveBeenCalled();
-  });
-
-  it('should call cleanup for the previous story', () => {
-    const storyFn1 = () => ({ Component: class {} });
-    const storyFn2 = () => ({ template: 'hello' });
-
-    // First render
-    render({}, { storyFn: storyFn1, component: class {} });
-
-    // Second render
-    render({}, { storyFn: storyFn2, component: class {} });
-
-    expect(fakeAureliaApp.stop).toHaveBeenCalledTimes(1);
-  });
-
-  it('should handle Aurelia start failure', async () => {
-    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const error = new Error('Failed to start');
-    fakeAureliaApp.start.mockRejectedValue(error);
-
-    const context = {
-      storyFn: () => ({ Component: class {} }),
-      component: class {},
-    };
-    
-    render({}, context);
-    
-    // allow microtasks to run
-    await new Promise(resolve => setTimeout(resolve, 0));
-
-    expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to start Aurelia app:', error);
-    consoleErrorSpy.mockRestore();
+  it('re-exports renderToCanvas', () => {
+    expect(renderToCanvas).toBe(renderUtils.renderToCanvas);
   });
 
-  it('should handle Aurelia stop failure', async () => {
-    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const error = new Error('Failed to stop');
-    fakeAureliaApp.stop.mockRejectedValue(error);
-  
-    // First render
-    render({}, { storyFn: () => ({ Component: class {} }), component: class {} });
-  
-    // Second render to trigger cleanup
-    render({}, { storyFn: () => ({ Component: class {} }), component: class {} });
-    
-    // allow microtasks to run
-    await new Promise(resolve => setTimeout(resolve, 0));
-  
-    expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to stop Aurelia app:', error);
-    consoleErrorSpy.mockRestore();
+  it('returns the provided story result from defineAureliaStory', () => {
+    const story = { template: '<div></div>' };
+    expect(defineAureliaStory(story)).toBe(story);
   });
-}); 
+}); 

package/__tests__/render.test.ts

@@ -1,8 +1,7 @@
-import { STORY_CHANGED } from 'storybook/internal/core-events';
 import {
   render,
   renderToCanvas,
-  bootstrapAureliaApp,
+  createAureliaApp,
   createComponentTemplate,
 } from '../src/preview/render';
 
@@ -24,9 +23,12 @@ jest.mock('aurelia', () => {
 describe('render', () => {
   it('throws an error when no component is provided', () => {
     expect(() =>
-      render({}, { id: 'story-1', component: undefined as any } as any)
-    ).toThrowError(
-      'Unable to render story story-1 as the component annotation is missing from the default export'
+      render(
+        {},
+        { id: 'story-1', title: 'Test', name: 'Story', component: undefined as any } as any
+      )
+    ).toThrow(
+      'Unable to render story Test / Story as the component annotation is missing from the default export'
     );
   });
 
@@ -34,18 +36,16 @@ describe('render', () => {
     const DummyComponent = () => {};
     const args = { foo: 'bar' };
     const result = render(args, { id: 'story-1', component: DummyComponent as any } as any);
-    expect(result).toEqual({ Component: DummyComponent, props: args, template: '' });
+    expect(result).toEqual({ Component: DummyComponent, props: args });
   });
 });
 
 describe('renderToCanvas', () => {
   let canvas: HTMLElement;
-  let dummyChannel: { on: jest.Mock; off: jest.Mock };
   const DummyComponent = class {};
 
   beforeEach(() => {
     canvas = document.createElement('div');
-    dummyChannel = { on: jest.fn(), off: jest.fn() } as any;
   });
 
   it('calls showError when the story function returns a falsy value', async () => {
@@ -62,8 +62,6 @@ describe('renderToCanvas', () => {
         parameters: {},
         component: DummyComponent as any,
         args: {},
-        viewMode: 'story',
-        channel: dummyChannel,
       },
       forceRemount: false,
     } as any;
@@ -84,9 +82,8 @@ describe('renderToCanvas', () => {
     const showError = jest.fn() as any;
     const showMain = jest.fn() as any;
 
-    // Spy on bootstrapAureliaApp to simulate app creation.
     const bootstrapSpy = jest
-      .spyOn(require('../src/preview/render'), 'bootstrapAureliaApp')
+      .spyOn(require('../src/preview/render'), 'createAureliaApp')
       .mockReturnValue(fakeAurelia);
 
     const context = {
@@ -99,23 +96,17 @@ describe('renderToCanvas', () => {
         parameters: { args: { param: 'foo' } },
         component: DummyComponent as any,
         args: { test: 'bar' },
-        viewMode: 'story',
-        channel: dummyChannel,
       },
       forceRemount: false,
     } as any;
 
-    const cleanup = await renderToCanvas(context, canvas, bootstrapAureliaApp);
+    const cleanup = await renderToCanvas(context, canvas, createAureliaApp);
     expect(showError).not.toHaveBeenCalled();
     expect(showMain).toHaveBeenCalled();
     expect(bootstrapSpy).toHaveBeenCalled();
 
-    // Simulate cleanup (which should remove the STORY_CHANGED listener)
     await cleanup();
-    expect(dummyChannel.off).toHaveBeenCalledWith(
-      STORY_CHANGED,
-      expect.any(Function)
-    );
+    expect(fakeAurelia.stop).toHaveBeenCalled();
     bootstrapSpy.mockRestore();
   });
 
@@ -134,7 +125,7 @@ describe('renderToCanvas', () => {
     const showMain = jest.fn() as any;
 
     const bootstrapSpy = jest
-      .spyOn(require('../src/preview/render'), 'bootstrapAureliaApp')
+      .spyOn(require('../src/preview/render'), 'createAureliaApp')
       .mockReturnValue(fakeAurelia);
 
     // First render: bootstrap the app.
@@ -148,12 +139,10 @@ describe('renderToCanvas', () => {
         parameters: { args: { param: 'foo' } },
         component: DummyComponent as any,
         args: { test: 'bar' },
-        viewMode: 'story',
-        channel: dummyChannel,
       },
       forceRemount: false,
     } as any;
-    await renderToCanvas(context, canvas, bootstrapAureliaApp);
+    await renderToCanvas(context, canvas, createAureliaApp);
     expect(bootstrapSpy).toHaveBeenCalledTimes(1);
 
     // Second render with new args; should update viewModel instead of re-bootstrap.
@@ -167,9 +156,9 @@ describe('renderToCanvas', () => {
         args: { test: 'qux' },
       },
     } as any;
-    await renderToCanvas(newContext, canvas, bootstrapAureliaApp);
+    await renderToCanvas(newContext, canvas, createAureliaApp);
     expect(bootstrapSpy).toHaveBeenCalledTimes(1);
-    expect(fakeViewModel).toEqual({ param: 'baz', test: 'qux' });
+    expect(fakeViewModel).toEqual({ param: 'baz', test: 'updated' });
     bootstrapSpy.mockRestore();
   });
 });