sunpeak 0.8.6 → 0.9.1

package/template/tests/e2e/albums.spec.ts

@@ -0,0 +1,120 @@
+import { test, expect } from '@playwright/test';
+import { createSimulatorUrl } from 'sunpeak/chatgpt';
+
+test.describe('Albums Resource', () => {
+  test.describe('Light Mode', () => {
+    test('should render album cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'light' }));
+
+      const albumCard = page.locator('button:has-text("Summer Slice")');
+      await expect(albumCard).toBeVisible();
+
+      // Verify album card unique styles
+      const styles = await albumCard.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.borderRadius).toBe('12px'); // rounded-xl
+    });
+
+    test('should have album image with correct aspect ratio', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'light' }));
+
+      const albumImage = page.locator('button:has-text("Summer Slice") img').first();
+      await expect(albumImage).toBeVisible();
+
+      // Verify aspect-[4/3] container
+      const imageContainer = page.locator('button:has-text("Summer Slice") .aspect-\\[4\\/3\\]');
+      await expect(imageContainer).toBeVisible();
+
+      const containerStyles = await imageContainer.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          overflow: computed.overflow,
+        };
+      });
+
+      expect(containerStyles.borderRadius).toBe('12px'); // rounded-xl
+      expect(containerStyles.overflow).toBe('hidden');
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should render album cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'dark' }));
+
+      const albumCard = page.locator('button:has-text("Summer Slice")');
+      await expect(albumCard).toBeVisible();
+
+      const styles = await albumCard.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.borderRadius).toBe('12px'); // rounded-xl
+    });
+
+    test('should have text with appropriate contrast', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'dark' }));
+
+      const albumTitle = page.locator('button:has-text("Summer Slice") .text-primary').first();
+      await expect(albumTitle).toBeVisible();
+
+      // In dark mode, text-primary should be light colored for contrast
+      const titleStyles = await albumTitle.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          color: computed.color,
+        };
+      });
+
+      // Verify the text color exists (should be a light color in dark mode)
+      expect(titleStyles.color).toBeTruthy();
+    });
+  });
+
+  test.describe('Fullscreen Mode', () => {
+    test('should render correctly in fullscreen displayMode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'albums-show', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      // Wait for content to load
+      await page.waitForLoadState('networkidle');
+
+      // The root container should be present
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+    });
+
+    test('should maintain album card styles in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'albums-show', theme: 'dark', displayMode: 'fullscreen' })
+      );
+
+      const albumCard = page.locator('button:has-text("Summer Slice")');
+      await expect(albumCard).toBeVisible();
+
+      const styles = await albumCard.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.borderRadius).toBe('12px');
+    });
+  });
+});

package/template/tests/e2e/carousel.spec.ts

@@ -0,0 +1,127 @@
+import { test, expect } from '@playwright/test';
+import { createSimulatorUrl } from 'sunpeak/chatgpt';
+
+test.describe('Carousel Resource', () => {
+  test.describe('Light Mode', () => {
+    test('should render carousel cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'light' }));
+
+      // Wait for carousel to load
+      await page.waitForLoadState('networkidle');
+
+      // Find a card in the carousel
+      const card = page.locator('.rounded-2xl').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.borderRadius).toBe('16px'); // rounded-2xl
+      expect(styles.cursor).toBe('pointer');
+    });
+
+    test('should have card with border styling', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Cards have border-subtle styling
+      const card = page.locator('.rounded-2xl.border').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderWidth: computed.borderWidth,
+          borderStyle: computed.borderStyle,
+        };
+      });
+
+      expect(styles.borderWidth).toBe('1px');
+      expect(styles.borderStyle).toBe('solid');
+    });
+
+    test('should have interactive buttons', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Find the Visit button (primary button)
+      const visitButton = page.locator('button:has-text("Visit")').first();
+      await expect(visitButton).toBeAttached();
+
+      const styles = await visitButton.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should render carousel cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const card = page.locator('.rounded-2xl').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.borderRadius).toBe('16px'); // rounded-2xl
+      expect(styles.cursor).toBe('pointer');
+    });
+
+    test('should have appropriate background color for dark mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Verify the card has a background color set
+      const card = page.locator('.rounded-2xl.bg-surface').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          backgroundColor: computed.backgroundColor,
+        };
+      });
+
+      // Background color should be set (not transparent)
+      expect(styles.backgroundColor).toBeTruthy();
+      expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
+    });
+
+    test('should load without console errors', async ({ page }) => {
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'dark' }));
+      await page.waitForLoadState('networkidle');
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  // Note: No fullscreen test for carousel as per requirements
+});

package/template/tests/e2e/map.spec.ts

@@ -0,0 +1,188 @@
+import { test, expect } from '@playwright/test';
+import { createSimulatorUrl } from 'sunpeak/chatgpt';
+
+test.describe('Map Resource', () => {
+  test.describe('Light Mode', () => {
+    test('should render map container with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'map-show', theme: 'light' }));
+
+      // Wait for the map component to render
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+
+      const styles = await mapContainer.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          overflow: computed.overflow,
+        };
+      });
+
+      expect(styles.overflow).toBe('hidden');
+    });
+
+    test('should have rounded border in inline mode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'light', displayMode: 'inline' })
+      );
+
+      // Wait for the inner container with rounded borders
+      const innerContainer = page.locator('.border.rounded-2xl').first();
+      await expect(innerContainer).toBeVisible({ timeout: 10000 });
+
+      const styles = await innerContainer.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          borderWidth: computed.borderWidth,
+        };
+      });
+
+      // Should have rounded corners (rounded-2xl = 16px)
+      expect(parseInt(styles.borderRadius)).toBeGreaterThanOrEqual(16);
+    });
+
+    test('should have fullscreen expand button in inline mode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'light', displayMode: 'inline' })
+      );
+
+      // Wait for the expand button
+      const expandButton = page.locator('button[aria-label="Enter fullscreen"]');
+      await expect(expandButton).toBeVisible({ timeout: 10000 });
+
+      const styles = await expandButton.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          position: computed.position,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.position).toBe('absolute');
+    });
+
+    test('should load without console errors', async ({ page }) => {
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.goto(createSimulatorUrl({ simulation: 'map-show', theme: 'light' }));
+
+      // Wait for map to render
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should render map container with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'map-show', theme: 'dark' }));
+
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+    });
+
+    test('should have appropriate border color for dark mode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'dark', displayMode: 'inline' })
+      );
+
+      // In dark mode, the border uses dark:border-white/10
+      const innerContainer = page.locator('.border.rounded-2xl').first();
+      await expect(innerContainer).toBeVisible({ timeout: 10000 });
+
+      const styles = await innerContainer.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderColor: computed.borderColor,
+        };
+      });
+
+      // Border color should be set
+      expect(styles.borderColor).toBeTruthy();
+    });
+
+    test('should load without console errors', async ({ page }) => {
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.goto(createSimulatorUrl({ simulation: 'map-show', theme: 'dark' }));
+
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  test.describe('Fullscreen Mode', () => {
+    test('should not have rounded border in fullscreen mode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      // In fullscreen, the container uses rounded-none and border-0
+      const innerContainer = page.locator('.rounded-none.border-0').first();
+      await expect(innerContainer).toBeVisible({ timeout: 10000 });
+
+      const styles = await innerContainer.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.borderRadius).toBe('0px');
+    });
+
+    test('should not show fullscreen button when already in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      // Wait for content to render
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+
+      // The expand button should not be visible in fullscreen mode
+      const expandButton = page.locator('button[aria-label="Enter fullscreen"]');
+      await expect(expandButton).not.toBeVisible();
+    });
+
+    test('should show place list sidebar in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'dark', displayMode: 'fullscreen' })
+      );
+
+      // The map container should be present
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+    });
+
+    test('should show suggestion chips in fullscreen on desktop', async ({ page }) => {
+      // Set viewport to desktop size
+      await page.setViewportSize({ width: 1024, height: 768 });
+      await page.goto(
+        createSimulatorUrl({ simulation: 'map-show', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      // Wait for map to render
+      const mapContainer = page.locator('.antialiased.w-full.overflow-hidden').first();
+      await expect(mapContainer).toBeVisible({ timeout: 10000 });
+
+      // Suggestion chips should be visible (contains "Open now", "Top rated", etc.)
+      const openNowChip = page.locator('button:has-text("Open now")');
+      await expect(openNowChip).toBeVisible({ timeout: 5000 });
+    });
+  });
+});

package/template/tests/e2e/review.spec.ts

@@ -0,0 +1,245 @@
+import { test, expect } from '@playwright/test';
+import { createSimulatorUrl } from 'sunpeak/chatgpt';
+
+test.describe('Review Resource', () => {
+  test.describe('Light Mode', () => {
+    test('should render review title with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Review has a title
+      const title = page.locator('h1:has-text("Refactor Authentication Module")');
+      await expect(title).toBeVisible();
+
+      const styles = await title.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          fontWeight: computed.fontWeight,
+        };
+      });
+
+      // Should be semibold (600)
+      expect(parseInt(styles.fontWeight)).toBeGreaterThanOrEqual(600);
+    });
+
+    test('should render change items with type-specific styling', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Review diff shows changes - find the list items
+      const changeItem = page.locator('li').first();
+      await expect(changeItem).toBeVisible();
+
+      const styles = await changeItem.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          backgroundColor: computed.backgroundColor,
+        };
+      });
+
+      // Background should be set (one of the type colors)
+      expect(styles.backgroundColor).toBeTruthy();
+      expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
+    });
+
+    test('should have interactive apply and cancel buttons', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Find the Apply Changes button (based on simulation data)
+      const applyButton = page.locator('button:has-text("Apply Changes")');
+      await expect(applyButton).toBeVisible();
+
+      const applyStyles = await applyButton.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+        };
+      });
+      expect(applyStyles.cursor).toBe('pointer');
+
+      // Find the Cancel button
+      const cancelButton = page.locator('button:has-text("Cancel")');
+      await expect(cancelButton).toBeVisible();
+
+      const cancelStyles = await cancelButton.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+        };
+      });
+      expect(cancelStyles.cursor).toBe('pointer');
+    });
+
+    test('should have expand fullscreen button in inline mode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'review-diff', theme: 'light', displayMode: 'inline' })
+      );
+
+      await page.waitForLoadState('networkidle');
+
+      // Find the expand button
+      const expandButton = page.locator('button[aria-label="Enter fullscreen"]');
+      await expect(expandButton).toBeVisible();
+
+      const styles = await expandButton.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should render review title with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const title = page.locator('h1:has-text("Refactor Authentication Module")');
+      await expect(title).toBeVisible();
+    });
+
+    test('should have appropriate text colors for dark mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // The title should have text-primary class
+      const title = page.locator('h1.text-primary').first();
+      await expect(title).toBeVisible();
+
+      const styles = await title.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          color: computed.color,
+        };
+      });
+
+      // In dark mode, text color should be light
+      expect(styles.color).toBeTruthy();
+    });
+
+    test('should render change items in dark mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const changeItem = page.locator('li').first();
+      await expect(changeItem).toBeVisible();
+    });
+
+    test('should load without console errors', async ({ page }) => {
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.goto(createSimulatorUrl({ simulation: 'review-diff', theme: 'dark' }));
+      await page.waitForLoadState('networkidle');
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  test.describe('Fullscreen Mode', () => {
+    test('should not show fullscreen button when already in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'review-diff', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      await page.waitForLoadState('networkidle');
+
+      // The expand button should not be visible in fullscreen mode
+      const expandButton = page.locator('button[aria-label="Enter fullscreen"]');
+      await expect(expandButton).not.toBeVisible();
+    });
+
+    test('should render content correctly in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'review-diff', theme: 'dark', displayMode: 'fullscreen' })
+      );
+
+      await page.waitForLoadState('networkidle');
+
+      // The root content should be present
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+
+      // Title should be visible
+      const title = page.locator('h1');
+      await expect(title).toBeVisible();
+    });
+
+    test('should have scrollable content area in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'review-diff', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      await page.waitForLoadState('networkidle');
+
+      // The content area should have overflow-y-auto
+      const contentArea = page.locator('.overflow-y-auto').first();
+      await expect(contentArea).toBeVisible();
+
+      const styles = await contentArea.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          overflowY: computed.overflowY,
+        };
+      });
+
+      expect(styles.overflowY).toBe('auto');
+    });
+  });
+
+  test.describe('Review Post Simulation', () => {
+    test('should render post review in light mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-post', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Should render the review content
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+    });
+
+    test('should render post review in dark mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-post', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+    });
+  });
+
+  test.describe('Review Purchase Simulation', () => {
+    test('should render purchase review in light mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-purchase', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+    });
+
+    test('should render purchase review in dark mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'review-purchase', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+    });
+  });
+});

package/template/vitest.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: './src/test/setup.ts',
+    exclude: ['**/node_modules/**', '**/tests/e2e/**'],
   },
   resolve: {
     alias: {