Jest and Storybook fixes (#116132)

* Fix all broken stories
* In stories that were broken, add an associated Jest test so they if they break in the future we'll know
* Fix all console.error messages that were being printed during Jest test runs
* Add test setup which makes it so `console.error` throws an error so tests will fail if error console messages are printed
# Conflicts:
#	x-pack/plugins/apm/public/components/shared/backend_link.stories.tsx

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

@@ -11,7 +11,10 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: path.resolve(__dirname, '../../..'),
   roots: ['<rootDir>/x-pack/plugins/apm'],
-  setupFiles: ['<rootDir>/x-pack/plugins/apm/.storybook/jest_setup.js'],
+  setupFiles: [
+    '<rootDir>/x-pack/plugins/apm/jest_setup.js',
+    '<rootDir>/x-pack/plugins/apm/.storybook/jest_setup.js',
+  ],
   coverageDirectory: '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/apm',
   coverageReporters: ['text', 'html'],
   collectCoverageFrom: [

x-pack/plugins/apm/jest_setup.js

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+/* global jest */
+
+// When a `console.error` is encountered, throw the error to make the test fail.
+// This effectively treats logged errors during the test run as failures.
+jest.spyOn(console, 'error').mockImplementation((message) => {
+  throw new Error(message);
+});

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/error_count_alert_trigger.stories.tsx

@@ -11,11 +11,17 @@ import { AlertParams, ErrorCountAlertTrigger } from '.';
 import { CoreStart } from '../../../../../../../src/core/public';
 import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
+import { createCallApmApi } from '../../../services/rest/createCallApmApi';
+
 import { AlertMetadata } from '../helper';
 
-const KibanaReactContext = createKibanaReactContext({
+const coreMock = {
+  http: { get: async () => ({}) },
   notifications: { toasts: { add: () => {} } },
-} as unknown as Partial<CoreStart>);
+  uiSettings: { get: () => {} },
+} as unknown as CoreStart;
+
+const KibanaReactContext = createKibanaReactContext(coreMock);
 
 interface Args {
   alertParams: AlertParams;
@@ -27,6 +33,8 @@ const stories: Meta<{}> = {
   component: ErrorCountAlertTrigger,
   decorators: [
     (StoryComponent) => {
+      createCallApmApi(coreMock);
+
       return (
         <KibanaReactContext.Provider>
           <div style={{ width: 400 }}>

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/error_count_alert_trigger.test.tsx

@@ -5,15 +5,17 @@
  * 2.0.
  */
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import * as stories from './error_count_alert_trigger.stories';
 import { composeStories } from '@storybook/testing-react';
 
 const { CreatingInApmFromService } = composeStories(stories);
 
 describe('ErrorCountAlertTrigger', () => {
-  it('renders', () => {
-    expect(() => render(<CreatingInApmFromService />)).not.toThrowError();
+  it('renders', async () => {
+    render(<CreatingInApmFromService />);
+
+    expect(await screen.findByText('Service')).toBeInTheDocument();
   });
 });