chore: Refactor app layout visual test definitions

test/definitions/visual/app-layout-content-paddings.ts

@@ -3,26 +3,31 @@
 import { TestSuite } from '../types';
 
 const suite: TestSuite = {
-  description: 'Content paddings',
+  description: 'AppLayout',
   componentName: 'app-layout',
   tests: [
-    ...(['true', 'false'] as const).flatMap(toolsEnabled =>
-      (['true', 'false'] as const).flatMap(splitPanelEnabled =>
-        (['bottom', 'side'] as const).map(splitPanelPosition => ({
-          description: `toolsEnabled=${toolsEnabled} splitPanelEnabled=${splitPanelEnabled} splitPanelPosition=${splitPanelPosition}`,
-          path: 'app-layout/with-split-panel',
+    {
+      description: 'Content paddings',
+      tests: [
+        ...(['true', 'false'] as const).flatMap(toolsEnabled =>
+          (['true', 'false'] as const).flatMap(splitPanelEnabled =>
+            (['bottom', 'side'] as const).map(splitPanelPosition => ({
+              description: `toolsEnabled=${toolsEnabled} splitPanelEnabled=${splitPanelEnabled} splitPanelPosition=${splitPanelPosition}`,
+              path: 'app-layout/with-split-panel',
+              screenshotType: 'viewport' as const,
+              queryParams: { toolsEnabled, splitPanelEnabled, splitPanelPosition },
+            }))
+          )
+        ),
+        ...[1500, 600].map(width => ({
+          description: `with split panel and disabled content paddings - width=${width}`,
+          path: 'app-layout/disable-paddings-with-split-panel',
           screenshotType: 'viewport' as const,
-          queryParams: { toolsEnabled, splitPanelEnabled, splitPanelPosition },
-        }))
-      )
-    ),
-    ...[1500, 600].map(width => ({
-      description: `with split panel and disabled content paddings - width=${width}`,
-      path: 'app-layout/disable-paddings-with-split-panel',
-      screenshotType: 'viewport' as const,
-      configuration: { width },
-      queryParams: { splitPanelOpen: 'true', splitPanelPosition: 'side' },
-    })),
+          configuration: { width },
+          queryParams: { splitPanelOpen: 'true', splitPanelPosition: 'side' },
+        })),
+      ],
+    },
   ],
 };
 

test/definitions/visual/app-layout-drawers.ts

@@ -3,65 +3,70 @@
 import { TestSuite } from '../types';
 
 const suite: TestSuite = {
-  description: 'Drawers',
+  description: 'AppLayout',
   componentName: 'app-layout',
   tests: [
     {
-      description: 'popover can be displayed outside split panel',
-      path: 'app-layout/with-full-page-table-and-split-panel',
-      screenshotType: 'viewport',
-      queryParams: { splitPanelPosition: 'side' },
-      setup: async ({ page, wrapper }) => {
-        await page.click(wrapper.findPopover('[data-testid="split-panel"]').toSelector());
-      },
-    },
-    {
-      description: 'popover can be displayed outside help panel',
-      path: 'app-layout/with-full-page-table-and-split-panel',
-      screenshotType: 'viewport',
-      setup: async ({ page, wrapper }) => {
-        await page.click(wrapper.findAppLayout().findToolsToggle().toSelector());
-        await page.click(wrapper.findPopover('[data-testid="help-panel"]').toSelector());
-      },
-    },
-    {
-      description: 'with split panel',
-      path: 'app-layout/with-drawers',
-      screenshotType: 'viewport',
-      setup: async ({ page, wrapper }) => {
-        await page.click(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector());
-      },
-    },
-    {
-      description: 'with tooltip on hover',
-      path: 'app-layout/with-drawers',
-      screenshotType: 'viewport',
-      setup: async ({ page, wrapper }) => {
-        await page.hoverElement(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector());
-      },
-    },
-    {
-      description: 'with custom scrollable drawer content',
-      path: 'app-layout/with-drawers-scrollable',
-      screenshotType: 'viewport',
-      queryParams: { sideNavFill: 'false' },
-      setup: async ({ page, wrapper }) => {
-        await page.click(wrapper.findAppLayout().findDrawerTriggerById('chat').toSelector());
-      },
-    },
-    {
-      description: 'with full height drawer content',
-      path: 'app-layout/with-drawers-scrollable',
-      screenshotType: 'viewport',
-      queryParams: { sideNavFill: 'true' },
-      setup: async ({ page }) => {
-        await page.click('[data-testid="open-global-drawer-button"]');
-      },
-    },
-    {
-      description: 'with only global drawers',
-      path: 'app-layout/runtime-drawers-with-only-global',
-      screenshotType: 'viewport',
+      description: 'Drawers',
+      tests: [
+        {
+          description: 'popover can be displayed outside split panel',
+          path: 'app-layout/with-full-page-table-and-split-panel',
+          screenshotType: 'viewport',
+          queryParams: { splitPanelPosition: 'side' },
+          setup: async ({ page, wrapper }) => {
+            await page.click(wrapper.findPopover('[data-testid="split-panel"]').toSelector());
+          },
+        },
+        {
+          description: 'popover can be displayed outside help panel',
+          path: 'app-layout/with-full-page-table-and-split-panel',
+          screenshotType: 'viewport',
+          setup: async ({ page, wrapper }) => {
+            await page.click(wrapper.findAppLayout().findToolsToggle().toSelector());
+            await page.click(wrapper.findPopover('[data-testid="help-panel"]').toSelector());
+          },
+        },
+        {
+          description: 'with split panel',
+          path: 'app-layout/with-drawers',
+          screenshotType: 'viewport',
+          setup: async ({ page, wrapper }) => {
+            await page.click(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector());
+          },
+        },
+        {
+          description: 'with tooltip on hover',
+          path: 'app-layout/with-drawers',
+          screenshotType: 'viewport',
+          setup: async ({ page, wrapper }) => {
+            await page.hoverElement(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector());
+          },
+        },
+        {
+          description: 'with custom scrollable drawer content',
+          path: 'app-layout/with-drawers-scrollable',
+          screenshotType: 'viewport',
+          queryParams: { sideNavFill: 'false' },
+          setup: async ({ page, wrapper }) => {
+            await page.click(wrapper.findAppLayout().findDrawerTriggerById('chat').toSelector());
+          },
+        },
+        {
+          description: 'with full height drawer content',
+          path: 'app-layout/with-drawers-scrollable',
+          screenshotType: 'viewport',
+          queryParams: { sideNavFill: 'true' },
+          setup: async ({ page }) => {
+            await page.click('[data-testid="open-global-drawer-button"]');
+          },
+        },
+        {
+          description: 'with only global drawers',
+          path: 'app-layout/runtime-drawers-with-only-global',
+          screenshotType: 'viewport',
+        },
+      ],
     },
   ],
 };

test/definitions/visual/app-layout-flashbar.ts

@@ -3,36 +3,41 @@
 import { TestSuite } from '../types';
 
 const suite: TestSuite = {
-  description: 'Flashbar',
+  description: 'AppLayout',
   componentName: 'app-layout',
-  tests: [true, false].flatMap(disableContentPaddings =>
-    [true, false].flatMap(stickyNotifications =>
-      [true, false].flatMap(stickyTableHeader =>
-        [true, false].map(stackNotifications => ({
-          description: `disableContentPaddings: ${disableContentPaddings}, stickyNotifications: ${stickyNotifications}, stickyTableHeader: ${stickyTableHeader}, stackNotifications: ${stackNotifications}`,
-          path: 'app-layout/with-stacked-notifications-and-table',
-          screenshotType: 'screenshotArea' as const,
-          configuration: { width: 1280, height: 900 },
-          setup: async ({ page }) => {
-            if (!disableContentPaddings) {
-              await page.click('[data-id="toggle-content-paddings"]');
-            }
-            if (stickyNotifications) {
-              await page.click('[data-id="toggle-sticky-notifications"]');
-            }
-            if (!stickyTableHeader) {
-              await page.click('[data-id="toggle-sticky-table-header"]');
-            }
-            if (!stackNotifications) {
-              await page.click('[data-id="toggle-stack-items"]');
-            }
-            await page.click('[data-id="add-notification"]');
-            await page.click('[data-id="add-notification"]');
-          },
-        }))
-      )
-    )
-  ),
+  tests: [
+    {
+      description: 'Flashbar',
+      tests: [true, false].flatMap(disableContentPaddings =>
+        [true, false].flatMap(stickyNotifications =>
+          [true, false].flatMap(stickyTableHeader =>
+            [true, false].map(stackNotifications => ({
+              description: `disableContentPaddings: ${disableContentPaddings}, stickyNotifications: ${stickyNotifications}, stickyTableHeader: ${stickyTableHeader}, stackNotifications: ${stackNotifications}`,
+              path: 'app-layout/with-stacked-notifications-and-table',
+              screenshotType: 'screenshotArea' as const,
+              configuration: { width: 1280, height: 900 },
+              setup: async ({ page }) => {
+                if (!disableContentPaddings) {
+                  await page.click('[data-id="toggle-content-paddings"]');
+                }
+                if (stickyNotifications) {
+                  await page.click('[data-id="toggle-sticky-notifications"]');
+                }
+                if (!stickyTableHeader) {
+                  await page.click('[data-id="toggle-sticky-table-header"]');
+                }
+                if (!stackNotifications) {
+                  await page.click('[data-id="toggle-stack-items"]');
+                }
+                await page.click('[data-id="add-notification"]');
+                await page.click('[data-id="add-notification"]');
+              },
+            }))
+          )
+        )
+      ),
+    },
+  ],
 };
 
 export default suite;

test/definitions/visual/app-layout-header.ts

@@ -3,10 +3,9 @@
 import { TestDefinition, TestSuite } from '../types';
 
 const suite: TestSuite = {
-  description: 'Headers',
+  description: 'AppLayout',
   componentName: 'app-layout',
   tests: [
-    // ── Headers ───────────────────────────────────────────────────────────
     {
       description: 'Headers',
       tests: [600, 1280].flatMap(width => [

test/definitions/visual/app-layout-multi.ts

@@ -3,22 +3,27 @@
 import { TestSuite } from '../types';
 
 const suite: TestSuite = {
-  description: 'Multiple instances',
+  description: 'AppLayout',
   componentName: 'app-layout',
-  tests: [600, 1280].flatMap(width => [
+  tests: [
     {
-      description: `simple (${width}px)`,
-      path: 'app-layout/multi-layout-simple',
-      screenshotType: 'viewport' as const,
-      configuration: { width },
+      description: 'Multiple instances',
+      tests: [600, 1280].flatMap(width => [
+        {
+          description: `simple (${width}px)`,
+          path: 'app-layout/multi-layout-simple',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+        },
+        {
+          description: `iframe (${width}px)`,
+          path: 'app-layout/multi-layout-iframe',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+        },
+      ]),
     },
-    {
-      description: `iframe (${width}px)`,
-      path: 'app-layout/multi-layout-iframe',
-      screenshotType: 'viewport' as const,
-      configuration: { width },
-    },
-  ]),
+  ],
 };
 
 export default suite;

test/definitions/visual/app-layout-responsive-tests.ts

@@ -9,7 +9,6 @@ import { TestSuite } from '../types';
 export function responsiveTests(width: number): TestSuite {
   return {
     description: `AppLayout responsive width ${width}px`,
-    componentName: 'app-layout',
     tests: [
       {
         description: 'default',

test/definitions/visual/app-layout-responsive.ts

@@ -4,9 +4,14 @@ import { TestSuite } from '../types';
 import { responsiveTests } from './app-layout-responsive-tests';
 
 const suite: TestSuite = {
-  description: 'Responsive',
+  description: 'AppLayout',
   componentName: 'app-layout',
-  tests: [600, 1280, 1400, 1920, 2540].map(width => responsiveTests(width)),
+  tests: [
+    {
+      description: 'Responsive',
+      tests: [600, 1280, 1400, 1920, 2540].map(width => responsiveTests(width)),
+    },
+  ],
 };
 
 export default suite;