chore: starting to add tests for the TemplateGroups components

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 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.
+ */
+
+jest.mock('@backstage/plugin-catalog-react', () => ({
+  useEntityList: jest.fn(),
+}));
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useEntityList } from '@backstage/plugin-catalog-react';
+import { TemplateGroups } from './TemplateGroups';
+import { TestApiProvider } from '@backstage/test-utils';
+import { errorApiRef } from '@backstage/core-plugin-api';
+
+describe('TemplateGroups', () => {
+  it('should return progress if the hook is loading', async () => {
+    (useEntityList as jest.Mock).mockReturnValue({ loading: true });
+
+    const { findByTestId } = render(
+      <TestApiProvider apis={[[errorApiRef, {}]]}>
+        <TemplateGroups groups={[]} />
+      </TestApiProvider>,
+    );
+
+    expect(await findByTestId('progress')).toBeInTheDocument();
+  });
+});

plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.tsx

@@ -13,14 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { TemplateGroup } from './TemplateGroup';
 import { Entity } from '@backstage/catalog-model';
 import { useEntityList } from '@backstage/plugin-catalog-react';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { Progress, Link } from '@backstage/core-components';
+import { Typography } from '@material-ui/core';
+import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 
 export type TemplateGroupFilter = {
-  title?: string;
-  titleComponent?: React.ReactNode;
+  title?: React.ReactNode;
   filter: (entity: Entity) => boolean;
 };
 
@@ -33,5 +36,27 @@ export interface TemplateGroupsProps {
 
 export const TemplateGroups = (props: TemplateGroupsProps) => {
   const { loading, error, entities } = useEntityList();
+  const errorApi = useApi(errorApiRef);
+
+  if (loading) {
+    return <Progress />;
+  }
+
+  if (error) {
+    errorApi.post(error);
+  }
+
+  if (!entities) {
+    return (
+      <Typography variant="body2">
+        No templates found that match your filter. Learn more about{' '}
+        <Link to="https://backstage.io/docs/features/software-templates/adding-templates">
+          adding templates
+        </Link>
+        .
+      </Typography>
+    );
+  }
+
   return null;
 };

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx

@@ -28,11 +28,29 @@ import React from 'react';
 import { TemplateListPage } from './TemplateListPage';
 
 describe('TemplateListPage', () => {
+  const mockCatalogApi = {
+    getEntities: async () => ({
+      items: [
+        {
+          apiVersion: 'scaffolder.backstage.io/v1beta3',
+          kind: 'Template',
+          metadata: { name: 'blob', tags: ['blob'] },
+          spec: {
+            type: 'service',
+          },
+        },
+      ],
+    }),
+    getEntityFacets: async () => ({
+      facets: { 'spec.type': [{ value: 'service', count: 1 }] },
+    }),
+  };
+
   it('should render the search bar for templates', async () => {
     const { getByPlaceholderText } = await renderInTestApp(
       <TestApiProvider
         apis={[
-          [catalogApiRef, {}],
+          [catalogApiRef, mockCatalogApi],
           [
             starredEntitiesApiRef,
             new DefaultStarredEntitiesApi({
@@ -53,7 +71,7 @@ describe('TemplateListPage', () => {
     const { getByRole } = await renderInTestApp(
       <TestApiProvider
         apis={[
-          [catalogApiRef, {}],
+          [catalogApiRef, mockCatalogApi],
           [
             starredEntitiesApiRef,
             new DefaultStarredEntitiesApi({
@@ -75,7 +93,7 @@ describe('TemplateListPage', () => {
     const { getByText } = await renderInTestApp(
       <TestApiProvider
         apis={[
-          [catalogApiRef, {}],
+          [catalogApiRef, mockCatalogApi],
           [
             starredEntitiesApiRef,
             new DefaultStarredEntitiesApi({
@@ -96,20 +114,7 @@ describe('TemplateListPage', () => {
     const { getByText } = await renderInTestApp(
       <TestApiProvider
         apis={[
-          [
-            catalogApiRef,
-            {
-              getEntities: async () => ({
-                items: [
-                  {
-                    apiVersion: 'scaffolder.backstage.io/v1beta3',
-                    kind: 'Template',
-                    metadata: { name: 'blob', tags: ['blob'] },
-                  },
-                ],
-              }),
-            },
-          ],
+          [catalogApiRef, mockCatalogApi],
           [
             starredEntitiesApiRef,
             new DefaultStarredEntitiesApi({

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx

@@ -22,7 +22,6 @@ import {
   Content,
   ContentHeader,
   Header,
-  Lifecycle,
   Page,
   SupportButton,
 } from '@backstage/core-components';