Flex-page

src/app/pages/flex-page/flex-page.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { LoadedPage } from '~/components/jsx-helpers/loader-page';
-import { Data } from '~/helpers/use-page-data';
 import { ContentBlocks, ContentBlockConfig } from './blocks/ContentBlock';
 
+type Data = {
+    body: ContentBlockConfig[];
+}
+
 function FlexPageBody({data}: {data: Data}) {
-    return <ContentBlocks data={data.body as ContentBlockConfig[]} />;
+    return <ContentBlocks data={data.body} />;
 }
 
 export default function FlexPage({data}: {data: Data}) {

test/src/layouts.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {render, screen} from '@testing-library/preact';
 import {describe, it} from '@jest/globals';
-import LandingLayout from '~/layouts/landing/landing';
 import { MemoryRouter } from 'react-router-dom';
+import LandingLayout from '~/layouts/landing/landing';
 
 describe('layouts/landing', () => {
     const data: Parameters<typeof LandingLayout>[0]['data'] = {

test/src/pages/flex-page.test.tsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import {describe, it} from '@jest/globals';
+import userEvent from '@testing-library/user-event';
+import {MemoryRouter} from 'react-router-dom';
+import FlexPage from '~/pages/flex-page/flex-page';
+import {CTALinkFields} from '~/pages/flex-page/blocks/CTABlock';
+import {ContentBlockConfig} from '~/pages/flex-page/blocks/ContentBlock';
+
+const emptyTarget = {
+    type: '',
+    value: ''
+};
+const ctaActions: CTALinkFields[] = [
+    {
+        config: [
+            {
+                type: 'style',
+                value: 'string'
+            }
+        ],
+        text: 'cta-text',
+        target: {
+            type: 'cta-target-type',
+            value: 'cta-target-value'
+        }
+    },
+    {
+        config: [],
+        text: 'cta-text2',
+        target: emptyTarget
+    }
+];
+
+describe('flex-page', () => {
+    const data: Parameters<typeof FlexPage>[0]['data'] = {
+        body: [
+            heroBlock(),
+            ctaBlock(),
+            cardsBlock(),
+            cardsBlock(true),
+            dividerBlock(false),
+            dividerBlock(true),
+            faqBlock(),
+            htmlBlock(),
+            linksBlock(),
+            quoteBlock(),
+            quoteBlock('quote-title'),
+            rtBlock(),
+            sectionBlock()
+        ]
+    };
+
+    it('renders', async () => {
+        jest.spyOn(window, 'scrollBy');
+
+        render(
+            <MemoryRouter initialEntries={['']}>
+                <FlexPage data={data} />
+            </MemoryRouter>
+        );
+        const links = screen.getAllByRole('link');
+        const anchor = screen.getByText('link-text');
+        const nonAnchor = screen.getByText('link2-text');
+        const missingTarget = screen.getByText('link3-text');
+        const user = userEvent.setup();
+
+        expect(links).toHaveLength(6);
+        await user.click(anchor);
+        expect(window.scrollBy).toHaveBeenCalled();
+
+        await user.click(nonAnchor);
+        await user.click(missingTarget);
+    });
+});
+
+function imageBlock(name: string) {
+    return {
+        id: `${name}-image-id`,
+        file: `/foo/${name}-image.jpg`,
+        height: 400,
+        width: 300
+    };
+}
+
+function heroBlock(): ContentBlockConfig {
+    return {
+        id: 'hero-id',
+        type: 'hero',
+        value: {
+            content: [],
+            config: [],
+            image: imageBlock('hero'),
+            imageAlt: ''
+        }
+    };
+}
+
+function ctaBlock(): ContentBlockConfig {
+    return {
+        id: 'cta-id',
+        type: 'cta_block',
+        value: {
+            actions: ctaActions,
+            config: []
+        }
+    };
+}
+
+function cardsBlock(withStyle?: boolean): ContentBlockConfig {
+    return {
+        id: 'cards-id',
+        type: 'cards_block',
+        value: {
+            cards: [
+                {
+                    text: 'first card',
+                    ctaBlock: withStyle ? ctaActions : []
+                }
+            ],
+            config: withStyle
+                ? [
+                      {
+                          type: 'card_style',
+                          id: '',
+                          value: 'rounded'
+                      }
+                  ]
+                : []
+        }
+    };
+}
+
+function dividerBlock(aligned: boolean): ContentBlockConfig {
+    return {
+        id: 'divider-id',
+        type: 'divider',
+        value: {
+            image: imageBlock('divider'),
+            config: aligned
+                ? [
+                      {
+                          type: 'alignment',
+                          value: 'left'
+                      }
+                  ]
+                : []
+        }
+    };
+}
+
+function faqBlock(): ContentBlockConfig {
+    return {
+        id: 'faq-id',
+        type: 'faq',
+        value: [
+            {
+                id: 'q1',
+                value: {
+                    question: 'what?',
+                    slug: 'q1',
+                    answer: 'hush',
+                    document: ''
+                }
+            }
+        ]
+    };
+}
+
+function htmlBlock(): ContentBlockConfig {
+    return {
+        id: 'html-id',
+        type: 'html',
+        value: '<p>Some html</p>'
+    };
+}
+
+function linksBlock(): ContentBlockConfig {
+    return {
+        id: 'links-id',
+        type: 'links_group',
+        value: {
+            links: [
+                {
+                    text: 'link-text',
+                    target: {
+                        type: 'anchor',
+                        value: '#anchor-target'
+                    }
+                },
+                {
+                    text: 'link2-text',
+                    target: {
+                        type: 'not-anchor',
+                        value: ''
+                    }
+                },
+                {
+                    text: 'link3-text',
+                    target: {
+                        type: 'anchor',
+                        value: '#not-found'
+                    }
+                }
+            ],
+            config: []
+        }
+    };
+}
+
+function quoteBlock(title?: string): ContentBlockConfig {
+    return {
+        id: 'quote-id',
+        type: 'quote',
+        value: {
+            image: imageBlock('quote'),
+            content: 'quote-content',
+            name: 'quote-name',
+            title
+        }
+    };
+}
+
+function rtBlock(): ContentBlockConfig {
+    return {
+        id: 'rt-id',
+        type: 'text',
+        value: 'Some text with <b>formatting</b>'
+    };
+}
+
+function sectionBlock(): ContentBlockConfig {
+    return {
+        id: 'section-id',
+        type: 'section',
+        value: {
+            content: [
+                {
+                    id: 'oops-id',
+                    type: 'mistake',
+                    value: 'This is invalid content'
+                } as unknown as ContentBlockConfig
+            ],
+            config: [
+                {
+                    type: 'background_color',
+                    value: '#f1f1f1'
+                },
+                {
+                    type: 'id',
+                    value: 'anchor-target'
+                }
+            ]
+        }
+    };
+}