updating useStickyHeader tests

cloudscape-design · Feb 5, 2025 · 7630ced · 7630ced
1 parent 118fcd5
commit 7630ced
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/src/container/__tests__/sticky-header.test.tsx b/src/container/__tests__/sticky-header.test.tsx
@@ -22,9 +22,47 @@ beforeEach(() => {
   jest.resetAllMocks();
 });
 
-describe.each(['embedded', 'full-page', 'cards', 'default', 'stacked'] as Array<
-  ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards'
->)('useStickyHeader with variant %s', variant => {
+describe.each(['embedded', 'full-page', 'cards', 'default', 'stacked', 'borderless'] as Array<
+  ContainerProps['variant'] | 'embedded' | 'full-page' | 'borderless' | 'cards'
+>)('useStickyHeader with variant of %s', variant => {
+  test('should set isStuck to false when __stickyHeader is false', () => {
+    const rootRef = {
+      current: document.createElement('div'),
+    };
+    rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
+
+    const headerRef = {
+      current: document.createElement('div'),
+    };
+    headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: -200 });
+
+    const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, false, 0, 0, false));
+    act(() => {
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(result.current.isStuck).toBe(false);
+  });
+
+  test('should set isStuck to false when __disableMobile is false', () => {
+    const rootRef = {
+      current: document.createElement('div'),
+    };
+    rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
+
+    const headerRef = {
+      current: document.createElement('div'),
+    };
+    headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: -200 });
+
+    const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, true));
+    act(() => {
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(result.current.isStuck).toBe(false);
+  });
+
   test('should set isStuck to false when rootTop headerTop are equal and headerTop is not 0', () => {
     const rootRef = {
       current: document.createElement('div'),

diff --git a/src/container/use-sticky-header.ts b/src/container/use-sticky-header.ts
@@ -45,7 +45,10 @@ export const StickyHeaderContext = createContext<StickyHeaderContextProps>({
 export const useStickyHeader = (
   rootRef: RefObject<HTMLDivElement>,
   headerRef: RefObject<HTMLDivElement>,
-  variant: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards' = 'default',
+  /**
+   * variant extends those from the ContainerProps to also include those from table
+   */
+  variant: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards' | 'borderless' = 'default',
   __stickyHeader?: boolean,
   __stickyOffset?: number,
   __mobileStickyOffset?: number,
@@ -112,6 +115,7 @@ export const useStickyHeader = (
     },
     [rootRef, headerRef, variant]
   );
+
   useEffect(() => {
     if (isSticky) {
       const controller = new AbortController();