chore(SourcesCard): Add tests

packages/module/src/SourcesCard/SourcesCard.test.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import SourcesCard from './SourcesCard';
+
+describe('SourcesCard', () => {
+  it('should render card', () => {
+    const { container } = render(<SourcesCard sources={[{ link: '' }]} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render card correctly if one source with only a link is passed in', () => {
+    render(<SourcesCard sources={[{ link: '' }]} />);
+    expect(screen.getByText('1 source')).toBeTruthy();
+    expect(screen.getByText('Source 1')).toBeTruthy();
+    // no buttons or navigation when there is only 1 source
+    expect(screen.queryByRole('button')).toBeFalsy();
+    expect(screen.queryByText('1 of 1')).toBeFalsy();
+  });
+
+  it('should render card correctly if one source with a title is passed in', () => {
+    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} />);
+    expect(screen.getByText('1 source')).toBeTruthy();
+    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+  });
+
+  it('should render card correctly if one source with a body is passed in', () => {
+    render(<SourcesCard sources={[{ link: '', body: 'To make an apple pie, you must first...' }]} />);
+    expect(screen.getByText('1 source')).toBeTruthy();
+    expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+  });
+
+  it('should render card correctly if one source with a title and body is passed in', () => {
+    render(
+      <SourcesCard
+        sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
+      />
+    );
+    expect(screen.getByText('1 source')).toBeTruthy();
+    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+    expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+  });
+
+  it('should render multiple cards correctly', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByText('2 sources')).toBeTruthy();
+    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+    expect(screen.getByText('1 of 2')).toBeTruthy();
+    screen.getByRole('button', { name: /Go to previous page/i });
+    screen.getByRole('button', { name: /Go to next page/i });
+  });
+
+  it('should navigate between cards correctly', async () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
+    expect(screen.getByText('How to make cookies')).toBeTruthy();
+    expect(screen.getByText('2 of 2')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+  });
+
+  it('should apply className appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        className="test"
+      />
+    );
+    const element = screen.getByRole('navigation');
+    expect(element).toHaveClass('test');
+  });
+
+  it('should disable pagination appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        isDisabled
+      />
+    );
+    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+  });
+
+  it('should change ofWord appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        ofWord={'de'}
+      />
+    );
+    expect(screen.getByText('1 de 2')).toBeTruthy();
+  });
+
+  it('should render navigation aria label appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
+  });
+
+  it('should change paginationAriaLabel appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        paginationAriaLabel="Navegación"
+      />
+    );
+    expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
+  });
+
+  it('should change sourceWord appropriately', () => {
+    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} sourceWord={'fuente'} />);
+    expect(screen.getByText('1 fuente')).toBeTruthy();
+  });
+
+  it('should sourceWordPlural appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        sourceWordPlural={'fuentes'}
+      />
+    );
+    expect(screen.getByText('2 fuentes')).toBeTruthy();
+  });
+
+  it('should change toNextPageAriaLabel appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        toNextPageAriaLabel="Pase a la siguiente página"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
+  });
+
+  it('should change toPreviousPageAriaLabel appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        toPreviousPageAriaLabel="Presione para regresar a la página anterior"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
+  });
+
+  it('should call onNextClick appropriately', async () => {
+    const spy = jest.fn();
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        onNextClick={spy}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should call onPreviousClick appropriately', async () => {
+    const spy = jest.fn();
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        onPreviousClick={spy}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should call onSetPage appropriately', async () => {
+    const spy = jest.fn();
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        onSetPage={spy}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SourcesCard should render card 1`] = `
+<div>
+  <div
+    class="pf-chatbot__source"
+  >
+    <span>
+      1 source
+    </span>
+    <div
+      class="pf-v6-c-card pf-chatbot__sources-card"
+      data-ouia-component-id="OUIA-Generated-Card-1"
+      data-ouia-component-type="PF6/Card"
+      data-ouia-safe="true"
+      id=""
+    >
+      <div
+        class="pf-v6-c-card__title"
+      >
+        <div
+          class="pf-v6-c-card__title-text pf-chatbot__sources-card-title"
+        >
+          <a
+            href=""
+          >
+            Source 1
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;