chore: Integ test

cloudscape-design · Nov 11, 2024 · 705bcf4 · 705bcf4
1 parent d777274
commit 705bcf4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 48 deletions.
diff --git a/pages/app-layout/with-table-in-nested-layout.page.tsx b/pages/app-layout/with-table-in-nested-layout.page.tsx
@@ -11,6 +11,7 @@ function App() {
   return (
     <AppLayout
       toolsHide={true}
+      disableContentPaddings={true}
       content={
         <AppLayout
           navigationHide={true}
@@ -20,14 +21,12 @@ function App() {
                 <Header
                   variant="awsui-h1-sticky"
                   description="Demo page with footer"
-                  actions={<Button variant="primary"> Button </Button>}
+                  actions={<Button variant="primary">Button</Button>}
                 >
                   Sticky Scrollbar Example
                 </Header>
               }
               stickyHeader={true}
-              // manually set vertical offset to test this feature
-              // stickyHeaderVerticalOffset={99}
               variant="full-page"
               columnDefinitions={[
                 {
@@ -49,50 +48,13 @@ function App() {
                   cell: item => item.description || '-',
                 },
               ]}
-              items={[
-                {
-                  name: 'Item 1',
-                  alt: 'First',
-                  description: 'This is the first item',
-                  type: '1A',
-                  size: 'Small',
-                },
-                {
-                  name: 'Item 2',
-                  alt: 'Second',
-                  description: 'This is the second item',
-                  type: '1B',
-                  size: 'Large',
-                },
-                {
-                  name: 'Item 3',
-                  alt: 'Third',
-                  description: '-',
-                  type: '1A',
-                  size: 'Large',
-                },
-                {
-                  name: 'Item 4',
-                  alt: 'Fourth',
-                  description: 'This is the fourth item',
-                  type: '2A',
-                  size: 'Small',
-                },
-                {
-                  name: 'Item 5',
-                  alt: '-',
-                  description: 'This is the fifth item with a longer description',
-                  type: '2A',
-                  size: 'Large',
-                },
-                {
-                  name: 'Item 6',
-                  alt: 'Sixth',
-                  description: 'This is the sixth item',
-                  type: '1A',
-                  size: 'Small',
-                },
-              ]}
+              items={new Array(100).fill(null).map((_, index) => ({
+                name: `Item ${index}`,
+                alt: index,
+                description: `This is the ${index} item`,
+                type: '1A',
+                size: 'Small',
+              }))}
             />
           }
         />

diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts
@@ -5,7 +5,7 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
+import { getUrlParams, testIf, Theme } from './utils';
 
 import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js';
 
@@ -197,4 +197,15 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
       await expect(page.getNavPosition()).resolves.toEqual(navBefore);
     })
   );
+
+  testIf(theme === 'refresh-toolbar')(
+    'should keep header visible and in position while scrolling',
+    setupTest({ pageName: 'with-table-in-nested-layout' }, async page => {
+      const tableWrapper = createWrapper().findTable();
+      const { top: headerOldOffset } = await page.getBoundingBox(tableWrapper.findHeaderSlot().toSelector());
+      await page.windowScrollTo({ top: 200 });
+      const { top: headerNewOffset } = await page.getBoundingBox(tableWrapper.findHeaderSlot().toSelector());
+      expect(headerOldOffset).toEqual(headerNewOffset);
+    })
+  );
 });