Skip to content

Commit

Permalink
removal of passign variant into useStickyHeader
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpitcock
dpitcock committed Feb 5, 2025
1 parent 7630ced commit f2a71f3
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 172 deletions.
322 changes: 159 additions & 163 deletions src/container/__tests__/sticky-header.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { act, renderHook } from '../../__tests__/render-hook';
import { ContainerProps } from '../interfaces';
import { useStickyHeader } from '../use-sticky-header';

jest.mock('../../../lib/components/container/use-sticky-header', () => ({
useStickyHeader: () => ({ isSticky: true }),
}));
Expand All @@ -22,215 +22,211 @@ beforeEach(() => {
jest.resetAllMocks();
});

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 __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, false, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to false when __disableMobile is false', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: -200 });
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 { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, true));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: -200 });

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, true));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to false when rootTop headerTop are equal and headerTop is not 0', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
test('should set isStuck to false when rootTop headerTop are equal and headerTop is not 0', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to true when rootTop less than a headerTop at 0', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: -100 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });
test('should set isStuck to true when rootTop less than a headerTop at 0', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: -100 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });

expect(result.current.isStuck).toBe(true);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to false when rootTop and headerTop are equal at 0', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });
expect(result.current.isStuck).toBe(true);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });
test('should set isStuck to false when rootTop and headerTop are equal at 0', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck correctly when rootTop is less than headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
test('should set isStuck to true when rootTop is less than headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

expect(result.current.isStuck).toBe(variant === 'full-page');
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to false when rootTop is larger than than nonZero headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
expect(result.current.isStuck).toBe(true);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
test('should set isStuck to false when rootTop is larger than than nonZero headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to false when rootTop is larger than than zero headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });
test('should set isStuck to false when rootTop is larger than than zero headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 0 });

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should not set isStuck to true when rootTop has a border and is larger than than headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 199 });
rootRef.current.style.borderTopWidth = '1px';

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
expect(result.current.isStuck).toBe(false);
});

expect(result.current.isStuck).toBe(false);
test('should not set isStuck to true when rootTop has a border and is larger than than headerTop', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 199 });
rootRef.current.style.borderTopWidth = '1px';

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should set isStuck to false when headerRef is null', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: null,
};
test('should set isStuck to false when headerRef is null', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});
const headerRef = {
current: null,
};

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('scroll'));
});

test('should not react to synthetic window resize events', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
expect(result.current.isStuck).toBe(false);
});

const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
test('should not react to synthetic window resize events', () => {
const rootRef = {
current: document.createElement('div'),
};
rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });

const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, variant, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('resize'));
});
const headerRef = {
current: document.createElement('div'),
};
headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });

expect(result.current.isStuck).toBe(false);
const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
act(() => {
window.dispatchEvent(new Event('resize'));
});

expect(result.current.isStuck).toBe(false);
});
1 change: 0 additions & 1 deletion src/container/internal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export default function InternalContainer({
const { isSticky, isStuck, stickyStyles } = useStickyHeader(
rootRef,
headerRef,
variant,
__stickyHeader,
__stickyOffset,
__mobileStickyOffset,
Expand Down
Loading

0 comments on commit f2a71f3

Please sign in to comment.