Get tests up to ~20%

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
   coverageDirectory: './coverage/',
   collectCoverage: true,
   transformIgnorePatterns: [
-    'node_modules/(?!@patternfly|@data-driven-forms)',
+    'node_modules/(?!@patternfly|@data-driven-forms)'
 
     // Uncomment the below line if you face any errors with jest
     // '/node_modules/(?!@redhat-cloud-services)',
@@ -17,14 +17,15 @@ module.exports = {
     '!<rootDir>/packages/**/index.js',
     '!<rootDir>/packages/**/*{c|C}ontext*.js',
     '!<rootDir>/packages/components/src/Components/Table/*',
+    '<rootDir>/packages/**/src/**/*.tsx'
   ],
-  setupFilesAfterEnv: [ '<rootDir>/config/setupTests.js', 'jest-canvas-mock' ],
+  setupFilesAfterEnv: ['<rootDir>/config/setupTests.js', 'jest-canvas-mock'],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    url: 'http://localhost:5000/',
+    url: 'http://localhost:5000/'
   },
-  setupFiles: [ './jest.setup.js' ],
-  roots: [ '<rootDir>/packages/' ],
+  setupFiles: ['./jest.setup.js'],
+  roots: ['<rootDir>/packages/'],
   // modulePathIgnorePatterns: ['<rootDir>/packages/create-crc-app/templates', '<rootDir>/packages/docs/.cache'],
   modulePathIgnorePatterns: [
     '<rootDir>/packages/*.*/dist/*.*',
@@ -37,11 +38,11 @@ module.exports = {
     customReact: 'react',
     reactRedux: 'react-redux',
     PFReactCore: '@patternfly/react-core',
-    PFReactTable: '@patternfly/react-table',
+    PFReactTable: '@patternfly/react-table'
   },
   globalSetup: '<rootDir>/config/globalSetup.js',
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
-    '^.+\\.tsx?$': [ 'ts-jest', { tsconfig: './packages/module/tsconfig.json', } ],
-  },
+    '^.+\\.tsx?$': ['ts-jest', { tsconfig: './packages/module/tsconfig.json' }]
+  }
 };

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -184,7 +184,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   const onEscape = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape') {
       // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
-      if ('type' in event.target && event.target.type !== 'button') {
+      if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {
         setIsDrawerOpen(false);
       }
     }

packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';
+import userEvent from '@testing-library/user-event';
+
+describe('ChatbotWelcomePrompt', () => {
+  it('should render welcome prompt', () => {
+    const { container } = render(
+      <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render correctly', () => {
+    render(<ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />);
+    expect(screen.getByText('Hello, Chatbot User')).toBeTruthy();
+    expect(screen.getByText('How may I help you today?')).toBeTruthy();
+  });
+  it('should render prompts with titles correctly', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        prompts={[{ title: 'Topic 1' }]}
+      />
+    );
+    expect(screen.getByText('Topic 1')).toBeTruthy();
+  });
+  it('should render prompts with messages correctly', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        prompts={[{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }]}
+      />
+    );
+    expect(screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+  });
+  it('should render prompts with onClick correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        prompts={[{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }]}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Topic 1/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+  it('should apply className appropriately', () => {
+    render(
+      <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" className="test" />
+    );
+    const element = screen.getByTestId('welcome-prompt');
+    expect(element).toHaveClass('test');
+  });
+});

packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -18,9 +18,9 @@ export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElemen
 
 export interface WelcomePrompt {
   /** Message for the welcome prompt */
-  message: string;
+  message?: string;
   /** Title for the welcome prompt */
-  title?: string;
+  title: string;
   /** Callback handler for the onClick event for welcome prompt */
   onClick?: () => void;
 }
@@ -32,7 +32,7 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
   className,
   ...props
 }: ChatbotWelcomePromptProps) => (
-  <div className={`pf-chatbot--layout--welcome ${className ?? ''}`} {...props}>
+  <div data-testid="welcome-prompt" className={`pf-chatbot--layout--welcome ${className ?? ''}`} {...props}>
     <Content component={ContentVariants.h1}>
       <span className="pf-chatbot__hello">{title}</span>
       <br />
@@ -51,7 +51,7 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
           >
             <CardTitle id={`welcome-prompt-title-${index}`}>{prompt.title}</CardTitle>
           </CardHeader>
-          <CardBody>{prompt.message}</CardBody>
+          {prompt.message && <CardBody>{prompt.message}</CardBody>}
         </Card>
       ))}
     </div>

packages/module/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
+<div>
+  <div
+    class="pf-chatbot--layout--welcome "
+    data-testid="welcome-prompt"
+  >
+    <h1
+      class="pf-v6-c-content--h1"
+      data-ouia-component-id="OUIA-Generated-Content-1"
+      data-ouia-component-type="PF6/Content"
+      data-ouia-safe="true"
+      data-pf-content="true"
+    >
+      <span
+        class="pf-chatbot__hello"
+      >
+        Hello, Chatbot User
+      </span>
+      <br />
+      <span
+        class="pf-chatbot__question"
+      >
+        How may I help you today?
+      </span>
+    </h1>
+    <div
+      class="pf-chatbot__prompt-suggestions"
+    />
+  </div>
+</div>
+`;

packages/module/src/FileDetails/FileDetails.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileDetails from './FileDetails';
+
+describe('FileDetails', () => {
+  it('should render file details', () => {
+    const { container } = render(<FileDetails fileName="test.txt" />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render file details correctly if an extension we support is passed in', () => {
+    render(<FileDetails fileName="test.txt" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+  });
+  it('should skip language if we do not support an extension', () => {
+    render(<FileDetails fileName="test.joke" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+});

packages/module/src/FileDetails/FileDetails.tsx

@@ -956,7 +956,11 @@ export const FileDetails = ({ fileName }: PropsWithChildren<FileDetailsProps>) =
         <StackItem>
           <span className="pf-chatbot__code-fileName">{path.parse(fileName).name}</span>
         </StackItem>
-        {language && <StackItem className="pf-chatbot__code-language">{language}</StackItem>}
+        {language && (
+          <StackItem data-testid="language" className="pf-chatbot__code-language">
+            {language}
+          </StackItem>
+        )}
       </Stack>
     </Flex>
   );

packages/module/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileDetails should render file details 1`] = `
+<div>
+  <div
+    class="pf-v6-l-flex pf-m-gap-sm"
+  >
+    <div
+      class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
+    >
+      <svg
+        fill="currentColor"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+          fill="currentColor"
+        />
+        <g
+          clip-path="url(#clip0_3280_27505)"
+        >
+          <path
+            d="M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clippath>
+            <rect
+              fill="white"
+              height="12.8"
+              transform="translate(4 5.60001)"
+              width="16"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+    <div
+      class="pf-v6-l-stack"
+    >
+      <div
+        class="pf-v6-l-stack__item"
+      >
+        <span
+          class="pf-chatbot__code-fileName"
+        >
+          test
+        </span>
+      </div>
+      <div
+        class="pf-v6-l-stack__item pf-chatbot__code-language"
+        data-testid="language"
+      >
+        TEXT
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/module/src/FileDetailsLabel/FileDetailsLabel.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileDetailsLabel from './FileDetailsLabel';
+import userEvent from '@testing-library/user-event';
+
+describe('FileDetailsLabel', () => {
+  it('should render file details label', () => {
+    const { container } = render(<FileDetailsLabel fileName="test.txt" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should render file details correctly if an extension we support is passed in', () => {
+    render(<FileDetailsLabel fileName="test.txt" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+  });
+  it('should skip language if we do not support an extension', () => {
+    render(<FileDetailsLabel fileName="test.joke" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should not show spinner by default', () => {
+    render(<FileDetailsLabel fileName="test.txt" />);
+    expect(screen.queryByTestId('spinner')).toBeFalsy();
+  });
+  it('should show spinner if loading', () => {
+    render(<FileDetailsLabel fileName="test.txt" isLoading />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+    expect(screen.queryByTestId('spinner')).toBeTruthy();
+  });
+  it('should call onClick prop', async () => {
+    const spy = jest.fn();
+    render(<FileDetailsLabel fileName="test.txt" onClick={spy} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should call onClose prop', async () => {
+    const spy = jest.fn();
+    render(<FileDetailsLabel fileName="test.txt" onClose={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Close test.txt/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should use closeButtonAriaLabel prop appropriately', () => {
+    render(<FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonAriaLabel="Delete file" />);
+    screen.getByRole('button', { name: /Delete file/i });
+  });
+});

packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -49,7 +49,7 @@ export const FileDetailsLabel = ({
       </FlexItem>
       {isLoading && (
         <FlexItem>
-          <Spinner size="sm" />
+          <Spinner data-testid="spinner" size="sm" />
         </FlexItem>
       )}
     </Flex>