@wix/design-system
Version:
@wix/design-system
131 lines • 6.49 kB
JavaScript
import React from 'react';
import { createRendererWithUniDriver, cleanup, } from '../utils/test-utils/react';
import Page from './Page';
import { pagePrivateUniDriverFactory as pageUniDriverFactory } from './Page.private.uni.driver';
import { usePageScrollContext } from './PageScrollContext';
const Content = () => React.createElement("div", null, "content");
const Tail = () => React.createElement("div", null, "tail");
const renderPageWithProps = (props = {}) => (React.createElement(Page, { ...props },
React.createElement(Page.Header, { title: "title" }),
React.createElement(Page.Content, null,
React.createElement(Content, null))));
describe('Page', () => {
const render = createRendererWithUniDriver(pageUniDriverFactory);
const stub = (console.error = vi.fn());
afterEach(() => {
vi.resetModules();
stub.mockReset();
});
afterEach(() => cleanup());
it('should initialize component', async () => {
const { driver } = render(renderPageWithProps());
expect(await driver.exists()).toBe(true);
});
describe('PageContext', () => {
it('should expose scroll element via context', async () => {
const onScrollSpy = vi.fn();
function InternalComponent() {
const { scrollableContentRef } = usePageScrollContext();
React.useEffect(() => {
const handleScroll = event => {
onScrollSpy(event);
};
const scrollableContent = scrollableContentRef.current;
if (scrollableContent) {
scrollableContent.addEventListener('scroll', handleScroll);
}
return () => {
if (scrollableContent) {
scrollableContent.removeEventListener('scroll', handleScroll);
}
};
}, [scrollableContentRef]);
return React.createElement("div", { "data-hook": "internal-component" });
}
const { driver } = render(React.createElement(Page, null,
React.createElement(Page.Header, { title: "title" }),
React.createElement(Page.Content, null,
React.createElement(InternalComponent, null))));
await driver.scrollableContainer._scrollContentTo({ y: 10 });
expect(onScrollSpy).toHaveBeenCalledTimes(1);
});
});
describe('Page.Header sticky', () => {
it('should contain a wrapping div that fixes sticky issue for safari 12, 13', () => {
const { container } = render(renderPageWithProps({}));
const magicFixWrapperExists = !!container.querySelector('[data-hook="safari-12-13-sticky-fix"]');
expect(magicFixWrapperExists).toBe(true);
});
});
describe('backgroundImage', () => {
it('should initialize component with background image', async () => {
const { driver } = render(renderPageWithProps({ backgroundImageUrl: '/some/image' }));
expect(await driver.backgroundImageExists()).toBe(true);
});
it('should not initialize component with background image', async () => {
const { driver } = render(renderPageWithProps());
expect(await driver.backgroundImageExists()).toBe(false);
});
});
describe('customClassName', () => {
it('should have custom className', async () => {
const { driver } = render(renderPageWithProps({ className: 'myClass' }));
expect(await driver.hasClass('myClass')).toBe(true);
});
});
describe('gradientClassName', () => {
it('should initialize component with gradient class name', async () => {
const { driver } = render(renderPageWithProps({ gradientClassName: 'class' }));
expect(await driver.gradientClassNameExists()).toBe(true);
});
it('should not initialize component with gradient class name by default', async () => {
const { driver } = render(renderPageWithProps());
expect(await driver.gradientClassNameExists()).toBe(false);
});
});
describe('gradient size', () => {
it('should be 36px by default', async () => {
const { driver } = render(renderPageWithProps({ gradientClassName: 'class' }));
expect(await driver.gradientContainerHeight()).toBe('36px');
});
it('should not render 0 when maximized but header height delta is 0', async () => {
const { driver } = render(renderPageWithProps());
expect(await driver.getPageHtml()).not.toContain('>0<');
});
it('should be zero when Tail exist', async () => {
const props = { gradientClassName: 'class' };
const { driver } = render(React.createElement(Page, { ...props },
React.createElement(Page.Header, null),
React.createElement(Page.Tail, null,
React.createElement(Tail, null)),
React.createElement(Page.Content, null,
React.createElement(Content, null))));
expect(await driver.gradientContainerHeight()).toBe('0px');
});
});
describe('Page.Tail', () => {
it('should attach a tail component', async () => {
const { driver } = render(React.createElement(Page, null,
React.createElement(Page.Header, { title: "title" }),
React.createElement(Page.Tail, null,
React.createElement(Tail, null)),
React.createElement(Page.Content, null,
React.createElement(Content, null))));
expect(await driver.tailExists()).toBe(true);
});
it('should not attach a tail component', async () => {
const { driver } = render(renderPageWithProps());
expect(await driver.tailExists()).toBe(false);
});
});
describe('DOM calculations', () => {
it.skip('should recalculate component heights when re-rendered', () => {
// TODO:
});
});
describe('Header layer', () => {
it('should NOT block clicks on content close to header', async () => { });
it('should NOT block clicks on content close to header when MiniHeader appears', async () => { });
});
});
//# sourceMappingURL=Page.spec.js.map