Skip to content

Commit

Permalink
fix(mrc): fix <OnboardingLayout /> tests and stories
Browse files Browse the repository at this point in the history 
ref: 14934

Signed-off-by: Romain Jamet <[email protected]>
  • Loading branch information
Romain Jamet committed Jan 15, 2025
1 parent ddefc12 commit 2d1433d
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 80 deletions.
46 changes: 21 additions & 25 deletions ...ges/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,21 @@ const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
return <></>;
}
return (
<div className="flex flex-col gap-4 w-full sm:w-fit sm:flex-row sm:items-center sm:justify-center">
<OdsButton
className="[&::part(button)]:w-full sm:w-auto"
size={ODS_BUTTON_SIZE.md}
onClick={() => {
onOrderButtonClick?.();
if (orderHref) {
window.open(orderHref, '_blank');
}
}}
label={orderButtonLabel}
isDisabled={isActionDisabled}
/>
<div className="flex flex-col gap-3 sm:gap-4 w-full sm:w-fit sm:flex-row sm:items-center sm:justify-center">
{orderButtonLabel && (onOrderButtonClick || orderHref) && (
<OdsButton
className="[&::part(button)]:w-full sm:w-auto"
size={ODS_BUTTON_SIZE.md}
onClick={() => {
onOrderButtonClick?.();
if (orderHref) {
window.open(orderHref, '_blank');
}
}}
label={orderButtonLabel}
isDisabled={isActionDisabled}
/>
)}
{moreInfoButtonLabel && (onmoreInfoButtonClick || moreInfoHref) && (
<OdsButton
className="[&::part(button)]:w-full sm:w-auto"
Expand Down Expand Up @@ -90,20 +92,18 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
img = {},
isActionDisabled,
}) => {
const { className: imgClassName, ...imgProps } = img;
const { className: imgClassName, alt: altText, ...imgProps } = img;
return (
<div className="flex flex-col mx-auto sm:px-10">
{!hideHeadingSection && (
<section className="flex flex-col items-center gap-6 pt-6">
<section className="flex flex-col items-center gap-6 pt-6 max-w-[800px] self-center">
{(img?.src || placeholderSrc) && (
<div className="flex justify-center max-h-28 w-full">
<div className="flex justify-center">
<img
{...imgProps}
className="max-h-[150px]"
className={`max-h-[150px] ${imgClassName}`}
src={img?.src ?? placeholderSrc}
alt=""
width={img?.width}
height={img?.height}
alt={altText ?? 'placeholder image'}
/>
</div>
)}
Expand All @@ -113,11 +113,7 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
>
{title}
</OdsText>
{description && (
<OdsText preset="paragraph" className="block text-center ">
{description}
</OdsText>
)}
{description}
<OnboardingLayoutButton
isActionDisabled={isActionDisabled}
orderHref={orderHref}
Expand Down
142 changes: 103 additions & 39 deletions packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,117 @@ import {
OnboardingLayout,
OnboardingLayoutProps,
} from './onboarding.component';
import { defaultProps } from './onboarding.stories';
import { OdsText } from '@ovhcloud/ods-components/react';
import placeholderSrc from './../../../../public/assets/placeholder.png';
import { Card } from '../../navigation/card/card.component';

const setupSpecTest = async (customProps?: Partial<OnboardingLayoutProps>) =>
waitFor(() =>
render(<OnboardingLayout {...defaultProps} {...customProps} />),
);
const setupSpecTest = async (props: OnboardingLayoutProps) =>
waitFor(() => render(<OnboardingLayout {...props} />));

const customTitle = 'onboarding title';
const imgAltText = 'img alt text';
const descriptionText = 'description text';
const orderBtnLabel = 'Order Now';
const infoBtnLabel = 'more info';
const children = (
<>
<Card
href={''}
texts={{
title: 'Test Onboarding 1',
description: 'This is the description 1',
category: 'WEB',
}}
/>
<Card
href={''}
texts={{
title: 'Test Onboarding 2',
description: 'This is the description 2',
category: 'CLOUD',
}}
/>
<Card
href={''}
texts={{
title: 'Test Onboarding 3',
description: 'This is the description 3',
category: 'TELECOM',
}}
/>
</>
);

describe('specs:onboarding', () => {
it('renders without error', async () => {
// when
const { getByText, container } = await setupSpecTest();

// then
const title = getByText('Welcome to Onboarding');
expect(title).toHaveClass('block text-center sm:pt-8 xs:pt-2.5');

// and
const orderButton = container.querySelector('[label="Order Now"]');
expect(orderButton.closest('div')).toHaveClass(
'flex sm:pt-8 xs:pt-2.5 flex-row items-center space-x-4 justify-center',
);

const description = getByText(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
);
expect(description).toBeVisible();

const card = getByText('Test Onboarding 1');
expect(card.closest('aside')).toHaveClass(
'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 xs:pt-10 sm:pt-20',
);
describe('default content', () => {
it('displays default content', async () => {
const screen = await setupSpecTest({ title: customTitle });

expect(screen.getByText(customTitle)).toBeVisible();
expect(screen.getByAltText('placeholder image')).toBeVisible();
});
});

describe('contents', () => {
it('displays additional content correctly', async () => {
const customProps: Partial<OnboardingLayoutProps> = {
title: 'Custom Title',
description: 'Custom Description',
};
describe('additional contents', () => {
it('displays description correctly', async () => {
const screen = await setupSpecTest({
title: customTitle,
description: (
<OdsText preset="paragraph" className="text-center">
{descriptionText}
</OdsText>
),
});

const screen = await setupSpecTest(customProps);
expect(screen.getByText(descriptionText)).toBeVisible();
});

it('displays img correctly', async () => {
const screen = await setupSpecTest({
title: customTitle,
img: { src: placeholderSrc, alt: imgAltText },
});

expect(screen.getByAltText(imgAltText)).toBeVisible();
});

it('displays order button correctly', async () => {
const screen = await setupSpecTest({
title: customTitle,
orderHref: 'https://example.com/order',
orderButtonLabel: orderBtnLabel,
});

const orderButton = screen.container.querySelector(
`[label="${orderBtnLabel}"]`,
);
expect(orderButton).toBeVisible();
});

it('displays more info button correctly', async () => {
const screen = await setupSpecTest({
title: 'title',
moreInfoHref: 'https://example.com/order',
moreInfoButtonLabel: infoBtnLabel,
});

const orderButton = screen.container.querySelector(
`[label="${infoBtnLabel}"]`,
);
expect(orderButton).toBeVisible();
});

const customTitle = screen.getByText('Custom Title');
const customDescription = screen.getByText('Custom Description');
it('displays children correctly', async () => {
const screen = await waitFor(() =>
render(
<OnboardingLayout title={customTitle}>{children}</OnboardingLayout>,
),
);

expect(customTitle).toBeTruthy();
expect(customDescription).toBeTruthy();
const card = screen.getByText('Test Onboarding 1');
expect(card.closest('aside')).toHaveClass(
'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 xs:pt-10 sm:pt-20',
);
});
});
});
143 changes: 127 additions & 16 deletions packages/manager-react-components/src/components/templates/onboarding/onboarding.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,26 @@ import {
} from './onboarding.component';
import { Card } from '../../navigation/card/card.component';
import placeholderSrc from './../../../../public/assets/placeholder.png';
import customImgSrc from './../../../../public/assets/error-banner-oops.png';
import { OdsText } from '@ovhcloud/ods-components/react';

export const defaultProps: OnboardingLayoutProps = {
title: 'Welcome to Onboarding',
orderHref: 'https://example.com/order',
orderButtonLabel: 'Order Now',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
moreInfoHref: 'https://example.com/more-info',
img: {
src: placeholderSrc,
},
moreInfoButtonLabel: 'Learn More',
children: (
export const OnboardingFullExample = () => (
<OnboardingLayout
title="Welcome Onboarding"
orderHref="https://example.com/order"
orderButtonLabel="Order Now"
moreInfoHref="https://example.com/more-info"
moreInfoButtonLabel="Learn More"
img={{ src: placeholderSrc, style: { filter: 'grayscale(100%)' } }}
description={
<OdsText preset="paragraph" className="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</OdsText>
}
>
<>
<Card
href={''}
Expand All @@ -44,15 +52,118 @@ export const defaultProps: OnboardingLayoutProps = {
}}
/>
</>
),
};
</OnboardingLayout>
);

export const OnboardingDefault = () => (
<OnboardingLayout title="Onboarding Default" />
);

export const OnboardingWithOrderCTA = () => (
<OnboardingLayout
title="Onboarding with order Button"
orderHref="https://example.com/order"
orderButtonLabel="Order Now"
/>
);

export const OnboardingWithMoreInfoCTA = () => (
<OnboardingLayout
title="Onboarding with more info Button"
moreInfoHref="https://example.com/more-info"
moreInfoButtonLabel="Learn More"
/>
);

export const OnboardingWithImg = () => (
<OnboardingLayout
title="Onboarding with custom img"
img={{ src: customImgSrc }}
/>
);

export const OnboardingWithDescription = () => (
<OnboardingLayout
title="Onboarding with Description"
description={
<OdsText preset="paragraph" className="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</OdsText>
}
/>
);

export const OnboardingWithChildren = () => (
<OnboardingLayout title="Onboarding with Children">
<>
<Card
href={''}
texts={{
title: 'Test Onboarding 1',
description: 'This is the description 1',
category: 'WEB',
}}
/>
<Card
href={''}
texts={{
title: 'Test Onboarding 2',
description: 'This is the description 2',
category: 'CLOUD',
}}
/>
<Card
href={''}
texts={{
title: 'Test Onboarding 3',
description: 'This is the description 3',
category: 'TELECOM',
}}
/>
</>
</OnboardingLayout>
);

export const OnboardingWithoutHeadingSection = () => (
<OnboardingLayout
title="onboarding without heading section"
hideHeadingSection
>
<>
<Card
href={''}
texts={{
title: 'Test Onboarding 1',
description: 'This is the description 1',
category: 'WEB',
}}
/>
<Card
href={''}
texts={{
title: 'Test Onboarding 2',
description: 'This is the description 2',
category: 'CLOUD',
}}
/>
<Card
href={''}
texts={{
title: 'Test Onboarding 3',
description: 'This is the description 3',
category: 'TELECOM',
}}
/>
</>
</OnboardingLayout>
);

const meta: Meta<typeof OnboardingLayout> = {
title: 'Templates/Onboarding',
decorators: [(story) => <div>{story()}</div>],
component: OnboardingLayout,
argTypes: {},
args: defaultProps,
};

export default meta;

0 comments on commit 2d1433d

Please sign in to comment.