@aurelia/storybook 2.0.0 → 2.2.1

package/__tests__/create-aurelia-app.test.ts

@@ -0,0 +1,94 @@
+import { createAureliaApp } from '../src/preview/render';
+
+jest.mock('aurelia', () => {
+  let lastInstance: any;
+
+  class Aurelia {
+    public container: { has: jest.Mock };
+    public register = jest.fn();
+    public app = jest.fn(() => ({}));
+
+    constructor(container?: unknown) {
+      this.container = (container as any) ?? { has: jest.fn(() => false) };
+      lastInstance = this;
+    }
+  }
+
+  const CustomElement = {
+    define: jest.fn((definition: unknown, Type: new () => unknown) => Type),
+    getDefinition: jest.fn(() => ({ name: 'dummy', bindables: {}, key: 'au:ce:dummy' })),
+    isType: jest.fn(() => true),
+  };
+
+  return {
+    __esModule: true,
+    default: Aurelia,
+    CustomElement,
+    __getLastInstance: () => lastInstance,
+  };
+});
+
+describe('createAureliaApp', () => {
+  it('does not double-register the component when included in components', () => {
+    const Component = class {};
+    const host = document.createElement('div');
+
+    createAureliaApp(
+      { template: '<dummy></dummy>', components: [Component] } as any,
+      {},
+      host,
+      Component as any
+    );
+
+    const aurelia = (jest.requireMock('aurelia') as any).__getLastInstance();
+    const registerArgs = aurelia.register.mock.calls.flat();
+    const registrations = registerArgs.filter((entry: unknown) => entry === Component);
+    expect(registrations).toHaveLength(1);
+  });
+
+  it('skips registration when the container already has the component key', () => {
+    const Component = class {};
+    const host = document.createElement('div');
+    const container = { has: jest.fn(() => true) };
+
+    createAureliaApp(
+      { template: '<dummy></dummy>', components: [] as any, container } as any,
+      {},
+      host,
+      Component as any
+    );
+
+    const aurelia = (jest.requireMock('aurelia') as any).__getLastInstance();
+    expect(container.has).toHaveBeenCalled();
+    expect(aurelia.register).not.toHaveBeenCalled();
+  });
+
+  it('applies parameters.aurelia registrations and hooks', () => {
+    const GlobalComponent = class {};
+    const host = document.createElement('div');
+    const configureContainer = jest.fn();
+    const configure = jest.fn();
+    const storyContext = {
+      parameters: {
+        aurelia: {
+          register: [GlobalComponent],
+          configureContainer,
+          configure,
+        },
+      },
+    } as any;
+
+    createAureliaApp(
+      { template: '<dummy></dummy>' } as any,
+      {},
+      host,
+      undefined,
+      storyContext
+    );
+
+    const aurelia = (jest.requireMock('aurelia') as any).__getLastInstance();
+    expect(configureContainer).toHaveBeenCalledWith(aurelia.container, storyContext);
+    expect(aurelia.register).toHaveBeenCalledWith(GlobalComponent);
+    expect(configure).toHaveBeenCalledWith(aurelia, storyContext);
+  });
+});

package/__tests__/preset.test.ts

@@ -1,11 +1,28 @@
-import { webpackFinal, viteFinal } from '../src/preset';
-import { getRules } from '../src/webpack';
+import { rsbuildFinal, webpackFinal, viteFinal } from '../src/preset';
+import { getRsbuildRules, getRules } from '../src/webpack';
 
 jest.mock('../src/webpack', () => ({
   getRules: jest.fn(() => [
     { test: /\.ts$/, use: 'ts-loader' },
     { test: /\.html$/, use: 'html-loader' },
   ]),
+  getRsbuildRules: jest.fn(() => [
+    { test: /\.ts$/, use: '@aurelia/webpack-loader' },
+    { test: /\.html$/, use: '@aurelia/webpack-loader' },
+  ]),
+}));
+
+const mergeRsbuildConfig = jest.fn((base, extra) => ({
+  ...base,
+  ...extra,
+  tools: {
+    ...base?.tools,
+    ...extra?.tools,
+  },
+}));
+
+jest.mock('@rsbuild/core', () => ({
+  mergeRsbuildConfig,
 }));
 
 describe('preset', () => {
@@ -46,4 +63,16 @@ describe('preset', () => {
       expect(result).toBe(config);
     });
   });
-}); 
+
+  describe('rsbuildFinal', () => {
+    it('should merge rsbuild config and add Aurelia rules', async () => {
+      const config = { tools: {} };
+      const result = await rsbuildFinal(config);
+      expect(mergeRsbuildConfig).toHaveBeenCalledWith(config, expect.any(Object));
+
+      const rspackConfig = { module: { rules: [] as any[] } };
+      result.tools.rspack(rspackConfig);
+      expect(rspackConfig.module.rules).toEqual(getRsbuildRules());
+    });
+  });
+});

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();
   });
 });

package/apps/hello-world/.storybook/main.ts

@@ -4,7 +4,6 @@ import { mergeConfig, type InlineConfig } from 'vite';
 const config: StorybookConfig & { viteFinal?: (config: InlineConfig, options: { configType: string }) => InlineConfig | Promise<InlineConfig> } = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
-    '@storybook/addon-links'
   ],
   framework: {
     name: '@aurelia/storybook',