-
{`Amsterdam Schiphol ${i}`}
-
-
-
Flights
-
- {'\u2022'}
-
-
Hotels
-
- {'\u2022'}
-
-
Car Hire
+
+
{`Amsterdam Schiphol ${i}`}
+
+
+ Flights
+
+ {'\u2022'}
+
+ Hotels
+
+ {'\u2022'}
+
+ Car Hire
+
);
-const cards = (cardType) => [...Array(14).keys()].map((i) => cardType(i));
+
+type ExampleCard =
+ | typeof InternalLinkCard
+ | typeof DealsCard
+ | typeof DestinationCard;
+const cards = (cardType: ExampleCard) => {
+ const cardList = [];
+ for (let i = 0; i < 14; i += 1) {
+ cardList.push(cardType(i));
+ }
+ return cardList;
+};
const title = 'Must-visit spots';
const description =
@@ -109,14 +123,14 @@ const GridToRailExample = () => {
return (
);
};
@@ -132,61 +146,76 @@ const GridToStackExample = () => {
return (
);
};
const GridToStackWithButtonExample = () => (
{}}
title={title}
- description={description}
- buttonText="Explore More"
/>
);
const RowToRailWith5InitiallyShownCardsExample = () => (
);
const RowToRailExample = () => (
);
+
+// TODO: this use case is currently not available as proposed due the sturucture of the props
+// Row layoutDesktop variant requires accesory of "pagination"
+// Stack layoutMobile variant requires accesory of "button" or "expand"
+// The component only supports one accessory prop value so cannot cross support 2 different types of accesories
const RowToStackExample = () => (
);
diff --git a/packages/bpk-component-card-list/src/BpkCardList-test.tsx b/packages/bpk-component-card-list/src/BpkCardList-test.tsx
index 5e7016a34d..322f206bd3 100644
--- a/packages/bpk-component-card-list/src/BpkCardList-test.tsx
+++ b/packages/bpk-component-card-list/src/BpkCardList-test.tsx
@@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import mockCards from '../testMocks';
@@ -23,7 +23,7 @@ import BpkCardList from './BpkCardList';
describe('BpkCardList', () => {
it('should render correctly with grid, stack and no accessory', () => {
- const { asFragment } = render(
+ render(
{
layoutMobile="stack"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with grid, stack and expand accessory', () => {
- const { asFragment } = render(
+ render(
{
onButtonClick={jest.fn()}
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.getByTestId('button')).toHaveTextContent('Expand');
+ expect(screen.getByTestId('button')).toHaveClass(
+ 'bpk-button bpk-button--link',
+ );
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with grid, stack and button accessory', () => {
- const { asFragment } = render(
+ render(
{
href="https://www.skyscanner.net"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryAllByRole('button')[0]).toHaveTextContent('Button');
+ expect(screen.queryAllByRole('button')[0]).toHaveClass(
+ 'bpk-button bpk-button--primary',
+ );
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with grid, rail and no accessory', () => {
- const { asFragment } = render(
+ render(
{
layoutMobile="rail"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with grid, rail and expand accessory', () => {
- const { asFragment } = render(
+ render(
{
onButtonClick={jest.fn()}
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).toHaveTextContent('Expand');
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
});
it('should render correctly with grid, rail and button accessory', () => {
- const { asFragment } = render(
+ render(
{
href="https://www.skyscanner.net"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryAllByRole('button')[0]).toHaveTextContent('Button');
+ expect(screen.queryAllByRole('button')[0]).toHaveClass(
+ 'bpk-button bpk-button--primary',
+ );
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
});
it('should render correctly with row, stack and no accessory', () => {
- const { asFragment } = render(
+ render(
{
ariaLabelPrev="Previous"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-row');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with row, rail and pagination accessory', () => {
- const { asFragment } = render(
+ render(
{
ariaLabelPrev="Previous"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-row');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(6);
+ expect(
+ screen.getByRole('button', { name: 'Previous' }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Go to page 1' }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Go to page 2' }),
+ ).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
});
it('should render correctly with row, rail and no accessory', () => {
- const { asFragment } = render(
+ render(
{
ariaLabelPrev="Previous"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-row');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
+ expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength(
+ 0,
+ );
});
it('should render correctly with header, grid, stack and expand accessory', () => {
- const { asFragment } = render(
+ render(
{
expandText="Expand"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).toHaveTextContent('Expand');
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with header, grid, stack and no accessory', () => {
- const { asFragment } = render(
+ render(
{
layoutMobile="stack"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with header, grid, rail and expand accessory', () => {
- const { asFragment } = render(
+ render(
{
expandText="Expand"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).toHaveTextContent('Expand');
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with header, grid, rail and no accessory', () => {
- const { asFragment } = render(
+ render(
{
layoutMobile="rail"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-grid');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
});
it('should render correctly with header, row, stack and no accessory', () => {
- const { asFragment } = render(
+ render(
{
ariaLabelPrev="Previous"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-row');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(6);
+ expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength(
+ 0,
+ );
});
it('should render correctly with header, row, rail and pagination accessory', () => {
- const { asFragment } = render(
+ render(
{
ariaLabelPrev="Previous"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-row');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(6);
+ expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength(
+ 0,
+ );
});
it('should render correctly with header, row, rail and no accessory', () => {
- const { asFragment } = render(
+ render(
{
ariaLabelPrev="Previous"
/>,
);
- expect(asFragment()).toMatchSnapshot();
+
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('Description')).toBeInTheDocument();
+ expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+ expect(
+ screen.getByTestId('bpk-card-list--card-list').firstChild,
+ ).toHaveClass('bpk-card-list-row');
+ expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2);
+ expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength(
+ 0,
+ );
});
});
diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx
index bbbfa9f30f..c14bb1bd3b 100644
--- a/packages/bpk-component-card-list/src/BpkCardList.tsx
+++ b/packages/bpk-component-card-list/src/BpkCardList.tsx
@@ -76,7 +76,10 @@ const BpkCardList = (props: CardListProps) => {
button={button}
/>
-
+
{(isActive) => {
if (isActive) {
@@ -113,7 +116,12 @@ const BpkCardList = (props: CardListProps) => {
}
if (layoutDesktop === LAYOUTS.row) {
- const { accessory, ariaLabelIndicator, ariaLabelNext, ariaLabelPrev } = props;
+ const {
+ accessory,
+ ariaLabelIndicator,
+ ariaLabelNext,
+ ariaLabelPrev,
+ } = props;
return (
{
it('should show expand accessory', () => {
const cards = Array(12).map(() => test);
- const { asFragment } = render(
+ render(
{
,
);
- expect(asFragment()).toMatchSnapshot();
+ expect(screen.getByRole('button')).toHaveClass(
+ 'bpk-button bpk-button--link',
+ );
});
- it('should show button accessory', () => {
+ it('should show button accessory and handle onButtonClick', async () => {
const cards = Array(12).map(() => test);
- const { asFragment } = render(
+ const onButtonClick = jest.fn();
+ render(
{cards}
,
);
+ await userEvent.click(screen.getByRole('button'));
- expect(asFragment()).toMatchSnapshot();
+ expect(screen.getByRole('button')).toHaveClass(
+ 'bpk-button bpk-button--primary',
+ );
+ expect(onButtonClick).toHaveBeenCalled();
});
});
diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap
deleted file mode 100644
index 97b7bb4cdf..0000000000
--- a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BpkCardListGrid should show button accessory 1`] = `
-
-
-
-
-`;
-
-exports[`BpkCardListGrid should show expand accessory 1`] = `
-
-
-
-
-`;
diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx
index 952f7f4455..90e1bfbbb9 100644
--- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx
+++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx
@@ -27,7 +27,9 @@ describe('BpkCardListRail', () => {
{mockCards(3)},
);
- expect(container).toMatchSnapshot();
+ expect(container.firstChild).toHaveClass(
+ 'bpk-card-list--rail_scrollContainer',
+ );
expect(
container.getElementsByClassName('bpk-card-list--rail_card'),
).toHaveLength(3);
diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx
index def918aa11..e5ab591820 100644
--- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx
+++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx
@@ -18,6 +18,7 @@
*/
import type { ReactElement } from 'react';
+// @ts-ignore
import BpkMobileScrollContainer from '../../../bpk-component-mobile-scroll-container';
import { cssModules } from '../../../bpk-react-utils';
diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap
deleted file mode 100644
index 309912f4b5..0000000000
--- a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BpkCardListRail should render cards correctly in the MobileScrollContainer 1`] = `
-
-`;
diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx
index 6c752def2f..91ace3df1d 100644
--- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx
+++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx
@@ -78,7 +78,6 @@ describe('BpkCardListRow', () => {
{mockCards(7)},
);
- expect(container).toMatchSnapshot();
expect(
container.getElementsByClassName(
'bpk-card-list-row__card bpk-card-list-row__card-padding',
diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx
index 1dde8e169c..c959c9adbb 100644
--- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx
+++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx
@@ -26,6 +26,7 @@ import {
import debounce from 'lodash/debounce';
+// @ts-ignore
import BpkPageIndicator from '../../../bpk-component-page-indicator';
import { cssModules, isRTL } from '../../../bpk-react-utils';
diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap
deleted file mode 100644
index db6557a67f..0000000000
--- a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap
+++ /dev/null
@@ -1,172 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BpkCardListRow should render cards and accessory correctly for 7 cards 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-