From da0fdf9b5eade742dc452acbf53ea87092bb14f9 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Mon, 6 Dec 2021 00:32:25 +0100
Subject: [PATCH] core-components: added test for LogViewer and fix copy

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../LogViewer/RealLogViewer.test.tsx          | 79 +++++++++++++++++++
 .../components/LogViewer/RealLogViewer.tsx    |  1 +
 .../LogViewer/useLogViewerSelection.tsx       |  2 +-
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx

diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx
new file mode 100644
index 0000000000..8d5efb9724
--- /dev/null
+++ b/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ReactNode } from 'react';
+import UserEvent from '@testing-library/user-event';
+import { renderInTestApp } from '@backstage/test-utils';
+import { RealLogViewer } from './RealLogViewer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import copyToClipboard from 'copy-to-clipboard';
+
+// Used by useCopyToClipboard
+jest.mock('copy-to-clipboard', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+// The <AutoSizer> inside <LogViewer> needs mocking to render in jsdom
+jest.mock('react-virtualized-auto-sizer', () => ({
+  __esModule: true,
+  default: (props: {
+    children: (size: { width: number; height: number }) => ReactNode;
+  }) => <>{props.children({ width: 400, height: 200 })}</>,
+}));
+
+const testText = `Some Log Line
+Derp
+Foo
+
+Foo Foo
+Wat`;
+
+describe('RealLogViewer', () => {
+  it('should render text with search and filtering and copying', async () => {
+    const rendered = await renderInTestApp(<RealLogViewer text={testText} />);
+    expect(rendered.getByText('Derp')).toBeInTheDocument();
+    expect(rendered.getByText('Foo Foo')).toBeInTheDocument();
+
+    UserEvent.tab();
+    UserEvent.keyboard('Foo');
+
+    expect(rendered.getByText('1/3')).toBeInTheDocument();
+    UserEvent.keyboard('{enter}');
+    expect(rendered.getByText('2/3')).toBeInTheDocument();
+    UserEvent.keyboard('{enter}');
+    expect(rendered.getByText('3/3')).toBeInTheDocument();
+    UserEvent.keyboard('{enter}');
+    expect(rendered.getByText('1/3')).toBeInTheDocument();
+    UserEvent.keyboard('{shift}{enter}{/shift}');
+    expect(rendered.getByText('3/3')).toBeInTheDocument();
+
+    expect(rendered.queryByText('Some Log Line')).toBeInTheDocument();
+    UserEvent.keyboard('{meta}{enter}{/meta}');
+    expect(rendered.queryByText('Some Log Line')).not.toBeInTheDocument();
+    UserEvent.keyboard('{meta}{enter}{/meta}');
+    expect(rendered.queryByText('Some Log Line')).toBeInTheDocument();
+
+    // Tab down to line #2 and click
+    UserEvent.tab();
+    UserEvent.tab();
+    UserEvent.tab();
+    UserEvent.click(document.activeElement!);
+    UserEvent.click(rendered.getByTestId('copy-button'));
+
+    expect(copyToClipboard).toHaveBeenCalledWith('Derp');
+  });
+});
diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
index d41ce80672..47bc05c85c 100644
--- a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
+++ b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
@@ -88,6 +88,7 @@ export function RealLogViewer(props: RealLogViewerProps) {
                 >
                   {selection.shouldShowButton(lineNumber) && (
                     <IconButton
+                      data-testid="copy-button"
                       size="small"
                       className={classes.lineCopyButton}
                       onClick={() => selection.copySelection()}
diff --git a/packages/core-components/src/components/LogViewer/useLogViewerSelection.tsx b/packages/core-components/src/components/LogViewer/useLogViewerSelection.tsx
index 3bed43d0c5..a41f5e7159 100644
--- a/packages/core-components/src/components/LogViewer/useLogViewerSelection.tsx
+++ b/packages/core-components/src/components/LogViewer/useLogViewerSelection.tsx
@@ -60,7 +60,7 @@ export function useLogViewerSelection(lines: AnsiLine[]) {
       if (sel) {
         const copyText = lines
           .slice(Math.min(sel.start, sel.end) - 1, Math.max(sel.start, sel.end))
-          .map(l => l.text)
+          .map(l => l.chunks.map(c => c.text).join(''))
           .join('\n');
         copyToClipboard(copyText);
         setSelection(undefined);