@wix/design-system
Version:
@wix/design-system
98 lines • 3.56 kB
JavaScript
import React from 'react';
import { createRendererWithUniDriver, cleanup, waitFor, } from '../../utils/test-utils/unit';
import { timingMap } from '../constants';
import Toggle from './Toggle';
import { togglePrivateDriverFactory } from './Toggle.private.uni.driver';
const createToggle = (props = {}) => {
return (React.createElement(Toggle, { ...props, dataHook: "stylesHook" },
React.createElement("div", null, "Children")));
};
describe(Toggle.displayName, () => {
const render = createRendererWithUniDriver(togglePrivateDriverFactory);
beforeAll(() => {
Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
configurable: true,
value: 100,
});
});
afterAll(() => {
Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
configurable: true,
value: 0,
});
});
afterEach(cleanup);
it('should render', async () => {
const { driver } = render(createToggle());
expect(await driver.exists()).toBe(true);
});
it('should unmount children after animation ends', async () => {
const { driver, rerender } = render(createToggle({
show: true,
unmountOnExit: true,
}));
expect(await driver.getContentText()).toEqual('Children');
rerender(createToggle({
show: false,
unmountOnExit: true,
}));
await waitFor(async () => {
expect(await driver.getContentText()).toEqual('');
});
});
it('should call onEnd callback on transition end', async () => {
const onEndCallback = vi.fn();
const { rerender } = render(createToggle({
timeout: timingMap['medium01'],
show: true,
onEnd: onEndCallback,
}));
rerender(createToggle({
timeout: timingMap['medium01'],
show: false,
onEnd: onEndCallback,
}));
await waitFor(() => {
expect(onEndCallback).toHaveBeenCalled();
});
});
it('should call onStart callback on transition start ', async () => {
const onStartCallback = vi.fn();
const { rerender } = render(createToggle({
timeout: timingMap['medium01'],
show: false,
onStart: onStartCallback,
}));
rerender(createToggle({
timeout: timingMap['medium01'],
show: true,
onStart: onStartCallback,
}));
await waitFor(async () => {
expect(onStartCallback).toHaveBeenCalled();
});
});
it('should render children on enter', async () => {
const { driver } = render(createToggle({
show: true,
mountOnEnter: false,
unmountOnExit: false,
}));
expect(await driver.getContentText()).toEqual('Children');
});
it.each `
mountOnEnter | unmountOnExit | expected
${false} | ${false} | ${'Children'}
${true} | ${false} | ${''}
${false} | ${true} | ${''}
${true} | ${true} | ${''}
`('should mount/unmount children by when mountOnEnter is $mountOnEnter and unmountOnExit is $unmountOnExit ', async ({ mountOnEnter, unmountOnExit, expected }) => {
const { driver } = render(createToggle({
show: false,
mountOnEnter,
unmountOnExit,
}));
expect(await driver.getContentText()).toEqual(expected);
});
});
//# sourceMappingURL=Toggle.spec.js.map