Merge pull request #281 from weni-ai/tests/simulator

[CFE-438] Tests: Simulator

src/components/__snapshots__/index.test.ts.snap

@@ -27,8 +27,8 @@ exports[`Root > instance methods > componentDidMount > should call action creato
         "recipients": "/assets/recipients.json",
         "resthooks": "/assets/resthooks.json",
         "revisions": "/assets/revisions.json",
-        "simulateResume": "",
-        "simulateStart": "",
+        "simulateResume": "/assets/simulate_resume.json",
+        "simulateStart": "/assets/simulate_start.json",
         "templates": "/assets/templates.json",
         "ticketer_queues": "/assets/ticketer_queues.json",
         "ticketers": "/assets/ticketers.json",

src/components/simulator/ContextExplorer.test.tsx

@@ -1,10 +1,9 @@
-import { render, mock, fireEvent } from 'test/utils';
+import { render, fireEvent, act } from 'test/utils';
 import * as React from 'react';
 import ContextExplorer, { ContextExplorerProps } from './ContextExplorer';
 
 const props: ContextExplorerProps = {
   visible: true,
-  onClose: vi.fn(),
   contents: {
     day: '020120',
     temperatures: [23.2, 21.2, 20.3, 20.5, 20.11, 21.3],
@@ -53,4 +52,142 @@ describe(ContextExplorer.name, () => {
 
     expect(baseElement).toMatchSnapshot();
   });
+
+  it('should show and hide keys with empty values', async () => {
+    vi.useFakeTimers();
+    const {
+      baseElement,
+
+      getByTestId,
+    } = render(<ContextExplorer {...props} />);
+
+    expect(baseElement).toMatchSnapshot();
+
+    // click on show empty
+    await act(async () => {
+      fireEvent.click(getByTestId('empty-toggle'));
+    });
+
+    vi.runAllTimers();
+    expect(baseElement).toMatchSnapshot();
+
+    // click to hide again
+    await act(async () => {
+      fireEvent.click(getByTestId('empty-toggle'));
+    });
+
+    vi.runAllTimers();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should copy row path if shift clicked', async () => {
+    vi.useFakeTimers();
+    const spy = vi.spyOn(window.navigator.clipboard, 'writeText');
+    const { getByText } = render(<ContextExplorer {...props} />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    // click on temperature
+    const tempNode = getByText('temperatures');
+    fireEvent.click(tempNode);
+
+    // shift click on a value
+    fireEvent.click(getByText('23.2'), { shiftKey: true });
+    vi.runAllTimers();
+
+    expect(spy).toHaveBeenCalledWith('@temperatures.0');
+  });
+
+  it('should copy row path if copy is clicked', () => {
+    vi.useFakeTimers();
+    const spy = vi.spyOn(window.navigator.clipboard, 'writeText');
+    const { getByText, getByTestId } = render(<ContextExplorer {...props} />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    // click on temperature
+    const tempNode = getByText('temperatures');
+    fireEvent.click(tempNode);
+
+    // click on copy
+    fireEvent.click(getByTestId('context-row-temperatures-copy'));
+    vi.runAllTimers();
+
+    expect(spy).toHaveBeenCalledWith('@temperatures');
+  });
+
+  it('should handle nameless content', () => {
+    props.contents = {
+      '': 'nameless',
+    };
+    const { getByTestId, queryAllByText } = render(
+      <ContextExplorer {...props} />,
+    );
+
+    // toggle show empty
+    fireEvent.click(getByTestId('empty-toggle'));
+
+    expect(queryAllByText('nameless').length).toBe(0);
+  });
+
+  it('should handle default content', () => {
+    props.contents = {
+      __default__: 'default',
+    };
+    const { getByTestId, queryAllByText } = render(
+      <ContextExplorer {...props} />,
+    );
+
+    // toggle show empty
+    fireEvent.click(getByTestId('empty-toggle'));
+
+    expect(queryAllByText('default').length).toBe(0);
+  });
+
+  it('should handle default values contents', () => {
+    props.contents = {
+      default_value: { __default__: 'default value' },
+    };
+    const { getByTestId, queryAllByText } = render(
+      <ContextExplorer {...props} />,
+    );
+
+    // toggle show empty
+    fireEvent.click(getByTestId('empty-toggle'));
+
+    expect(queryAllByText('default value').length).toBe(1);
+  });
+
+  it('should handle default values contents with multiple keys', () => {
+    props.contents = {
+      default_value: { __default__: 'default value', should: 'be displayed' },
+    };
+    const { getByTestId, queryAllByText, getByText } = render(
+      <ContextExplorer {...props} />,
+    );
+
+    // toggle show empty
+    fireEvent.click(getByTestId('empty-toggle'));
+
+    expect(queryAllByText('default value').length).toBe(1);
+
+    // toggle should be displayed
+    fireEvent.click(getByText('default value'));
+
+    expect(queryAllByText('be displayed').length).toBe(1);
+  });
+
+  it('should handle undefined content', () => {
+    props.contents = undefined;
+    const { baseElement } = render(<ContextExplorer {...props} />);
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should show if visible', () => {
+    props.visible = true;
+    const { baseElement } = render(<ContextExplorer {...props} />);
+
+    expect(baseElement).toMatchSnapshot();
+  });
 });

src/components/simulator/ContextExplorer.tsx

@@ -29,7 +29,6 @@ type PathStep = number | string;
 
 export interface ContextExplorerProps {
   visible: boolean;
-  onClose: () => void;
   contents: any;
 }
 
@@ -193,6 +192,7 @@ export default class ContextExplorer extends React.Component<
             {name}
             <div className={styles.key_summary}>{keySummary}</div>
             <div
+              data-testid={`context-row-${name}-copy`}
               className={styles.clipboard}
               onClick={(evt: React.MouseEvent<HTMLDivElement>) => {
                 evt.stopPropagation();
@@ -218,7 +218,6 @@ export default class ContextExplorer extends React.Component<
     if (!value) {
       return null;
     }
-
     return (
       <>
         {Object.keys(value).map((key: string) => {
@@ -272,6 +271,7 @@ export default class ContextExplorer extends React.Component<
         <div className={styles.panel}>{this.renderProperties(context)}</div>
         <div className={styles.footer}>
           <div
+            data-testid="empty-toggle"
             className={styles.empty_toggle}
             onClick={() => {
               this.handleToggleHide();