@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/tests/unit/src/index.spec.ts.skip

@@ -1,183 +1,183 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-
-// Mock CSS imports BEFORE any component imports
-vi.mock('@/assets/css/base.css', () => ({}));
-vi.mock('@/assets/css/variables.css', () => ({}));
-vi.mock('vuetify/lib/components/VCode/VCode.css', () => ({}));
-
-import { createApp } from 'vue';
-import { WlSharedComponents } from '@/index';
-import * as components from '@/components';
-
-// Mock i18n
-vi.mock('@/i18n/i18n', () => ({
-  createInternalI18n: vi.fn(() => ({
-    install: vi.fn(),
-  })),
-}));
-
-describe.skip('src/index.ts', () => {
-  let app: any;
-  let mockUse: any;
-  let mockComponent: any;
-
-  beforeEach(() => {
-    mockUse = vi.fn();
-    mockComponent = vi.fn();
-    app = {
-      use: mockUse,
-      component: mockComponent,
-      config: {
-        globalProperties: {}
-      }
-    };
-  });
-
-  describe('WlSharedComponents', () => {
-    it('exports WlSharedComponents with install function', () => {
-      expect(WlSharedComponents).toBeDefined();
-      expect(WlSharedComponents.install).toBeInstanceOf(Function);
-    });
-
-    it('install function sets up i18n when not already present', () => {
-      const { createInternalI18n } = require('@/i18n/i18n');
-      const mockI18n = { install: vi.fn() };
-      createInternalI18n.mockReturnValue(mockI18n);
-
-      WlSharedComponents.install(app);
-
-      expect(createInternalI18n).toHaveBeenCalled();
-      expect(app.use).toHaveBeenCalledWith(mockI18n);
-    });
-
-    it('install function does not set up i18n when already present', () => {
-      app.config.globalProperties.$i18n = {};
-      const { createInternalI18n } = require('@/i18n/i18n');
-
-      WlSharedComponents.install(app);
-
-      expect(createInternalI18n).not.toHaveBeenCalled();
-    });
-
-    it('registers all components with WL prefix', () => {
-      WlSharedComponents.install(app);
-
-      // Check that components are registered with WL prefix
-      const componentEntries = Object.entries(components);
-      expect(componentEntries.length).toBeGreaterThan(0);
-
-      componentEntries.forEach(([componentName, component]) => {
-        expect(app.component).toHaveBeenCalledWith(`WL${componentName}`, component);
-      });
-    });
-
-    it('handles app without config gracefully', () => {
-      const appWithoutConfig = {
-        use: mockUse,
-        component: mockComponent
-      };
-
-      expect(() => {
-        WlSharedComponents.install(appWithoutConfig);
-      }).not.toThrow();
-    });
-
-    it('handles app without globalProperties gracefully', () => {
-      const appWithoutGlobalProps = {
-        use: mockUse,
-        component: mockComponent,
-        config: {}
-      };
-
-      expect(() => {
-        WlSharedComponents.install(appWithoutGlobalProps);
-      }).not.toThrow();
-    });
-  });
-
-  describe('Component Exports', () => {
-    it('exports all components from components module', () => {
-      const componentNames = Object.keys(components);
-
-      expect(componentNames.length).toBeGreaterThan(0);
-
-      // Check that some expected components are exported
-      expect(componentNames).toContain('Button');
-      expect(componentNames).toContain('Input');
-      expect(componentNames).toContain('Select');
-      expect(componentNames).toContain('DateInput');
-    });
-
-    it('all exported components are valid Vue components', () => {
-      Object.entries(components).forEach(([name, component]) => {
-        expect(component).toBeDefined();
-        expect(typeof component).toBe('object');
-        // Vue components should have these properties
-        expect(component).toHaveProperty('__name');
-      });
-    });
-  });
-
-  describe('CSS Imports', () => {
-    it('imports required CSS files', async () => {
-      // CSS imports are mocked, but we can verify the module loads without error
-      expect(() => require('@/index')).not.toThrow();
-    });
-  });
-
-  describe('Integration with Vue App', () => {
-    it('can be installed on a real Vue app instance', () => {
-      const realApp = createApp({});
-
-      expect(() => {
-        WlSharedComponents.install(realApp);
-      }).not.toThrow();
-    });
-
-    it('installs i18n plugin when creating real app', () => {
-      const realApp = createApp({});
-      const originalUse = realApp.use;
-      const useSpy = vi.spyOn(realApp, 'use');
-
-      WlSharedComponents.install(realApp);
-
-      expect(useSpy).toHaveBeenCalled();
-
-      useSpy.mockRestore();
-    });
-  });
-
-  describe('Component Registration', () => {
-    it('uses correct component prefix', () => {
-      WlSharedComponents.install(app);
-
-      const calls = app.component.mock.calls;
-      calls.forEach(([componentName]) => {
-        expect(componentName).toMatch(/^WL/);
-      });
-    });
-
-    it('registers components with their original names prefixed', () => {
-      WlSharedComponents.install(app);
-
-      // Check specific component registrations
-      expect(app.component).toHaveBeenCalledWith('WLButton', components.Button);
-      expect(app.component).toHaveBeenCalledWith('WLInput', components.Input);
-      expect(app.component).toHaveBeenCalledWith('WLSelect', components.Select);
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('handles null app gracefully', () => {
-      expect(() => {
-        WlSharedComponents.install(null);
-      }).toThrow();
-    });
-
-    it('handles undefined app gracefully', () => {
-      expect(() => {
-        WlSharedComponents.install(undefined);
-      }).toThrow();
-    });
-  });
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock CSS imports BEFORE any component imports
+vi.mock('@/assets/css/base.css', () => ({}));
+vi.mock('@/assets/css/variables.css', () => ({}));
+vi.mock('vuetify/lib/components/VCode/VCode.css', () => ({}));
+
+import { createApp } from 'vue';
+import { WlSharedComponents } from '@/index';
+import * as components from '@/components';
+
+// Mock i18n
+vi.mock('@/i18n/i18n', () => ({
+  createInternalI18n: vi.fn(() => ({
+    install: vi.fn(),
+  })),
+}));
+
+describe.skip('src/index.ts', () => {
+  let app: any;
+  let mockUse: any;
+  let mockComponent: any;
+
+  beforeEach(() => {
+    mockUse = vi.fn();
+    mockComponent = vi.fn();
+    app = {
+      use: mockUse,
+      component: mockComponent,
+      config: {
+        globalProperties: {}
+      }
+    };
+  });
+
+  describe('WlSharedComponents', () => {
+    it('exports WlSharedComponents with install function', () => {
+      expect(WlSharedComponents).toBeDefined();
+      expect(WlSharedComponents.install).toBeInstanceOf(Function);
+    });
+
+    it('install function sets up i18n when not already present', () => {
+      const { createInternalI18n } = require('@/i18n/i18n');
+      const mockI18n = { install: vi.fn() };
+      createInternalI18n.mockReturnValue(mockI18n);
+
+      WlSharedComponents.install(app);
+
+      expect(createInternalI18n).toHaveBeenCalled();
+      expect(app.use).toHaveBeenCalledWith(mockI18n);
+    });
+
+    it('install function does not set up i18n when already present', () => {
+      app.config.globalProperties.$i18n = {};
+      const { createInternalI18n } = require('@/i18n/i18n');
+
+      WlSharedComponents.install(app);
+
+      expect(createInternalI18n).not.toHaveBeenCalled();
+    });
+
+    it('registers all components with WL prefix', () => {
+      WlSharedComponents.install(app);
+
+      // Check that components are registered with WL prefix
+      const componentEntries = Object.entries(components);
+      expect(componentEntries.length).toBeGreaterThan(0);
+
+      componentEntries.forEach(([componentName, component]) => {
+        expect(app.component).toHaveBeenCalledWith(`WL${componentName}`, component);
+      });
+    });
+
+    it('handles app without config gracefully', () => {
+      const appWithoutConfig = {
+        use: mockUse,
+        component: mockComponent
+      };
+
+      expect(() => {
+        WlSharedComponents.install(appWithoutConfig);
+      }).not.toThrow();
+    });
+
+    it('handles app without globalProperties gracefully', () => {
+      const appWithoutGlobalProps = {
+        use: mockUse,
+        component: mockComponent,
+        config: {}
+      };
+
+      expect(() => {
+        WlSharedComponents.install(appWithoutGlobalProps);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Component Exports', () => {
+    it('exports all components from components module', () => {
+      const componentNames = Object.keys(components);
+
+      expect(componentNames.length).toBeGreaterThan(0);
+
+      // Check that some expected components are exported
+      expect(componentNames).toContain('Button');
+      expect(componentNames).toContain('Input');
+      expect(componentNames).toContain('Select');
+      expect(componentNames).toContain('DateInput');
+    });
+
+    it('all exported components are valid Vue components', () => {
+      Object.entries(components).forEach(([name, component]) => {
+        expect(component).toBeDefined();
+        expect(typeof component).toBe('object');
+        // Vue components should have these properties
+        expect(component).toHaveProperty('__name');
+      });
+    });
+  });
+
+  describe('CSS Imports', () => {
+    it('imports required CSS files', async () => {
+      // CSS imports are mocked, but we can verify the module loads without error
+      expect(() => require('@/index')).not.toThrow();
+    });
+  });
+
+  describe('Integration with Vue App', () => {
+    it('can be installed on a real Vue app instance', () => {
+      const realApp = createApp({});
+
+      expect(() => {
+        WlSharedComponents.install(realApp);
+      }).not.toThrow();
+    });
+
+    it('installs i18n plugin when creating real app', () => {
+      const realApp = createApp({});
+      const originalUse = realApp.use;
+      const useSpy = vi.spyOn(realApp, 'use');
+
+      WlSharedComponents.install(realApp);
+
+      expect(useSpy).toHaveBeenCalled();
+
+      useSpy.mockRestore();
+    });
+  });
+
+  describe('Component Registration', () => {
+    it('uses correct component prefix', () => {
+      WlSharedComponents.install(app);
+
+      const calls = app.component.mock.calls;
+      calls.forEach(([componentName]) => {
+        expect(componentName).toMatch(/^WL/);
+      });
+    });
+
+    it('registers components with their original names prefixed', () => {
+      WlSharedComponents.install(app);
+
+      // Check specific component registrations
+      expect(app.component).toHaveBeenCalledWith('WLButton', components.Button);
+      expect(app.component).toHaveBeenCalledWith('WLInput', components.Input);
+      expect(app.component).toHaveBeenCalledWith('WLSelect', components.Select);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles null app gracefully', () => {
+      expect(() => {
+        WlSharedComponents.install(null);
+      }).toThrow();
+    });
+
+    it('handles undefined app gracefully', () => {
+      expect(() => {
+        WlSharedComponents.install(undefined);
+      }).toThrow();
+    });
+  });
 });

package/tests/unit/src/main.spec.ts

@@ -1,111 +1,111 @@
-import { describe, it, expect, vi } from 'vitest';
-import { createApp } from 'vue';
-
-/**
- * main.ts Bootstrap Tests
- *
- * These tests verify the application bootstrap logic without actually importing
- * main.ts, which would trigger Vuetify's CSS imports that Node's ESM loader
- * cannot handle.
- *
- * The actual bootstrap is tested indirectly by verifying that:
- * 1. Vue's createApp function works
- * 2. The app.use() method can register plugins
- * 3. The app.mount() method can mount the app
- */
-describe('src/main.ts Bootstrap Logic', () => {
-  describe('Vue Application Setup', () => {
-    it('createApp returns an app instance with use method', () => {
-      const MockComponent = { template: '<div>Test</div>' };
-      const app = createApp(MockComponent);
-
-      expect(app).toBeDefined();
-      expect(typeof app.use).toBe('function');
-    });
-
-    it('createApp returns an app instance with mount method', () => {
-      const MockComponent = { template: '<div>Test</div>' };
-      const app = createApp(MockComponent);
-
-      expect(typeof app.mount).toBe('function');
-    });
-
-    it('app.use() can register a plugin', () => {
-      const MockComponent = { template: '<div>Test</div>' };
-      const app = createApp(MockComponent);
-      const mockPlugin = { install: vi.fn() };
-
-      app.use(mockPlugin);
-
-      expect(mockPlugin.install).toHaveBeenCalledWith(app);
-    });
-
-    it('app.use() can chain multiple plugins', () => {
-      const MockComponent = { template: '<div>Test</div>' };
-      const app = createApp(MockComponent);
-      const plugin1 = { install: vi.fn() };
-      const plugin2 = { install: vi.fn() };
-
-      app.use(plugin1).use(plugin2);
-
-      expect(plugin1.install).toHaveBeenCalled();
-      expect(plugin2.install).toHaveBeenCalled();
-    });
-  });
-
-  describe('Plugin Registration Order', () => {
-    it('plugins are registered in the order they are called', () => {
-      const MockComponent = { template: '<div>Test</div>' };
-      const app = createApp(MockComponent);
-      const callOrder: string[] = [];
-
-      const plugin1 = { install: () => callOrder.push('plugin1') };
-      const plugin2 = { install: () => callOrder.push('plugin2') };
-
-      app.use(plugin1).use(plugin2);
-
-      expect(callOrder).toEqual(['plugin1', 'plugin2']);
-    });
-  });
-
-  describe('Application Mounting', () => {
-    it('mount can target a DOM element', () => {
-      // Create a container in happy-dom
-      const container = document.createElement('div');
-      container.id = 'test-app';
-      document.body.appendChild(container);
-
-      const MockComponent = { template: '<div>Mounted</div>' };
-      const app = createApp(MockComponent);
-
-      const instance = app.mount('#test-app');
-
-      expect(instance).toBeDefined();
-      expect(container.innerHTML).toContain('Mounted');
-
-      // Cleanup
-      app.unmount();
-      document.body.removeChild(container);
-    });
-  });
-
-  describe('Expected main.ts Structure', () => {
-    it('main.ts should export nothing (side-effect only module)', () => {
-      // main.ts is expected to be a side-effect module that bootstraps the app
-      // It should not export any values - verified by code review
-      expect(true).toBe(true);
-    });
-
-    it('main.ts should follow Vue 3 app bootstrap pattern', () => {
-      // The expected pattern is:
-      // 1. import { createApp } from 'vue'
-      // 2. import App from './App.vue'
-      // 3. import plugins
-      // 4. const app = createApp(App)
-      // 5. app.use(plugins)
-      // 6. app.mount('#app')
-      // This is verified by code review of main.ts
-      expect(true).toBe(true);
-    });
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { createApp } from 'vue';
+
+/**
+ * main.ts Bootstrap Tests
+ *
+ * These tests verify the application bootstrap logic without actually importing
+ * main.ts, which would trigger Vuetify's CSS imports that Node's ESM loader
+ * cannot handle.
+ *
+ * The actual bootstrap is tested indirectly by verifying that:
+ * 1. Vue's createApp function works
+ * 2. The app.use() method can register plugins
+ * 3. The app.mount() method can mount the app
+ */
+describe('src/main.ts Bootstrap Logic', () => {
+  describe('Vue Application Setup', () => {
+    it('createApp returns an app instance with use method', () => {
+      const MockComponent = { template: '<div>Test</div>' };
+      const app = createApp(MockComponent);
+
+      expect(app).toBeDefined();
+      expect(typeof app.use).toBe('function');
+    });
+
+    it('createApp returns an app instance with mount method', () => {
+      const MockComponent = { template: '<div>Test</div>' };
+      const app = createApp(MockComponent);
+
+      expect(typeof app.mount).toBe('function');
+    });
+
+    it('app.use() can register a plugin', () => {
+      const MockComponent = { template: '<div>Test</div>' };
+      const app = createApp(MockComponent);
+      const mockPlugin = { install: vi.fn() };
+
+      app.use(mockPlugin);
+
+      expect(mockPlugin.install).toHaveBeenCalledWith(app);
+    });
+
+    it('app.use() can chain multiple plugins', () => {
+      const MockComponent = { template: '<div>Test</div>' };
+      const app = createApp(MockComponent);
+      const plugin1 = { install: vi.fn() };
+      const plugin2 = { install: vi.fn() };
+
+      app.use(plugin1).use(plugin2);
+
+      expect(plugin1.install).toHaveBeenCalled();
+      expect(plugin2.install).toHaveBeenCalled();
+    });
+  });
+
+  describe('Plugin Registration Order', () => {
+    it('plugins are registered in the order they are called', () => {
+      const MockComponent = { template: '<div>Test</div>' };
+      const app = createApp(MockComponent);
+      const callOrder: string[] = [];
+
+      const plugin1 = { install: () => callOrder.push('plugin1') };
+      const plugin2 = { install: () => callOrder.push('plugin2') };
+
+      app.use(plugin1).use(plugin2);
+
+      expect(callOrder).toEqual(['plugin1', 'plugin2']);
+    });
+  });
+
+  describe('Application Mounting', () => {
+    it('mount can target a DOM element', () => {
+      // Create a container in happy-dom
+      const container = document.createElement('div');
+      container.id = 'test-app';
+      document.body.appendChild(container);
+
+      const MockComponent = { template: '<div>Mounted</div>' };
+      const app = createApp(MockComponent);
+
+      const instance = app.mount('#test-app');
+
+      expect(instance).toBeDefined();
+      expect(container.innerHTML).toContain('Mounted');
+
+      // Cleanup
+      app.unmount();
+      document.body.removeChild(container);
+    });
+  });
+
+  describe('Expected main.ts Structure', () => {
+    it('main.ts should export nothing (side-effect only module)', () => {
+      // main.ts is expected to be a side-effect module that bootstraps the app
+      // It should not export any values - verified by code review
+      expect(true).toBe(true);
+    });
+
+    it('main.ts should follow Vue 3 app bootstrap pattern', () => {
+      // The expected pattern is:
+      // 1. import { createApp } from 'vue'
+      // 2. import App from './App.vue'
+      // 3. import plugins
+      // 4. const app = createApp(App)
+      // 5. app.use(plugins)
+      // 6. app.mount('#app')
+      // This is verified by code review of main.ts
+      expect(true).toBe(true);
+    });
+  });
+});