diff --git a/apps/yaak-client/components/responseViewers/CsvViewer.test.tsx b/apps/yaak-client/components/responseViewers/CsvViewer.test.tsx new file mode 100644 index 00000000..e3df58c4 --- /dev/null +++ b/apps/yaak-client/components/responseViewers/CsvViewer.test.tsx @@ -0,0 +1,32 @@ +import type { ReactNode } from "react"; +import { renderToStaticMarkup } from "react-dom/server"; +import { describe, expect, test, vi } from "vite-plus/test"; +import { CsvViewerInner } from "./CsvViewer"; + +vi.mock("@yaakapp-internal/ui", () => ({ + Table: ({ children }: { children: ReactNode }) => {children}
, + TableBody: ({ children }: { children: ReactNode }) => {children}, + TableCell: ({ children }: { children: ReactNode }) => {children}, + TableHead: ({ children }: { children: ReactNode }) => {children}, + TableHeaderCell: ({ children }: { children: ReactNode }) => {children}, + TableRow: ({ children }: { children: ReactNode }) => {children}, +})); + +describe("CsvViewer", () => { + test("renders columns that extend beyond the first row", () => { + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain("ID de usuario"); + expect(markup).toContain("42041"); + expect(markup.match(//g)).toHaveLength(20); + }); +}); diff --git a/apps/yaak-client/components/responseViewers/CsvViewer.tsx b/apps/yaak-client/components/responseViewers/CsvViewer.tsx index fe94480d..f318a437 100644 --- a/apps/yaak-client/components/responseViewers/CsvViewer.tsx +++ b/apps/yaak-client/components/responseViewers/CsvViewer.tsx @@ -26,27 +26,33 @@ export function CsvViewer({ text, className }: Props) { export function CsvViewerInner({ text, className }: { text: string | null; className?: string }) { const parsed = useMemo(() => { if (text == null) return null; - return Papa.parse>(text, { header: true, skipEmptyLines: true }); + return Papa.parse(text, { skipEmptyLines: true }); }, [text]); if (parsed === null) return null; + const header = parsed.data[0] ?? []; + const rows = parsed.data.slice(1); + const columnCount = parsed.data.reduce((count, row) => Math.max(count, row.length), 0); + const columnIndexes = Array.from({ length: columnCount }, (_, index) => index); + return (
- {parsed.meta.fields?.map((field) => ( - {field} + {columnIndexes.map((columnIndex) => ( + {header[columnIndex] ?? ""} ))} - {parsed.data.map((row, i) => ( + {rows.map((row, i) => ( // oxlint-disable-next-line react/no-array-index-key - {parsed.meta.fields?.map((key) => ( - {row[key] ?? ""} + {row.map((cell, columnIndex) => ( + // oxlint-disable-next-line react/no-array-index-key + {cell} ))} ))}