From 4f1181581e177dd80a76165a0f930ef4577f9c6a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 22 Nov 2023 19:07:25 +0100 Subject: refactor(components): integrate sectioned page template into Page * replace Section component by a generic one (other components should be able to use it) * add a PageSection component * add `hasSections` prop to Page component * remove sectioned-page template --- .../templates/page/page-section.test.tsx | 43 ++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/components/templates/page/page-section.test.tsx (limited to 'src/components/templates/page/page-section.test.tsx') diff --git a/src/components/templates/page/page-section.test.tsx b/src/components/templates/page/page-section.test.tsx new file mode 100644 index 0000000..b372ab7 --- /dev/null +++ b/src/components/templates/page/page-section.test.tsx @@ -0,0 +1,43 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { PageSection } from './page-section'; + +describe('PageSection', () => { + it('renders its children', () => { + const body = 'a voluptas iste'; + + render({body}); + + expect(rtlScreen.getByText(body)).toBeInTheDocument(); + }); + + it('can use the light variant', () => { + const body = 'a voluptas iste'; + + render({body}); + + expect(rtlScreen.getByText(body).parentElement).toHaveClass( + 'section--light' + ); + }); + + it('can use the dark variant', () => { + const body = 'a voluptas iste'; + + render({body}); + + expect(rtlScreen.getByText(body).parentElement).toHaveClass( + 'section--dark' + ); + }); + + it('can have a border at the bottom', () => { + const body = 'a voluptas iste'; + + render({body}); + + expect(rtlScreen.getByText(body).parentElement).toHaveClass( + 'section--bordered' + ); + }); +}); -- cgit v1.2.3