Merge pull request #24 from rebeccaalpert/testing

Add more tests

src/app/FlyoutError/FlyoutError.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { FlyoutError } from './FlyoutError';
+
+describe('Flyout errror', () => {
+  it('should render correctly', async () => {
+    render(<FlyoutError title="Test" />);
+    expect(screen.getByText('Test')).toBeTruthy();
+  });
+  it('should render correctly with subtitle', async () => {
+    render(<FlyoutError title="Test" subtitle="Subtitle" />);
+    expect(screen.getByText('Test')).toBeTruthy();
+    expect(screen.getByText('Subtitle')).toBeTruthy();
+  });
+  it('should render correctly with button', async () => {
+    const spy = jest.fn();
+    render(<FlyoutError title="Test" onClick={spy} />);
+    const toggle = screen.getByRole('button', { name: /Retry/i });
+    await userEvent.click(toggle);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

src/app/FlyoutFooter/FlyoutFooter.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { FlyoutFooter } from './FlyoutFooter';
+
+describe('Flyout footer', () => {
+  it('should render correctly', async () => {
+    const spy = jest.fn();
+    render(<FlyoutFooter primaryButton="New assistant" onPrimaryButtonClick={spy} />);
+    const toggle = screen.getByRole('button', { name: /New assistant/i });
+    await userEvent.click(toggle);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should disable primary button', async () => {
+    render(<FlyoutFooter primaryButton="New assistant" onPrimaryButtonClick={jest.fn()} isPrimaryButtonDisabled />);
+    expect(screen.getByRole('button', { name: /New assistant/i })).toBeDisabled();
+  });
+  it('should render second button', async () => {
+    const spy = jest.fn();
+    render(
+      <FlyoutFooter
+        primaryButton="Create assistant"
+        onPrimaryButtonClick={jest.fn()}
+        secondaryButton="Cancel"
+        onSecondaryButtonClick={spy}
+      />,
+    );
+    const toggle = screen.getByRole('button', { name: /Cancel/i });
+    await userEvent.click(toggle);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

src/app/FlyoutForm/ExpandingTextInputs.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { ExpandingTextInputs } from './ExpandingTextInputs';
+
+const MOCK_VALUES = ['What is an apple?', 'What is a pear?'];
+Object.defineProperty(window.HTMLElement.prototype, 'scrollIntoView', {
+  value: jest.fn(),
+  writable: true,
+});
+
+describe('Expanding text inputs', () => {
+  it('should render correctly with no values', () => {
+    render(<ExpandingTextInputs handleInputChange={jest.fn()} values={[]} fieldId="test" onDeleteValue={jest.fn()} />);
+    expect(screen.getByRole('textbox', { name: /Enter example question/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Add/i })).toBeTruthy();
+    expect(screen.queryByRole('region', { name: /Example questions/i })).toBeFalsy();
+  });
+  it('should be able to input a value', async () => {
+    const spy = jest.fn();
+    render(<ExpandingTextInputs handleInputChange={spy} values={[]} fieldId="test" onDeleteValue={jest.fn()} />);
+    const input = screen.getByRole('textbox', { name: /Enter example question/i }) as HTMLTextAreaElement;
+    fireEvent.change(input, { target: { value: 'What is an apple?' } });
+    expect(input.value).toBe('What is an apple?');
+    await userEvent.click(screen.getByRole('button', { name: /Add/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should render correctly with some pre-filled values', () => {
+    render(
+      <ExpandingTextInputs
+        handleInputChange={jest.fn()}
+        values={MOCK_VALUES}
+        fieldId="test"
+        onDeleteValue={jest.fn()}
+      />,
+    );
+    expect(screen.getByRole('textbox', { name: /Enter example question/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Add/i })).toBeTruthy();
+    expect(screen.getByRole('region', { name: /Example questions/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Edit question What is an apple?/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Delete question What is an apple?/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Edit question What is a pear?/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Delete question What is a pear?/i })).toBeTruthy();
+  });
+  it('should be able to click edit button and see an input', async () => {
+    render(
+      <ExpandingTextInputs
+        handleInputChange={jest.fn()}
+        values={MOCK_VALUES}
+        fieldId="test"
+        onDeleteValue={jest.fn()}
+      />,
+    );
+    const edit = screen.getByRole('button', { name: /Edit question What is an apple?/i });
+    await userEvent.click(edit);
+    expect(screen.getByRole('textbox', { name: /Edit example question What is an apple?/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Save question What is an apple?/i })).toBeTruthy();
+  });
+  it('should be able to delete a value', async () => {
+    const spy = jest.fn();
+    render(
+      <ExpandingTextInputs handleInputChange={jest.fn()} values={MOCK_VALUES} fieldId="test" onDeleteValue={spy} />,
+    );
+    const btn = screen.getByRole('button', { name: /Delete question What is an apple?/i });
+    await userEvent.click(btn);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('button', { name: /Edit example question What is an apple?/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Delete example question What is an apple?/i })).toBeFalsy();
+  });
+});

src/app/FlyoutForm/ExpandingTextInputs.tsx

@@ -65,9 +65,7 @@ export const ExpandingTextInputs: React.FunctionComponent<ExpandingTextInputsPro
                     name={`${fieldId}-edit-text-input-${index}`}
                     onChange={(e, value) => setEditingInputValue(value)}
                     tabIndex={editingIndex === index ? 0 : -1}
-                    aria-label={
-                      editingInputValue === '' ? 'Edit example question' : `Edit example question ${editingInputValue}`
-                    }
+                    aria-label={`Edit example question ${value}`}
                   />
                 </div>
                 <div className={`expanding-text-inputs__row-value ${editingIndex === index ? 'hidden' : ''}`}>
@@ -83,7 +81,7 @@ export const ExpandingTextInputs: React.FunctionComponent<ExpandingTextInputsPro
                   }}
                   variant="plain"
                   className={editingIndex === index ? '' : 'hidden'}
-                  aria-label={`Save question ${editingInputValue}`}
+                  aria-label={`${editingIndex === index ? `Save question ${editingInputValue}` : `Save question ${value}`}`}
                 >
                   <CheckIcon />
                 </Button>

src/app/FlyoutForm/FlyoutForm.tsx

@@ -1,7 +1,7 @@
 import { useAppData } from '@app/AppData/AppDataContext';
 import { FlyoutError } from '@app/FlyoutError/FlyoutError';
 import { FlyoutFooter } from '@app/FlyoutFooter/FlyoutFooter';
-import { FlyoutHeader } from '@app/FlyoutHeader.tsx/FlyoutHeader';
+import { FlyoutHeader } from '@app/FlyoutHeader/FlyoutHeader';
 import { FlyoutLoading } from '@app/FlyoutLoading/FlyoutLoading';
 import { useFlyoutWizard } from '@app/FlyoutWizard/FlyoutWizardContext';
 import { ErrorObject } from '@app/types/ErrorObject';

src/app/FlyoutHeader/FlyoutHeader.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { FlyoutHeader } from './FlyoutHeader';
+
+describe('Flyout header', () => {
+  it('should render correctly', async () => {
+    const spy = jest.fn();
+    render(<FlyoutHeader title="Test" hideFlyout={spy} />);
+    const toggle = screen.getByRole('button', { name: /Close/i });
+    await userEvent.click(toggle);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('Test')).toBeTruthy();
+  });
+});

src/app/FlyoutHeader/FlyoutHeader.tsx

@@ -3,14 +3,14 @@ import { TimesIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 
 interface FlyoutHeaderProps {
-  title: React.ReactNode | string;
+  title: string | React.ReactNode;
   hideFlyout: () => void;
 }
 export const FlyoutHeader: React.FunctionComponent<FlyoutHeaderProps> = ({ title, hideFlyout }: FlyoutHeaderProps) => {
   return (
     <div className="flyout-header">
       {title}
-      <Button onClick={hideFlyout} variant="plain" icon={<TimesIcon />} />
+      <Button onClick={hideFlyout} variant="plain" icon={<TimesIcon />} aria-label="Close" />
     </div>
   );
 };

src/app/FlyoutList/FlyoutList.tsx

@@ -1,7 +1,7 @@
 import { useAppData } from '@app/AppData/AppDataContext';
 import { FlyoutError } from '@app/FlyoutError/FlyoutError';
 import { FlyoutFooter } from '@app/FlyoutFooter/FlyoutFooter';
-import { FlyoutHeader } from '@app/FlyoutHeader.tsx/FlyoutHeader';
+import { FlyoutHeader } from '@app/FlyoutHeader/FlyoutHeader';
 import { FlyoutLoading } from '@app/FlyoutLoading/FlyoutLoading';
 import { useFlyoutWizard } from '@app/FlyoutWizard/FlyoutWizardContext';
 import { CannedChatbot } from '@app/types/CannedChatbot';

src/app/FlyoutLoading/FlyoutLoading.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FlyoutLoading } from './FlyoutLoading';
+
+describe('Flyout loading', () => {
+  it('should render correctly', async () => {
+    render(<FlyoutLoading />);
+    expect(screen.getByRole('progressbar')).toBeTruthy();
+  });
+});

src/app/FlyoutStartScreen/FlyoutStartScreen.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FlyoutStartScreen } from './FlyoutStartScreen';
+import { FlyoutWizardProvider } from '@app/FlyoutWizard/FlyoutWizardContext';
+
+describe('Flyout start screen', () => {
+  it('should render correctly with subtitle', async () => {
+    render(
+      <FlyoutWizardProvider>
+        <FlyoutStartScreen title="Test" header="Header" subtitle="I am a subtitle" hideFlyout={jest.fn()} />
+      </FlyoutWizardProvider>,
+    );
+    expect(screen.getByText('I am a subtitle')).toBeTruthy();
+  });
+  it('should render correctly with primary button', async () => {
+    render(
+      <FlyoutWizardProvider>
+        <FlyoutStartScreen title="Test" header="Header" primaryButtonText="Get started" hideFlyout={jest.fn()} />
+      </FlyoutWizardProvider>,
+    );
+    expect(screen.getByRole('button', { name: /Get started/i })).toBeTruthy();
+  });
+  it('should render correctly with secondary button', async () => {
+    render(
+      <FlyoutWizardProvider>
+        <FlyoutStartScreen title="Test" header="Header" secondaryButtonText="Learn more" hideFlyout={jest.fn()} />
+      </FlyoutWizardProvider>,
+    );
+    expect(screen.getByRole('button', { name: /Learn more/i })).toBeTruthy();
+    expect(screen.getByText('or')).toBeTruthy();
+  });
+});

src/app/FlyoutStartScreen/FlyoutStartScreen.tsx

@@ -1,4 +1,4 @@
-import { FlyoutHeader } from '@app/FlyoutHeader.tsx/FlyoutHeader';
+import { FlyoutHeader } from '@app/FlyoutHeader/FlyoutHeader';
 import { useFlyoutWizard } from '@app/FlyoutWizard/FlyoutWizardContext';
 import { Button } from '@patternfly/react-core';
 import * as React from 'react';