Add test for CatalogKindHeader

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

plugins/catalog-react/src/hooks/useEntityKinds.ts

@@ -18,8 +18,9 @@ import { useEffect, useState } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '../api';
 
+// Retrieve a list of unique entity kinds present in the catalog
 export function useEntityKinds() {
-  const [kinds, setKinds] = useState(['component']);
+  const [kinds, setKinds] = useState(['Component']);
   const catalogApi = useApi(catalogApiRef);
 
   useEffect(() => {

plugins/catalog-react/src/testUtils/providers.tsx

@@ -25,12 +25,12 @@ export const MockEntityListContextProvider = ({
   children,
   value,
 }: PropsWithChildren<{
-  value: Partial<EntityListContextProps>;
+  value?: Partial<EntityListContextProps>;
 }>) => {
   // Provides a default implementation that stores filter state, for testing components that
   // reflect filter state.
   const [filters, setFilters] = useState<DefaultEntityFilters>(
-    value.filters ?? {},
+    value?.filters ?? {},
   );
   const updateFilters = useCallback(
     (
@@ -60,7 +60,7 @@ export const MockEntityListContextProvider = ({
 
   // Extract value.filters to avoid overwriting it; some tests exercise filter updates. The value
   // provided is used as the initial seed in useState above.
-  const { filters: _, ...otherContextFields } = value;
+  const { filters: _, ...otherContextFields } = value ?? {};
 
   return (
     <EntityListContext.Provider

plugins/catalog/src/components/CatalogPage/CatalogKindHeader.test.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 from 'react';
+import { fireEvent } from '@testing-library/react';
+import { Entity } from '@backstage/catalog-model';
+import {
+  CatalogApi,
+  catalogApiRef,
+  EntityKindFilter,
+  MockEntityListContextProvider,
+} from '@backstage/plugin-catalog-react';
+import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
+import { renderWithEffects } from '@backstage/test-utils';
+import { CatalogKindHeader } from './CatalogKindHeader';
+
+const entities: Entity[] = [
+  {
+    apiVersion: '1',
+    kind: 'Component',
+    metadata: {
+      name: 'component-1',
+    },
+  },
+  {
+    apiVersion: '1',
+    kind: 'Component',
+    metadata: {
+      name: 'component-2',
+    },
+  },
+  {
+    apiVersion: '1',
+    kind: 'Template',
+    metadata: {
+      name: 'template',
+    },
+  },
+  {
+    apiVersion: '1',
+    kind: 'System',
+    metadata: {
+      name: 'system',
+    },
+  },
+];
+
+const apis = ApiRegistry.from([
+  [
+    catalogApiRef,
+    {
+      getEntities: jest
+        .fn()
+        .mockImplementation(() => Promise.resolve({ items: entities })),
+    } as unknown as CatalogApi,
+  ],
+]);
+
+describe('<CatalogKindHeader />', () => {
+  it('renders available kinds', async () => {
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider>
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+
+    const input = rendered.getByText('Components');
+    fireEvent.mouseDown(input);
+
+    entities.map(entity => {
+      expect(
+        rendered.getByRole('option', { name: `${entity.kind}s` }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('updates the kind filter', async () => {
+    const updateFilters = jest.fn();
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider value={{ updateFilters }}>
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+
+    const input = rendered.getByText('Components');
+    fireEvent.mouseDown(input);
+
+    const option = rendered.getByRole('option', { name: 'Templates' });
+    fireEvent.click(option);
+
+    expect(updateFilters).toHaveBeenCalledWith({
+      kind: new EntityKindFilter('Template'),
+    });
+  });
+});

plugins/catalog/src/components/CatalogPage/CatalogKindHeader.tsx

@@ -67,7 +67,9 @@ export const CatalogKindHeader = ({
       classes={classes}
     >
       {allKinds.map(kind => (
-        <MenuItem value={kind}>{capitalize(kind)}s</MenuItem>
+        <MenuItem value={kind} key={kind}>
+          {`${capitalize(kind)}s`}
+        </MenuItem>
       ))}
     </Select>
   );