Add a few snapshot tests

frontend/src/__mocks__/react-mdl.js

@@ -1,20 +1,22 @@
 module.exports = {
-    Card: 'react-mdl-Card',
+  Card: "react-mdl-Card",
-    CardTitle: 'react-mdl-CardTitle',
+  CardTitle: "react-mdl-CardTitle",
-    CardText: 'react-mdl-CardText',
+  CardText: "react-mdl-CardText",
-    CardMenu: 'react-mdl-CardMenu',
+  CardMenu: "react-mdl-CardMenu",
-    DataTable: 'react-mdl-DataTable',
+  DataTable: "react-mdl-DataTable",
-    Cell: 'react-mdl-Cell',
+  Cell: "react-mdl-Cell",
-    Grid: 'react-mdl-Grid',
+  Grid: "react-mdl-Grid",
-    Icon: 'react-mdl-Icon',
+  Icon: "react-mdl-Icon",
-    IconButton: 'react-mdl-IconButton',
+  IconButton: "react-mdl-IconButton",
-    List: 'react-mdl-List',
+  List: "react-mdl-List",
-    ListItem: 'react-mdl-ListItem',
+  ListItem: "react-mdl-ListItem",
-    ListItemContent: 'react-mdl-ListItemContent',
+  ListItemContent: "react-mdl-ListItemContent",
-    ProgressBar: 'react-mdl-ProgressBar',
+  ProgressBar: "react-mdl-ProgressBar",
-    Switch: 'react-mdl-Switch',
+  Switch: "react-mdl-Switch",
-    Tab: 'react-mdl-Tab',
+  Tab: "react-mdl-Tab",
-    Tabs: 'react-mdl-Tabs',
+  Tabs: "react-mdl-Tabs",
-    TableHeader: 'react-mdl-TableHeader',
+  TableHeader: "react-mdl-TableHeader",
-    Textfield: 'react-mdl-Textfield',
+  Textfield: "react-mdl-Textfield",
+  FooterSection: "react-mdl-FooterSection",
+  FooterLinkList: "react-mdl-FooterLinkList"
 };

frontend/src/component/api/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with details 1`] = `
+<react-mdl-FooterSection
+  logo="Unleash 1.1.0"
+  type="bottom"
+>
+  <react-mdl-FooterLinkList>
+    <a
+      href="https://github.com/Unleash/unleash/"
+      target="_blank"
+    >
+      GitHub
+    </a>
+    <a
+      href="https://www.finn.no"
+      target="_blank"
+    >
+      <small>
+        A product by
+      </small>
+       FINN.no
+    </a>
+  </react-mdl-FooterLinkList>
+</react-mdl-FooterSection>
+`;
+
+exports[`renders correctly with empty api details 1`] = `
+<react-mdl-FooterSection
+  logo="Unleash "
+  type="bottom"
+>
+  <react-mdl-FooterLinkList>
+    <a
+      href="https://github.com/Unleash/unleash/"
+      target="_blank"
+    >
+      GitHub
+    </a>
+    <a
+      href="https://www.finn.no"
+      target="_blank"
+    >
+      <small>
+        A product by
+      </small>
+       FINN.no
+    </a>
+  </react-mdl-FooterLinkList>
+</react-mdl-FooterSection>
+`;

frontend/src/component/api/__tests__/show-api-details-component-test.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import ShowApiDetailsComponent from '../show-api-details-component';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-mdl');
+
+test('renders correctly with empty api details', () => {
+    const tree = renderer.create(<ShowApiDetailsComponent fetchAll={jest.fn()} apiDetails={{}} />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with details', () => {
+    const tree = renderer
+        .create(<ShowApiDetailsComponent fetchAll={jest.fn()} apiDetails={{ version: '1.1.0' }} />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

frontend/src/component/api/show-api-details-component.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FooterSection, FooterLinkList } from 'react-mdl';
 
-export default class ShowApiDetailsComponent extends React.Component {
+class ShowApiDetailsComponent extends Component {
     static propTypes = {
         apiDetails: PropTypes.object.isRequired,
         fetchAll: PropTypes.func.isRequired,
@@ -28,3 +28,5 @@ export default class ShowApiDetailsComponent extends React.Component {
         );
     }
 }
+
+export default ShowApiDetailsComponent;