Skip to content

Commit bb21eb0

Browse files
rebeccaalpertrebeccaalpert
authored
feat(SourcesCardBase): Expose just card portion of SourcesCard (#674)
Allows consumers to custom-roll their own layouts using preexisting component.
1 parent 4c75821 commit bb21eb0

7 files changed

Lines changed: 498 additions & 499 deletions

File tree

‎packages/module/src/SourcesCard/SourcesCard.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
.pf-chatbot__source {
1+
.pf-chatbot__source,
2+
.pf-chatbot__sources-card-base {
23
display: flex;
34
flex-direction: column;
45
gap: var(--pf-t--global--spacer--sm);
56
padding-block-start: var(--pf-t--global--spacer--sm);
67
max-width: 22.5rem;
8+
}
79

10+
.pf-chatbot__sources-card-base {
811
a {
912
color: var(--pf-t--global--text--color--link--default) !important;
1013
-webkit-text-decoration: var(--pf-t--global--text-decoration--link--line--default) !important;

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

Lines changed: 2 additions & 327 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,15 @@
11
import { render, screen } from '@testing-library/react';
2-
import userEvent from '@testing-library/user-event';
32
import '@testing-library/jest-dom';
43
import SourcesCard from './SourcesCard';
54

65
describe('SourcesCard', () => {
7-
it('should render card correctly if one source with only a link is passed in', () => {
8-
render(<SourcesCard sources={[{ link: '' }]} />);
9-
expect(screen.getByText('1 source')).toBeTruthy();
10-
expect(screen.getByText('Source 1')).toBeTruthy();
11-
// no buttons or navigation when there is only 1 source
12-
expect(screen.queryByRole('button')).toBeFalsy();
13-
expect(screen.queryByText('1/1')).toBeFalsy();
14-
});
15-
16-
it('should render card correctly if one source with a title is passed in', () => {
6+
it('should render sources correctly if one source is passed in', () => {
177
render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} />);
188
expect(screen.getByText('1 source')).toBeTruthy();
199
expect(screen.getByText('How to make an apple pie')).toBeTruthy();
2010
});
2111

22-
it('should render card correctly if one source with a body is passed in', () => {
23-
render(<SourcesCard sources={[{ link: '', body: 'To make an apple pie, you must first...' }]} />);
24-
expect(screen.getByText('1 source')).toBeTruthy();
25-
expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
26-
});
27-
28-
it('should render card correctly if one source with a title and body is passed in', () => {
29-
render(
30-
<SourcesCard
31-
sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
32-
/>
33-
);
34-
expect(screen.getByText('1 source')).toBeTruthy();
35-
expect(screen.getByText('How to make an apple pie')).toBeTruthy();
36-
expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
37-
});
38-
39-
it('should render multiple cards correctly', () => {
12+
it('should render sources correctly when there is more than one', () => {
4013
render(
4114
<SourcesCard
4215
sources={[
@@ -51,302 +24,4 @@ describe('SourcesCard', () => {
5124
screen.getByRole('button', { name: /Go to previous page/i });
5225
screen.getByRole('button', { name: /Go to next page/i });
5326
});
54-
55-
it('should navigate between cards correctly', async () => {
56-
render(
57-
<SourcesCard
58-
sources={[
59-
{ title: 'How to make an apple pie', link: '' },
60-
{ title: 'How to make cookies', link: '' }
61-
]}
62-
/>
63-
);
64-
expect(screen.getByText('How to make an apple pie')).toBeTruthy();
65-
expect(screen.getByText('1/2')).toBeTruthy();
66-
expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
67-
await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
68-
expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
69-
expect(screen.getByText('How to make cookies')).toBeTruthy();
70-
expect(screen.getByText('2/2')).toBeTruthy();
71-
expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
72-
expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
73-
});
74-
75-
it('should apply className appropriately', () => {
76-
render(
77-
<SourcesCard
78-
sources={[
79-
{ title: 'How to make an apple pie', link: '' },
80-
{ title: 'How to make cookies', link: '' }
81-
]}
82-
className="test"
83-
/>
84-
);
85-
const element = screen.getByRole('navigation');
86-
expect(element).toHaveClass('test');
87-
});
88-
89-
it('should disable pagination appropriately', () => {
90-
render(
91-
<SourcesCard
92-
sources={[
93-
{ title: 'How to make an apple pie', link: '' },
94-
{ title: 'How to make cookies', link: '' }
95-
]}
96-
isDisabled
97-
/>
98-
);
99-
expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
100-
expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
101-
});
102-
103-
it('should render navigation aria label appropriately', () => {
104-
render(
105-
<SourcesCard
106-
sources={[
107-
{ title: 'How to make an apple pie', link: '' },
108-
{ title: 'How to make cookies', link: '' }
109-
]}
110-
/>
111-
);
112-
expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
113-
});
114-
115-
it('should change paginationAriaLabel appropriately', () => {
116-
render(
117-
<SourcesCard
118-
sources={[
119-
{ title: 'How to make an apple pie', link: '' },
120-
{ title: 'How to make cookies', link: '' }
121-
]}
122-
paginationAriaLabel="Navegación"
123-
/>
124-
);
125-
expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
126-
});
127-
128-
it('should change sourceWord appropriately', () => {
129-
render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} sourceWord={'fuente'} />);
130-
expect(screen.getByText('1 fuente')).toBeTruthy();
131-
});
132-
133-
it('should sourceWordPlural appropriately', () => {
134-
render(
135-
<SourcesCard
136-
sources={[
137-
{ title: 'How to make an apple pie', link: '' },
138-
{ title: 'How to make cookies', link: '' }
139-
]}
140-
sourceWordPlural={'fuentes'}
141-
/>
142-
);
143-
expect(screen.getByText('2 fuentes')).toBeTruthy();
144-
});
145-
146-
it('should change toNextPageAriaLabel appropriately', () => {
147-
render(
148-
<SourcesCard
149-
sources={[
150-
{ title: 'How to make an apple pie', link: '' },
151-
{ title: 'How to make cookies', link: '' }
152-
]}
153-
toNextPageAriaLabel="Pase a la siguiente página"
154-
/>
155-
);
156-
expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
157-
});
158-
159-
it('should change toPreviousPageAriaLabel appropriately', () => {
160-
render(
161-
<SourcesCard
162-
sources={[
163-
{ title: 'How to make an apple pie', link: '' },
164-
{ title: 'How to make cookies', link: '' }
165-
]}
166-
toPreviousPageAriaLabel="Presione para regresar a la página anterior"
167-
/>
168-
);
169-
expect(screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
170-
});
171-
172-
it('should call onNextClick appropriately', async () => {
173-
const spy = jest.fn();
174-
render(
175-
<SourcesCard
176-
sources={[
177-
{ title: 'How to make an apple pie', link: '' },
178-
{ title: 'How to make cookies', link: '' }
179-
]}
180-
onNextClick={spy}
181-
/>
182-
);
183-
await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
184-
expect(spy).toHaveBeenCalled();
185-
});
186-
187-
it('should call onPreviousClick appropriately', async () => {
188-
const spy = jest.fn();
189-
render(
190-
<SourcesCard
191-
sources={[
192-
{ title: 'How to make an apple pie', link: '' },
193-
{ title: 'How to make cookies', link: '' }
194-
]}
195-
onPreviousClick={spy}
196-
/>
197-
);
198-
await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
199-
await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
200-
expect(spy).toHaveBeenCalled();
201-
});
202-
203-
it('should call onSetPage appropriately', async () => {
204-
const spy = jest.fn();
205-
render(
206-
<SourcesCard
207-
sources={[
208-
{ title: 'How to make an apple pie', link: '' },
209-
{ title: 'How to make cookies', link: '' }
210-
]}
211-
onSetPage={spy}
212-
/>
213-
);
214-
await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
215-
expect(spy).toHaveBeenCalledTimes(1);
216-
await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
217-
expect(spy).toHaveBeenCalledTimes(2);
218-
});
219-
220-
it('should handle showMore appropriately', async () => {
221-
render(
222-
<SourcesCard
223-
sources={[
224-
{
225-
title: 'Getting started with Red Hat OpenShift',
226-
link: '#',
227-
body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
228-
hasShowMore: true
229-
},
230-
{
231-
title: 'Azure Red Hat OpenShift documentation',
232-
link: '#',
233-
body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
234-
},
235-
{
236-
title: 'OKD Documentation: Home',
237-
link: '#',
238-
body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
239-
}
240-
]}
241-
/>
242-
);
243-
expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
244-
});
245-
246-
it('should call onClick appropriately', async () => {
247-
const spy = jest.fn();
248-
render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', onClick: spy }]} />);
249-
await userEvent.click(screen.getByRole('link', { name: /How to make an apple pie/i }));
250-
expect(spy).toHaveBeenCalled();
251-
});
252-
253-
it('should apply titleProps appropriately', () => {
254-
render(
255-
<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }]} />
256-
);
257-
expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
258-
});
259-
260-
it('should apply cardTitleProps appropriately', () => {
261-
render(
262-
<SourcesCard
263-
cardTitleProps={{ 'data-testid': 'card-title', className: 'test' } as any}
264-
sources={[{ title: 'How to make an apple pie', link: '' }]}
265-
/>
266-
);
267-
expect(screen.getByTestId('card-title')).toHaveClass('test');
268-
});
269-
270-
it('should apply cardBodyProps appropriately', () => {
271-
render(
272-
<SourcesCard
273-
cardBodyProps={
274-
{ 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' } as any
275-
}
276-
sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
277-
/>
278-
);
279-
expect(screen.getByTestId('card-body')).toHaveClass('test');
280-
});
281-
282-
it('should apply cardFooterProps appropriately', () => {
283-
render(
284-
<SourcesCard
285-
cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
286-
sources={[
287-
{ title: 'How to make an apple pie', link: '' },
288-
{ title: 'How to make cookies', link: '' }
289-
]}
290-
/>
291-
);
292-
expect(screen.getByTestId('card-footer')).toHaveClass('test');
293-
});
294-
295-
it('should apply truncateProps appropriately', () => {
296-
render(
297-
<SourcesCard
298-
sources={[
299-
{
300-
title: 'How to make an apple pie',
301-
link: '',
302-
truncateProps: { 'data-testid': 'card-truncate', className: 'test' } as any
303-
}
304-
]}
305-
/>
306-
);
307-
expect(screen.getByTestId('card-truncate')).toHaveClass('test');
308-
});
309-
310-
it('should apply custom footer appropriately when there is one source', () => {
311-
render(
312-
<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]} />
313-
);
314-
expect(screen.getByText('I am a custom footer'));
315-
expect(screen.queryByText('1/1')).toBeFalsy();
316-
});
317-
318-
it('should apply custom footer appropriately when are multiple sources', () => {
319-
render(
320-
<SourcesCard
321-
sources={[
322-
{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> },
323-
{ title: 'How to bake bread', link: '' }
324-
]}
325-
/>
326-
);
327-
expect(screen.getByText('I am a custom footer'));
328-
// does not show navigation bar
329-
expect(screen.queryByText('1/2')).toBeFalsy();
330-
});
331-
332-
it('should apply footer props to custom footer appropriately', () => {
333-
render(
334-
<SourcesCard
335-
cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
336-
sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]}
337-
/>
338-
);
339-
expect(screen.getByText('I am a custom footer'));
340-
expect(screen.getByTestId('card-footer')).toHaveClass('test');
341-
});
342-
343-
it('should apply subtitle appropriately', () => {
344-
render(
345-
<SourcesCard
346-
sources={[{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }]}
347-
/>
348-
);
349-
expect(screen.getByText('How to make an apple pie'));
350-
expect(screen.getByText('You must first create the universe'));
351-
});
35227
});

0 commit comments

Comments
 (0)