@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +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('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

@@ -0,0 +1,152 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+// Mock all dependencies before importing main.ts
+const mockCreateApp = vi.fn();
+const mockApp = {
+  use: vi.fn(),
+  mount: vi.fn()
+};
+
+const mockCreateInternalI18n = vi.fn(() => ({}));
+
+vi.mock('vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue')>();
+  return {
+    ...actual,
+    createApp: mockCreateApp
+  };
+});
+
+vi.mock('../App.vue', () => ({
+  default: {}
+}));
+
+vi.mock('@/plugins/vuetify', () => ({
+  default: {}
+}));
+
+vi.mock('@/i18n/i18n', () => ({
+  createInternalI18n: mockCreateInternalI18n
+}));
+
+vi.mock('@/assets/css/base.css', () => ({}));
+vi.mock('@/assets/css/variables.css', () => ({}));
+
+describe('src/main.ts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockCreateApp.mockReturnValue(mockApp);
+    mockCreateInternalI18n.mockReturnValue({});
+    // Clear the module cache to ensure fresh imports
+    vi.resetModules();
+  });
+
+  describe('Application Setup', () => {
+    it('creates Vue application', async () => {
+      // Import main.ts to execute the setup
+      await import('@/main');
+
+      expect(mockCreateApp).toHaveBeenCalled();
+      expect(mockCreateApp).toHaveBeenCalledWith(expect.any(Object));
+    });
+
+    it('registers Vuetify plugin', async () => {
+      await import('@/main');
+
+      expect(mockApp.use).toHaveBeenCalledWith(expect.any(Object));
+    });
+
+    it('registers i18n plugin', async () => {
+      await import('@/main');
+
+      expect(mockCreateInternalI18n).toHaveBeenCalled();
+      expect(mockApp.use).toHaveBeenCalledWith(expect.any(Object));
+    });
+
+    it('mounts application to #app', async () => {
+      await import('@/main');
+
+      expect(mockApp.mount).toHaveBeenCalledWith('#app');
+    });
+
+    it('follows correct initialization order', async () => {
+      await import('@/main');
+
+      const useCalls = mockApp.use.mock.calls;
+      expect(useCalls.length).toBe(2); // Vuetify + i18n
+
+      // Mount should be called after use()
+      expect(mockApp.mount).toHaveBeenCalledAfter(mockApp.use as any);
+    });
+  });
+
+  describe('Plugin Registration', () => {
+    it('uses vuetify plugin first', async () => {
+      await import('@/main');
+
+      expect(mockApp.use).toHaveBeenCalledWith(expect.any(Object));
+    });
+
+    it('uses i18n plugin second', async () => {
+      await import('@/main');
+
+      expect(mockApp.use).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('CSS Imports', () => {
+    it('imports base CSS without errors', async () => {
+      // CSS imports are mocked, so we can verify the module loads without error
+      expect(() => import('@/main')).not.toThrow();
+    });
+
+    it('imports variables CSS without errors', async () => {
+      // CSS imports are mocked, so we can verify the module loads without error
+      expect(() => import('@/main')).not.toThrow();
+    });
+  });
+
+  describe('Module Loading', () => {
+    it('loads main module without errors', async () => {
+      await expect(import('@/main')).resolves.toBeDefined();
+    });
+
+    it('imports App component', async () => {
+      await import('@/main');
+
+      // Since App component is mocked, just verify main.ts loaded successfully
+      expect(mockCreateApp).toHaveBeenCalledWith(expect.any(Object));
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('can handle createApp being called', async () => {
+      // Test that createApp is called without throwing
+      await import('@/main');
+      expect(mockCreateApp).toHaveBeenCalled();
+    });
+
+    it('can handle app.use being called', async () => {
+      // Test that app.use is called without throwing
+      await import('@/main');
+      expect(mockApp.use).toHaveBeenCalled();
+    });
+
+    it('can handle app.mount being called', async () => {
+      // Test that app.mount is called without throwing
+      await import('@/main');
+      expect(mockApp.mount).toHaveBeenCalled();
+    });
+  });
+
+  describe('Development Setup', () => {
+    it('sets up development environment correctly', async () => {
+      await import('@/main');
+
+      // Verify that the setup completes without throwing
+      expect(mockCreateApp).toHaveBeenCalled();
+      expect(mockApp.use).toHaveBeenCalled();
+      expect(mockApp.mount).toHaveBeenCalled();
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,26 @@
+// tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"]
+    }
+  },
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist", "**/*.stories.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@components': resolve(__dirname, './src/components'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'wl-shared-components',
+      fileName: (format) => `wl-shared-components.${format}.js`,
+      formats: ['es', 'umd'],
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,84 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+// Custom plugin to handle CSS imports
+function cssStubPlugin() {
+  return {
+    name: 'css-stub',
+    resolveId(id: string) {
+      if (id.endsWith('.css')) {
+        return id;
+      }
+    },
+    load(id: string) {
+      if (id.endsWith('.css')) {
+        return 'export default {};';
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [
+    cssStubPlugin(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.includes('-') && !tag.startsWith('v-')
+        }
+      }
+    })
+  ],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./tests/unit/setup.ts'],
+    server: {
+      deps: {
+        external: ['vuetify'],
+        inline: ['@vue/test-utils']
+      }
+    },
+    deps: {
+      optimizer: {
+        web: {
+          include: ['vuetify']
+        }
+      }
+    },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '.storybook/',
+        '*.config.*',
+        'src/**/*.stories.ts',
+        'src/stories/**',
+        'storybook-static/',
+        'playwright-report/',
+        'test-results/',
+        'dist/',
+      ],
+      include: ['src/**/*.{vue,ts,js}'],
+      all: true,
+      lines: 80,
+      functions: 80,
+      branches: 80,
+      statements: 80
+    },
+    include: ['tests/unit/**/*.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.{js,ts}'],
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+    },
+  },
+  optimizeDeps: {
+    include: ['vue', '@vue/test-utils']
+  },
+});