-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6ea3950
commit e601825
Showing
2 changed files
with
272 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); |
34 changes: 34 additions & 0 deletions
34
packages/module/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
`; |