Bootstrap integration test with jest and react-testing-library

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["next/babel"]
+}

.eslintrc.json

@@ -1,5 +1,11 @@
 {
-    "extends": ["zyhou", "zyhou/react", "plugin:mdx/recommended"],
+    "extends": [
+        "zyhou",
+        "zyhou/react",
+        "zyhou/jest",
+        "plugin:mdx/recommended",
+        "plugin:testing-library/react"
+    ],
     "rules": {
         "jsx-a11y/anchor-is-valid": [
             "error",

README.md

@@ -69,6 +69,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 <!-- prettier-ignore-end -->
 

__tests__/[slug].spec.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Talk from '../pages/talks/[slug].js';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn().mockImplementation(() => ({
+        asPath: 'path',
+    })),
+}));
+
+describe('Talk Components', () => {
+    beforeEach(() => {
+        jest.useFakeTimers('modern');
+        jest.setSystemTime(new Date('2020-10-20'));
+    });
+
+    describe('<Talk />', () => {
+        let defaultSpeakers, defaultTalk;
+
+        beforeEach(() => {
+            defaultSpeakers = [
+                {
+                    slug: 'james-bond',
+                    firstName: 'james',
+                    lastName: 'bond',
+                    picture: 'https://picture.com',
+                },
+            ];
+
+            defaultTalk = {
+                speakers: defaultSpeakers,
+                mdxHtml: '<h1>MDX talk</h1>',
+                frontMatter: {
+                    edition: 1,
+                    title: 'A new talk',
+                    description: 'A new talk description',
+                    date: new Date('2020-10-20'),
+                },
+                slug: 'a-new-talk',
+            };
+        });
+
+        it('should render correct Talk', () => {
+            render(<Talk {...defaultTalk} />);
+
+            expect(screen.getByText('mardi 20 octobre 2020')).toBeInTheDocument();
+            expect(screen.getByText('A new talk #1')).toBeInTheDocument();
+            expect(screen.getByText('james bond')).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 1, name: 'MDX talk' })).toBeInTheDocument();
+        });
+
+        it('should render correct next Talk', () => {
+            const talk = {
+                ...defaultTalk,
+                next: {
+                    edition: 2,
+                    slug: 'second-talk',
+                    title: 'second talk',
+                },
+            };
+
+            render(<Talk {...talk} />);
+
+            expect(screen.getByText('second talk #2')).toBeInTheDocument();
+        });
+
+        it('should render correct previous Talk', () => {
+            const talk = {
+                ...defaultTalk,
+                previous: {
+                    edition: 0,
+                    slug: 'zero-talk',
+                    title: 'zero talk',
+                },
+            };
+
+            render(<Talk {...talk} />);
+
+            expect(screen.getByText('zero talk #0')).toBeInTheDocument();
+        });
+
+        it('should render correct next and previous Talk', () => {
+            const talk = {
+                ...defaultTalk,
+                next: {
+                    edition: 2,
+                    slug: 'second-talk',
+                    title: 'second talk',
+                },
+                previous: {
+                    edition: 0,
+                    slug: 'zero-talk',
+                    title: 'zero talk',
+                },
+            };
+
+            render(<Talk {...talk} />);
+
+            expect(screen.getByText('second talk #2')).toBeInTheDocument();
+            expect(screen.getByText('zero talk #0')).toBeInTheDocument();
+        });
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+});

__tests__/index.spec.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { render, screen, getByText, within } from '@testing-library/react';
+
+import Home, { FutureTalk } from '../pages/index';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn().mockImplementation(() => ({
+        asPath: 'path',
+    })),
+}));
+
+describe('Index Components', () => {
+    beforeEach(() => {
+        jest.useFakeTimers('modern');
+        jest.setSystemTime(new Date('2020-10-20'));
+    });
+
+    describe('<Home />', () => {
+        let defaultSpeakers, defaultTalks;
+
+        beforeEach(() => {
+            defaultTalks = [
+                {
+                    date: new Date('2020-10-19').toISOString(),
+                    slug: 'a-new-third-talk',
+                    frontMatter: {
+                        title: 'A new third talk',
+                        edition: 3,
+                    },
+                },
+                {
+                    date: new Date('2020-10-18').toISOString(),
+                    slug: 'a-new-second-talk',
+                    frontMatter: {
+                        title: 'A new second talk',
+                        edition: 2,
+                    },
+                },
+                {
+                    date: new Date('2020-10-17').toISOString(),
+                    slug: 'a-new-first-talk',
+                    frontMatter: {
+                        title: 'A new first talk',
+                        edition: 1,
+                    },
+                },
+            ];
+
+            defaultSpeakers = [
+                { slug: 'james-bond', frontMatter: { firstName: 'james', lastName: 'bond' } },
+            ];
+        });
+
+        it('should render correct Home when no events is scheduled', () => {
+            render(<Home talks={defaultTalks} lastTalkSpeakers={defaultSpeakers} />);
+
+            expect(
+                screen.getByRole('heading', { level: 1, name: 'Meetup Apéro Web Nancy' }),
+            ).toBeInTheDocument();
+            expect(
+                screen.getByRole('heading', { level: 3, name: 'Aucun événement planifié' }),
+            ).toBeInTheDocument();
+
+            const listTalks = screen.getByRole('list');
+
+            const valuesTalks = [
+                ['A new third talk #3', '19 oct. 2020'],
+                ['A new second talk #2', '18 oct. 2020'],
+                ['A new first talk #1', '17 oct. 2020'],
+            ];
+
+            valuesTalks.forEach(([title, date]) => {
+                const li = getByText(listTalks, title).closest('li');
+                const utils = within(li);
+                expect(utils.getByText(title)).toBeInTheDocument();
+                expect(utils.getByText(date)).toBeInTheDocument();
+            });
+        });
+
+        it('should render correct Home when events is planned', () => {
+            const talks = [
+                {
+                    date: new Date('2020-10-21').toISOString(),
+                    slug: 'a-new-four-talk',
+                    frontMatter: {
+                        title: 'A new four talk',
+                        edition: 4,
+                    },
+                },
+                ...defaultTalks,
+            ];
+
+            render(<Home talks={talks} lastTalkSpeakers={defaultSpeakers} />);
+
+            expect(
+                screen.getByRole('heading', { level: 1, name: 'Meetup Apéro Web Nancy' }),
+            ).toBeInTheDocument();
+            expect(
+                screen.getByRole('heading', { level: 3, name: 'Prochain meetup: A new four talk' }),
+            ).toBeInTheDocument();
+
+            const listTalks = screen.getByRole('list');
+
+            const valuesTalks = [
+                ['A new four talk #4', '21 oct. 2020', true],
+                ['A new third talk #3', '19 oct. 2020', false],
+                ['A new second talk #2', '18 oct. 2020', false],
+                ['A new first talk #1', '17 oct. 2020', false],
+            ];
+
+            valuesTalks.forEach(([title, date, isNextTalk]) => {
+                const li = getByText(listTalks, title).closest('li');
+                const utils = within(li);
+                expect(utils.getByText(title)).toBeInTheDocument();
+                expect(utils.getByText(date)).toBeInTheDocument();
+                if (isNextTalk) {
+                    expect(utils.getByText('Inscrivez-vous !')).toBeInTheDocument();
+                }
+            });
+        });
+    });
+
+    describe('<FutureTalk />', () => {
+        it('should render correct future talk', () => {
+            const talk = {
+                date: new Date('2020-10-17').toISOString(),
+                slug: 'a-new-talk',
+                frontMatter: {
+                    title: 'A new talk',
+                    edition: 1,
+                },
+            };
+            const speakers = [
+                { slug: 'james-bond', frontMatter: { firstName: 'james', lastName: 'bond' } },
+            ];
+
+            render(<FutureTalk talk={talk} speakers={speakers} />);
+
+            expect(
+                screen.getByRole('heading', {
+                    level: 3,
+                    name: 'Prochain meetup: A new talk',
+                }),
+            ).toBeInTheDocument();
+            expect(screen.getByText('17 octobre 2020')).toBeInTheDocument();
+            expect(screen.getByText('En ligne')).toBeInTheDocument();
+            expect(screen.getByText('james bond')).toBeInTheDocument();
+        });
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+});