Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: convert TableHeader to RTL #13204

Merged
merged 17 commits into from
Feb 23, 2023
Merged

test: convert TableHeader to RTL #13204

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e5674f4
feat(ContentSwitcher): preliminary unstable refactor
andreancardona Aug 26, 2021
7071564
Merge branch 'main' of github.com:carbon-design-system/carbon
andreancardona Sep 3, 2021
0d12bdb
Merge branch 'main' of github.com:carbon-design-system/carbon
andreancardona Sep 20, 2021
bc65356
Merge branch 'main' of github.com:carbon-design-system/carbon
andreancardona Sep 20, 2021
87c325d
Merge branch 'main' of github.com:carbon-design-system/carbon
andreancardona Sep 24, 2021
98bc81a
Merge branch 'main' of github.com:carbon-design-system/carbon
andreancardona Oct 8, 2021
2e02582
Merge branch 'main' of github.com:carbon-design-system/carbon
andreancardona Feb 20, 2023
4af4485
feat: update TableHeader to RTL
andreancardona Feb 21, 2023
dc0bcca
weird commit
andreancardona Feb 21, 2023
416962a
Merge branch 'main' into update-table-header-rtl
andreancardona Feb 21, 2023
d9b16d8
feat: update to RTL
andreancardona Feb 22, 2023
c3e2506
Merge branch 'main' into update-table-header-rtl
andreancardona Feb 22, 2023
ba611b5
Merge branch 'main' into update-table-header-rtl
andreancardona Feb 22, 2023
305a91c
Update packages/react/src/components/DataTable/__tests__/TableHeader-…
andreancardona Feb 23, 2023
bbf01a8
Merge branch 'main' into update-table-header-rtl
andreancardona Feb 23, 2023
d854232
Merge branch 'main' into update-table-header-rtl
francinelucca Feb 23, 2023
c430e5f
Merge branch 'main' into update-table-header-rtl
kodiakhq[bot] Feb 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 176 additions & 65 deletions packages/react/src/components/DataTable/__tests__/TableHeader-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,189 @@
/**
* Copyright IBM Corp. 2016, 2023
* Copyright IBM Corp. 2022, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import { mount } from 'enzyme';
import { Table, TableHead, TableHeader, TableRow } from '../';

describe('DataTable.TableHeader', () => {
let mockProps;

beforeEach(() => {
mockProps = {
isSortHeader: false,
onClick: jest.fn(),
sortDirection: 'NONE',
};
});
import { Table, TableHead, TableRow, TableHeader } from '../';
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';

it('should render', () => {
const simpleHeader = mount(
<Table>
<TableHead>
<TableRow>
<TableHeader {...mockProps}>Header</TableHeader>
</TableRow>
</TableHead>
</Table>
);
expect(simpleHeader).toMatchSnapshot();

const sortHeader = mount(
<Table>
<TableHead>
<TableRow>
<TableHeader {...mockProps} isSortHeader>
Header
</TableHeader>
</TableRow>
</TableHead>
</Table>
);
expect(sortHeader).toMatchSnapshot();
});
describe('TableHeader', () => {
describe('renders as expected - Component API', () => {
it('should render', () => {
const { container } = render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id">Header</TableHeader>
</TableRow>
</TableHead>
</Table>
);
expect(container).toMatchSnapshot();
});

it('should spread extra props onto outermost element', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" test="test" />
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByTestId('test-id')).toHaveAttribute('test', 'test');
});

it('should render children as expected', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id">
add appropriate children
</TableHeader>
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByText('add appropriate children')).toBeInTheDocument();
});

it('should support a custom `className` prop on the outermost element', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" className="custom-class" />
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
});

it('should respect colSpan prop', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" colSpan={4} />
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByTestId('test-id')).toHaveAttribute('colSpan', '4');
});

it('should respect id prop', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" id={'id'} />
</TableRow>
</TableHead>
</Table>
);

it('should have an active class if it is the sort header and the sort state is not NONE', () => {
const wrapper = mount(
<Table>
<TableHead>
<TableRow>
<TableHeader {...mockProps} isSortHeader>
Header
</TableHeader>
</TableRow>
</TableHead>
</Table>
);
expect(wrapper).toMatchSnapshot();
expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'id');
});

it('should respect isSortHeader prop', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader
data-testid="test-id"
isSortHeader
isSortable
sortDirection={'DESC'}
/>
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByTestId('test-id')).toHaveClass(
'cds--table-sort--descending'
);
});

it('should respect isSortable prop', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" isSortable />
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByTestId('test-id')).toHaveClass('cds--table-sort');
});

it('should respect scope prop', () => {
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" scope={'row'} />
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByTestId('test-id')).toHaveAttribute('scope', 'row');
});

it('should respect translateWithId prop', () => {
const translateWithId = () => {
return 'id translation';
};

render(
<Table>
<TableHead>
<TableRow>
<TableHeader
data-testid="test-id"
translateWithId={translateWithId}
isSortable
/>
</TableRow>
</TableHead>
</Table>
);

expect(screen.getByText('id translation')).toBeInTheDocument();
});
});

it('should have an active and ascending class if sorting by ASC', () => {
const wrapper = mount(
<Table>
<TableHead>
<TableRow>
<TableHeader {...mockProps} isSortHeader sortDirection="ASC">
Header
</TableHeader>
</TableRow>
</TableHead>
</Table>
);
expect(wrapper).toMatchSnapshot();
describe('behaves as expected', () => {
it('should call onClick when expected', () => {
const onClick = jest.fn();
render(
<Table>
<TableHead>
<TableRow>
<TableHeader data-testid="test-id" onClick={onClick} isSortable />
</TableRow>
</TableHead>
</Table>
);

userEvent.click(screen.getByRole('button'), 'test');
expect(onClick).toHaveBeenCalled();
});
});
});
Loading