Add tests for agent framework traces components (#60)

* Add tests for agent framework traces components

Signed-off-by: gaobinlong <gbinlong@amazon.com>

* Modify test snapshot

Signed-off-by: gaobinlong <gbinlong@amazon.com>

* Add more tests

Signed-off-by: gaobinlong <gbinlong@amazon.com>

---------

Signed-off-by: gaobinlong <gbinlong@amazon.com>

public/components/__snapshots__/agent_framework_traces.test.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AgentFrameworkTraces/> spec renders the component 1`] = `
+HTMLCollection [
+  <div>
+    <div
+      class="euiMarkdownFormat"
+    >
+      <div>
+        <h1>
+          How was this generated
+        </h1>
+        
+
+        <h4>
+          Question
+        </h4>
+        
+
+        <h4>
+          Result
+        </h4>
+        
+
+        <p>
+          output
+        </p>
+      </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <div
+      class="euiText euiText--medium"
+    >
+      <h3>
+        Response
+      </h3>
+    </div>
+    <div>
+      <div
+        class="euiSpacer euiSpacer--s"
+      />
+      <div
+        class="euiAccordion"
+      >
+        <div
+          class="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="Step 1 - CatIndexTool"
+            aria-expanded="false"
+            class="euiAccordion__button"
+            id="random_html_id"
+            type="button"
+          >
+            <span
+              class="euiAccordion__iconWrapper"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </span>
+            <span
+              class="euiIEFlexWrapFix"
+            >
+              Step 1 - CatIndexTool
+            </span>
+          </button>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          class="euiAccordion__childWrapper"
+          id="Step 1 - CatIndexTool"
+          role="region"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              class=""
+            >
+              <div
+                class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingSmall prismjs language-none"
+              >
+                <pre
+                  class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+                  tabindex="-1"
+                >
+                  <code
+                    class="euiCodeBlock__code"
+                  >
+                    Input: 
+                    input
+                  </code>
+                </pre>
+              </div>
+              <div
+                class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingSmall prismjs language-none"
+              >
+                <pre
+                  class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+                  tabindex="-1"
+                >
+                  <code
+                    class="euiCodeBlock__code"
+                  >
+                    Output: 
+                    output
+                  </code>
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr
+        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+      />
+    </div>
+  </div>,
+]
+`;

public/components/agent_framework_traces.test.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import { AgentFrameworkTraces } from './agent_framework_traces';
+import * as GetTraces from '../hooks/use_fetch_agentframework_traces';
+
+describe('<AgentFrameworkTraces/> spec', () => {
+  it('renders the component', async () => {
+    const traces = [
+      {
+        interactionId: 'test_interactionId',
+        parentInteractionId: 'test_parent_interactionId',
+        input: 'input',
+        output: 'output',
+        createTime: '',
+        origin: '',
+        traceNumber: 1,
+      },
+      {
+        interactionId: 'test_interactionId',
+        parentInteractionId: 'test_parent_interactionId',
+        input: 'input',
+        output: 'output',
+        createTime: '',
+        origin: 'CatIndexTool',
+        traceNumber: 2,
+      },
+      {
+        interactionId: 'test_interactionId',
+        parentInteractionId: 'test_parent_interactionId',
+        input: 'input',
+        output: '',
+        createTime: '',
+        origin: '',
+        traceNumber: 3,
+      },
+      {
+        interactionId: 'test_interactionId',
+        parentInteractionId: 'test_parent_interactionId',
+        input: '',
+        output: 'output',
+        createTime: '',
+        origin: '',
+        traceNumber: 4,
+      },
+    ];
+    const mockedGetTracesResult = {
+      loading: false,
+      data: traces,
+    };
+
+    jest.spyOn(GetTraces, 'useFetchAgentFrameworkTraces').mockReturnValue(mockedGetTracesResult);
+
+    render(<AgentFrameworkTraces traceId="test-trace-id" />);
+    expect(GetTraces.useFetchAgentFrameworkTraces).toBeCalledTimes(1);
+    expect(document.body.children).toMatchSnapshot();
+  });
+
+  it('no traces available', async () => {
+    jest.spyOn(GetTraces, 'useFetchAgentFrameworkTraces').mockReturnValue({
+      loading: false,
+      data: [],
+    });
+    render(<AgentFrameworkTraces traceId="test-trace-id" />);
+    expect(screen.queryByText('Data not available.')).toBeInTheDocument();
+  });
+
+  it('show loading', async () => {
+    jest.spyOn(GetTraces, 'useFetchAgentFrameworkTraces').mockReturnValue({
+      loading: true,
+      data: [],
+    });
+    render(<AgentFrameworkTraces traceId="test-trace-id" />);
+    expect(screen.queryByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('show error', async () => {
+    jest.spyOn(GetTraces, 'useFetchAgentFrameworkTraces').mockReturnValue({
+      loading: false,
+      data: [],
+      error: new Error('test'),
+    });
+    render(<AgentFrameworkTraces traceId="test-trace-id" />);
+    expect(screen.queryByText('Error loading details')).toBeInTheDocument();
+  });
+});

public/components/agent_framework_traces_flyout_body.test.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { act, waitFor, render, screen, fireEvent } from '@testing-library/react';
+import * as chatContextExports from '../contexts/chat_context';
+import { AgentFrameworkTracesFlyoutBody } from './agent_framework_traces_flyout_body';
+import { TAB_ID } from '../utils/constants';
+
+jest.mock('./agent_framework_traces', () => {
+  return {
+    AgentFrameworkTraces: () => <div />,
+  };
+});
+
+describe('<AgentFrameworkTracesFlyout/> spec', () => {
+  it('show back button if traceId exists', async () => {
+    const onCloseMock = jest.fn();
+    jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({
+      traceId: 'test-trace-Id',
+      setSelectedTabId: onCloseMock,
+    });
+    render(<AgentFrameworkTracesFlyoutBody />);
+    expect(screen.queryAllByLabelText('back')).toHaveLength(1);
+    act(() => {
+      fireEvent.click(screen.getByText('Back'));
+    });
+    await waitFor(() => {
+      expect(onCloseMock).toHaveBeenCalledWith(TAB_ID.CHAT);
+    });
+  });
+
+  it('no back button if traceId does not exist', async () => {
+    jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({
+      traceId: undefined,
+    });
+    render(<AgentFrameworkTracesFlyoutBody />);
+    expect(screen.queryAllByLabelText('back')).toHaveLength(0);
+  });
+
+  it('fullscreen with opening from chat', async () => {
+    const onCloseMock = jest.fn();
+    jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({
+      traceId: 'test-trace-id',
+      flyoutFullScreen: true,
+      setSelectedTabId: onCloseMock,
+      preSelectedTabId: TAB_ID.CHAT,
+    });
+    render(<AgentFrameworkTracesFlyoutBody />);
+    expect(screen.queryAllByLabelText('close')).toHaveLength(1);
+    act(() => {
+      fireEvent.click(screen.queryAllByLabelText('close')[0]);
+    });
+    await waitFor(() => {
+      expect(onCloseMock).toHaveBeenCalledWith(TAB_ID.CHAT);
+    });
+  });
+
+  it('fullscreen with opening from history', async () => {
+    const onCloseMock = jest.fn();
+    jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({
+      traceId: 'test-trace-id',
+      flyoutFullScreen: true,
+      setSelectedTabId: onCloseMock,
+      preSelectedTabId: TAB_ID.HISTORY,
+    });
+    render(<AgentFrameworkTracesFlyoutBody />);
+    expect(screen.queryAllByLabelText('back')).toHaveLength(1);
+    act(() => {
+      fireEvent.click(screen.getByText('Back'));
+    });
+    await waitFor(() => {
+      expect(onCloseMock).toHaveBeenCalledWith(TAB_ID.HISTORY);
+    });
+  });
+});

public/components/agent_framework_traces_flyout_body.tsx

@@ -36,6 +36,7 @@ export const AgentFrameworkTracesFlyoutBody: React.FC = () => {
             <EuiPageHeaderSection>
               {showBack && (
                 <EuiButtonEmpty
+                  aria-label="back"
                   size="xs"
                   flush="left"
                   onClick={() => {