Page tests

__mocks__/gatsby-link.js

@@ -0,0 +1,2 @@
+jest.unmock('gatsby')
+module.exports = jest.requireActual('gatsby-link')

__mocks__/gatsby.js

@@ -0,0 +1,5 @@
+const gatsby = jest.requireActual('gatsby')
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn()
+}

gatsby-config.js

@@ -1,6 +1,6 @@
 module.exports = {
   siteMetadata: {
-    title: 'gatsby-starter-typescript',
+    title: 'TypeScript Gatsby Starter',
     author: 'Luís Rodrigues',
     description: 'A Gatsby starter using TypeScript.',
     siteUrl: 'https://goblindegook-gatsby-starter-typescript.netlify.com'

package.json

@@ -79,10 +79,10 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write 'src/**/*.{ts,tsx}' '*.js'",
+    "format": "prettier --write '{__mocks__,src,test}/**/*.{ts,tsx}' '*.js'",
     "prebuild": "yarn lint && yarn test",
     "precommit": "lint-staged",
-    "lint": "tslint --project tsconfig.json 'src/**/*.{ts,tsx}'",
+    "lint": "tslint --project tsconfig.json '{src,test}/**/*.{ts,tsx}'",
     "test": "jest"
   },
   "lint-staged": {
@@ -119,6 +119,7 @@
       "js"
     ],
     "moduleNameMapper": {
+      "typeface-*": "identity-obj-proxy",
       ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
       ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js"
     },

src/components/Header.tsx

@@ -3,24 +3,24 @@ import styled, { css } from 'react-emotion'
 import { Link } from 'gatsby'
 import { LunrSearch } from './LunrSearch'
 
-const container = css`
-  background: #ff5700;
-  margin-bottom: 1.45rem;
-`
-
-const wrapper = css`
-  display: grid;
-  grid-template-columns: auto 10rem;
-  grid-template-rows: auto;
-  margin: 0 auto;
-  max-width: 960px;
-  padding: 1.45rem 1.0875rem;
-`
-
-const title = css`
-  margin: 0;
-  display: inline-block;
-`
+const style = {
+  container: css`
+    background: #ff5700;
+    margin-bottom: 1.45rem;
+  `,
+  wrapper: css`
+    display: grid;
+    grid-template-columns: auto 10rem;
+    grid-template-rows: auto;
+    margin: 0 auto;
+    max-width: 960px;
+    padding: 1.45rem 1.0875rem;
+  `,
+  title: css`
+    margin: 0;
+    display: inline-block;
+  `
+}
 
 const TitleLink = styled(Link)`
   color: #fff;
@@ -31,11 +31,15 @@ const TitleLink = styled(Link)`
   }
 `
 
-export const Header = () => (
-  <div className={container}>
-    <div className={wrapper}>
-      <h1 className={title}>
-        <TitleLink to="/">Gatsby Starter</TitleLink>
+type HeaderProps = {
+  readonly title: string
+}
+
+export const Header = ({ title }: HeaderProps) => (
+  <div className={style.container}>
+    <div className={style.wrapper}>
+      <h1 className={style.title}>
+        <TitleLink to="/">{title}</TitleLink>
       </h1>
       <LunrSearch limit={10} />
     </div>

src/components/Layout.tsx

@@ -15,7 +15,15 @@ const wrapper = css`
 `
 
 type LayoutProps = {
-  readonly children?: ReadonlyArray<React.ReactNode>
+  readonly children?: React.ReactNode | ReadonlyArray<React.ReactNode>
+}
+
+type RenderData = {
+  readonly site: {
+    readonly siteMetadata: {
+      readonly title: string
+    }
+  }
 }
 
 export const Layout = ({ children }: LayoutProps) => (
@@ -29,8 +37,9 @@ export const Layout = ({ children }: LayoutProps) => (
         }
       }
     `}
-    render={data => (
+    render={(data: RenderData) => (
       <>
+        {console.log(data)}
         <Helmet
           titleTemplate={`%s - ${data.site.siteMetadata.title}`}
           defaultTitle={data.site.siteMetadata.title}
@@ -45,7 +54,7 @@ export const Layout = ({ children }: LayoutProps) => (
             }
           ]}
         />
-        <Header />
+        <Header title={data.site.siteMetadata.title} />
         <div className={wrapper}>{children}</div>
       </>
     )}

src/pages/index.tsx

@@ -3,7 +3,7 @@ import { Link } from 'gatsby'
 import { Layout } from '../components/Layout'
 
 export const IndexPage = () => (
-  <Layout>
+  <>
     <h2>Hi people</h2>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
@@ -13,7 +13,13 @@ export const IndexPage = () => (
     <p>
       <Link to="/all/">See content generated from Markdown files</Link>
     </p>
+  </>
+)
+
+const LayoutIndexPage = () => (
+  <Layout>
+    <IndexPage />
   </Layout>
 )
 
-export default IndexPage
+export default LayoutIndexPage

src/components/__tests__/ContentBody.spec.tsx → test/components/ContentBody.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, cleanup } from 'react-testing-library'
-import { ContentBody } from '../ContentBody'
+import { ContentBody } from '../../src/components/ContentBody'
 
 describe('<ContentBody />', () => {
   beforeEach(cleanup)

src/components/__tests__/ContentList.spec.tsx → test/components/ContentList.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { merge } from 'ramda'
 import { render, cleanup } from 'react-testing-library'
-import { ContentList } from '../ContentList'
+import { ContentList } from '../../src/components/ContentList'
 
 function createEdge(override: DeepPartial<MarkdownRemarkEdge>): MarkdownRemarkEdge {
   return merge(

test/components/Header.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import { Header } from '../../src/components/Header'
+
+describe('<Header />', () => {
+  beforeEach(cleanup)
+
+  it('renders the title', () => {
+    const title = 'Test Title'
+    const { getByText } = render(<Header title={title} />)
+    expect(getByText(title).tagName).toBeTruthy()
+  })
+})

src/components/__tests__/LunrSearch.spec.tsx → test/components/LunrSearch.spec.tsx

@@ -2,7 +2,7 @@ import 'jest-dom/extend-expect'
 import React from 'react'
 import { render, cleanup, fireEvent } from 'react-testing-library'
 import lunr from 'lunr'
-import { LunrSearch } from '../LunrSearch'
+import { LunrSearch } from '../../src/components/LunrSearch'
 
 function change(element: HTMLElement, value: string): void {
   fireEvent.change(element, {

src/components/__tests__/Pager.spec.tsx → test/components/Pager.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, cleanup } from 'react-testing-library'
-import { Pager } from '../Pager'
+import { Pager } from '../../src/components/Pager'
 
 describe('<Pager />', () => {
   beforeEach(cleanup)

test/pages/fixtures/site.json

@@ -0,0 +1,7 @@
+{
+  "site": {
+    "siteMetadata": {
+      "title": "Gatsby Test"
+    }
+  }
+}

test/pages/index.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IndexPage } from '../../src/pages/index'
+import { render } from 'react-testing-library'
+
+describe('IndexPage', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<IndexPage />)
+
+    expect(getByText('Go to another page')).toHaveAttribute('href', '/another-page/')
+    expect(getByText('See content generated from Markdown files')).toHaveAttribute('href', '/all/')
+  })
+})

tsconfig.json

@@ -19,5 +19,5 @@
     "strictNullChecks": true,
     "target": "esnext"
   },
-  "include": ["./src/**/*"]
+  "include": ["./src/**/*", "./test/**/*"]
 }