Test speaker grid

.eslintrc.json

@@ -26,5 +26,19 @@
     "@typescript-eslint/no-unsafe-assignment": 0,
     "@typescript-eslint/restrict-template-expressions": 0,
     "@typescript-eslint/no-empty-function": 0
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": [
+        [
+          "@components",
+          "./components"
+        ],
+        [
+          "@classes",
+          "./classes"
+        ]
+      ]
+    }
   }
 }

components/speaker-grid/__tests__/speakers-grid.test.tsx

@@ -0,0 +1,73 @@
+import SpeakersGrid from '@components/speaker-grid/speakers-grid';
+import { render, screen } from '@testing-library/react';
+import { Speaker } from '@lib/types';
+
+const defaultSpeaker: Speaker = {
+  name: 'A Speaker',
+  image: {
+    url: 'http://url.com'
+  },
+  title: 'Speaker Job Title',
+  company: 'Speaker company',
+  bio: 'Speaker bio'
+} as any;
+
+const renderSpeakersGrid = (speakers = [defaultSpeaker]) => {
+  render(<SpeakersGrid speakers={speakers} />);
+
+  return {
+    getSpeakerName: (name: string) => screen.getByText(name),
+    getSpeakerJobRole: (jobRole: string) => screen.getByText(jobRole),
+    getSpeakerCompany: (company: string) => screen.getByText(company),
+    getSpeakerImage: (altText: string) => screen.getByAltText(altText)
+  };
+};
+
+describe('SpeakersGrid', () => {
+  describe('should display a speaker card', () => {
+    it('with the speakers name', () => {
+      const { getSpeakerName } = renderSpeakersGrid();
+
+      expect(getSpeakerName('A Speaker')).toBeInTheDocument();
+    });
+
+    it('with job role', () => {
+      const { getSpeakerJobRole } = renderSpeakersGrid();
+
+      expect(getSpeakerJobRole('Speaker Job Title @')).toBeInTheDocument();
+    });
+
+    it('with company', () => {
+      const { getSpeakerCompany } = renderSpeakersGrid();
+
+      expect(getSpeakerCompany('Speaker company')).toBeInTheDocument();
+    });
+
+    it('with image', () => {
+      const { getSpeakerImage } = renderSpeakersGrid();
+
+      expect(getSpeakerImage('A Speaker')).toBeInTheDocument();
+    });
+  });
+
+  describe('should display two speaker cards', () => {
+    it('should things', () => {
+      const speakers: Speaker[] = [
+        { ...defaultSpeaker },
+        {
+          name: 'Another Speaker',
+          image: {
+            url: 'http://url2.com'
+          },
+          title: 'Speaker2 Job Title',
+          company: 'Speaker2 company',
+          bio: 'Speaker2 bio'
+        }
+      ] as any;
+      const { getSpeakerName } = renderSpeakersGrid(speakers);
+
+      expect(getSpeakerName('A Speaker')).toBeInTheDocument();
+      expect(getSpeakerName('Another Speaker')).toBeInTheDocument();
+    });
+  });
+});

components/speaker-section/__tests__/speaker-section.test.tsx

@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react';
+import { Speaker } from '@lib/types';
+import SpeakerSection from '@components/speaker-section/speaker-section';
+
+const defaultSpeaker: Speaker = {
+  name: 'SpeakerName',
+  image: {
+    url: 'http://url.com'
+  },
+  title: 'Speaker Job Title',
+  company: 'Speaker company',
+  bio: 'Speaker bio'
+} as any;
+
+const renderSpeakerSection = (speaker = defaultSpeaker) => {
+  render(<SpeakerSection speaker={speaker} />);
+
+  return {
+    backToSpeakers: screen.getByText('Back to speakers'),
+    image: screen.getByAltText('SpeakerName'),
+    name: screen.getByText('SpeakerName'),
+    role: screen.getByText('Speaker Job Title @'),
+    company: screen.getByText('Speaker company'),
+    bioTitle: screen.getByText('Bio'),
+    bio: screen.getByText('Speaker bio'),
+    socialMediaTitle: screen.getByText('Social Media'),
+    twitterIcon: screen.queryByLabelText('Twitter'),
+    githubIcon: screen.queryByLabelText('GitHub'),
+    talkTitle: screen.queryByText('Talk title'),
+    talkDescription: screen.queryByText('Talk description')
+  };
+};
+
+describe('SpeakerSection', () => {
+  it('should have a link to speakers page', () => {
+    const { backToSpeakers } = renderSpeakerSection();
+
+    expect(backToSpeakers).toBeInTheDocument();
+  });
+
+  it('should have an image', () => {
+    const { image } = renderSpeakerSection();
+
+    expect(image).toBeInTheDocument();
+  });
+  describe('should have a speaker details section', () => {
+    it('with name', () => {
+      const { name } = renderSpeakerSection();
+
+      expect(name).toBeInTheDocument();
+    });
+
+    it('with job role', () => {
+      const { role } = renderSpeakerSection();
+
+      expect(role).toBeInTheDocument();
+    });
+
+    it('with company', () => {
+      const { company } = renderSpeakerSection();
+
+      expect(company).toBeInTheDocument();
+    });
+
+    it('with bio title', () => {
+      const { bioTitle } = renderSpeakerSection();
+
+      expect(bioTitle).toBeInTheDocument();
+    });
+
+    it('with bio description', () => {
+      const { bio } = renderSpeakerSection();
+
+      expect(bio).toBeInTheDocument();
+    });
+
+    describe('with a social media section', () => {
+      it('with social media title', () => {
+        const { socialMediaTitle } = renderSpeakerSection();
+
+        expect(socialMediaTitle).toBeInTheDocument();
+      });
+
+      it('with twitter when the speaker has it', () => {
+        const speaker: Speaker = {
+          ...defaultSpeaker,
+          twitter: '@speaker'
+        } as any;
+        const { twitterIcon } = renderSpeakerSection(speaker);
+
+        expect(twitterIcon).toBeInTheDocument();
+      });
+
+      it('with github when the speaker has it', () => {
+        const speaker: Speaker = {
+          ...defaultSpeaker,
+          github: 'speaker'
+        } as any;
+        const { githubIcon } = renderSpeakerSection(speaker);
+
+        expect(githubIcon).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('should have a talk', () => {
+    const speaker: Speaker = {
+      ...defaultSpeaker,
+      talk: {
+        title: 'Talk title',
+        description: 'Talk description'
+      }
+    } as any;
+
+    it('title when the speaker has a talk', () => {
+      const { talkTitle } = renderSpeakerSection(speaker);
+
+      expect(talkTitle).toBeInTheDocument();
+    });
+
+    it('description when the speaker has a talk', () => {
+      const { talkDescription } = renderSpeakerSection(speaker);
+
+      expect(talkDescription).toBeInTheDocument();
+    });
+
+  });
+
+  describe('should not have a talk', () => {
+    it('title when the speaker does not have a talk', () => {
+      const { talkTitle } = renderSpeakerSection();
+
+      expect(talkTitle).not.toBeInTheDocument();
+    });
+
+    it('description when the speaker does not have a talk', () => {
+      const { talkDescription } = renderSpeakerSection();
+
+      expect(talkDescription).not.toBeInTheDocument();
+    });
+
+  });
+
+});

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"]
+    }
+  }
+}

package.json

@@ -13,7 +13,9 @@
     "dev": "next",
     "start": "next start",
     "build": "next build",
-    "license": "addlicense -l apache -c 'Vercel Inc.' components/**/* lib/**/* pages/**/* styles/**/* *.ts *.js"
+    "license": "addlicense -l apache -c 'Vercel Inc.' components/**/* lib/**/* pages/**/* styles/**/* *.ts *.js",
+    "test": "jest",
+    "test-watch": "npm run test -- --watch"
   },
   "dependencies": {
     "@agility/content-fetch": "1.1.1",
@@ -40,10 +42,13 @@
     "vanilla-tilt": "1.7.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
     "@types/classnames": "2.2.11",
     "@types/cookie": "0.4.0",
     "@types/htmlescape": "1.1.1",
     "@types/ioredis": "4.17.9",
+    "@types/jest": "^27.0.2",
     "@types/ms": "0.7.31",
     "@types/node": "12.19.8",
     "@types/nprogress": "0.2.0",
@@ -56,12 +61,32 @@
     "@typescript-eslint/parser": "4.10.0",
     "eslint": "7.15.0",
     "eslint-config-prettier": "7.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "4.2.0",
+    "jest": "^27.3.0",
+    "jest-css-modules": "^2.1.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-hover-media-feature": "1.0.0",
     "postcss-preset-env": "6.7.0",
     "prettier": "2.2.1",
+    "ts-jest": "^27.0.7",
     "typescript": "4.3.2"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "moduleNameMapper": {
+      "\\.(css|jpg|png|svg)$": "<rootDir>/node_modules/jest-css-modules",
+      "^@components(.*)$": "<rootDir>/components$1"
+    },
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/test-config/jest-setup.ts"
+    ],
+    "globals": {
+      "ts-jest": {
+        "tsconfig": "<rootDir>/test-config/tsconfig.jest.json"
+      }
+    }
   }
 }

pages/speakers.tsx

@@ -17,7 +17,7 @@
 import { GetStaticProps } from 'next';
 
 import Page from '@components/page';
-import SpeakersGrid from '@components/speakers-grid';
+import SpeakersGrid from '@components/speaker-grid/speakers-grid';
 import Layout from '@components/layout';
 import Header from '@components/header';
 

pages/speakers/[slug].tsx

@@ -17,7 +17,7 @@
 import { GetStaticProps, GetStaticPaths } from 'next';
 
 import Page from '@components/page';
-import SpeakerSection from '@components/speaker-section';
+import SpeakerSection from '@components/speaker-section/speaker-section';
 import Layout from '@components/layout';
 
 import { getAllSpeakers } from '@lib/cms-api';

test-config/jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

test-config/tsconfig.jest.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "baseUrl": "..",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@components/*": [
+        "components/*"
+      ],
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@styles/*": [
+        "styles/*"
+      ]
+    }
+  },
+  "exclude": [
+    "../node_modules"
+  ],
+  "include": [
+    "../next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "./test-config/jest-setup.ts"
+  ]
+}

tsconfig.json

@@ -21,5 +21,7 @@
     }
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx",
+    "./test-config/jest-setup.ts"
+  ]
 }