Add UI tests for /utils and /components (#23456)

* Add UI tests for /utils and /components

* add test for Table

* Address PR feedback

* Fix window prompt var

* Fix TaskName test from rebase

* fix lint errors

(cherry picked from commit 694e380)

airflow/www/static/js/grid/LegendRow.jsx

@@ -24,7 +24,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 import React from 'react';
-import { SimpleStatus } from './StatusBox';
+import { SimpleStatus } from './components/StatusBox';
 
 const LegendRow = () => (
   <Flex mt={0} mb={2} p={4} flexWrap="wrap">

airflow/www/static/js/grid/Clipboard.jsx → airflow/www/static/js/grid/components/Clipboard.jsx

@@ -27,7 +27,7 @@ import {
 } from '@chakra-ui/react';
 import { FiCopy } from 'react-icons/fi';
 
-import { useContainerRef } from './context/containerRef';
+import { useContainerRef } from '../context/containerRef';
 
 export const ClipboardButton = forwardRef(
   (

airflow/www/static/js/grid/components/Clipboard.test.jsx

@@ -0,0 +1,39 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+/* global describe, test, expect, jest, window */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+
+import { ClipboardButton } from './Clipboard';
+
+describe('ClipboardButton', () => {
+  test('Loads button', async () => {
+    const windowPrompt = window.prompt;
+    window.prompt = jest.fn();
+    const { getByText } = render(<ClipboardButton value="lorem ipsum" />);
+
+    const button = getByText(/copy/i);
+    fireEvent.click(button);
+    expect(window.prompt).toHaveBeenCalledWith('Copy to clipboard: Ctrl+C, Enter', 'lorem ipsum');
+    window.prompt = windowPrompt;
+  });
+});

airflow/www/static/js/grid/InstanceTooltip.jsx → airflow/www/static/js/grid/components/InstanceTooltip.jsx

@@ -20,8 +20,8 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 
-import { finalStatesMap } from '../utils';
-import { formatDuration, getDuration } from '../datetime_utils';
+import { finalStatesMap } from '../../utils';
+import { formatDuration, getDuration } from '../../datetime_utils';
 import Time from './Time';
 
 const InstanceTooltip = ({

airflow/www/static/js/grid/components/InstanceTooltip.test.jsx

@@ -0,0 +1,86 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+/* global describe, test, expect */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import InstanceTooltip from './InstanceTooltip';
+import { Wrapper } from '../utils/testUtils';
+
+const instance = {
+  startDate: new Date(),
+  endDate: new Date(),
+  state: 'success',
+  runId: 'run',
+};
+
+describe('Test Task InstanceTooltip', () => {
+  test('Displays a normal task', () => {
+    const { getByText } = render(
+      <InstanceTooltip
+        group={{}}
+        instance={instance}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(getByText('Status: success')).toBeDefined();
+  });
+
+  test('Displays a mapped task with overall status', () => {
+    const { getByText } = render(
+      <InstanceTooltip
+        group={{ isMapped: true }}
+        instance={{ ...instance, mappedStates: ['success', 'success'] }}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(getByText('Overall Status: success')).toBeDefined();
+    expect(getByText('2 mapped tasks')).toBeDefined();
+    expect(getByText('success: 2')).toBeDefined();
+  });
+
+  test('Displays a task group with overall status', () => {
+    const { getByText, queryByText } = render(
+      <InstanceTooltip
+        group={{
+          children: [
+            {
+              instances: [
+                {
+                  runId: 'run',
+                  state: 'success',
+                },
+              ],
+            },
+          ],
+        }}
+        instance={instance}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(getByText('Overall Status: success')).toBeDefined();
+    expect(queryByText('mapped task')).toBeNull();
+    expect(getByText('success: 1')).toBeDefined();
+  });
+});

airflow/www/static/js/grid/StatusBox.jsx → airflow/www/static/js/grid/components/StatusBox.jsx

@@ -28,8 +28,8 @@ import {
 } from '@chakra-ui/react';
 
 import InstanceTooltip from './InstanceTooltip';
-import { useContainerRef } from './context/containerRef';
-import useFilters from './utils/useFilters';
+import { useContainerRef } from '../context/containerRef';
+import useFilters from '../utils/useFilters';
 
 export const boxSize = 10;
 export const boxSizePx = `${boxSize}px`;

airflow/www/static/js/grid/Table.jsx → airflow/www/static/js/grid/components/Table.jsx

@@ -187,28 +187,30 @@ const Table = ({
           })}
         </Tbody>
       </ChakraTable>
-      {totalEntries > data.length && (
+      {(canPreviousPage || canNextPage) && (
       <Flex alignItems="center" justifyContent="flex-start" my={4}>
         <IconButton
           variant="ghost"
           onClick={handlePrevious}
           disabled={!canPreviousPage}
           aria-label="Previous Page"
+          title="Previous Page"
           icon={<MdKeyboardArrowLeft />}
         />
         <IconButton
           variant="ghost"
           onClick={handleNext}
           disabled={!canNextPage}
           aria-label="Next Page"
+          title="Next Page"
           icon={<MdKeyboardArrowRight />}
         />
         <Text>
           {lowerCount}
           -
           {upperCount}
           {' of '}
-          {totalEntries}
+          {totalEntries || data.length}
         </Text>
       </Flex>
       )}