Add unit tests for ActionElement (#372)

* Delete stupid way of naming `describe` blocks.

* Add tests for `ActionElement`.

* Add data test id attribute to ActionElement.

* Add some additional tests.

src/components/ActionDetail/ActionDetail.test.tsx

@@ -28,7 +28,7 @@ import { render } from '../../helpers/test';
 import { ActionDetail } from './ActionDetail';
 import { ActionContext } from '../../../common/types';
 
-describe('<ActionDetail />', () => {
+describe('ActionDetail', () => {
   let onUpdateActionMock: jest.Mock;
 
   beforeEach(() => {

src/components/ActionDetail/FormControl.test.tsx

@@ -27,7 +27,7 @@ import React from 'react';
 import { render } from '../../helpers/test';
 import { FormControl } from './FormControl';
 
-describe('<FormControl />', () => {
+describe('FormControl', () => {
   it('Displays the label', () => {
     const { getByText } = render(
       <FormControl label="Test label" name="Test name" onChange={jest.fn()} value="Test value" />

src/components/ActionElement/ActionElement.test.tsx

@@ -0,0 +1,260 @@
+/*
+MIT License
+
+Copyright (c) 2021-present, Elastic NV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { createAction, createSteps } from '../../../common/helper/test/createAction';
+import { RecorderSteps } from '../../../common/types';
+import { render } from '../../helpers/test';
+import { ActionElement } from './ActionElement';
+
+describe('ActionElement', () => {
+  let onDeleteAction: jest.Mock;
+  let onUpdateAction: jest.Mock;
+  let onSetActionIsOpen: jest.Mock;
+  let steps: RecorderSteps;
+
+  beforeEach(() => {
+    onDeleteAction = jest.fn();
+    onUpdateAction = jest.fn();
+    onSetActionIsOpen = jest.fn();
+    steps = createSteps([['action1', 'action2'], ['action3'], ['action4', 'action5']]);
+  });
+
+  it('renders typical content as expected', () => {
+    const action = createAction('action-1', { title: 'Action 1' });
+    const { getByText } = render(
+      <ActionElement actionIndex={0} actionContext={action} stepIndex={0} />,
+      {
+        contextOverrides: {
+          steps: {
+            onDeleteAction,
+            onUpdateAction,
+            onSetActionIsOpen,
+            steps,
+          },
+        },
+      }
+    );
+    expect(getByText('action-1'));
+  });
+
+  it('renders null if the action is soft-deleted', () => {
+    const action = createAction('action-1', { title: 'Action 1', isSoftDeleted: true });
+    const { queryByText } = render(
+      <ActionElement actionIndex={0} actionContext={action} stepIndex={0} />,
+      {
+        contextOverrides: {
+          steps: {
+            onDeleteAction,
+            onUpdateAction,
+            onSetActionIsOpen,
+            steps,
+          },
+        },
+      }
+    );
+    expect(queryByText('action-1')).toBeNull();
+  });
+
+  it('renders assertion component when that flag is set', async () => {
+    const action = createAction('action-1', {
+      title: 'Action 1',
+      action: { isAssert: true },
+      isOpen: true,
+    });
+    const { getByText, getByLabelText } = render(
+      <ActionElement actionIndex={0} actionContext={action} stepIndex={0} />,
+      {
+        contextOverrides: {
+          steps: {
+            onDeleteAction,
+            onUpdateAction,
+            onSetActionIsOpen,
+            steps,
+          },
+        },
+      }
+    );
+    expect(getByLabelText('Assertion value'));
+
+    const saveButton = getByText('Save');
+
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(onUpdateAction).toHaveBeenCalledTimes(1);
+      expect(onUpdateAction).toHaveBeenCalledWith(
+        {
+          action: {
+            command: '',
+            isAssert: true,
+            name: 'action-1',
+            selector: undefined,
+            signals: [],
+            url: 'https://www.elastic.co',
+            value: '',
+          },
+          frame: {
+            committed: true,
+            isMainFrame: true,
+            pageAlias: 'page',
+            url: 'https://www.elastic.co',
+          },
+          isOpen: false,
+          title: 'Action 1',
+        },
+        0,
+        0
+      );
+    });
+  });
+
+  it('renders action component when for non-assert', async () => {
+    const action = createAction('action-1', {
+      title: 'Action 1',
+      isOpen: true,
+    });
+    const { getByText } = render(
+      <ActionElement actionIndex={1} actionContext={action} stepIndex={1} />,
+      {
+        contextOverrides: {
+          steps: {
+            onDeleteAction,
+            onUpdateAction,
+            onSetActionIsOpen,
+            steps,
+          },
+        },
+      }
+    );
+
+    expect(getByText('Edit action'));
+
+    const saveButton = getByText('Save');
+
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(onUpdateAction).toHaveBeenCalledTimes(1);
+      expect(onUpdateAction).toHaveBeenCalledWith(
+        {
+          action: {
+            name: 'action-1',
+            selector: '',
+            signals: [],
+            text: undefined,
+            url: 'https://www.elastic.co',
+          },
+          frame: {
+            committed: true,
+            isMainFrame: true,
+            pageAlias: 'page',
+            url: 'https://www.elastic.co',
+          },
+          isOpen: false,
+          modified: true,
+          title: 'Action 1',
+        },
+        1,
+        1
+      );
+    });
+  });
+
+  it('shows controls on mouse over and hides them on mouse leave', async () => {
+    const hiddenStyle = '"visibility":"hidden"';
+    const action = createAction('action-1', {
+      title: 'action-1',
+      isOpen: true,
+    });
+    const { getByLabelText, getByTestId } = render(
+      <ActionElement actionIndex={1} actionContext={action} stepIndex={1} />,
+      {
+        contextOverrides: {
+          steps: {
+            onDeleteAction,
+            onUpdateAction,
+            onSetActionIsOpen,
+            steps,
+          },
+        },
+      }
+    );
+
+    expect(JSON.stringify(getByLabelText('Begin editing this action').style)).toContain(
+      hiddenStyle
+    );
+
+    const accordion = getByTestId('step-accordion-action-1');
+
+    fireEvent.mouseOver(accordion);
+
+    await waitFor(() => {
+      expect(JSON.stringify(getByLabelText('Begin editing this action').style)).not.toContain(
+        hiddenStyle
+      );
+    });
+
+    fireEvent.mouseLeave(accordion);
+
+    await waitFor(() => {
+      expect(JSON.stringify(getByLabelText('Begin editing this action').style)).toContain(
+        hiddenStyle
+      );
+    });
+  });
+
+  it('sets action open status via controls', async () => {
+    const actionIndex = 1;
+    const stepIndex = 1;
+    const action = createAction('action-1', {
+      title: 'action-1',
+      isOpen: true,
+    });
+    const { getByText, getByTestId } = render(
+      <ActionElement actionIndex={actionIndex} actionContext={action} stepIndex={stepIndex} />,
+      {
+        contextOverrides: {
+          steps: {
+            onDeleteAction,
+            onUpdateAction,
+            onSetActionIsOpen,
+            steps,
+          },
+        },
+      }
+    );
+
+    const accordion = getByTestId('step-accordion-action-1');
+
+    fireEvent.mouseOver(accordion);
+
+    fireEvent.click(getByText('Cancel'));
+
+    await waitFor(() => {
+      expect(onSetActionIsOpen).toHaveBeenCalledWith(stepIndex, actionIndex, false);
+    });
+  });
+});

src/components/ActionElement/ActionElement.tsx

@@ -135,6 +135,7 @@ function ActionComponent({
           arrowDisplay="none"
           buttonProps={{ style: { display: 'none' } }}
           paddingSize="m"
+          data-testid={`step-accordion-${actionContext.title}`}
           id={`step-accordion-${actionContext.title}`}
           initialIsOpen={actionContext.isOpen}
           forceState={actionContext.isOpen ? 'open' : 'closed'}

src/components/Header/HeaderControls.test.tsx

@@ -27,7 +27,7 @@ import { RecordingStatus } from '../../common/types';
 import { HeaderControls } from './HeaderControls';
 import { render } from '../../helpers/test';
 
-describe('<HeaderControls />', () => {
+describe('HeaderControls', () => {
   it('displays start text when not recording', async () => {
     const { getByLabelText } = render(<HeaderControls setIsCodeFlyoutVisible={jest.fn()} />);
 

src/components/Header/UrlField.test.tsx

@@ -27,7 +27,7 @@ import React from 'react';
 import { RecordingStatus } from '../../common/types';
 import { IUrlField, UrlField, URL_FIELD_LABEL } from './UrlField';
 
-describe('<UrlField />', () => {
+describe('UrlField', () => {
   let setUrlMock: jest.Mock;
   let toggleRecordingMock: jest.Mock;
   const TEST_URL = 'https://www.elastic.co';

src/components/SaveCodeButton.test.tsx

@@ -28,7 +28,7 @@ import { SaveCodeButton } from './SaveCodeButton';
 import { createSteps } from '../../common/helper/test/createAction';
 import { fireEvent, waitFor } from '@testing-library/react';
 
-describe('<SaveCodeButton />', () => {
+describe('SaveCodeButton', () => {
   it('calls ipc on click', async () => {
     const callMain = jest.fn();
     callMain.mockImplementation(() => 'this would be generated code');

src/components/TestResult/ResultTitle.test.tsx

@@ -27,7 +27,7 @@ import React from 'react';
 import { render } from '../../helpers/test';
 import { ResultTitle } from './ResultTitle';
 
-describe('<ResultTitle />', () => {
+describe('ResultTitle', () => {
   const titleText = 'Test Result';
   const stepIndex = 1;
   const maxTitleLength = 20;

src/components/TestResult/TestResult.test.tsx

@@ -28,7 +28,7 @@ import { createStep } from '../../../common/helper/test/createAction';
 import { render } from '../../helpers/test';
 import { TestResult } from './TestResult';
 
-describe('<TestResult />', () => {
+describe('TestResult', () => {
   it('does not render the flyout if there is no result data', () => {
     const { queryByTestId } = render(<TestResult />, {
       contextOverrides: {

src/components/TestResult/TruncatedTitle.test.tsx

@@ -27,7 +27,7 @@ import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../helpers/test';
 import { TruncatedTitle } from './TruncatedTitle';
 
-describe('<TruncatedTitle />', () => {
+describe('TruncatedTitle', () => {
   it(`renders the full string if it's less than max length`, () => {
     const { getByText } = render(
       <TruncatedTitle maxLength={100} stepIndex={0} text="Hello World!" />