@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
152 lines • 4.46 kB
JavaScript
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
import Drawer from "../Drawer";
beforeEach(() => {
setGlobalId(0);
});
afterEach(() => {
cleanup();
});
const sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
const palettes = ['dark', 'default', 'darkLight', 'plain'];
const subDrawerSizes = ['xsmall', 'small', 'medium'];
describe('Drawer Component Snapshots', () => {
test('renders with default props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(sizes)('renders Drawer with size - %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true,
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(palettes)('renders Drawer with palette - %s', palette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true,
palette: palette
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(subDrawerSizes)('renders Drawer with subDrawerSize - %s', subDrawerSize => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true,
subDrawerSize: subDrawerSize,
subDrawerActive: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders with custom className', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true,
customClass: "custom-drawer"
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with subDrawerActive set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
subDrawerActive: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with isActive set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with needAutoZindex set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
needAutoZindex: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with needFocusScope set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
needFocusScope: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with flexible set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
flexible: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with isIconBold set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isIconBold: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with isBoxIcon set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isBoxIcon: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with needFreeze set to true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
needFreeze: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders with customProps', () => {
const customProps = {
'aria-label': 'Custom Drawer',
'data-custom': 'customValue'
};
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
isActive: true,
customProps: customProps
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Drawer with all options combined', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Drawer, {
size: "medium",
palette: "default",
subDrawerActive: true,
subDrawerSize: "small",
customClass: "combined-drawer",
isActive: true,
needFreeze: true,
needAutoZindex: true
}));
expect(asFragment()).toMatchSnapshot();
});
});