Skip to content

Commit

Permalink
feat: update TableHeader to RTL
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreancardona
andreancardona committed Feb 21, 2023
1 parent 2e02582 commit 4af4485
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 155 deletions.
24 changes: 13 additions & 11 deletions packages/react/src/components/DataTable/__tests__/TableHeader-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Copyright IBM Corp. 2016, 2018
* Copyright IBM Corp. 2016, 2018, 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 '../';
import { render } from '@testing-library/react';

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

beforeEach(() => {
Expand All @@ -21,7 +21,7 @@ describe('DataTable.TableHeader', () => {
});

it('should render', () => {
const simpleHeader = mount(
const { container } = render(
<Table>
<TableHead>
<TableRow>
Expand All @@ -30,9 +30,11 @@ describe('DataTable.TableHeader', () => {
</TableHead>
</Table>
);
expect(simpleHeader).toMatchSnapshot();
expect(container).toMatchSnapshot();
});

const sortHeader = mount(
it('should render with sortHeader', () => {
const { container } = render(
<Table>
<TableHead>
<TableRow>
Expand All @@ -43,11 +45,11 @@ describe('DataTable.TableHeader', () => {
</TableHead>
</Table>
);
expect(sortHeader).toMatchSnapshot();
expect(container).toMatchSnapshot();
});

it('should have an active class if it is the sort header and the sort state is not NONE', () => {
const wrapper = mount(
const { container } = render(
<Table>
<TableHead>
<TableRow>
Expand All @@ -58,11 +60,11 @@ describe('DataTable.TableHeader', () => {
</TableHead>
</Table>
);
expect(wrapper).toMatchSnapshot();
expect(container).toMatchSnapshot();
});

it('should have an active and ascending class if sorting by ASC', () => {
const wrapper = mount(
const { container } = render(
<Table>
<TableHead>
<TableRow>
Expand All @@ -73,6 +75,6 @@ describe('DataTable.TableHeader', () => {
</TableHead>
</Table>
);
expect(wrapper).toMatchSnapshot();
expect(container).toMatchSnapshot();
});
});
216 changes: 72 additions & 144 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,177 +1,105 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DataTable.TableHeader should have an active and ascending class if sorting by ASC 1`] = `
<Table
isSortable={false}
overflowMenuOnHover={true}
>
exports[`TableHeader should have an active and ascending class if sorting by ASC 1`] = `
<div>
<div
className="cds--data-table-content"
class="cds--data-table-content"
>
<table
aria-describedby={null}
aria-labelledby={null}
className="cds--data-table"
class="cds--data-table"
>
<TableHead>
<thead>
<TableRow>
<tr>
<TableHeader
isSortHeader={true}
isSortable={false}
onClick={[MockFunction]}
scope="col"
sortDirection="ASC"
translateWithId={[Function]}
>
<th
scope="col"
>
<div
className="cds--table-header-label"
>
Header
</div>
</th>
</TableHeader>
</tr>
</TableRow>
</thead>
</TableHead>
<thead>
<tr>
<th
scope="col"
>
<div
class="cds--table-header-label"
>
Header
</div>
</th>
</tr>
</thead>
</table>
</div>
</Table>
</div>
`;

exports[`DataTable.TableHeader should have an active class if it is the sort header and the sort state is not NONE 1`] = `
<Table
isSortable={false}
overflowMenuOnHover={true}
>
exports[`TableHeader should have an active class if it is the sort header and the sort state is not NONE 1`] = `
<div>
<div
className="cds--data-table-content"
class="cds--data-table-content"
>
<table
aria-describedby={null}
aria-labelledby={null}
className="cds--data-table"
class="cds--data-table"
>
<TableHead>
<thead>
<TableRow>
<tr>
<TableHeader
isSortHeader={true}
isSortable={false}
onClick={[MockFunction]}
scope="col"
sortDirection="NONE"
translateWithId={[Function]}
>
<th
scope="col"
>
<div
className="cds--table-header-label"
>
Header
</div>
</th>
</TableHeader>
</tr>
</TableRow>
</thead>
</TableHead>
<thead>
<tr>
<th
scope="col"
>
<div
class="cds--table-header-label"
>
Header
</div>
</th>
</tr>
</thead>
</table>
</div>
</Table>
</div>
`;

exports[`DataTable.TableHeader should render 1`] = `
<Table
isSortable={false}
overflowMenuOnHover={true}
>
exports[`TableHeader should render 1`] = `
<div>
<div
className="cds--data-table-content"
class="cds--data-table-content"
>
<table
aria-describedby={null}
aria-labelledby={null}
className="cds--data-table"
class="cds--data-table"
>
<TableHead>
<thead>
<TableRow>
<tr>
<TableHeader
isSortHeader={false}
isSortable={false}
onClick={[MockFunction]}
scope="col"
sortDirection="NONE"
translateWithId={[Function]}
>
<th
scope="col"
>
<div
className="cds--table-header-label"
>
Header
</div>
</th>
</TableHeader>
</tr>
</TableRow>
</thead>
</TableHead>
<thead>
<tr>
<th
scope="col"
>
<div
class="cds--table-header-label"
>
Header
</div>
</th>
</tr>
</thead>
</table>
</div>
</Table>
</div>
`;

exports[`DataTable.TableHeader should render 2`] = `
<Table
isSortable={false}
overflowMenuOnHover={true}
>
exports[`TableHeader should render with sortHeader 1`] = `
<div>
<div
className="cds--data-table-content"
class="cds--data-table-content"
>
<table
aria-describedby={null}
aria-labelledby={null}
className="cds--data-table"
class="cds--data-table"
>
<TableHead>
<thead>
<TableRow>
<tr>
<TableHeader
isSortHeader={true}
isSortable={false}
onClick={[MockFunction]}
scope="col"
sortDirection="NONE"
translateWithId={[Function]}
>
<th
scope="col"
>
<div
className="cds--table-header-label"
>
Header
</div>
</th>
</TableHeader>
</tr>
</TableRow>
</thead>
</TableHead>
<thead>
<tr>
<th
scope="col"
>
<div
class="cds--table-header-label"
>
Header
</div>
</th>
</tr>
</thead>
</table>
</div>
</Table>
</div>
`;

0 comments on commit 4af4485

Please sign in to comment.