|
1 | 1 | import React from 'react'; |
2 | 2 | import { render } from '@testing-library/react'; |
3 | | -import { DataViewTable } from './DataViewTable'; |
| 3 | +import { DataViewTable, DataViewTrTree } from './DataViewTable'; |
4 | 4 |
|
5 | 5 | interface Repository { |
6 | 6 | name: string; |
7 | 7 | branches: string | null; |
8 | 8 | prs: string | null; |
9 | 9 | workspaces: string; |
10 | 10 | lastCommit: string; |
| 11 | + children?: Repository[]; |
11 | 12 | } |
12 | 13 |
|
13 | 14 | const repositories: Repository[] = [ |
14 | | - { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, |
15 | | - { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' }, |
16 | | - { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }, |
17 | | - { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' }, |
18 | | - { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' }, |
19 | | - { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' } |
| 15 | + { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' }, |
| 16 | + { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' }, |
| 17 | + { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' }, |
| 18 | + { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' }, |
| 19 | + { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' }, |
| 20 | + { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' } |
20 | 21 | ]; |
21 | 22 |
|
22 | | -const rows = repositories.map(repo => ({ |
23 | | - row: Object.values(repo), |
| 23 | +const rows = repositories.map(repo => ({ row: Object.values(repo) })); |
| 24 | + |
| 25 | +const repositoriesTree: Repository[] = [ |
| 26 | + { |
| 27 | + name: 'Repository one', |
| 28 | + branches: 'Branch one', |
| 29 | + prs: 'Pull request one', |
| 30 | + workspaces: 'Workspace one', |
| 31 | + lastCommit: 'Timestamp one', |
| 32 | + children: [ |
| 33 | + { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' }, |
| 34 | + { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' }, |
| 35 | + ] |
| 36 | + }, |
| 37 | + { |
| 38 | + name: 'Repository four', |
| 39 | + branches: 'Branch four', |
| 40 | + prs: 'Pull request four', |
| 41 | + workspaces: 'Workspace four', |
| 42 | + lastCommit: 'Timestamp four', |
| 43 | + children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ] |
| 44 | + }, |
| 45 | + { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' } |
| 46 | +]; |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | +const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({ |
| 51 | + row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ], |
| 52 | + id: repo.name, // unique ID for each row |
| 53 | + ...(repo.children |
| 54 | + ? { |
| 55 | + children: buildRows(repo.children) // build rows for children |
| 56 | + } |
| 57 | + : {}) |
24 | 58 | })); |
25 | 59 |
|
| 60 | +const treeRows = buildRows(repositoriesTree); |
| 61 | + |
26 | 62 | const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ]; |
27 | 63 |
|
28 | 64 | const ouiaId = 'TableExample'; |
29 | 65 |
|
30 | 66 | describe('DataViewTable component', () => { |
31 | | - test('should render correctly', () => { |
| 67 | + test('should render a basic table correctly', () => { |
32 | 68 | const { container } = render( |
33 | 69 | <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} /> |
34 | 70 | ); |
35 | 71 | expect(container).toMatchSnapshot(); |
36 | 72 | }); |
| 73 | + |
| 74 | + test('should render a tree table correctly', () => { |
| 75 | + const { container } = render( |
| 76 | + <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} /> |
| 77 | + ); |
| 78 | + expect(container).toMatchSnapshot(); |
| 79 | + }); |
37 | 80 | }); |
0 commit comments