diff --git a/src/components/Page/Page.test.tsx b/src/components/Page/Page.test.tsx new file mode 100644 index 0000000..ac17c64 --- /dev/null +++ b/src/components/Page/Page.test.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import Page from './Page'; + +describe('', () => { + it('should not render without children and image', () => { + const { container } = render(); + expect(container.firstChild).toBeNull(); + }); + + it('should render only image', () => { + const { container } = render(); + expect(container.firstChild).not.toBeNull(); + expect(container.querySelector('.page-image')).not.toBeNull(); + expect(container.querySelector('.page-text')).toBeNull(); + }); + + it('should render only text', () => { + const { container } = render( + +

Test

+
, + ); + expect(container.firstChild).not.toBeNull(); + expect(container.querySelector('.page-text')).not.toBeNull(); + expect(container.querySelector('.page-image')).toBeNull(); + }); + + it('should render text as first child and image as second one', () => { + const { container } = render( + +

Test

+
, + ); + const page = container.firstChild; + expect(page).not.toBeNull(); + expect(container.querySelector('.page-text')).not.toBeNull(); + expect(container.querySelector('.page-image')).not.toBeNull(); + expect(page?.childNodes[0]).toHaveClass('page-text'); + expect(page?.childNodes[1]).toHaveClass('page-image'); + }); +}); diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index 224769f..acb2619 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -40,12 +40,12 @@ const Image = styled.div<{ src: string }>` type ComponentProps = PageProps & React.HTMLAttributes; -const Page = ({ children, imageSrc, ...other }: PageProps) => { +const Page = ({ children, imageSrc, ...other }: ComponentProps) => { const renderPage = children || imageSrc; return renderPage ? ( - {children && {children}} - {imageSrc && } + {children && {children}} + {imageSrc && } ) : null; };