Add @storybook/testing-react (#103004)

.eslintrc.js

@@ -857,6 +857,18 @@ module.exports = {
         'react-hooks/exhaustive-deps': ['error', { additionalHooks: '^useFetcher$' }],
       },
     },
+    {
+      files: ['x-pack/plugins/apm/**/*.stories.*', 'x-pack/plugins/observability/**/*.stories.*'],
+      rules: {
+        'react/function-component-definition': [
+          'off',
+          {
+            namedComponents: 'function-declaration',
+            unnamedComponents: 'arrow-function',
+          },
+        ],
+      },
+    },
 
     /**
      * Fleet overrides

package.json

@@ -493,6 +493,7 @@
     "@storybook/core-events": "^6.1.20",
     "@storybook/node-logger": "^6.1.20",
     "@storybook/react": "^6.1.20",
+    "@storybook/testing-react": "^0.0.17",
     "@storybook/theming": "^6.1.20",
     "@testing-library/dom": "^7.30.3",
     "@testing-library/jest-dom": "^5.11.10",

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/ExceptionStacktrace.stories.tsx → x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/exception_stacktrace.stories.tsx

@@ -5,27 +5,31 @@
  * 2.0.
  */
 
-import React, { ComponentType } from 'react';
+import { Story } from '@storybook/react';
+import React, { ComponentProps, ComponentType } from 'react';
 import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
-import { Exception } from '../../../../../typings/es_schemas/raw/error_raw';
-import { ExceptionStacktrace } from './ExceptionStacktrace';
+import { ExceptionStacktrace } from './exception_stacktrace';
+
+type Args = ComponentProps<typeof ExceptionStacktrace>;
 
 export default {
   title: 'app/ErrorGroupDetails/DetailView/ExceptionStacktrace',
   component: ExceptionStacktrace,
   decorators: [
-    (Story: ComponentType) => {
-      return (
-        <EuiThemeProvider>
-          <Story />
-        </EuiThemeProvider>
-      );
-    },
+    (StoryComponent: ComponentType) => (
+      <EuiThemeProvider>
+        <StoryComponent />
+      </EuiThemeProvider>
+    ),
   ],
 };
 
-export function JavaWithLongLines() {
-  const exceptions: Exception[] = [
+export const JavaWithLongLines: Story<Args> = (args) => (
+  <ExceptionStacktrace {...args} />
+);
+JavaWithLongLines.args = {
+  codeLanguage: 'java',
+  exceptions: [
     {
       stacktrace: [
         {
@@ -1734,22 +1738,23 @@ export function JavaWithLongLines() {
         'Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue()',
       type: 'org.springframework.aop.AopInvocationException',
     },
-  ];
-
-  return <ExceptionStacktrace codeLanguage="java" exceptions={exceptions} />;
-}
+  ],
+};
 JavaWithLongLines.decorators = [
-  (Story: ComponentType) => {
-    return (
-      <div style={{ border: '1px dotted #aaa', width: 768 }}>
-        <Story />
-      </div>
-    );
-  },
+  (StoryComponent: ComponentType) => (
+    <div style={{ border: '1px dotted #aaa', width: 768 }}>
+      <StoryComponent />
+    </div>
+  ),
 ];
 
-export function JavaScriptWithSomeContext() {
-  const exceptions: Exception[] = [
+export const JavaScriptWithSomeContext: Story<Args> = (args) => (
+  <ExceptionStacktrace {...args} />
+);
+JavaScriptWithSomeContext.storyName = 'JavaScript With Some Context';
+JavaScriptWithSomeContext.args = {
+  codeLanguage: 'javascript',
+  exceptions: [
     {
       code: '503',
       stacktrace: [
@@ -1870,16 +1875,15 @@ export function JavaScriptWithSomeContext() {
       type: 'Error',
       message: 'Unexpected APM Server response when polling config',
     },
-  ];
-
-  return (
-    <ExceptionStacktrace codeLanguage="javascript" exceptions={exceptions} />
-  );
-}
-JavaScriptWithSomeContext.storyName = 'JavaScript With Some Context';
+  ],
+};
 
-export function RubyWithContextAndLibraryFrames() {
-  const exceptions: Exception[] = [
+export const RubyWithContextAndLibraryFrames: Story<Args> = (args) => (
+  <ExceptionStacktrace {...args} />
+);
+RubyWithContextAndLibraryFrames.args = {
+  codeLanguage: 'ruby',
+  exceptions: [
     {
       stacktrace: [
         {
@@ -2536,7 +2540,5 @@ export function RubyWithContextAndLibraryFrames() {
       message: "Couldn't find Order with 'id'=956",
       type: 'ActiveRecord::RecordNotFound',
     },
-  ];
-
-  return <ExceptionStacktrace codeLanguage="ruby" exceptions={exceptions} />;
-}
+  ],
+};

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/exception_stacktrace.test.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { composeStories } from '@storybook/testing-react';
+import React from 'react';
+import { mount } from 'enzyme';
+import * as stories from './exception_stacktrace.stories';
+
+const { JavaWithLongLines } = composeStories(stories);
+
+describe('ExceptionStacktrace', () => {
+  describe('render', () => {
+    describe('with stacktraces', () => {
+      it('renders the stacktraces', () => {
+        expect(mount(<JavaWithLongLines />).find('Stacktrace')).toHaveLength(3);
+      });
+    });
+
+    describe('with more than one stack trace', () => {
+      it('renders cause stacktraces', () => {
+        expect(
+          mount(<JavaWithLongLines />).find('CauseStacktrace')
+        ).toHaveLength(2);
+      });
+    });
+  });
+});

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx

@@ -39,7 +39,7 @@ import {
   getTabs,
   logStacktraceTab,
 } from './ErrorTabs';
-import { ExceptionStacktrace } from './ExceptionStacktrace';
+import { ExceptionStacktrace } from './exception_stacktrace';
 
 const HeaderContainer = euiStyled.div`
   display: flex;

x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx

@@ -5,33 +5,23 @@
  * 2.0.
  */
 
-import React from 'react';
-import { LinkPreview } from '../CreateEditCustomLinkFlyout/link_preview';
+import { composeStories } from '@storybook/testing-react';
 import {
   render,
   getNodeText,
   getByTestId,
   act,
   waitFor,
 } from '@testing-library/react';
-import {
-  getCallApmApiSpy,
-  CallApmApiSpy,
-} from '../../../../../../services/rest/callApmApiSpy';
+import React from 'react';
+import * as stories from './link_preview.stories';
+
+const { Example } = composeStories(stories);
 
 export const removeExternalLinkText = (str: string) =>
   str.replace(/\(opens in a new tab or window\)/g, '');
 
 describe('LinkPreview', () => {
-  let callApmApiSpy: CallApmApiSpy;
-  beforeAll(() => {
-    callApmApiSpy = getCallApmApiSpy().mockResolvedValue({
-      transaction: { id: 'foo' },
-    });
-  });
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
   const getElementValue = (container: HTMLElement, id: string) =>
     getNodeText(
       ((getByTestId(container, id) as HTMLDivElement)
@@ -41,7 +31,7 @@ describe('LinkPreview', () => {
   it('shows label and url default values', () => {
     act(() => {
       const { container } = render(
-        <LinkPreview label="" url="" filters={[{ key: '', value: '' }]} />
+        <Example label="" url="" filters={[{ key: '', value: '' }]} />
       );
       expect(getElementValue(container, 'preview-label')).toEqual('Elastic.co');
       expect(getElementValue(container, 'preview-url')).toEqual(
@@ -53,7 +43,7 @@ describe('LinkPreview', () => {
   it('shows label and url values', () => {
     act(() => {
       const { container } = render(
-        <LinkPreview
+        <Example
           label="foo"
           url="https://baz.co"
           filters={[{ key: '', value: '' }]}
@@ -71,7 +61,7 @@ describe('LinkPreview', () => {
   it("shows warning when couldn't replace context variables", () => {
     act(() => {
       const { container } = render(
-        <LinkPreview
+        <Example
           label="foo"
           url="https://baz.co?service.name={{invalid}"
           filters={[{ key: '', value: '' }]}
@@ -86,20 +76,23 @@ describe('LinkPreview', () => {
       expect(getByTestId(container, 'preview-warning')).toBeInTheDocument();
     });
   });
+
   it('replaces url with transaction id', async () => {
     const { container } = render(
-      <LinkPreview
+      <Example
         label="foo"
         url="https://baz.co?transaction={{transaction.id}}"
         filters={[{ key: '', value: '' }]}
       />
     );
-    await waitFor(() => expect(callApmApiSpy).toHaveBeenCalled());
-    expect(getElementValue(container, 'preview-label')).toEqual('foo');
-    expect(
-      removeExternalLinkText(
-        (getByTestId(container, 'preview-link') as HTMLAnchorElement).text
-      )
-    ).toEqual('https://baz.co?transaction=foo');
+
+    await waitFor(() => {
+      expect(getElementValue(container, 'preview-label')).toEqual('foo');
+      expect(
+        removeExternalLinkText(
+          (getByTestId(container, 'preview-link') as HTMLAnchorElement).text
+        )
+      ).toEqual('https://baz.co?transaction=0');
+    });
   });
 });

yarn.lock

@@ -4307,6 +4307,11 @@
     regenerator-runtime "^0.13.7"
     source-map "^0.7.3"
 
+"@storybook/testing-react@^0.0.17":
+  version "0.0.17"
+  resolved "https://registry.yarnpkg.com/@storybook/testing-react/-/testing-react-0.0.17.tgz#632dd22f8815743f78c182b126f444cf51d92d71"
+  integrity sha512-93nbA/JSWDEys1msd438+wzETRFDEgT2aFqJL2y46++zsyv8g2mCYKZkf9E36KQHMQbO1uJBHT8CmrLQa8VmZw==
+
 "@storybook/[email protected]", "@storybook/theming@^6.1.20":
   version "6.1.20"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.1.20.tgz#ed0b330a5c08bbe998e9df95e615f0e84a8d663f"