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 }) =>
,
+ 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}
))}
))}
|