sunpeak 0.19.12 → 0.20.2

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

@@ -1,7 +1,7 @@
 import { test, expect } from 'sunpeak/test';
 
-test('should render review title with correct styles', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff');
+test('should render review title with correct styles', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff');
   const app = result.app();
 
   const title = app.locator('h1:has-text("Refactor Authentication Module")');
@@ -13,8 +13,8 @@ test('should render review title with correct styles', async ({ mcp }) => {
   expect(parseInt(styles.fontWeight)).toBeGreaterThanOrEqual(600);
 });
 
-test('should render change items with type-specific styling', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff');
+test('should render change items with type-specific styling', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff');
   const app = result.app();
 
   const changeItem = app.locator('li').first();
@@ -27,8 +27,8 @@ test('should render change items with type-specific styling', async ({ mcp }) =>
   expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
 });
 
-test('should have interactive apply and cancel buttons', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff');
+test('should have interactive apply and cancel buttons', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff');
   const app = result.app();
 
   const applyButton = app.locator('button:has-text("Apply Changes")');
@@ -40,8 +40,8 @@ test('should have interactive apply and cancel buttons', async ({ mcp }) => {
   expect(await cancelButton.evaluate((el) => window.getComputedStyle(el).cursor)).toBe('pointer');
 });
 
-test('should have expand fullscreen button in inline mode', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { displayMode: 'inline' });
+test('should have expand fullscreen button in inline mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, { displayMode: 'inline' });
   const app = result.app();
 
   const expandButton = app.locator('button[aria-label="Enter fullscreen"]');
@@ -49,50 +49,20 @@ test('should have expand fullscreen button in inline mode', async ({ mcp }) => {
   expect(await expandButton.evaluate((el) => window.getComputedStyle(el).cursor)).toBe('pointer');
 });
 
-test('should show empty state with Run button in prod tools mode', async ({ mcp }) => {
-  await mcp.openTool('review-diff', { theme: 'dark' });
-
-  await expect(mcp.page.locator('text=Press Run to call the tool')).toBeVisible();
-  await expect(mcp.page.locator('button:has-text("Run")')).toBeVisible();
-  await expect(mcp.page.locator('iframe')).not.toBeAttached();
-});
-
-test('should have themed empty state colors in light mode', async ({ mcp }) => {
-  await mcp.openTool('review-diff', { theme: 'light' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeLessThan(600);
-});
-
-test('should have themed empty state colors in dark mode', async ({ mcp }) => {
-  await mcp.openTool('review-diff', { theme: 'dark' });
-
-  const emptyState = mcp.page.locator('text=Press Run to call the tool');
-  await expect(emptyState).toBeVisible();
-
-  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
-  const [r, g, b] = color.match(/\d+/g)!.map(Number);
-  expect(r + g + b).toBeGreaterThan(200);
-});
-
-test('should activate prod resources mode without errors', async ({ mcp }) => {
-  await mcp.callTool('review-diff', {}, { theme: 'dark', prodResources: true });
-  const root = mcp.page.locator('#root');
+test('should activate prod resources mode without errors', async ({ inspector }) => {
+  await inspector.renderTool('review-diff', undefined, { theme: 'dark', prodResources: true });
+  const root = inspector.page.locator('#root');
   await expect(root).not.toBeEmpty();
 });
 
-test('should render review title in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { theme: 'dark' });
+test('should render review title in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('h1:has-text("Refactor Authentication Module")')).toBeVisible();
 });
 
-test('should have appropriate text colors in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { theme: 'dark' });
+test('should have appropriate text colors in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
   const app = result.app();
 
   const title = app.locator('h1').first();
@@ -104,19 +74,19 @@ test('should have appropriate text colors in dark mode', async ({ mcp }) => {
   expect(styles.color).toBeTruthy();
 });
 
-test('should render change items in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { theme: 'dark' });
+test('should render change items in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('li').first()).toBeVisible();
 });
 
-test('should load without console errors in dark mode', async ({ mcp }) => {
+test('should load without console errors in dark mode', async ({ inspector }) => {
   const errors: string[] = [];
-  mcp.page.on('console', (msg) => {
+  inspector.page.on('console', (msg) => {
     if (msg.type() === 'error') errors.push(msg.text());
   });
 
-  const result = await mcp.callTool('review-diff', {}, { theme: 'dark' });
+  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('h1').first()).toBeVisible();
 
@@ -130,40 +100,41 @@ test('should load without console errors in dark mode', async ({ mcp }) => {
   expect(unexpectedErrors).toHaveLength(0);
 });
 
-test('should not show fullscreen button in fullscreen mode', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { displayMode: 'fullscreen' });
+test('should not show fullscreen button in fullscreen mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
   await expect(app.locator('h1').first()).toBeVisible();
   await expect(app.locator('button[aria-label="Enter fullscreen"]')).not.toBeVisible();
 });
 
-test('should render content in fullscreen mode', async ({ mcp }) => {
-  const result = await mcp.callTool(
-    'review-diff',
-    {},
-    { theme: 'dark', displayMode: 'fullscreen' }
-  );
+test('should render content in fullscreen mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, {
+    theme: 'dark',
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
 
-  await expect(mcp.page.locator('#root')).not.toBeEmpty();
+  await expect(inspector.page.locator('#root')).not.toBeEmpty();
   await expect(app.locator('h1')).toBeVisible();
 });
 
-test('should render post review in light mode', async ({ mcp }) => {
-  await mcp.callTool('review-post');
-  await mcp.page.waitForLoadState('networkidle');
-  await expect(mcp.page.locator('#root')).not.toBeEmpty();
+test('should render post review in light mode', async ({ inspector }) => {
+  await inspector.renderTool('review-post');
+  await inspector.page.waitForLoadState('networkidle');
+  await expect(inspector.page.locator('#root')).not.toBeEmpty();
 });
 
-test('should render post review in dark mode', async ({ mcp }) => {
-  await mcp.callTool('review-post', {}, { theme: 'dark' });
-  await mcp.page.waitForLoadState('networkidle');
-  await expect(mcp.page.locator('#root')).not.toBeEmpty();
+test('should render post review in dark mode', async ({ inspector }) => {
+  await inspector.renderTool('review-post', undefined, { theme: 'dark' });
+  await inspector.page.waitForLoadState('networkidle');
+  await expect(inspector.page.locator('#root')).not.toBeEmpty();
 });
 
-test('should show server success message when confirming post', async ({ mcp }) => {
-  const result = await mcp.callTool('review-post', {}, { theme: 'dark' });
+test('should show server success message when confirming post', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-post', undefined, { theme: 'dark' });
   const app = result.app();
 
   const publishButton = app.locator('button:has-text("Publish")');
@@ -174,8 +145,8 @@ test('should show server success message when confirming post', async ({ mcp })
   await expect(app.locator('text=Publishing post...')).toBeVisible({ timeout: 10000 });
 });
 
-test('should show server cancel message when rejecting post', async ({ mcp }) => {
-  const result = await mcp.callTool('review-post', {}, { theme: 'dark' });
+test('should show server cancel message when rejecting post', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-post', undefined, { theme: 'dark' });
   const app = result.app();
 
   const cancelButton = app.locator('button:has-text("Cancel")');
@@ -185,20 +156,20 @@ test('should show server cancel message when rejecting post', async ({ mcp }) =>
   await expect(app.locator('text=Cancelled.')).toBeVisible({ timeout: 10000 });
 });
 
-test('should render purchase review in light mode', async ({ mcp }) => {
-  await mcp.callTool('review-purchase');
-  await mcp.page.waitForLoadState('networkidle');
-  await expect(mcp.page.locator('#root')).not.toBeEmpty();
+test('should render purchase review in light mode', async ({ inspector }) => {
+  await inspector.renderTool('review-purchase');
+  await inspector.page.waitForLoadState('networkidle');
+  await expect(inspector.page.locator('#root')).not.toBeEmpty();
 });
 
-test('should render purchase review in dark mode', async ({ mcp }) => {
-  await mcp.callTool('review-purchase', {}, { theme: 'dark' });
-  await mcp.page.waitForLoadState('networkidle');
-  await expect(mcp.page.locator('#root')).not.toBeEmpty();
+test('should render purchase review in dark mode', async ({ inspector }) => {
+  await inspector.renderTool('review-purchase', undefined, { theme: 'dark' });
+  await inspector.page.waitForLoadState('networkidle');
+  await expect(inspector.page.locator('#root')).not.toBeEmpty();
 });
 
-test('should show loading then result when placing order', async ({ mcp }) => {
-  const result = await mcp.callTool('review-purchase');
+test('should show loading then result when placing order', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-purchase');
   const app = result.app();
 
   const placeOrderButton = app.locator('button:has-text("Place Order")');
@@ -209,8 +180,8 @@ test('should show loading then result when placing order', async ({ mcp }) => {
   await expect(app.locator('text=Completed.')).toBeVisible({ timeout: 10000 });
 });
 
-test('should confirm review-diff and show server success', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { theme: 'dark' });
+test('should confirm review-diff and show server success', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
   const app = result.app();
 
   const applyButton = app.locator('button:has-text("Apply Changes")');
@@ -221,8 +192,8 @@ test('should confirm review-diff and show server success', async ({ mcp }) => {
   await expect(app.locator('text=Completed.')).toBeVisible({ timeout: 10000 });
 });
 
-test('should cancel review-diff and show server cancelled', async ({ mcp }) => {
-  const result = await mcp.callTool('review-diff', {}, { theme: 'dark' });
+test('should cancel review-diff and show server cancelled', async ({ inspector }) => {
+  const result = await inspector.renderTool('review-diff', undefined, { theme: 'dark' });
   const app = result.app();
 
   const cancelButton = app.locator('button:has-text("Cancel")');

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

@@ -3,34 +3,36 @@ import { test, expect } from 'sunpeak/test';
 // Visual regression tests. Screenshot comparisons only run with `sunpeak test --visual`.
 // Update baselines with `sunpeak test --visual --update`.
 
-test('albums renders correctly in light mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { theme: 'light' });
+test('albums renders correctly in light mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, { theme: 'light' });
   const app = result.app();
   await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
 
-  await mcp.screenshot('albums-light');
+  await result.screenshot('albums-light');
 });
 
-test('albums renders correctly in dark mode', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+test('albums renders correctly in dark mode', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, { theme: 'dark' });
   const app = result.app();
   await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
 
-  await mcp.screenshot('albums-dark');
+  await result.screenshot('albums-dark');
 });
 
-test('albums renders correctly in fullscreen', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { displayMode: 'fullscreen' });
+test('albums renders correctly in fullscreen', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, {
+    displayMode: 'fullscreen',
+  });
   const app = result.app();
   await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
 
-  await mcp.screenshot('albums-fullscreen');
+  await result.screenshot('albums-fullscreen');
 });
 
-test('full page renders correctly', async ({ mcp }) => {
-  const result = await mcp.callTool('show-albums', {}, { theme: 'light' });
+test('full page renders correctly', async ({ inspector }) => {
+  const result = await inspector.renderTool('show-albums', undefined, { theme: 'light' });
   const app = result.app();
   await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
 
-  await mcp.screenshot('albums-page-light', { target: 'page', maxDiffPixelRatio: 0.02 });
+  await result.screenshot('albums-page-light', { target: 'page', maxDiffPixelRatio: 0.02 });
 });