From 7d72375fab88c907a0002737e33a9eb5c684a07f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 10 Nov 2019 14:40:45 +0100 Subject: [PATCH] fix tests --- src/components/atoms/Vcard.jsx | 45 +++++++++------------- src/components/atoms/Vcard.test.jsx | 8 +++- src/components/molecules/LogoUnit.jsx | 2 +- src/components/molecules/LogoUnit.test.jsx | 12 +++--- src/components/molecules/Networks.test.jsx | 8 +++- src/components/organisms/Footer.jsx | 6 +-- src/components/organisms/Footer.test.jsx | 13 +++---- src/components/organisms/Header.test.jsx | 9 +++-- 8 files changed, 52 insertions(+), 51 deletions(-) diff --git a/src/components/atoms/Vcard.jsx b/src/components/atoms/Vcard.jsx index 9795578..36088b1 100644 --- a/src/components/atoms/Vcard.jsx +++ b/src/components/atoms/Vcard.jsx @@ -1,5 +1,5 @@ -import React, { PureComponent } from 'react' -import { StaticQuery, graphql } from 'gatsby' +import React from 'react' +import { graphql, useStaticQuery } from 'gatsby' import saveAs from 'file-saver' import vCard from 'vcf' @@ -31,33 +31,24 @@ const query = graphql` } ` -export default class Vcard extends PureComponent { - render() { - return ( - { - const meta = data.metaYaml +export default function Vcard() { + const { metaYaml } = useStaticQuery(query) - const handleAddressbookClick = e => { - e.preventDefault() - init(meta) - } - - return ( - - Add to addressbook - - ) - }} - /> - ) + const handleAddressbookClick = e => { + e.preventDefault() + init(metaYaml) } + + return ( + + Add to addressbook + + ) } export const init = async meta => { diff --git a/src/components/atoms/Vcard.test.jsx b/src/components/atoms/Vcard.test.jsx index d6bdc4e..e9c8e23 100644 --- a/src/components/atoms/Vcard.test.jsx +++ b/src/components/atoms/Vcard.test.jsx @@ -1,12 +1,16 @@ import React from 'react' import { render, fireEvent, waitForElement } from '@testing-library/react' -import { StaticQuery } from 'gatsby' +import { useStaticQuery } from 'gatsby' import Vcard, { constructVcard, toDataURL, init } from './Vcard' import data from '../../../jest/__fixtures__/meta.json' describe('Vcard', () => { beforeEach(() => { - StaticQuery.mockImplementationOnce(({ render }) => render({ ...data })) + useStaticQuery.mockImplementationOnce(() => { + return { + ...data + } + }) global.URL.createObjectURL = jest.fn() }) diff --git a/src/components/molecules/LogoUnit.jsx b/src/components/molecules/LogoUnit.jsx index d9ada66..914fc0e 100644 --- a/src/components/molecules/LogoUnit.jsx +++ b/src/components/molecules/LogoUnit.jsx @@ -21,8 +21,8 @@ LogoUnit.propTypes = { export default function LogoUnit({ minimal }) { const data = useStaticQuery(query) - const Animation = posed.div(moveInBottom) const { title, tagline } = data.metaYaml + const Animation = posed.div(moveInBottom) return ( diff --git a/src/components/molecules/LogoUnit.test.jsx b/src/components/molecules/LogoUnit.test.jsx index ca46905..379aa58 100644 --- a/src/components/molecules/LogoUnit.test.jsx +++ b/src/components/molecules/LogoUnit.test.jsx @@ -1,11 +1,15 @@ import React from 'react' import { render } from '@testing-library/react' -import { StaticQuery } from 'gatsby' +import { useStaticQuery } from 'gatsby' import LogoUnit from './LogoUnit' import data from '../../../jest/__fixtures__/meta.json' beforeEach(() => { - StaticQuery.mockImplementationOnce(({ render }) => render({ ...data })) + useStaticQuery.mockImplementationOnce(() => { + return { + ...data + } + }) }) describe('LogoUnit', () => { @@ -26,8 +30,6 @@ describe('LogoUnit', () => { const { container } = render() expect(container.firstChild).toBeInTheDocument() - expect(container.querySelector('.logounit').className).toMatch( - /logounit minimal/ - ) + expect(container.querySelector('.minimal')).toBeInTheDocument() }) }) diff --git a/src/components/molecules/Networks.test.jsx b/src/components/molecules/Networks.test.jsx index 6b8718a..a46b98e 100644 --- a/src/components/molecules/Networks.test.jsx +++ b/src/components/molecules/Networks.test.jsx @@ -5,7 +5,11 @@ import Networks from './Networks' import data from '../../../jest/__fixtures__/meta.json' beforeEach(() => { - useStaticQuery.mockImplementationOnce(() => ({ ...data })) + useStaticQuery.mockImplementationOnce(() => { + return { + ...data + } + }) }) describe('Networks', () => { @@ -26,7 +30,7 @@ describe('Networks', () => { const { container } = render() expect(container.firstChild).toBeInTheDocument() - expect(container.firstChild.className).toMatch(/networks small/) + expect(container.querySelector('.small')).toBeInTheDocument() }) it('can be hidden', () => { diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index 7d10db5..0932b74 100644 --- a/src/components/organisms/Footer.jsx +++ b/src/components/organisms/Footer.jsx @@ -52,10 +52,8 @@ FooterMarkup.propTypes = { } export default function Footer() { - const data = useStaticQuery(query) - const pkg = data.portfolioJson - const meta = data.metaYaml + const { metaYaml, portfolioJson } = useStaticQuery(query) const year = new Date().getFullYear() - return + return } diff --git a/src/components/organisms/Footer.test.jsx b/src/components/organisms/Footer.test.jsx index 77d45e6..f39c375 100644 --- a/src/components/organisms/Footer.test.jsx +++ b/src/components/organisms/Footer.test.jsx @@ -1,18 +1,17 @@ import React from 'react' import { render } from '@testing-library/react' -import { StaticQuery, useStaticQuery } from 'gatsby' +import { useStaticQuery } from 'gatsby' import Footer from './Footer' import data from '../../../jest/__fixtures__/meta.json' -describe('Header', () => { +describe('Footer', () => { beforeEach(() => { - StaticQuery.mockImplementation(({ render }) => - render({ + useStaticQuery.mockImplementation(() => { + return { ...data, portfolioJson: { bugs: '' } - }) - ) - useStaticQuery.mockImplementation(() => ({ ...data })) + } + }) }) it('renders correctly', () => { diff --git a/src/components/organisms/Header.test.jsx b/src/components/organisms/Header.test.jsx index 733b955..4a696a9 100644 --- a/src/components/organisms/Header.test.jsx +++ b/src/components/organisms/Header.test.jsx @@ -1,14 +1,17 @@ import React from 'react' import { render } from '@testing-library/react' -import { StaticQuery, useStaticQuery } from 'gatsby' +import { useStaticQuery } from 'gatsby' import Header from './Header' import Context from '../../store/createContext' import data from '../../../jest/__fixtures__/meta.json' describe('Header', () => { beforeEach(() => { - StaticQuery.mockImplementation(({ render }) => render({ ...data })) - useStaticQuery.mockImplementation(() => ({ ...data })) + useStaticQuery.mockImplementation(() => { + return { + ...data + } + }) }) it('renders correctly', () => {