Errors in table and cleaned unused ids (#941)

Co-authored-by: Dylan Decrulle <[email protected]>
InseeFr · Apr 16, 2024 · 602d0d2 · 602d0d2
1 parent d56e906
commit 602d0d2
Show file tree

Hide file tree

Showing 16 changed files with 28 additions and 87 deletions.
diff --git a/src/components/Loop/Loop.tsx b/src/components/Loop/Loop.tsx
@@ -64,7 +64,12 @@ export function Loop({
 					blocklist={blockedInLoopComponents}
 					key={n}
 					components={getComponents(n)}
-					componentProps={(c) => ({ ...props, ...c, id: `${c.id}-${n}` })}
+					componentProps={(c) => ({
+						...props,
+						...c,
+						id: `${c.id}-${n}`,
+						errors,
+					})}
 				/>
 			))}
 		</CustomLoop>

diff --git a/src/components/RosterForLoop/RosterForLoop.tsx b/src/components/RosterForLoop/RosterForLoop.tsx
@@ -69,8 +69,8 @@ export const RosterForLoop = (
 			canControlRows={!!(min && max && min !== max)}
 		>
 			<Table id={id}>
-				{header && <TableHeader header={header} id={id} />}
-				<Tbody id={id}>
+				{header && <TableHeader header={header} />}
+				<Tbody>
 					{times(nbRows, (n) => {
 						const components = getComponents(n);
 						const lineErrors = getComponentErrors(props.errors, `${id}-${n}`);
@@ -79,7 +79,6 @@ export const RosterForLoop = (
 						return (
 							<Fragment key={n}>
 								<Tr
-									id={props.id}
 									row={n}
 									key={n}
 									className={
@@ -94,10 +93,9 @@ export const RosterForLoop = (
 											...otherProps,
 											...c,
 											id: `${c.id}-${n}`,
+											errors,
 										})}
-										wrapper={({ id, children }) => (
-											<Td id={`${id}-${n}`}>{children}</Td>
-										)}
+										wrapper={({ children }) => <Td>{children}</Td>}
 									/>
 								</Tr>
 								{hasLineErrors && (

diff --git a/src/components/RosterForLoop/__snapshots__/RosterForLoop.spec.tsx.snap b/src/components/RosterForLoop/__snapshots__/RosterForLoop.spec.tsx.snap
@@ -15,15 +15,12 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
   >
     <tbody
       class="lunatic-table-tbody"
-      id="lunatic-table-tbody-table"
     >
       <tr
         class="lunatic-table-tr"
-        id="lunatic-table-tr-table-0"
       >
         <td
           class="lunatic-table-td"
-          id="lunatic-table-td-jrc3ye5q-QOP-lo6tcvvx-0-0-undefined-undefined"
         >
           <div
             class="field-container"
@@ -50,11 +47,9 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
       </tr>
       <tr
         class="lunatic-table-tr"
-        id="lunatic-table-tr-table-1"
       >
         <td
           class="lunatic-table-td"
-          id="lunatic-table-td-jrc3ye5q-QOP-lo6tcvvx-1-1-undefined-undefined"
         >
           <div
             class="field-container"

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -26,15 +26,14 @@ export function Table(props: LunaticComponentProps<'Table'>) {
 				id={id}
 			/>
 			<BaseTable id={`table-${id}`}>
-				<TableHeader id={id} header={header} />
+				<TableHeader header={header} />
 				<Tbody>
 					{body.map((row, rowIndex) => (
-						<Tr id={id} row={rowIndex} key={rowIndex}>
+						<Tr row={rowIndex} key={rowIndex}>
 							<LunaticComponents
 								components={row}
 								wrapper={({ children, index, colspan, rowspan }) => (
 									<Td
-										id={id}
 										row={rowIndex}
 										index={index}
 										colSpan={colspan}

diff --git a/src/components/shared/Table/Table.tsx b/src/components/shared/Table/Table.tsx
@@ -7,7 +7,7 @@ type Props = PropsWithChildren<{
 	id?: string;
 }>;
 
-function LunaticTable({ className, id, children }: Props) {
+function LunaticTable({ id, className, children }: Props) {
 	return (
 		<table
 			id={`table-${id}`}

diff --git a/src/components/shared/Table/TableHeader.tsx b/src/components/shared/Table/TableHeader.tsx
@@ -4,31 +4,21 @@ import { Thead } from './Thead';
 import { Tr } from './Tr';
 
 export function TableHeader({
-	id,
 	header,
-}: Pick<LunaticComponentProps<'Table'>, 'id' | 'header'>) {
+}: Pick<LunaticComponentProps<'Table'>, 'header'>) {
 	if (!Array.isArray(header)) {
 		return null;
 	}
 	const content = header.map(function ({ label, rowspan, colspan }, index) {
 		return (
-			<Th
-				id={id}
-				row={0}
-				index={index}
-				rowSpan={rowspan}
-				colSpan={colspan}
-				key={index}
-			>
+			<Th row={0} index={index} rowSpan={rowspan} colSpan={colspan} key={index}>
 				{label}
 			</Th>
 		);
 	});
 	return (
-		<Thead id={id}>
-			<Tr id={id} row={0}>
-				{content}
-			</Tr>
+		<Thead>
+			<Tr row={0}>{content}</Tr>
 		</Thead>
 	);
 }
diff --git a/src/components/shared/Table/Tbody.spec.tsx b/src/components/shared/Table/Tbody.spec.tsx
@@ -8,12 +8,9 @@ describe('Tbody component', () => {
 		const testClass = 'test-class';
 		const testContent = 'Test content';
 		const { getByRole, getByText } = render(
-			<Tbody id={testId} className={testClass}>
-				{testContent}
-			</Tbody>
+			<Tbody className={testClass}>{testContent}</Tbody>
 		);
 		const tbodyElement = getByRole('rowgroup');
-		expect(tbodyElement).toHaveAttribute('id', `lunatic-table-tbody-${testId}`);
 		expect(tbodyElement).toHaveClass('lunatic-table-tbody');
 		expect(tbodyElement).toHaveClass(testClass);
 		expect(getByText(testContent)).toBeInTheDocument();

diff --git a/src/components/shared/Table/Tbody.tsx b/src/components/shared/Table/Tbody.tsx
@@ -4,15 +4,11 @@ import { slottableComponent } from '../HOC/slottableComponent';
 
 type Props = PropsWithChildren<{
 	className?: string;
-	id?: string;
 }>;
 
-function LunaticTbody({ id, className, children }: Props) {
+function LunaticTbody({ className, children }: Props) {
 	return (
-		<tbody
-			id={id ? `lunatic-table-tbody-${id}` : undefined}
-			className={classnames('lunatic-table-tbody', className)}
-		>
+		<tbody className={classnames('lunatic-table-tbody', className)}>
 			{children}
 		</tbody>
 	);

diff --git a/src/components/shared/Table/Td.spec.tsx b/src/components/shared/Table/Td.spec.tsx
@@ -16,7 +16,6 @@ describe('Td', () => {
 				<tbody>
 					<tr>
 						<Td
-							id={id}
 							row={row}
 							index={index}
 							className={className}
@@ -30,7 +29,6 @@ describe('Td', () => {
 			</table>
 		);
 		const td = getByRole('cell', { name: children });
-		expect(td).toHaveAttribute('id', `lunatic-table-td-${id}-${row}-${index}`);
 		expect(td).toHaveClass('lunatic-table-td');
 		expect(td).toHaveClass(className);
 		expect(td).toHaveAttribute('colspan', colSpan.toString());

diff --git a/src/components/shared/Table/Td.tsx b/src/components/shared/Table/Td.tsx
@@ -4,15 +4,13 @@ import { slottableComponent } from '../HOC/slottableComponent';
 
 type Props = PropsWithChildren<{
 	className?: string;
-	id?: string;
 	row?: string | number;
 	index?: string | number;
 	colSpan?: number;
 	rowSpan?: number;
 }>;
 
 function LunaticTd({
-	id,
 	children,
 	row,
 	index,
@@ -22,7 +20,6 @@ function LunaticTd({
 }: Props) {
 	return (
 		<td
-			id={`lunatic-table-td-${id}-${row}-${index}`}
 			className={classnames('lunatic-table-td', className)}
 			colSpan={colSpan}
 			rowSpan={rowSpan}

diff --git a/src/components/shared/Table/Th.spec.tsx b/src/components/shared/Table/Th.spec.tsx
@@ -4,7 +4,6 @@ import { expect, describe, it } from 'vitest';
 
 describe('<Th />', () => {
 	const props = {
-		id: 'test-id',
 		index: 1,
 		colSpan: 2,
 		rowSpan: 3,
@@ -32,10 +31,6 @@ describe('<Th />', () => {
 			</table>
 		);
 		const th = getByRole('columnheader');
-		expect(th).toHaveAttribute(
-			'id',
-			`lunatic-table-th-${props.id}-${props.index}`
-		);
 		expect(th).toHaveAttribute('colSpan', props.colSpan.toString());
 		expect(th).toHaveAttribute('rowSpan', props.rowSpan.toString());
 		expect(th).toHaveClass(props.className);

diff --git a/src/components/shared/Table/Th.tsx b/src/components/shared/Table/Th.tsx
@@ -4,24 +4,15 @@ import { slottableComponent } from '../HOC/slottableComponent';
 
 type Props = PropsWithChildren<{
 	className?: string;
-	id?: string;
 	row?: string | number;
 	index?: string | number;
 	colSpan?: number;
 	rowSpan?: number;
 }>;
 
-function LunaticTh({
-	id,
-	index,
-	children,
-	className,
-	colSpan,
-	rowSpan,
-}: Props) {
+function LunaticTh({ index, children, className, colSpan, rowSpan }: Props) {
 	return (
 		<th
-			id={`lunatic-table-th-${id}-${index}`}
 			className={classnames('lunatic-table-th', className)}
 			colSpan={colSpan}
 			rowSpan={rowSpan}

diff --git a/src/components/shared/Table/Thead.spec.tsx b/src/components/shared/Table/Thead.spec.tsx
@@ -3,17 +3,8 @@ import { Thead } from './Thead';
 import { expect, describe, it } from 'vitest';
 
 describe('Thead', () => {
-	it('renders with the correct ID', () => {
-		const props = { id: 'test' };
-		render(<Thead {...props} />);
-		expect(screen.getByRole('rowgroup')).toHaveAttribute(
-			'id',
-			'lunatic-table-thead-test'
-		);
-	});
-
 	it('renders with the correct class name', () => {
-		const props = { id: 'test', className: 'test' };
+		const props = { className: 'test' };
 		render(<Thead {...props} />);
 		expect(screen.getByRole('rowgroup')).toHaveClass(
 			'lunatic-table-thead test'

diff --git a/src/components/shared/Table/Thead.tsx b/src/components/shared/Table/Thead.tsx
@@ -4,15 +4,11 @@ import { slottableComponent } from '../HOC/slottableComponent';
 
 type Props = PropsWithChildren<{
 	className?: string;
-	id?: string;
 }>;
 
-function LunaticThead({ id, children, className }: Props) {
+function LunaticThead({ children, className }: Props) {
 	return (
-		<thead
-			id={`lunatic-table-thead-${id}`}
-			className={classnames('lunatic-table-thead', className)}
-		>
+		<thead className={classnames('lunatic-table-thead', className)}>
 			{children}
 		</thead>
 	);

diff --git a/src/components/shared/Table/Tr.spec.tsx b/src/components/shared/Table/Tr.spec.tsx
@@ -7,18 +7,17 @@ describe('Tr', () => {
 		render(
 			<table>
 				<tbody>
-					<Tr id="1" row={1} className="highlighted-row" />
+					<Tr row={1} className="highlighted-row" />
 				</tbody>
 			</table>
 		);
 		const tr = screen.getByRole('row');
-		expect(tr).toHaveAttribute('id', 'lunatic-table-tr-1-1');
 		expect(tr).toHaveClass('lunatic-table-tr', 'highlighted-row');
 	});
 
 	it('renders the children components', () => {
 		render(
-			<Tr id="1" row={1}>
+			<Tr row={1}>
 				<td id="1">Cell 1,1</td>
 				<td id="1">Cell 1,2</td>
 			</Tr>

diff --git a/src/components/shared/Table/Tr.tsx b/src/components/shared/Table/Tr.tsx
@@ -4,18 +4,12 @@ import { slottableComponent } from '../HOC/slottableComponent';
 
 type Props = PropsWithChildren<{
 	className?: string;
-	id?: string;
 	row?: string | number;
 }>;
 
-function LunaticTr({ id, children, className, row }: Props) {
+function LunaticTr({ children, className, row }: Props) {
 	return (
-		<tr
-			id={`lunatic-table-tr-${id}-${row}`}
-			className={classnames('lunatic-table-tr', className)}
-		>
-			{children}
-		</tr>
+		<tr className={classnames('lunatic-table-tr', className)}>{children}</tr>
 	);
 }