test tweaks

jest/__fixtures__/meta.json

@@ -4,6 +4,13 @@
     "tagline": "Designer & Developer",
     "description": "Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.",
     "url": "https://matthiaskretschmann.com",
+    "img": {
+      "childImageSharp": {
+        "resize": {
+          "src": "/static/5ecbb5694b0b2152aa71398164af38b2/da1a7/twitter-card.png"
+        }
+      }
+    },
     "availability": {
       "status": false,
       "available": "👔 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s talk</a>!",

jest/setup-test-env.js

@@ -1,2 +1,21 @@
 import '@testing-library/jest-dom/extend-expect'
 import 'jest-canvas-mock'
+import { StaticQuery, useStaticQuery } from 'gatsby'
+
+import meta from './__fixtures__/meta.json'
+import resume from './__fixtures__/resume.json'
+
+beforeAll(() => {
+  const photoSrc = resume.contentJson.basics.picture.childImageSharp.fixed.src
+  const dataMock = {
+    ...meta,
+    ...resume,
+    photoSrc,
+    portfolioJson: { bugs: '' }
+  }
+
+  StaticQuery.mockImplementation(({ render }) => render({ ...dataMock }))
+  useStaticQuery.mockImplementation(() => {
+    return { ...dataMock }
+  })
+})

src/components/atoms/Vcard.test.jsx

@@ -1,17 +1,10 @@
 import React from 'react'
 import { render, fireEvent, waitForElement } from '@testing-library/react'
-import { useStaticQuery } from 'gatsby'
 import Vcard, { constructVcard, toDataURL, init } from './Vcard'
 import data from '../../../jest/__fixtures__/meta.json'
 
 describe('Vcard', () => {
   beforeEach(() => {
-    useStaticQuery.mockImplementationOnce(() => {
-      return {
-        ...data
-      }
-    })
-
     global.URL.createObjectURL = jest.fn()
   })
 

src/components/molecules/Availability.test.jsx

@@ -2,11 +2,9 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import Availability from './Availability'
 import { useStaticQuery } from 'gatsby'
-import data from '../../../jest/__fixtures__/meta.json'
 
 describe('Availability', () => {
   it('renders correctly from data file values', () => {
-    useStaticQuery.mockImplementation(() => ({ ...data }))
     const { container } = render(<Availability />)
     expect(container.firstChild).toBeInTheDocument()
   })

src/components/molecules/LogoUnit.test.jsx

@@ -1,17 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { useStaticQuery } from 'gatsby'
 import LogoUnit from './LogoUnit'
 import data from '../../../jest/__fixtures__/meta.json'
 
-beforeEach(() => {
-  useStaticQuery.mockImplementationOnce(() => {
-    return {
-      ...data
-    }
-  })
-})
-
 describe('LogoUnit', () => {
   it('renders correctly from data file values', () => {
     const { title, tagline } = data.metaYaml

src/components/molecules/Networks.jsx

@@ -33,7 +33,7 @@ export default function Networks({ small, hide }) {
 
   return (
     <Animation className={small ? styles.small : styles.networks}>
-      <NetworkLink name={'Email'} url={`mailto:${basics.email}`} />
+      <NetworkLink name="Mail" url={`mailto:${basics.email}`} />
 
       {basics.profiles.map(profile => (
         <NetworkLink

src/components/molecules/Networks.test.jsx

@@ -1,41 +1,22 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { useStaticQuery } from 'gatsby'
 import Networks from './Networks'
-import data from '../../../jest/__fixtures__/meta.json'
-
-beforeEach(() => {
-  useStaticQuery.mockImplementationOnce(() => {
-    return {
-      ...data
-    }
-  })
-})
 
 describe('Networks', () => {
   it('renders correctly from data file values', () => {
-    const { social } = data.metaYaml
+    const { container } = render(<Networks />)
-    const { container, getByTestId } = render(<Networks />)
-
     expect(container.firstChild).toBeInTheDocument()
     expect(container.firstChild.nodeName).toBe('ASIDE')
-    expect(getByTestId('network-email').href).toBe(social.Email)
-    expect(getByTestId('network-blog').href).toBe(social.Blog + '/')
-    expect(getByTestId('network-twitter').href).toBe(social.Twitter)
-    expect(getByTestId('network-github').href).toBe(social.GitHub)
-    expect(getByTestId('network-dribbble').href).toBe(social.Dribbble)
   })
 
   it('renders correctly in small variant', () => {
     const { container } = render(<Networks small={true} />)
-
     expect(container.firstChild).toBeInTheDocument()
     expect(container.querySelector('.small')).toBeInTheDocument()
   })
 
   it('can be hidden', () => {
     const { container } = render(<Networks hide={true} />)
-
     expect(container.firstChild).not.toBeInTheDocument()
   })
 })

src/components/organisms/Footer.test.jsx

@@ -1,19 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { useStaticQuery } from 'gatsby'
 import Footer from './Footer'
-import data from '../../../jest/__fixtures__/meta.json'
 
 describe('Footer', () => {
-  beforeEach(() => {
-    useStaticQuery.mockImplementation(() => {
-      return {
-        ...data,
-        portfolioJson: { bugs: '' }
-      }
-    })
-  })
-
   it('renders correctly', () => {
     const { container } = render(<Footer />)
     expect(container.firstChild).toBeInTheDocument()

src/components/organisms/Header.test.jsx

@@ -1,16 +1,8 @@
 import React from 'react'
 import { render, cleanup, wait } from '@testing-library/react'
-import { useStaticQuery } from 'gatsby'
 import Header from './Header'
-import data from '../../../jest/__fixtures__/meta.json'
 
 describe('Header', () => {
-  beforeEach(() => {
-    useStaticQuery.mockImplementation(() => {
-      return { ...data }
-    })
-  })
-
   afterEach(cleanup)
 
   it('renders correctly', async () => {

src/hooks/use-resume.test.js

@@ -1,18 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { useStaticQuery } from 'gatsby'
-import { useResume } from './use-resume'
-import data from '../../jest/__fixtures__/resume.json'
-
-beforeEach(() => {
-  useStaticQuery.mockImplementationOnce(() => ({ ...data }))
-})
-
-describe('useResume', () => {
-  it('renders correctly', () => {
-    const { basics } = useResume()
-    const { container } = render(<div>{basics.name}</div>)
-
-    expect(container.textContent).toBe(data.contentJson.basics.name)
-  })
-})

src/pages/__tests__/index.test.jsx

@@ -1,18 +1,9 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { StaticQuery, useStaticQuery } from 'gatsby'
 import Home from '../index'
-import meta from '../../../jest/__fixtures__/meta.json'
 import projects from '../../../jest/__fixtures__/projects.json'
 import projectImageFiles from '../../../jest/__fixtures__/projectImageFiles.json'
 
-beforeEach(() => {
-  StaticQuery.mockImplementation(({ render }) => render({ ...meta }))
-  useStaticQuery.mockImplementation(() => {
-    return { ...meta }
-  })
-})
-
 describe('Home', () => {
   const data = {
     ...projects,

src/pages/resume/ResumeItem.module.scss

@@ -4,7 +4,7 @@
     padding-bottom: $spacer * 3;
     padding-left: $spacer;
     position: relative;
-    border-left: 1px solid rgba($brand-grey-light, 0.25);
+    border-left: 0.1rem solid rgba($brand-grey-light, 0.25);
 
     &::before {
         content: '';
@@ -14,7 +14,7 @@
         border-radius: 50%;
         background: $brand-grey-light;
         position: absolute;
-        left: -($font-size-small / 2);
+        left: -($font-size-small / 1.8);
         top: 0.1rem;
     }
 

src/pages/resume/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import shortid from 'shortid'
 import SEO from '../../components/atoms/SEO'
-import LinkIcon from '../../components/atoms/LinkIcon'
+import Icon from '../../components/atoms/Icon'
 import { useResume } from '../../hooks/use-resume'
 import styles from './index.module.scss'
 import ResumeItem from './ResumeItem'
@@ -25,20 +25,20 @@ export default function Resume() {
           <ul className={styles.contact}>
             <li>
               <a href={website}>
-                <LinkIcon type="website" />
+                <Icon name="Compass" />
                 Portfolio
               </a>
             </li>
             <li>
-              <LinkIcon type="Email" />
+              <Icon name="Mail" />
               <a href={`mailto:${email}`}>Email</a>
             </li>
             <li>
-              <LinkIcon type="Info" />
+              <Icon name="MapPin" />
               {location.city}, {location.countryCode}
             </li>
             <li>
-              <LinkIcon type="Info" />
+              <Icon name="Mic" />
               {languages.map(item => (
                 <span
                   key={item.language}
@@ -49,7 +49,10 @@ export default function Resume() {
         </div>
 
         <div>
-          <h3 className={styles.subTitle}>Work</h3>
+          <h3 className={styles.subTitle}>
+            <Icon name="Briefcase" />
+            Work
+          </h3>
         </div>
         <div>
           {work.map(workPlace => (
@@ -58,7 +61,10 @@ export default function Resume() {
         </div>
 
         <div>
-          <h3 className={styles.subTitle}>Awards</h3>
+          <h3 className={styles.subTitle}>
+            <Icon name="Award" />
+            Awards
+          </h3>
         </div>
         <div>
           {awards.map(award => (
@@ -67,7 +73,10 @@ export default function Resume() {
         </div>
 
         <div>
-          <h3 className={styles.subTitle}>Education</h3>
+          <h3 className={styles.subTitle}>
+            <Icon name="BookOpen" />
+            Education
+          </h3>
         </div>
         <div>
           {education.map(eduPlace => (

src/pages/resume/index.module.scss

@@ -33,15 +33,17 @@
     list-style: none;
     padding: 0;
 
+    li {
+        margin-bottom: $spacer / 4;
+    }
+
     svg {
-        fill: $brand-grey-light;
+        stroke: $brand-grey-light;
-        width: $font-size-small;
-        height: $font-size-small;
-        opacity: 0.5;
         margin-right: $spacer / 4;
+        margin-bottom: -0.1rem;
 
         :global(.dark) & {
-            fill: $brand-grey;
+            stroke: $brand-grey;
         }
     }
 
@@ -54,6 +56,13 @@
     font-size: $font-size-h3;
     margin-bottom: 0;
     margin-top: -($spacer / 3);
+
+    svg {
+        width: $font-size-large;
+        height: $font-size-large;
+        margin-right: $spacer / 4;
+        stroke: $brand-grey-light;
+    }
 }
 
 @media print {