@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
173 lines (172 loc) • 6.72 kB
JavaScript
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Header } from "../Drawer";
const paddingSizes = ['small', 'medium', 'large']; // describe('Header Component', () => {
// describe('Snapshots', () => {
// test('renders with default props', () => {
// const { asFragment } = render(<Header />);
// expect(asFragment()).toMatchSnapshot();
// });
// test.each(paddingSizes)('renders Header with paddingSize - %s', (paddingSize) => {
// const { asFragment } = render(<Header paddingSize={paddingSize} />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with flexible set to true', () => {
// const { asFragment } = render(<Header flexible />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with isIconBold set to true', () => {
// const { asFragment } = render(<Header isIconBold />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with isBoxIcon set to true', () => {
// const { asFragment } = render(<Header isBoxIcon />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with custom className', () => {
// const { asFragment } = render(<Header className="custom-header" />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with title', () => {
// const { asFragment } = render(<Header title="Header Title" />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with closeTitle', () => {
// const { asFragment } = render(<Header closeTitle="Close Header" />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with iconName and iconSize', () => {
// const { asFragment } = render(<Header iconName="ZD-icon" iconSize="24" />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with getChildren function', () => {
// const { asFragment } = render(<Header getChildren={() => <div>Child Content</div>} />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with getTitleChildren function', () => {
// const { asFragment } = render(<Header getTitleChildren={() => <div>Title Child</div>} />);
// expect(asFragment()).toMatchSnapshot();
// });
// test('renders Header with dataId', () => {
// const { asFragment } = render(<Header dataId="header-id" />);
// expect(asFragment()).toMatchSnapshot();
// });
// });
// describe('Interactions', () => {
// test('calls onClose handler when close button is clicked', () => {
// const mockOnClose = jest.fn();
// const { getByRole } = render(<Header onClose={mockOnClose} />);
// const closeButton = getByRole('button', { name: /close/i });
// fireEvent.click(closeButton);
// expect(mockOnClose).toHaveBeenCalledTimes(1);
// });
// test('calls onIconClick handler when icon is clicked', () => {
// const mockOnIconClick = jest.fn();
// const { getByRole } = render(<Header iconName="ZD-icon" onIconClick={mockOnIconClick} />);
// const iconButton = getByRole('button');
// fireEvent.click(iconButton);
// expect(mockOnIconClick).toHaveBeenCalledTimes(1);
// });
// });
// });
describe('Header Component - Title Prop Combinations', () => {
test('renders with default props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, null));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title only', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title"
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title and close button', () => {
const mockOnClose = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
onClose: mockOnClose
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title and icon', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
iconName: "ZD-icon",
iconSize: "24"
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title, icon, and close button', () => {
const mockOnClose = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
iconName: "ZD-icon",
iconSize: "24",
onClose: mockOnClose
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title and custom className', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
className: "custom-header"
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title and getTitleChildren function', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title, icon, and getTitleChildren function', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
iconName: "ZD-icon",
iconSize: "24",
getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title, close button, and getTitleChildren function', () => {
const mockOnClose = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
onClose: mockOnClose,
getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
}));
expect(asFragment()).toMatchSnapshot();
});
test('renders Header with title, icon, close button, and getTitleChildren function', () => {
const mockOnClose = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Header, {
title: "Header Title",
iconName: "ZD-icon",
iconSize: "24",
onClose: mockOnClose,
getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
}));
expect(asFragment()).toMatchSnapshot();
});
});