@kadconsulting/dry
Version:
KAD Reusable Component Library
82 lines • 3.5 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useRef } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import FolderSelector from './FolderSelector';
describe('FolderSelector', () => {
it('renders tabs correctly', () => {
// ARRANGE
const tabs = [
{ id: 'tab1', title: 'Tab 1', content: 'Content for Tab 1' },
{ id: 'tab2', title: 'Tab 2', content: 'Content for Tab 2' },
];
// ACT
render(_jsx(FolderSelector, { tabs: tabs }));
// ASSERT
tabs.forEach((tab) => {
expect(screen.getByText(tab.title)).toBeInTheDocument();
});
});
it('changes active tab when clicked', async () => {
// ARRANGE
const tabs = [
{ id: 'tab1', title: 'Tab 1', content: 'Content for Tab 1' },
{ id: 'tab2', title: 'Tab 2', content: 'Content for Tab 2' },
];
// ACT
render(_jsx(FolderSelector, { tabs: tabs }));
userEvent.click(screen.getByText('Tab 2'));
// ASSERT
await waitFor(() => {
expect(screen.getByText('Content for Tab 2')).toBeInTheDocument();
});
});
it('changes active tab using ref', () => {
// ARRANGE
const tabs = [
{ id: 'tab1', title: 'Tab 1', content: 'Content for Tab 1' },
{ id: 'tab2', title: 'Tab 2', content: 'Content for Tab 2' },
];
const ref = useRef(null);
// ACT
render(_jsx(FolderSelector, { ref: ref, tabs: tabs }));
ref.current?.setActiveTab('tab2');
// ASSERT
expect(screen.getByText('Content for Tab 2')).toBeInTheDocument();
});
// Test for rendering no tabs when tabs array is empty
it('renders no tabs when tabs array is empty', () => {
render(_jsx(FolderSelector, { tabs: [] }));
expect(screen.queryByRole('button')).not.toBeInTheDocument();
});
// Test for correct initial active tab
it('has the first tab active by default', () => {
const tabs = [
{ id: 'tab1', title: 'Tab 1', content: 'Content for Tab 1' },
{ id: 'tab2', title: 'Tab 2', content: 'Content for Tab 2' },
];
render(_jsx(FolderSelector, { tabs: tabs }));
expect(screen.getByText('Content for Tab 1')).toBeInTheDocument();
});
// Test for correct active tab class application
it('applies active class to the active tab', () => {
const tabs = [
{ id: 'tab1', title: 'Tab 1', content: 'Content for Tab 1' },
{ id: 'tab2', title: 'Tab 2', content: 'Content for Tab 2' },
];
render(_jsx(FolderSelector, { tabs: tabs }));
const firstTabButton = screen.getByText('Tab 1').closest('button');
expect(firstTabButton).toHaveClass('active');
});
// Test for rendering custom content in tabs
it('renders custom content in tabs', () => {
const tabs = [
{ id: 'tab1', title: 'Tab 1', content: _jsx("div", { children: "Custom Content 1" }) },
{ id: 'tab2', title: 'Tab 2', content: _jsx("div", { children: "Custom Content 2" }) },
];
render(_jsx(FolderSelector, { tabs: tabs }));
expect(screen.getByText('Custom Content 1')).toBeInTheDocument();
expect(screen.getByText('Custom Content 2')).toBeInTheDocument();
});
});
//# sourceMappingURL=FolderSelector.test.js.map