From ff8b11af4d7aaab519c97644be814b30e8efe12c Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Wed, 29 Nov 2017 09:25:32 +0100
Subject: [PATCH] Add a few snapshot tests

---
 frontend/src/__mocks__/react-mdl.js           | 38 +++++++-------
 .../src/component/api/__tests__/.eslintrc     |  5 ++
 .../show-api-details-component-test.jsx.snap  | 51 +++++++++++++++++++
 .../show-api-details-component-test.jsx       | 18 +++++++
 .../api/show-api-details-component.jsx        |  6 ++-
 5 files changed, 98 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/component/api/__tests__/.eslintrc
 create mode 100644 frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap
 create mode 100644 frontend/src/component/api/__tests__/show-api-details-component-test.jsx

diff --git a/frontend/src/__mocks__/react-mdl.js b/frontend/src/__mocks__/react-mdl.js
index 2deaebe0e0..9563ea7159 100644
--- a/frontend/src/__mocks__/react-mdl.js
+++ b/frontend/src/__mocks__/react-mdl.js
@@ -1,20 +1,22 @@
 module.exports = {
-    Card: 'react-mdl-Card',
-    CardTitle: 'react-mdl-CardTitle',
-    CardText: 'react-mdl-CardText',
-    CardMenu: 'react-mdl-CardMenu',
-    DataTable: 'react-mdl-DataTable',
-    Cell: 'react-mdl-Cell',
-    Grid: 'react-mdl-Grid',
-    Icon: 'react-mdl-Icon',
-    IconButton: 'react-mdl-IconButton',
-    List: 'react-mdl-List',
-    ListItem: 'react-mdl-ListItem',
-    ListItemContent: 'react-mdl-ListItemContent',
-    ProgressBar: 'react-mdl-ProgressBar',
-    Switch: 'react-mdl-Switch',
-    Tab: 'react-mdl-Tab',
-    Tabs: 'react-mdl-Tabs',
-    TableHeader: 'react-mdl-TableHeader',
-    Textfield: 'react-mdl-Textfield',
+  Card: "react-mdl-Card",
+  CardTitle: "react-mdl-CardTitle",
+  CardText: "react-mdl-CardText",
+  CardMenu: "react-mdl-CardMenu",
+  DataTable: "react-mdl-DataTable",
+  Cell: "react-mdl-Cell",
+  Grid: "react-mdl-Grid",
+  Icon: "react-mdl-Icon",
+  IconButton: "react-mdl-IconButton",
+  List: "react-mdl-List",
+  ListItem: "react-mdl-ListItem",
+  ListItemContent: "react-mdl-ListItemContent",
+  ProgressBar: "react-mdl-ProgressBar",
+  Switch: "react-mdl-Switch",
+  Tab: "react-mdl-Tab",
+  Tabs: "react-mdl-Tabs",
+  TableHeader: "react-mdl-TableHeader",
+  Textfield: "react-mdl-Textfield",
+  FooterSection: "react-mdl-FooterSection",
+  FooterLinkList: "react-mdl-FooterLinkList"
 };
diff --git a/frontend/src/component/api/__tests__/.eslintrc b/frontend/src/component/api/__tests__/.eslintrc
new file mode 100644
index 0000000000..eba2077219
--- /dev/null
+++ b/frontend/src/component/api/__tests__/.eslintrc
@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}
diff --git a/frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap b/frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap
new file mode 100644
index 0000000000..3bfed09ff5
--- /dev/null
+++ b/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>
+`;
diff --git a/frontend/src/component/api/__tests__/show-api-details-component-test.jsx b/frontend/src/component/api/__tests__/show-api-details-component-test.jsx
new file mode 100644
index 0000000000..c712fff910
--- /dev/null
+++ b/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();
+});
diff --git a/frontend/src/component/api/show-api-details-component.jsx b/frontend/src/component/api/show-api-details-component.jsx
index d9c639ee8b..c0c83a42ec 100644
--- a/frontend/src/component/api/show-api-details-component.jsx
+++ b/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;