Add testing env and Tabs, PageHeader, EmptyState and Table tests (#867)

Resolves #860 
Resolves #861

core/components/molecules/tabs/tabs.js

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { colors, spacing } from '@auth0/cosmos-tokens'
-import makeId from '../../_helpers/uniqueId'
+
 import Automation from '../../_helpers/automation-attribute'
 
 const Wrapper = styled.div``
 
-const TabLink = styled.a`
+export const TabLink = styled.a`
   display: inline-block;
   padding: ${spacing.small} 0;
   margin-right: ${spacing.large};
@@ -21,7 +21,7 @@ const TabLink = styled.a`
   }
 `
 
-const TabLinkGroup = styled.div`
+export const TabLinkGroup = styled.div`
   border-bottom: 1px solid ${colors.base.grayLight};
   ${TabLink}:last-child {
     margin-right: 0;

test/jestPreprocess.js → internal/test/jestPreprocess.js

@@ -1,3 +1,3 @@
 const babelOptions = { presets: ['env'] }
 
-module.exports = require('babel-jest').createTransformer(require('../core/babel-preset'))
+module.exports = require('babel-jest').createTransformer(require('../../core/babel-preset'))

test/package.json → internal/test/package.json

@@ -7,21 +7,30 @@
   "license": "MIT",
   "scripts": {
     "test": "jest --no-cache",
+    "test-watch": "jest --watch --no-cache",
     "test-snapshot": "jest snapshot --no-cache",
-    "test-unit": "jest unit --no-cache"
+    "test-unit": "jest unit --no-cache",
+    "test-unit-watch": "jest unit --no-cache --watch",
+    "coverage": "jest --coverage"
   },
   "jest": {
     "verbose": true,
+    "setupTestFrameworkScriptFile": "<rootDir>/setup.js",
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "transform": {
       "^.+\\.js?$": "<rootDir>/jestPreprocess.js"
     }
   },
   "devDependencies": {
-    "@auth0/cosmos": "0.4.0",
     "babel-jest": "^23.4.2",
-    "enzyme": "^3.4.4",
-    "enzyme-adapter-react-16": "^1.2.0",
+    "enzyme": "^3.5.0",
+    "enzyme-adapter-react-16": "^1.3.0",
     "jest": "^23.5.0",
     "jest-styled-components": "^6.1.1"
+  },
+  "dependencies": {
+    "enzyme-to-json": "^3.3.4"
   }
 }

internal/test/setup.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })

internal/test/unit/__snapshots__/empty-state.test.js.snap

@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty State renders properly 1`] = `
+<styled.div
+  data-cosmos-key="empty-state"
+>
+  <Styled(Heading)
+    size={1}
+  >
+    Some title
+  </Styled(Heading)>
+  <styled.div>
+    <Icon
+      color="blue"
+      name="copy"
+      size={110}
+    />
+    <Text
+      action={
+        Object {
+          "handler": [Function],
+          "icon": "copy",
+          "label": "Something",
+        }
+      }
+      helpUrl="/some-place"
+      icon="copy"
+      text="Some description"
+      title="Some title"
+      useParagraph={true}
+    />
+    <styled.div>
+      <Link
+        href="/some-place"
+        target="_blank"
+      >
+        Learn More 
+        <i>
+           
+        </i>
+      </Link>
+    </styled.div>
+  </styled.div>
+  <Button
+    appearance="cta"
+    disabled={false}
+    icon="copy"
+    loading={false}
+    onClick={[Function]}
+    size="large"
+    success={false}
+  >
+    Something
+  </Button>
+</styled.div>
+`;
+
+exports[`Empty State renders properly without help link 1`] = `
+<styled.div
+  data-cosmos-key="empty-state"
+>
+  <Styled(Heading)
+    size={1}
+  >
+    Some title
+  </Styled(Heading)>
+  <styled.div>
+    <Icon
+      color="blue"
+      name="copy"
+      size={110}
+    />
+    <Text
+      action={
+        Object {
+          "handler": [Function],
+          "icon": "copy",
+          "label": "Something",
+        }
+      }
+      helpUrl={null}
+      icon="copy"
+      text="Some description"
+      title="Some title"
+      useParagraph={true}
+    />
+  </styled.div>
+  <Button
+    appearance="cta"
+    disabled={false}
+    icon="copy"
+    loading={false}
+    onClick={[Function]}
+    size="large"
+    success={false}
+  >
+    Something
+  </Button>
+</styled.div>
+`;
+
+exports[`Empty State renders properly without text 1`] = `
+<styled.div
+  data-cosmos-key="empty-state"
+>
+  <Styled(Heading)
+    size={1}
+  >
+    Some title
+  </Styled(Heading)>
+  <styled.div>
+    <Icon
+      color="blue"
+      name="copy"
+      size={110}
+    />
+    <Text
+      action={
+        Object {
+          "handler": [Function],
+          "icon": "copy",
+          "label": "Something",
+        }
+      }
+      helpUrl="/some-place"
+      icon="copy"
+      text={null}
+      title="Some title"
+      useParagraph={true}
+    />
+    <styled.div>
+      <Link
+        href="/some-place"
+        target="_blank"
+      >
+        Learn More 
+        <i>
+           
+        </i>
+      </Link>
+    </styled.div>
+  </styled.div>
+  <Button
+    appearance="cta"
+    disabled={false}
+    icon="copy"
+    loading={false}
+    onClick={[Function]}
+    size="large"
+    success={false}
+  >
+    Something
+  </Button>
+</styled.div>
+`;