diff --git a/app/packages/klogs/src/components/Logs.test.tsx b/app/packages/klogs/src/components/Logs.test.tsx index fd6e9660..0a810583 100644 --- a/app/packages/klogs/src/components/Logs.test.tsx +++ b/app/packages/klogs/src/components/Logs.test.tsx @@ -2,36 +2,92 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { vi } from 'vitest'; -import { LogsDownload } from './Logs'; - -describe('LogsDownload', () => { - const documents = [ - { - log: '{"namespace": "foo"}', - namespace: 'foo', - timestamp: new Date(2000, 2, 2).toISOString(), - }, - ]; - - it('can download logs', async () => { - const download = vi.fn(); - render(); - - const openMenu = screen.getByLabelText('open menu'); - await userEvent.click(openMenu); - const downloadJSON = screen.getByLabelText('Download Logs'); - await userEvent.click(downloadJSON); - expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log'); +import { Documents, LogsDownload } from './Logs'; + +describe('Logs', () => { + describe('LogsDownload', () => { + const documents = [ + { + log: '{"namespace": "foo"}', + namespace: 'foo', + timestamp: new Date(2000, 2, 2).toISOString(), + }, + ]; + + it('can download logs', async () => { + const download = vi.fn(); + render(); + + const openMenu = screen.getByLabelText('open menu'); + await userEvent.click(openMenu); + const downloadJSON = screen.getByLabelText('Download Logs'); + await userEvent.click(downloadJSON); + expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log'); + }); + + it('can download csv', async () => { + const download = vi.fn(); + render(); + + const openMenu = screen.getByLabelText('open menu'); + await userEvent.click(openMenu); + const downloadCSV = screen.getByLabelText('Download CSV'); + await userEvent.click(downloadCSV); + expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv'); + }); }); - it('can download csv', async () => { - const download = vi.fn(); - render(); + describe('Documents', () => { + const documents = [ + { + log: '{"namespace": "foo"}', + namespace: 'foo', + timestamp: new Date(2000, 2, 2).toISOString(), + }, + ]; + + const iconName = 'TableChartIcon'; + + const setup = ( + documents: Record[], + selectedFields: string[], + selectField?: (field: string) => void, + ) => { + return ( + + ); + }; + + it('show documents with column remove button', async () => { + const removeFieldMock = vi.fn(); + const selectedFields = ['log', 'namespace', 'timestamp']; + render(setup(documents, selectedFields, removeFieldMock)); + + const removeColumnIcons = screen.getAllByTestId(iconName); + expect(removeColumnIcons.length).toBe(selectedFields.length); + expect(screen.getByText('Time')).toBeInTheDocument(); + expect(screen.getByText('log')).toBeInTheDocument(); + expect(screen.getByText('namespace')).toBeInTheDocument(); + expect(screen.getByText('timestamp')).toBeInTheDocument(); + + const element = document.querySelector(`button > svg[data-testid="${iconName}"]`); + expect(element).not.toBeNull(); + /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ + await userEvent.click(element!); - const openMenu = screen.getByLabelText('open menu'); - await userEvent.click(openMenu); - const downloadCSV = screen.getByLabelText('Download CSV'); - await userEvent.click(downloadCSV); - expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv'); + // check to be called -> first button -> first column, which is 'log' + expect(removeFieldMock).toBeCalledWith('log'); + }); }); }); diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index e8f31199..3e00bf06 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -480,9 +480,9 @@ const Document: FunctionComponent<{ /** * The `Documents` component is used to render the documents in a table. The table will show the timestamp of each log * line and a preview of the most important fields. If the user select a list of fields these fields will be shown - * insteand of the preview. + * instead of the preview. */ -const Documents: FunctionComponent<{ +export const Documents: FunctionComponent<{ addFilter?: (filter: string) => void; changeOrder?: (orderBy: string) => void; documents: Record[]; @@ -524,6 +524,16 @@ const Documents: FunctionComponent<{ > {field} + selectField?.(field)} + > + + ))}