Refactor speakers 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-card/__tests__/speaker-card.test.tsx

@@ -0,0 +1,50 @@
+import { Speaker } from '@lib/types';
+import { render, screen } from '@testing-library/react';
+import { SpeakerCard } from '@components/speaker-card/speaker-card';
+
+const defaultSpeaker: Speaker = {
+  name: 'A Speaker',
+  image: {
+    url: 'http://url.com'
+  },
+  title: 'Speaker Job Title',
+  company: 'Speaker company',
+  bio: 'Speaker bio'
+} as any;
+
+const renderSpeakerCard = (speaker = defaultSpeaker) => {
+  render(<SpeakerCard speaker={speaker} />);
+
+  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('SpeakerCard', () => {
+  it('should display the speakers name', () => {
+    const { getSpeakerName } = renderSpeakerCard();
+
+    expect(getSpeakerName('A Speaker')).toBeInTheDocument();
+  });
+
+  it('should display job role', () => {
+    const { getSpeakerJobRole } = renderSpeakerCard();
+
+    expect(getSpeakerJobRole('Speaker Job Title @')).toBeInTheDocument();
+  });
+
+  it('should display company', () => {
+    const { getSpeakerCompany } = renderSpeakerCard();
+
+    expect(getSpeakerCompany('Speaker company')).toBeInTheDocument();
+  });
+
+  it('should display image', () => {
+    const { getSpeakerImage } = renderSpeakerCard();
+
+    expect(getSpeakerImage('A Speaker')).toBeInTheDocument();
+  });
+});

components/speaker-card/speaker-card.tsx

@@ -0,0 +1,41 @@
+import { Speaker } from '@lib/types';
+import Link from 'next/link';
+import styles from '@components/speaker-grid/speakers-grid.module.css';
+import Image from 'next/image';
+import React, { FC } from 'react';
+
+type Props = {
+  speaker: Speaker;
+}
+
+export const SpeakerCard: FC<Props> = ({ speaker }) => {
+  return (
+    <Link href={`/speakers/${speaker.slug}`}>
+      <a role='button' tabIndex={0} className={styles.card}>
+        <div className={styles.imageWrapper}>
+          <Image
+            alt={speaker.name}
+            src={speaker.image.url}
+            className={styles.image}
+            loading='lazy'
+            quality='50'
+            title={speaker.name}
+            placeholder={speaker.image.blurDataURL ? 'blur' : 'empty'}
+            blurDataURL={speaker.image.blurDataURL}
+            width={300}
+            height={300}
+          />
+        </div>
+        <div className={styles.cardBody}>
+          <div>
+            <h2 className={styles.name}>{speaker.name}</h2>
+            <p className={styles.title}>
+              {`${speaker.title} @ `}
+              <span className={styles.company}>{speaker.company}</span>
+            </p>
+          </div>
+        </div>
+      </a>
+    </Link>
+  );
+};

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

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

components/speaker-grid/speakers-grid.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2020 Vercel Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Speaker } from '@lib/types';
+import styles from './speakers-grid.module.css';
+import { SpeakerCard } from '@components/speaker-card/speaker-card';
+
+type Props = {
+  speakers: Speaker[];
+};
+
+export default function SpeakersGrid({ speakers }: Props) {
+  return (
+    <div className={styles.grid}>
+      {speakers.map(speaker => (
+        <SpeakerCard key={speaker.name} speaker={speaker} />
+      ))}
+    </div>
+  );
+}

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();
+    });
+
+  });
+
+});