[fleet] Add component story smoke test (#113634) (#113859)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>

x-pack/plugins/fleet/jest.config.js

@@ -9,6 +9,9 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: '../../..',
   roots: ['<rootDir>/x-pack/plugins/fleet'],
+  transform: {
+    '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
+  },
   coverageDirectory: '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/fleet',
   coverageReporters: ['text', 'html'],
   collectCoverageFrom: ['<rootDir>/x-pack/plugins/fleet/{common,public,server}/**/*.{ts,tsx}'],

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid.stories.tsx

@@ -66,7 +66,7 @@ export const List = (props: Args) => (
           description: 'Not Installed Description',
           name: 'beats',
           release: 'ga',
-          id: 'id',
+          id: 'package_one',
           version: '1.0.0',
           uiInternalPath: '/',
           path: 'path',
@@ -77,7 +77,7 @@ export const List = (props: Args) => (
           description: 'Not Installed Description',
           name: 'aws',
           release: 'beta',
-          id: 'id',
+          id: 'package_two',
           version: '1.0.0',
           uiInternalPath: '/',
           path: 'path',
@@ -88,7 +88,7 @@ export const List = (props: Args) => (
           description: 'Not Installed Description',
           name: 'azure',
           release: 'experimental',
-          id: 'id',
+          id: 'package_three',
           version: '1.0.0',
           uiInternalPath: '/',
           path: 'path',
@@ -99,36 +99,45 @@ export const List = (props: Args) => (
           description: 'Installed Description',
           name: 'elastic',
           release: 'ga',
-          id: 'id',
+          id: 'package_four',
           version: '1.0.0',
           uiInternalPath: '/',
           path: 'path',
           status: 'installed',
-          savedObject,
+          savedObject: {
+            ...savedObject,
+            id: 'package_four',
+          },
         },
         {
           title: 'Package Five',
           description: 'Installed Description',
           name: 'unknown',
           release: 'beta',
-          id: 'id',
+          id: 'package_five',
           version: '1.0.0',
           uiInternalPath: '/',
           path: 'path',
           status: 'installed',
-          savedObject,
+          savedObject: {
+            ...savedObject,
+            id: 'package_five',
+          },
         },
         {
           title: 'Package Six',
           description: 'Installed Description',
           name: 'kibana',
           release: 'experimental',
-          id: 'id',
+          id: 'package_six',
           version: '1.0.0',
           uiInternalPath: '/',
           path: 'path',
           status: 'installed',
-          savedObject,
+          savedObject: {
+            ...savedObject,
+            id: 'package_six',
+          },
         },
       ] as unknown as IntegrationCardItem[]
     }

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx

@@ -97,10 +97,10 @@ export const Details: React.FC<Props> = memo(({ packageInfo }) => {
           ),
           description: (
             <EuiFlexGroup direction="column" gutterSize="xs">
-              {entries(filteredTypes).map(([_type, parts]) => {
+              {entries(filteredTypes).map(([_type, parts], index) => {
                 const type = _type as KibanaAssetType;
                 return (
-                  <EuiFlexItem>
+                  <EuiFlexItem key={`item-${index}`}>
                     <EuiFlexGroup gutterSize="xs" alignItems="center" justifyContent="spaceBetween">
                       <EuiFlexItem grow={false}>{AssetTitleMap[type]}</EuiFlexItem>
                       <EuiFlexItem grow={false}>

x-pack/plugins/fleet/public/components/header.tsx

@@ -78,8 +78,8 @@ export const Header: React.FC<HeaderProps> = ({
           <EuiFlexItem>
             <EuiSpacer size="s" />
             <Tabs className={tabsClassName}>
-              {tabs.map((props) => (
-                <EuiTab {...(props as EuiTabProps)} key={props.id}>
+              {tabs.map((props, index) => (
+                <EuiTab {...(props as EuiTabProps)} key={`${props.id}-${index}`}>
                   {props.name}
                 </EuiTab>
               ))}

x-pack/plugins/fleet/public/hooks/use_package_icon_type.ts

@@ -11,7 +11,8 @@ import { ICON_TYPES } from '@elastic/eui';
 import type { PackageInfo, PackageListItem } from '../types';
 
 // TODO: Determine whether this can be relocated
-import { useLinks as useEPMLinks } from '../applications/integrations/hooks';
+// Import the specific hook to avoid a circular dependency in Babel
+import { useLinks as useEPMLinks } from '../applications/integrations/hooks/use_links';
 
 import { sendGetPackageInfoByKey } from './index';
 

x-pack/plugins/fleet/storybook/context/index.tsx

@@ -19,6 +19,8 @@ import type { FleetConfigType, FleetStartServices } from '../../public/plugin';
 // TODO: This is a contract leak, and should be on the context, rather than a setter.
 import { setHttpClient } from '../../public/hooks/use_request';
 
+import { setCustomIntegrations } from '../../public/services/custom_integrations';
+
 import { getApplication } from './application';
 import { getChrome } from './chrome';
 import { getHttp } from './http';
@@ -58,6 +60,10 @@ export const StorybookContext: React.FC<{ storyContext?: StoryContext }> = ({
   };
 
   setHttpClient(startServices.http);
+  setCustomIntegrations({
+    getAppendCustomIntegrations: async () => [],
+    getReplacementCustomIntegrations: async () => [],
+  });
 
   const config = {
     enabled: true,

x-pack/plugins/fleet/storybook/smoke.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mount } from 'enzyme';
+import { createElement } from 'react';
+import { act } from 'react-dom/test-utils';
+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots({
+  configPath: __dirname,
+  framework: 'react',
+  test: async ({ story }) => {
+    const renderer = mount(createElement(story.render));
+    // wait until the element will perform all renders and resolve all promises (lazy loading, especially)
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+    expect(renderer.html()).not.toContain('euiErrorBoundary');
+  },
+});