@alliance-droid/svelte-docs-system 0.0.1

package/tests/e2e/example.spec.ts

@@ -0,0 +1,345 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Example E2E Tests
+ * Demonstrates the structure of E2E tests for Svelte Docs System
+ * 
+ * Note: These tests require Playwright to be installed
+ * Run with: npm run test:e2e
+ */
+
+test.describe('Documentation System E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the documentation homepage before each test
+    await page.goto('/');
+  });
+
+  test.describe('Navigation', () => {
+    test('should navigate between pages', async ({ page }) => {
+      // Find and click a navigation link
+      await page.click('a[href="/docs/guides"]');
+
+      // Wait for navigation and verify page content
+      await page.waitForURL('/docs/guides');
+      expect(page.url()).toContain('/docs/guides');
+
+      // Verify content loaded
+      const heading = await page.locator('h1');
+      await expect(heading).toBeVisible();
+    });
+
+    test('should display breadcrumbs', async ({ page }) => {
+      await page.goto('/docs/guides/getting-started');
+
+      // Check breadcrumb structure
+      const breadcrumbs = page.locator('[role="navigation"] a');
+      const count = await breadcrumbs.count();
+
+      expect(count).toBeGreaterThan(0);
+
+      // Verify breadcrumb content
+      const lastBreadcrumb = breadcrumbs.nth(count - 1);
+      await expect(lastBreadcrumb).toContainText(/Getting Started|getting-started/i);
+    });
+
+    test('should update active navigation item', async ({ page }) => {
+      const navItem = page.locator('nav a').first();
+
+      await navItem.click();
+      await page.waitForLoadState('networkidle');
+
+      // Check if active class is applied
+      const activeItem = page.locator('nav a.active, nav a[aria-current]').first();
+      await expect(activeItem).toBeVisible();
+    });
+  });
+
+  test.describe('Search', () => {
+    test('should search and display results', async ({ page }) => {
+      // Click search input
+      const searchInput = page.locator('input[placeholder*="Search"]');
+      await searchInput.click();
+
+      // Type search query
+      await searchInput.fill('getting started');
+
+      // Wait for results to appear
+      const searchResults = page.locator('[role="listbox"], .search-results');
+      await expect(searchResults).toBeVisible();
+
+      // Verify results contain the query
+      const resultItems = page.locator('[role="option"], .search-result-item');
+      expect(await resultItems.count()).toBeGreaterThan(0);
+    });
+
+    test('should navigate to search result', async ({ page }) => {
+      const searchInput = page.locator('input[placeholder*="Search"]');
+      await searchInput.fill('API');
+
+      // Wait for results and click first one
+      const firstResult = page.locator('[role="option"], .search-result-item').first();
+      await firstResult.click();
+
+      // Verify navigation happened
+      await page.waitForLoadState('networkidle');
+      expect(page.url()).toContain('/');
+    });
+
+    test('should show no results message', async ({ page }) => {
+      const searchInput = page.locator('input[placeholder*="Search"]');
+      await searchInput.fill('xyzabc123notarealterm');
+
+      // Wait a bit for search to complete
+      await page.waitForTimeout(500);
+
+      // Check for no results message
+      const noResultsMsg = page.locator('text=/No results|nothing found/i');
+      await expect(noResultsMsg).toBeVisible();
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should toggle dark mode', async ({ page }) => {
+      // Find and click dark mode toggle
+      const darkModeToggle = page.locator('[aria-label*="Dark"], [aria-label*="Theme"]');
+
+      // Get initial state
+      const htmlElement = page.locator('html');
+      const initialClass = await htmlElement.getAttribute('class');
+
+      // Click toggle
+      await darkModeToggle.click();
+
+      // Verify class changed
+      const newClass = await htmlElement.getAttribute('class');
+      expect(newClass).not.toBe(initialClass);
+    });
+
+    test('should persist dark mode preference', async ({ page, context }) => {
+      // Enable dark mode
+      const toggle = page.locator('[aria-label*="Dark"], [aria-label*="Theme"]');
+      await toggle.click();
+
+      // Verify it's enabled
+      const htmlElement = page.locator('html');
+      const isDarkMode = (await htmlElement.getAttribute('class'))?.includes('dark');
+      expect(isDarkMode).toBeTruthy();
+
+      // Reload page
+      await page.reload();
+
+      // Verify dark mode still active
+      const isDarkModeAfterReload = (
+        await htmlElement.getAttribute('class')
+      )?.includes('dark');
+      expect(isDarkModeAfterReload).toBeTruthy();
+    });
+
+    test('should have readable text in dark mode', async ({ page }) => {
+      // Enable dark mode
+      const toggle = page.locator('[aria-label*="Dark"], [aria-label*="Theme"]');
+      await toggle.click();
+
+      // Get text color and background color
+      const mainContent = page.locator('main').first();
+
+      const styles = await mainContent.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          color: computed.color,
+          backgroundColor: computed.backgroundColor
+        };
+      });
+
+      // Verify colors are defined
+      expect(styles.color).toBeTruthy();
+      expect(styles.backgroundColor).toBeTruthy();
+    });
+  });
+
+  test.describe('Responsive Design', () => {
+    test('should show mobile menu on small screens', async ({ page }) => {
+      // Set mobile viewport
+      await page.setViewportSize({ width: 375, height: 667 });
+
+      // Look for hamburger menu
+      const hamburgerMenu = page.locator('[aria-label*="Menu"], [aria-label*="Navigation"]');
+      await expect(hamburgerMenu).toBeVisible();
+
+      // Click hamburger
+      await hamburgerMenu.click();
+
+      // Verify menu opens
+      const mobileNav = page.locator('nav').first();
+      await expect(mobileNav).toBeVisible();
+    });
+
+    test('should show sidebar on desktop', async ({ page }) => {
+      // Set desktop viewport
+      await page.setViewportSize({ width: 1440, height: 900 });
+
+      // Sidebar should be visible
+      const sidebar = page.locator('aside, nav');
+      await expect(sidebar.first()).toBeVisible();
+    });
+  });
+
+  test.describe('Accessibility', () => {
+    test('should be keyboard navigable', async ({ page }) => {
+      // Tab through page elements
+      const firstButton = page.locator('button').first();
+
+      // Initially should not have focus
+      let hasFocus = await firstButton.evaluate((el) => el === document.activeElement);
+      expect(hasFocus).toBeFalsy();
+
+      // Press Tab and verify focus appears
+      await page.keyboard.press('Tab');
+
+      // Check if any element has focus
+      const focusedElement = await page.evaluate(() => {
+        return document.activeElement?.tagName;
+      });
+
+      expect(focusedElement).toBeTruthy();
+    });
+
+    test('should have alt text for images', async ({ page }) => {
+      const images = page.locator('img');
+
+      const count = await images.count();
+      if (count > 0) {
+        // Get alt text of first image
+        const altText = await images.first().getAttribute('alt');
+
+        // Should have alt text (if decorative, should be empty intentionally)
+        expect(altText).not.toBeNull();
+      }
+    });
+
+    test('should have proper heading hierarchy', async ({ page }) => {
+      const h1Count = await page.locator('h1').count();
+      const h2s = await page.locator('h2').count();
+
+      // Page should have exactly one h1
+      expect(h1Count).toBe(1);
+
+      // h2s should exist (if multiple sections)
+      // This is flexible as some pages might not have subsections
+      expect(h2s).toBeGreaterThanOrEqual(0);
+    });
+  });
+
+  test.describe('Content Display', () => {
+    test('should render markdown content', async ({ page }) => {
+      // Navigate to a content page
+      await page.goto('/docs');
+
+      // Wait for main content to load
+      const mainContent = page.locator('main, article').first();
+      await expect(mainContent).toBeVisible();
+
+      // Verify content exists
+      const text = await mainContent.textContent();
+      expect(text).toBeTruthy();
+      expect(text?.length).toBeGreaterThan(0);
+    });
+
+    test('should display code blocks with syntax highlighting', async ({ page }) => {
+      const codeBlocks = page.locator('pre, code');
+
+      if (await codeBlocks.count() > 0) {
+        const firstCode = codeBlocks.first();
+        await expect(firstCode).toBeVisible();
+
+        // Verify code content
+        const content = await firstCode.textContent();
+        expect(content).toBeTruthy();
+      }
+    });
+
+    test('should have functional copy button on code blocks', async ({ page }) => {
+      const codeBlock = page.locator('pre').first();
+
+      if (await codeBlock.isVisible()) {
+        const copyButton = page
+          .locator('button')
+          .filter({ hasText: /Copy|copy/ })
+          .first();
+
+        if (await copyButton.isVisible()) {
+          // Click copy button
+          await copyButton.click();
+
+          // Verify some feedback (success message, button state change, etc.)
+          const successMsg = page.locator('text=/copied|success/i').first();
+          await expect(successMsg).toBeVisible({ timeout: 2000 });
+        }
+      }
+    });
+  });
+
+  test.describe('Performance', () => {
+    test('should load page within acceptable time', async ({ page }) => {
+      const startTime = Date.now();
+
+      await page.goto('/');
+      await page.waitForLoadState('networkidle');
+
+      const loadTime = Date.now() - startTime;
+
+      // Page should load within 3 seconds
+      expect(loadTime).toBeLessThan(3000);
+    });
+
+    test('should have good Core Web Vitals', async ({ page }) => {
+      await page.goto('/');
+
+      const vitals = await page.evaluate(() => {
+        return new Promise<any>((resolve) => {
+          let lcp = 0;
+          let cls = 0;
+
+          const observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if ((entry as any).name === 'largest-contentful-paint') {
+                lcp = (entry as any).renderTime || (entry as any).loadTime;
+              } else if ((entry as any).hadRecentInput === false) {
+                cls += (entry as any).value;
+              }
+            }
+          });
+
+          observer.observe({ entryTypes: ['largest-contentful-paint', 'layout-shift'] });
+
+          setTimeout(() => {
+            observer.disconnect();
+            resolve({ lcp, cls });
+          }, 3000);
+        });
+      });
+
+      // LCP should be less than 2.5 seconds
+      expect(vitals.lcp).toBeLessThan(2500);
+
+      // CLS should be less than 0.1
+      expect(vitals.cls).toBeLessThan(0.1);
+    });
+  });
+});
+
+test.describe('Error Handling', () => {
+  test('should show 404 page for non-existent routes', async ({ page }) => {
+    await page.goto('/docs/this-page-does-not-exist-123');
+
+    // Should see 404 message or not found page
+    const notFoundMsg = page.locator('text=/404|not found|does not exist/i');
+
+    // Try to find error message
+    const hasError =
+      (await notFoundMsg.count()) > 0 ||
+      page.url().includes('404');
+
+    expect(hasError).toBeTruthy();
+  });
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

package/vitest.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    // Ensure we use browser build of Svelte
+    alias: {
+      'svelte/internal': 'svelte/internal'
+    },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        'build/',
+        'coverage/',
+        '**/*.test.ts',
+        '**/*.spec.ts',
+        'tests/',
+        'template-starter/'
+      ],
+      include: ['src/lib/**/*.ts', 'src/lib/**/*.svelte'],
+      lines: 85,
+      functions: 85,
+      branches: 80,
+      statements: 85
+    }
+  }
+});

package/vitest.setup.ts

@@ -0,0 +1,21 @@
+import { expect, afterEach, beforeEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/svelte';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Initialize and clear storage if available
+beforeEach(() => {
+  try {
+    if (typeof localStorage !== 'undefined' && localStorage.clear) {
+      localStorage.clear();
+    }
+    if (typeof sessionStorage !== 'undefined' && sessionStorage.clear) {
+      sessionStorage.clear();
+    }
+  } catch (e) {
+    // Storage might not be available in some test environments
+  }
+});