Updated test-setup

.gitignore

@@ -2,7 +2,6 @@
 
 dist
 build
-package-lock.json
 yarn.lock
 config-overrides.js
 config-overrides.d.ts

cypress/test-setup/direflow-config.json

@@ -0,0 +1,5 @@
+{
+  "build": {
+    "filename": "direflowBundle.js"
+  }
+}

cypress/test-setup/package.json

@@ -4,22 +4,32 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "serve ./public",
-    "build": "direflow-scripts build"
+    "start": "direflow-scripts start",
+    "build": "direflow-scripts build",
+    "serve": "serve ./public"
   },
   "dependencies": {
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-scripts": "3.4.1",
     "direflow-component": "../../packages/direflow-component",
     "direflow-scripts": "../../packages/direflow-scripts",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
     "@material-ui/core": "^4.9.7",
     "styled-components": "^5.0.1",
     "serve": "^11.3.0"
   },
-  "peerDependencies": {
+  "devDependencies": {
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.18.0",
+    "to-string-loader": "^1.1.6",
+    "jest-environment-jsdom-fourteen": "0.1.0",
     "react-app-rewired": "2.1.3",
-    "to-string-loader": "1.1.5"
+    "react-test-renderer": "16.9.0",
+    "webpack-cli": "^3.3.11"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
   },
   "browserslist": {
     "production": [
@@ -33,5 +43,10 @@
       "last 1 safari version"
     ]
   },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "direflow-scripts/direflow-jest.config.js"
+    ]
+  },
   "config-overrides-path": "direflow-webpack.js"
-}
+}

cypress/test-setup/public/index.css

@@ -0,0 +1,10 @@
+body {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  padding-top: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #F6FAFA;
+}

cypress/test-setup/src/component-exports.js

@@ -0,0 +1,16 @@
+/**
+ * In this file you can export components that will
+ * be build as a pure React component library.
+ * 
+ * Using the command `npm run build:lib` will
+ * produce a folder `lib` with your React components.
+ *
+ * If you're not using a React component library,
+ * this file can be safely deleted.
+ */
+
+import App from './direflow-components/test-setup/App';
+
+export { 
+  App 
+};

cypress/test-setup/src/direflow-components/test-setup/App.css

@@ -0,0 +1,69 @@
+.app {
+  width: 400px;
+  height: 575px;
+  padding: 30px 60px;
+  box-sizing: border-box;
+  background-color: white;
+  box-shadow: 0 4px 14px 4px #375c821c;
+  font-family: 'Noto Sans JP', sans-serif;
+  border-bottom: 5px solid #cad5e6;
+}
+
+.top {
+  width: 100%;
+  height: 50%;
+  border-bottom: 2px solid #7998c7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bottom {
+  width: 100%;
+  height: 50%;
+  border-top: 2px solid #7998c7;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.header-image {
+  width: 165px;
+  height: 165px;
+  background: url('https://silind-s3.s3.eu-west-2.amazonaws.com/direflow/logo.svg');
+  background-size: contain;
+}
+
+.header-title {
+  font-size: 34px;
+  color: #5781C2;
+  font-family: 'Advent Pro', sans-serif;
+}
+
+.sample-text {
+  font-family: 'Noto Sans JP', sans-serif;
+  font-size: 16px;
+  color: #666;
+  text-align: center;
+}
+
+.button {
+  width: 150px;
+  height: 45px;
+  font-family: 'Noto Sans JP', sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  background-color: #5781C2;
+  color: white;
+  box-shadow: 2px 2px 5px #16314d98;
+  outline: none;
+  border: 0;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.button:hover {
+  box-shadow: 4px 4px 8px #16314d63;
+  background-color: #40558f;
+}

cypress/test-setup/src/direflow-components/test-setup/index.js

@@ -0,0 +1,74 @@
+import { DireflowComponent } from 'direflow-component';
+import App from './App';
+import StyledComponent from './StyledComponent';
+import MaterialUI from './MaterialUI';
+
+DireflowComponent.createAll([
+  {
+    component: App,
+    configuration: {
+      tagname: 'basic-test',
+    },
+  },
+  {
+    component: App,
+    configuration: {
+      tagname: 'props-test',
+    },
+  },
+  {
+    component: App,
+    configuration: {
+      tagname: 'event-test',
+    },
+  },
+  {
+    component: App,
+    configuration: {
+      tagname: 'slot-test',
+    },
+  },
+  {
+    component: App,
+    configuration: {
+      tagname: 'external-loader-test',
+    },
+    plugins: [
+      {
+        name: 'external-loader',
+        options: {
+          paths: [
+            'https://code.jquery.com/jquery-3.3.1.slim.min.js',
+            'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
+            {
+              src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js',
+              async: true,
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    component: StyledComponent,
+    configuration: {
+      tagname: 'styled-components-test',
+    },
+    plugins: [
+      {
+        name: 'styled-components',
+      },
+    ],
+  },
+  {
+    component: MaterialUI,
+    configuration: {
+      tagname: 'material-ui-test',
+    },
+    plugins: [
+      {
+        name: 'material-ui',
+      },
+    ],
+  },
+]);

cypress/test-setup/src/direflow-components/test-setup/test/App.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import App from '../App';
+
+const reactProps = {
+  componentTitle: 'Component Test',
+  sampleList: ['Mock', 'Test', 'Data'],
+};
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App {...reactProps} />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it('matches snapshot as expected', () => {
+  const renderTree = renderer.create(<App {...reactProps} />).toJSON();
+  expect(renderTree).toMatchSnapshot();
+});

cypress/test-setup/src/index.js

@@ -1,74 +1,10 @@
-import { DireflowComponent } from 'direflow-component';
-import App from './direflow-components/test-component/App';
-import StyledComponent from './direflow-components/test-component/StyledComponent';
-import MatrialUI from './direflow-components/test-component/MaterialUI';
-
-DireflowComponent.createAll([
-  {
-    component: App,
-    configuration: {
-      tagname: 'basic-test',
-    },
-  },
-  {
-    component: App,
-    configuration: {
-      tagname: 'props-test',
-    },
-  },
-  {
-    component: App,
-    configuration: {
-      tagname: 'event-test',
-    },
-  },
-  {
-    component: App,
-    configuration: {
-      tagname: 'slot-test',
-    },
-  },
-  {
-    component: App,
-    configuration: {
-      tagname: 'external-loader-test',
-    },
-    plugins: [
-      {
-        name: 'external-loader',
-        options: {
-          paths: [
-            'https://code.jquery.com/jquery-3.3.1.slim.min.js',
-            'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
-            {
-              src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js',
-              async: true,
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    component: StyledComponent,
-    configuration: {
-      tagname: 'styled-components-test',
-    },
-    plugins: [
-      {
-        name: 'styled-components',
-      },
-    ],
-  },
-  {
-    component: MatrialUI,
-    configuration: {
-      tagname: 'material-ui-test',
-    },
-    plugins: [
-      {
-        name: 'material-ui',
-      },
-    ],
-  },
-]);
+/**
+ * This is the entry file of the Direflow setup.
+ *
+ * You can add any additional functionality here.
+ * For example, this is a good place to hook into your
+ * Web Component once it's mounted on the DOM.
+ *
+ * !This file cannot be removed.
+ * It can be left blank if not needed.
+ */