Merge pull request #5702 from matuzalemsteles/LPS-199816

chore(@clayui/core): add the basic rendering test suite
liferay · Oct 25, 2023 · c703f3b · c703f3b
2 parents e95768d + 2f9545f
commit c703f3b
Show file tree

Hide file tree

Showing 9 changed files with 1,372 additions and 42 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -245,6 +245,7 @@ module.exports = {
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	resolver: `${__dirname}/scripts/jest-clay-lerna-resolver`,
 	setupFiles: [`${__dirname}/scripts/setupTests.ts`, 'raf/polyfill'],
+	setupFilesAfterEnv: [`${__dirname}/scripts/jest-setup.ts`],
 	testEnvironment: 'jsdom',
 	testMatch: [
 		`${process.cwd()}/**/__tests__/**/*.[jt]s?(x)`,

diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
 		"@storybook/preset-scss": "^1.0.3",
 		"@storybook/react": "^6.5.10",
 		"@testing-library/dom": "^8.9.0",
-		"@testing-library/jest-dom": "^5.14.1",
+		"@testing-library/jest-dom": "5",
 		"@testing-library/react": "^12.1.2",
 		"@testing-library/user-event": "^13.2.1",
 		"@types/d3": "^5.7.2",

diff --git a/packages/clay-core/src/table/Body.tsx b/packages/clay-core/src/table/Body.tsx
@@ -86,13 +86,15 @@ function BodyInner<T extends Record<string, any>>(
 				<Collection<T>
 					itemContainer={useCallback(
 						({children, item, keyValue}: ItemProps<any>) =>
-							React.cloneElement(children, {
-								_expandable: item._expandable,
-								_index: item._index,
-								_level: item._level,
-								_size: item._size,
-								keyValue,
-							}),
+							item
+								? React.cloneElement(children, {
+										_expandable: item._expandable,
+										_index: item._index,
+										_level: item._level,
+										_size: item._size,
+										keyValue,
+								  })
+								: children,
 						[]
 					)}
 					items={items}

diff --git a/packages/clay-core/src/table/__tests__/BasicRendering.tsx b/packages/clay-core/src/table/__tests__/BasicRendering.tsx
@@ -0,0 +1,182 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {cleanup, render} from '@testing-library/react';
+import React from 'react';
+
+import {Body, Cell, Head, Row, Table} from '../../';
+
+describe('Table basic rendering', () => {
+	afterEach(cleanup);
+
+	it('render static content', () => {
+		const {container} = render(
+			<Table>
+				<Head>
+					<Cell key="name">Name</Cell>
+					<Cell key="type">Type</Cell>
+				</Head>
+
+				<Body>
+					<Row>
+						<Cell>Foo</Cell>
+						<Cell>Foo</Cell>
+					</Row>
+					<Row>
+						<Cell>Bar</Cell>
+						<Cell>Bar</Cell>
+					</Row>
+					<Row>
+						<Cell>Baz</Cell>
+						<Cell>Baz</Cell>
+					</Row>
+				</Body>
+			</Table>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render dynamic content', () => {
+		const columns = [
+			{id: 'name', name: 'Name'},
+			{id: 'type', name: 'Type'},
+		];
+
+		const items = [
+			{id: 1, name: 'Foo', type: 'Foo'},
+			{id: 2, name: 'Bar', type: 'Bar'},
+			{id: 3, name: 'Baz', type: 'Baz'},
+		];
+
+		const {container} = render(
+			<Table>
+				<Head items={columns}>
+					{(column) => <Cell key={column.id}>{column.name}</Cell>}
+				</Head>
+
+				<Body items={items}>
+					{(row) => (
+						<Row items={columns}>
+							{/** @ts-ignore */}
+							{(column) => <Cell>{row[column.id]}</Cell>}
+						</Row>
+					)}
+				</Body>
+			</Table>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render with sort column', () => {
+		const {container} = render(
+			<Table>
+				<Head>
+					<Cell key="name" sortable>
+						Name
+					</Cell>
+					<Cell key="type" sortable>
+						Type
+					</Cell>
+				</Head>
+
+				<Body>
+					<Row>
+						<Cell>Foo</Cell>
+						<Cell>Foo</Cell>
+					</Row>
+					<Row>
+						<Cell>Bar</Cell>
+						<Cell>Bar</Cell>
+					</Row>
+					<Row>
+						<Cell>Baz</Cell>
+						<Cell>Baz</Cell>
+					</Row>
+				</Body>
+			</Table>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render with treegrid', () => {
+		const columns = [
+			{
+				id: 'name',
+				name: 'Name',
+			},
+			{
+				id: 'type',
+				name: 'Type',
+			},
+		];
+
+		const {container} = render(
+			<Table aria-label="File Explorer" nestedKey="children">
+				<Head items={columns}>
+					{(column) => <Cell key={column.id}>{column.name}</Cell>}
+				</Head>
+
+				<Body
+					items={[
+						{id: 1, name: 'Folder A', type: 'Folder'},
+						{
+							children: [
+								{
+									children: [
+										{
+											id: 5,
+											name: 'Folder X',
+											type: 'Folder',
+										},
+										{
+											id: 6,
+											name: 'Folder Z',
+											type: 'Folder',
+										},
+										{
+											id: 7,
+											name: 'Text Document A',
+											type: 'Text',
+										},
+										{
+											id: 8,
+											name: 'Text Document B',
+											type: 'Image',
+										},
+										{
+											id: 9,
+											name: 'Text Document C',
+											type: 'Vector',
+										},
+									],
+									id: 3,
+									name: 'Folder 1',
+									type: 'Folder',
+								},
+								{id: 4, name: 'Image Document', type: 'Image'},
+							],
+							id: 2,
+							name: 'Folder B',
+							type: 'Folder',
+						},
+						{id: 10, name: 'Folder C', type: 'Folder'},
+					]}
+				>
+					{(row) => (
+						<Row>
+							<Cell key={`${row.id}:name`}>{row['name']}</Cell>
+							<Cell key={`${row.id}:type`}>{row['type']}</Cell>
+						</Row>
+					)}
+				</Body>
+			</Table>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+});