This repository has been archived by the owner on Jun 10, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #375 from deriv-com/Jia/features-block-new-variants
- Loading branch information
Showing
18 changed files
with
508 additions
and
80 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
50 changes: 32 additions & 18 deletions
50
libs/blocks/src/lib/features/content-left/content-left.spec.tsx
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 |
|---|---|---|
| @@ -1,38 +1,52 @@ | ||
| import { render } from '@testing-library/react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
|
|
||
| import ContentLeft from '.'; | ||
| import { Button, Heading } from '@deriv/quill-design'; | ||
|
|
||
| const ContentLeftContent = () => ( | ||
| <Heading.H2>This is a heading content</Heading.H2> | ||
| ); | ||
| const className = 'text-heading-h2'; | ||
| const title = 'This is the title'; | ||
| const description = 'Description here'; | ||
| const content = 'This is a heading content'; | ||
| const child = 'This is a button'; | ||
|
|
||
| describe('ContentLeft', () => { | ||
| it('renders with correct class names and content', () => { | ||
| const className = 'text-heading-h2'; | ||
| const title = 'This is the title'; | ||
| const description = 'Description here'; | ||
| const ContentLeftContent = () => <Heading.H3>{content}</Heading.H3>; | ||
|
|
||
| const { getByText } = render( | ||
| describe('ContentLeft', () => { | ||
| beforeEach(() => { | ||
| render( | ||
| <ContentLeft | ||
| className={className} | ||
| title={title} | ||
| description={description} | ||
| content={ContentLeftContent} | ||
| > | ||
| <Button>This is a button</Button> | ||
| <Button>{child}</Button> | ||
| </ContentLeft>, | ||
| ); | ||
| const titleElement = getByText(title); | ||
| }); | ||
|
|
||
| //renders with correct classname | ||
| expect(titleElement).toHaveClass(className); | ||
| it('renders with correct class names passing in', () => { | ||
| expect(document.querySelector(`.${className}`)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with the correct title | ||
| expect(getByText(title)).toBeInTheDocument(); | ||
| it(`renders with correct title '${title}'`, () => { | ||
| expect( | ||
| screen.getByRole('heading', { name: title, level: 2 }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it(`renders with correct description '${description}'`, () => { | ||
| expect(screen.getByText(description)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it(`renders with correct content`, () => { | ||
| expect( | ||
| screen.getByRole('heading', { name: content, level: 3 }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with the correct description | ||
| expect(getByText(description)).toBeInTheDocument(); | ||
| it(`renders with correct children`, () => { | ||
| expect(screen.getByRole('button', { name: child })).toBeInTheDocument(); | ||
| }); | ||
| }); |
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
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
52 changes: 33 additions & 19 deletions
52
libs/blocks/src/lib/features/content-right/content-right.spec.tsx
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 |
|---|---|---|
| @@ -1,38 +1,52 @@ | ||
| import { render } from '@testing-library/react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
|
|
||
| import ContentRight from '.'; | ||
| import { Button, Heading } from '@deriv/quill-design'; | ||
|
|
||
| const ContentRightContent = () => ( | ||
| <Heading.H2>This is a heading content</Heading.H2> | ||
| ); | ||
| const className = 'text-heading-h2'; | ||
| const title = 'This is the title'; | ||
| const description = 'Description here'; | ||
| const content = 'This is a heading content'; | ||
| const child = 'This is a button'; | ||
|
|
||
| describe('ContentLeft', () => { | ||
| it('renders with correct class names and content', () => { | ||
| const className = 'text-heading-h2'; | ||
| const title = 'This is the title'; | ||
| const description = 'Description here'; | ||
| const ContentRightContent = () => <Heading.H3>{content}</Heading.H3>; | ||
|
|
||
| const { getByText } = render( | ||
| describe('ContentRight', () => { | ||
| beforeEach(() => { | ||
| render( | ||
| <ContentRight | ||
| className={className} | ||
| title={title} | ||
| content={ContentRightContent} | ||
| description={description} | ||
| content={ContentRightContent} | ||
| > | ||
| <Button>This is a button</Button> | ||
| <Button>{child}</Button> | ||
| </ContentRight>, | ||
| ); | ||
| const titleElement = getByText(title); | ||
| }); | ||
|
|
||
| //renders with correct classname | ||
| expect(titleElement).toHaveClass(className); | ||
| it('renders with correct class names passing in', () => { | ||
| expect(document.querySelector(`.${className}`)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with the correct title | ||
| expect(getByText(title)).toBeInTheDocument(); | ||
| it(`renders with correct title '${title}'`, () => { | ||
| expect( | ||
| screen.getByRole('heading', { name: title, level: 2 }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it(`renders with correct description '${description}'`, () => { | ||
| expect(screen.getByText(description)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it(`renders with correct content`, () => { | ||
| expect( | ||
| screen.getByRole('heading', { name: content, level: 3 }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with the correct description | ||
| expect(getByText(description)).toBeInTheDocument(); | ||
| it(`renders with correct children`, () => { | ||
| expect(screen.getByRole('button', { name: child })).toBeInTheDocument(); | ||
| }); | ||
| }); |
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
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 |
|---|---|---|
| @@ -1,24 +1,8 @@ | ||
| import ContentLeft from '../content-left'; | ||
| import { ContentLeftProps } from '../types'; | ||
|
|
||
| const ContentRight = ({ | ||
| title, | ||
| className, | ||
| description, | ||
| children, | ||
| content, | ||
| }: Omit<ContentLeftProps, 'variant'>) => { | ||
| return ( | ||
| <ContentLeft | ||
| title={title} | ||
| variant="content-right" | ||
| description={description} | ||
| content={content} | ||
| className={className} | ||
| > | ||
| {children} | ||
| </ContentLeft> | ||
| ); | ||
| const ContentRight = ({ ...rest }: Omit<ContentLeftProps, 'variant'>) => { | ||
| return <ContentLeft variant="content-right" {...rest} />; | ||
| }; | ||
|
|
||
| export default ContentRight; |
57 changes: 43 additions & 14 deletions
57
libs/blocks/src/lib/features/content-slider/content-slider.spec.tsx
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 |
|---|---|---|
| @@ -1,30 +1,59 @@ | ||
| import { render } from '@testing-library/react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
|
|
||
| import ContentSlider from '.'; | ||
| import { Button } from '@deriv/quill-design'; | ||
| import { cards } from './mock-data'; | ||
|
|
||
| describe('CardSlider', () => { | ||
| it('renders with correct class names and content', () => { | ||
| const className = 'text-heading-h2'; | ||
| const title = 'This is the title'; | ||
| const description = 'Description here'; | ||
| const className = 'text-heading-h2'; | ||
| const title = 'This is the title'; | ||
| const description = 'Description here'; | ||
| const cta = 'CTA'; | ||
|
|
||
| const { getByText } = render( | ||
| describe('CardSlider', () => { | ||
| beforeEach(() => { | ||
| render( | ||
| <ContentSlider | ||
| className={className} | ||
| title={title} | ||
| description={description} | ||
| cardSliderProps={{ | ||
| slideClasses: 'max-w-xs', | ||
| variant: 'ContentBottom', | ||
| cards: cards, | ||
| }} | ||
| cta={() => <Button>{cta}</Button>} | ||
| />, | ||
| ); | ||
| const titleElement = getByText(title); | ||
| }); | ||
|
|
||
| it(`should render the correct class name '${className}' passing in`, () => { | ||
| expect(document.querySelector(`.${className}`)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with correct classname | ||
| expect(titleElement).toHaveClass(className); | ||
| it(`should render the correct title '${title}'`, () => { | ||
| expect( | ||
| screen.getByRole('heading', { name: title, level: 2 }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it(`should render the correct description '${description}'`, () => { | ||
| expect(screen.getByText(description)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render the correct cta', () => { | ||
| expect(screen.getByRole('button', { name: cta })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with the correct title | ||
| expect(getByText(title)).toBeInTheDocument(); | ||
| cards.forEach((_, i) => { | ||
| it(`should render the correct title '${title}'`, () => { | ||
| expect( | ||
| screen.getByRole('heading', { name: `Card ${i + 1}`, level: 4 }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| //renders with the correct description | ||
| expect(getByText(description)).toBeInTheDocument(); | ||
| it(`should render the correct description '${description}'`, () => { | ||
| expect(screen.getByText(`Description here ${i + 1}`)).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| }); |
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,14 @@ | ||
| import { CardVariantProps } from '@deriv-com/components'; | ||
| import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons'; | ||
|
|
||
| export const cards: CardVariantProps<'ContentBottom'>[] = Array.from({ | ||
| length: 6, | ||
| }).map((_, i) => ({ | ||
| id: i, | ||
| header: `Card ${i + 1}`, | ||
| description: `Description here ${i + 1}`, | ||
| icon: <IllustrativeProtectedAndSecureIcon />, | ||
| color: 'gray', | ||
| align: 'start', | ||
| size: 'sm', | ||
| })); |
Oops, something went wrong.