Merge branch 'master' into greenkeeper/monorepo.gatsby-2.0.16

.travis.yml

@@ -0,0 +1,19 @@
+language: node_js
+
+node_js:
+- "10"
+
+branches:
+  only:
+  - master
+  - tests
+  - /^greenkeeper/.*$/
+
+install:
+- yarn global add typescript
+- yarn install
+
+script:
+- yarn run lint
+- yarn run build
+- yarn run test:coveralls

README.md

@@ -1,6 +1,8 @@
 ### Davidegheri.com Website
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/Davide-Gheri/davidegheri.com.svg)](https://greenkeeper.io/)
+[![Coverage Status](https://coveralls.io/repos/github/Davide-Gheri/davidegheri.com/badge.svg?branch=master)](https://coveralls.io/github/Davide-Gheri/davidegheri.com?branch=master)
+[![Build Status](https://travis-ci.com/Davide-Gheri/davidegheri.com.svg?branch=master)](https://travis-ci.com/Davide-Gheri/davidegheri.com)
 
 Developed with Gatsby
 

__mocks__/gatsby.js

@@ -0,0 +1,14 @@
+const React = require('react');
+const gatsby = jest.requireActual('gatsby');
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(({ to, ...rest }) =>
+    React.createElement('a', {
+      ...rest,
+      href: to,
+    })
+  ),
+  StaticQuery: jest.fn(),
+};

jest.config.js

@@ -0,0 +1,34 @@
+
+module.exports = {
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
+  },
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  testPathIgnorePatterns: ["node_modules", ".cache"],
+  transformIgnorePatterns: ["node_modules/(?!(gatsby)/)"],
+  globals: {
+    "__PATH_PREFIX__": ""
+  },
+  setupFiles: ["<rootDir>/tests/loadershim.js"],
+  testURL: "http://localhost",
+  moduleFileExtensions: [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ],
+  collectCoverageFrom: [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  coverageReporters: [
+    "lcov",
+    "text",
+    "text-summary"
+  ]
+};

package.json

@@ -20,7 +20,6 @@
     "gatsby-source-strapi": "^0.0.5",
     "gatsby-transformer-remark": "^2.1.12",
     "gatsby-transformer-sharp": "^2.1.8",
-    "har-validator": "^5.1.3",
     "lodash": "^4.17.11",
     "normalize.css": "^8.0.0",
     "react": "^16.5.1",
@@ -36,17 +35,32 @@
     "build": "gatsby build",
     "develop": "gatsby develop",
     "start": "npm run develop",
-    "format": "prettier --write \"src/**/*.js\"",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "tslint --project .",
+    "test": "jest",
+    "test:coverage": "npm run test -- --coverage",
+    "test:watch": "npm run test:coverage -- --watchAll",
+    "test:coveralls": "npm run test:coverage && cat ./coverage/lcov.info | coveralls"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@types/enzyme": "^3.1.15",
+    "@types/enzyme-adapter-react-16": "^1.0.3",
+    "@types/jest": "^23.3.9",
     "@types/lodash": "^4.14.118",
     "@types/node": "^10.12.3",
-    "@types/react": "^16.4.18",
+    "@types/react": "16.7.6",
     "@types/react-dom": "^16.0.9",
     "@types/react-helmet": "^5.0.7",
     "@types/styled-components": "^4.0.3",
-    "prettier": "^1.14.2",
+    "babel-core": "^7.0.0-0",
+    "babel-jest": "^23.6.0",
+    "babel-preset-gatsby": "^0.1.4",
+    "coveralls": "^3.0.2",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.6.0",
+    "ts-jest": "^23.10.4",
     "tslint": "^5.11.0",
     "tslint-config-airbnb": "^5.11.0",
     "typescript": "^3.1.6"

src/components/Footer/Footer.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Adapter from 'enzyme-adapter-react-16';
+import { shallow, configure } from 'enzyme';
+import Footer from './index';
+
+beforeEach(() => {
+  configure({adapter: new Adapter});
+});
+
+test('Footer should render passed children correctly', () => {
+  const el = shallow(<Footer><span>Test</span></Footer>);
+  expect(el.contains(<span>Test</span>)).toBeTruthy();
+});

src/components/Header/Header.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Adapter from 'enzyme-adapter-react-16';
+import { configure, mount } from 'enzyme';
+import Header from './index';
+
+beforeEach(() => {
+  configure({adapter: new Adapter});
+});
+
+describe('Navbar ', () => {
+  describe('should set the state based on props', () => {
+    it('should set transparent to false if props.transparent is false', () => {
+      const el = mount(<Header siteTitle="test" transparent={false}/>);
+      expect(el.state()).toEqual({transparent: false});
+      el.unmount();
+    });
+
+    it('should set transparent to true if props.transparent is true', () => {
+      const el = mount(<Header siteTitle="test" transparent={true}/>);
+      expect(el.state()).toEqual({transparent: true});
+      el.unmount();
+    });
+  });
+
+  it('should change the transparent state on window scroll if scrolling is > than window.height (768px)', () => {
+    const el = mount(<Header siteTitle="test" transparent={true}/>);
+    expect(el.state()).toEqual({transparent: true});
+    (global as any).pageYOffset = 1000;
+    (el.instance() as any).handleScroll();
+    expect(el.state()).toEqual({transparent: false});
+    el.unmount();
+  });
+
+  it('should not change the transparent state on window scroll if scrolling is < than window.height (768px) - offset (100)', () => {
+    const el = mount(<Header siteTitle="test" transparent={true}/>);
+    expect(el.state()).toEqual({transparent: true});
+    (global as any).pageYOffset = 500;
+    (el.instance() as any).handleScroll();
+    expect(el.state()).toEqual({transparent: true});
+    el.unmount();
+  });
+});

src/components/Header/HeaderSections.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.header`
+  background: teal;
+  padding: 0 3rem;
+`;
+
+export const HeaderBrand = styled.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 1.5rem;
+`;
+
+export const HeaderTitle = styled.span`
+  font-weight: 600;
+  font-size: 1.5rem;
+  letter-spacing: -.05em;
+`;

src/components/Header/Navbar.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Navbar = styled('nav')<{transparent: boolean}>`
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 1rem 1.5rem;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
+  position: fixed;
+  width: 100%;
+  z-index: 150;
+  top: 0;
+  left: 0;
+  color: white;
+  transition: background-color .1s;
+  background: ${props => props.transparent ? 'transparent' : '#2f365f'};
+`;

src/components/header.tsx → src/components/Header/index.tsx

@@ -2,44 +2,10 @@ import React, { PureComponent } from 'react';
 import { Link, GatsbyLinkProps } from 'gatsby';
 import styled from 'styled-components';
 import { debounce } from 'lodash';
+import { Navbar } from './Navbar';
+import { HeaderTitle, HeaderWrapper } from './HeaderSections';
 
-const HeaderWrapper = styled.header`
-  background: teal;
-  padding: 0 3rem;
-`;
-
-const Navbar = styled<{transparent: boolean}, 'nav'>('nav')`
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 1rem 1.5rem;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
-  position: fixed;
-  width: 100%;
-  z-index: 150;
-  top: 0;
-  left: 0;
-  color: white;
-  transition: background-color .1s;
-  background: ${props => props.transparent ? 'transparent' : '#2f365f'};
-`;
-
-const HeaderBrand = styled.div`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-right: 1.5rem;
-`;
-
-const HeaderTitle = styled.span`
-  font-weight: 600;
-  font-size: 1.5rem;
-  letter-spacing: -.05em;
-`;
-
-const StyledLink = styled<GatsbyLinkProps<any>, any>(Link)`
+const StyledLink = styled(Link)<GatsbyLinkProps<any>>`
   color: white;
   text-decoration: none;
 `;
@@ -78,7 +44,7 @@ export default class Header extends PureComponent<HeaderProps, HeaderState> {
   };
 
   componentDidMount() {
-    this.setState({transparent: this.props.transparent})
+    this.setState({transparent: this.props.transparent});
     window.addEventListener('scroll', this.handleScrollDebounced);
   }
 

src/components/Home/About.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { media } from '../../utils';
-import { Section, SectionTitle, SectionPadding } from './Styled';
+import { Section, SectionTitle, SectionPadding } from '../Styled';
 import { graphql, Link, StaticQuery } from 'gatsby';
 
 const Wrapper = styled(SectionPadding)`

src/components/Home/Contacts.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Section } from './Styled';
+import { Section } from '../Styled';
 import { media } from '../../utils/styled';
 import { graphql, StaticQuery } from 'gatsby';
 import { ContactQuery } from '../../interfaces';

src/components/Home/Portfolio/Item.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'gatsby';
 import Img from 'gatsby-image';
-import removeMd from 'remove-markdown';
 
 const GridItem = styled.div`
   width: auto;

src/components/Home/Portfolio/index.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { StaticQuery, graphql } from 'gatsby';
 import { media } from '../../../utils/styled';
-import { Section, SectionTitle, SectionPadding } from '../Styled';
+import { Section, SectionTitle, SectionPadding } from '../../Styled';
 import Item from './Item';
 import { PortfolioQuery } from '../../../interfaces';
 

src/components/Layout/Layout.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Adapter from 'enzyme-adapter-react-16';
+import { shallow, configure } from 'enzyme';
+import Layout, { PureLayout } from './index';
+import { SeoQuery } from '../../interfaces/seo';
+
+beforeEach(() => {
+  configure({adapter: new Adapter});
+});
+
+describe('Layout should render correctly', () => {
+  it('should true', () => {
+    const data: SeoQuery = {
+      datoCmsSite: {
+        name: 'Test',
+        globalSeo: {
+          siteName: 'Test',
+        },
+      },
+    };
+    const el = shallow(<PureLayout data={data}>test</PureLayout>);
+    expect(el.contains('test')).toBeTruthy();
+  });
+});