Fd 2777 update design system for special cards

__tests__/components/Accordion.test.tsx

@@ -178,7 +178,7 @@ describe('Accordion', () => {
         const { container } = render(<Accordion items={items} />);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/ArticleLinkCard.test.tsx

@@ -33,7 +33,7 @@ describe('ArticleLinkCard', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/ArticleMeta.test.tsx

@@ -50,7 +50,7 @@ describe('ArticleMeta', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/BulletPoint.test.tsx

@@ -48,7 +48,7 @@ describe('BulletPoint', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/Modal.test.tsx

@@ -41,7 +41,7 @@ describe('Modal', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/NumberFrame.test.tsx

@@ -21,7 +21,7 @@ describe('NumberFrame', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/Quote.test.tsx

@@ -18,7 +18,7 @@ describe('Quote', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/ReadMore.test.tsx

@@ -23,7 +23,7 @@ describe('ReadMore', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/StockTicker.test.tsx

@@ -65,12 +65,12 @@ describe('StockTicker', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();
         expect(
-            container.firstElementChild.classList.contains('test-class')
+            container.firstElementChild?.classList.contains('test-class')
         ).toBeTruthy();
     });
 });

__tests__/components/Summary.test.tsx

@@ -34,7 +34,7 @@ describe('Summary', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/TextFrame.test.tsx

@@ -27,7 +27,7 @@ describe('TextFrame', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/WordFrame.test.tsx

@@ -27,7 +27,7 @@ describe('WordFrame', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/article-image/ArticleImage.test.tsx

@@ -48,7 +48,7 @@ describe('ArticleImage', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/article-image/InfographicExtended.test.tsx

@@ -95,7 +95,7 @@ describe('Infographic', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/article-tags/ArticleTags.test.tsx

@@ -104,7 +104,7 @@ describe('AuthorInfo', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/author-info/AuthorInfo.test.tsx

@@ -83,7 +83,7 @@ describe('AuthorInfo', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/button/Button.test.tsx

@@ -40,7 +40,7 @@ describe('Button', () => {
         const { container } = render(<Button>Knopje</Button>);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/button/ButtonCta.test.tsx

@@ -40,7 +40,7 @@ describe('ButtonCta', () => {
         const { container } = render(<ButtonCta>Knopje</ButtonCta>);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/button/ButtonFollow.test.tsx

@@ -39,7 +39,7 @@ describe('ButtonFollow', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/button/ButtonGhost.test.tsx

@@ -42,7 +42,7 @@ describe('ButtonGhost', () => {
         const { container } = render(<ButtonGhost>Knopje</ButtonGhost>);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/button/Dropdown.test.tsx

@@ -60,7 +60,7 @@ describe('Dropdown', () => {
         const { container } = render(<Dropdown>Knopje</Dropdown>);
         console.log(container.firstElementChild.classList);
         // expect(
-        //     container.firstElementChild.classList.contains(
+        //     container.firstElementChild?.classList.contains(
         //         getCssClassNames()[0]
         //     )
         // ).toBeTruthy();

__tests__/components/card/HorizontalCard1.test.tsx

@@ -20,7 +20,7 @@ describe('HorizontalCard1', () => {
         expect(getByText('This is the title')).toBeTruthy();
         expect(getByText('Ondernemen')).toBeTruthy();
         expect(getByText('11:40')).toBeTruthy();
-        expect(container.querySelector('[href]').getAttribute('href')).toBe(
+        expect(container.querySelector('[href]')?.getAttribute('href')).toBe(
             'https://example.com/1/This is the title'
         );
     });
@@ -68,7 +68,7 @@ describe('HorizontalCard1', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/card/HorizontalCard2.test.tsx

@@ -22,7 +22,7 @@ describe('HorizontalCard2', () => {
         expect(getByText('This is the intro of the card')).toBeTruthy();
         expect(getByText('Ondernemen')).toBeTruthy();
         expect(getByText('11:50')).toBeTruthy();
-        expect(container.querySelector('[href]').getAttribute('href')).toBe(
+        expect(container.querySelector('[href]')?.getAttribute('href')).toBe(
             'https://example.com/1/This is the title'
         );
     });
@@ -55,7 +55,7 @@ describe('HorizontalCard2', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/card/HorizontalCard3.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { render } from '@testing-library/react';
 import {
     HorizontalCard3,
     getCssClassNames,
 } from '../../../src/components/card/HorizontalCard3';
-import { render } from '@testing-library/react';
 
 describe('HorizontalCard3', () => {
     test('should render correctly', () => {
@@ -25,7 +25,7 @@ describe('HorizontalCard3', () => {
         expect(getByText('‘This is the print title’')).toBeTruthy();
         expect(getByText('Ondernemen')).toBeTruthy();
         expect(getByText('11:50')).toBeTruthy();
-        expect(container.querySelector('[href]').getAttribute('href')).toBe(
+        expect(container.querySelector('[href]')?.getAttribute('href')).toBe(
             'https://example.com/1/This is the title'
         );
     });
@@ -58,7 +58,7 @@ describe('HorizontalCard3', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

__tests__/components/card/HorizontalCard4.test.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+    HorizontalCard4,
+    getCssClassNames,
+} from '../../../src/components/card/HorizontalCard4';
+import { render } from '@testing-library/react';
+import { FdImgix } from '../../../src/components/utils/image/FdImgix';
+
+describe('HorizontalCard4', () => {
+    test('should render correctly', () => {
+        const { container, getByText } = render(
+            <HorizontalCard4
+                id="1"
+                url="https://example.com/1/This is the title"
+                label="Ondernemen"
+                time="11:40"
+                title="This is the title"
+                isRead={false}
+                imageComponent={
+                    <FdImgix
+                        src="https://images.example.com/image.png"
+                        imageSizes={{
+                            widthS: '160px',
+                            widthM: '244px',
+                            widthL: '244px',
+                        }}
+                    />
+                }
+            />
+        );
+
+        expect(getByText('This is the title')).toBeTruthy();
+        expect(getByText('Ondernemen')).toBeTruthy();
+        expect(getByText('11:40')).toBeTruthy();
+        expect(container?.querySelector('[href]')?.getAttribute('href')).toBe(
+            'https://example.com/1/This is the title'
+        );
+    });
+
+    test('should render image correctly', () => {
+        const { container } = render(
+            <HorizontalCard4
+                id="1"
+                url="https://example.com/1/This is the title"
+                label="Ondernemen"
+                time="11:40"
+                title="This is the title"
+                isRead={false}
+                imageComponent={
+                    <FdImgix
+                        src="https://images.example.com/image.png"
+                        imageSizes={{
+                            widthS: '160px',
+                            widthM: '244px',
+                            widthL: '244px',
+                        }}
+                    />
+                }
+            />
+        );
+        expect(container?.querySelector('img')?.getAttribute('src')).toBe(
+            'https://images.example.com/image.png?auto=format&ixlib=react-9.5.1-beta.1'
+        );
+    });
+
+    test('should render is-read correctly', () => {
+        const { container } = render(
+            <HorizontalCard4
+                id="1"
+                url="https://example.com/1/This is the title"
+                label="Ondernemen"
+                time="11:40"
+                title="This is the title"
+                isRead={true}
+                imageComponent={
+                    <FdImgix
+                        src="https://images.example.com/image.png"
+                        imageSizes={{
+                            widthS: '160px',
+                            widthM: '244px',
+                            widthL: '244px',
+                        }}
+                    />
+                }
+            />
+        );
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should have correct class name', () => {
+        const { container } = render(
+            <HorizontalCard4
+                id="1"
+                url="https://example.com/1/This is the title"
+                label="Ondernemen"
+                time="11:40"
+                title="This is the title"
+                isRead={false}
+                imageComponent={
+                    <FdImgix
+                        src="https://images.example.com/image.png"
+                        imageSizes={{
+                            widthS: '160px',
+                            widthM: '244px',
+                            widthL: '244px',
+                        }}
+                    />
+                }
+            />
+        );
+
+        expect(
+            container.firstElementChild?.classList.contains(
+                getCssClassNames()[0]
+            )
+        ).toBeTruthy();
+    });
+
+    test('should render without image component', () => {
+        const { getByRole } = render(
+            <HorizontalCard4
+                id="1"
+                url="https://example.com/1/This is the title"
+                label="Ondernemen"
+                time="11:40"
+                title="This is the title"
+                isRead={false}
+            />
+        );
+        const image = getByRole('img');
+        expect(image).toHaveProperty(
+            'src',
+            expect.stringContaining('/assets/images/fd-logo.svg')
+        );
+    });
+});