Merge pull request #217 from asigloo/feature/unit-test

Feature/unit test & E2E
asigloo · Jan 10, 2021 · ff62de0 · ff62de0
2 parents b63076f + 571f6af
commit ff62de0
Show file tree

Hide file tree

Showing 90 changed files with 12,731 additions and 6,409 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 dist/
+*.config.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,5 +35,14 @@ module.exports = {
         jest: true,
       },
     },
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
+      env: {
+        jest: true,
+      },
+    },
   ],
 };
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,5 +17,7 @@ jobs:
           node-version: 12
       - name: Install dependencies
         run: npm ci
+      - name: Run unit tests
+        run: npm run test --verbose
       - name: Build Library
         run: npm run build
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,6 +17,10 @@ jobs:
           node-version: 12
       - name: Install dependencies
         run: npm ci
+      - name: Run unit tests
+        run: npm run test --verbose
+      - name: Run e2e
+        run: npm run test:e2e
       - name: Build Library
         run: npm run build
       - name: Build Types Declarations

diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname $0)/_/husky.sh"
+
+npm run lint
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname $0)/_/husky.sh"
+
+npm test
diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,7 @@
 .vuegenerator
 .eslintrc.js
 .eslintignore
+.husky
 netlify.toml
 jest.config.js
 babel.config.js

diff --git a/.nyc_output/out.json b/.nyc_output/out.json
@@ -0,0 +1 @@
+{}
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:6044",
+  "pluginsFile": "tests/e2e/plugins/index.js",
+  "testFiles": "**/*.e2e.js*"
+}
diff --git a/demos/vue-3/.gitignore b/demos/vue-3/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demos/vue-3/README.md b/demos/vue-3/README.md
@@ -0,0 +1,24 @@
+# vue-3
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/demos/vue-3/public/favicon.ico b/demos/vue-3/public/favicon.ico
diff --git a/demos/vue-3/public/index.html b/demos/vue-3/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/demos/vue-3/src/App.vue b/demos/vue-3/src/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id="app">
+    <Toolbar />
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Toolbar from './components/Toolbar.vue';
+
+const components = {
+  Toolbar,
+};
+
+export default defineComponent({
+  name: 'app',
+  components,
+});
+</script>
diff --git a/demos/vue-3/src/assets/logo.png b/demos/vue-3/src/assets/logo.png
diff --git a/demos/vue-3/src/assets/logo.svg b/demos/vue-3/src/assets/logo.svg
diff --git a/demos/vue-3/src/components/Console.vue b/demos/vue-3/src/components/Console.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="console bg-marine text-white text-xs p-4 rounded-md relative">
+    <ul class="absolute top-1 left-2">
+      <li class="rounded w-2 h-2 bg-salmon inline-block mr-1"></li>
+      <li class="rounded w-2 h-2 bg-yellow-300 inline-block mr-1"></li>
+      <li class="rounded w-2 h-2 bg-green-500 inline-block"></li>
+    </ul>
+    <pre
+      data-cy="form-values"
+      class="shadow-lg pt-4"
+      :data-formValues="jsonValues"
+      >{{ content }}</pre
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+const props = {
+  content: String,
+};
+
+export default defineComponent({
+  name: 'console',
+  props,
+  setup(props) {
+    const jsonValues = computed(() => JSON.stringify(props.content));
+    return {
+      jsonValues,
+    };
+  },
+});
+</script>
+
+<style></style>
diff --git a/demos/vue-3/src/components/Toolbar.vue b/demos/vue-3/src/components/Toolbar.vue
@@ -0,0 +1,30 @@
+<template>
+  <header class="toolbar flex px-8 py-4 border-b border-gray-100">
+    <img src="../assets/logo.svg" class="logo mr-8" />
+    <h1 class="text-bg text-xl font-bold font-display text-gray-700">
+      {{ title }}
+    </h1>
+  </header>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+  name: 'toolbar',
+  setup() {
+    const route = useRoute();
+    const title = computed(() => route.meta.title || 'Vue Dynamic Forms');
+
+    return { title };
+  },
+});
+</script>
+
+<style>
+.logo {
+  width: 32px;
+  height: 32px;
+}
+</style>
diff --git a/demos/vue-3/src/main.ts b/demos/vue-3/src/main.ts
@@ -0,0 +1,22 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './styles/main.scss';
+import router from './router';
+
+import { createDynamicForms } from '../../../src';
+
+const VueDynamicForms = createDynamicForms({
+  autoValidate: true,
+  form: {
+    customClass: 'plugin-options-class-added',
+    method: 'POST',
+    netlify: false,
+    netlifyHoneypot: null,
+  },
+});
+
+export const app = createApp(App);
+
+app.use(VueDynamicForms);
+
+app.use(router).mount('#app');
diff --git a/demos/vue-3/src/router/index.ts b/demos/vue-3/src/router/index.ts
@@ -0,0 +1,102 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import Home from '../views/Home.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+  {
+    path: '/general',
+    name: 'General',
+    meta: {
+      title: 'General',
+    },
+    component: () =>
+      import(/* webpackChunkName: "general" */ '../views/General.vue'),
+  },
+  {
+    path: '/basic',
+    name: 'Basic',
+    meta: {
+      title: 'Basic',
+    },
+    component: () =>
+      import(/* webpackChunkName: "basic" */ '../views/Basic.vue'),
+  },
+  {
+    path: '/text-fields',
+    name: 'Text Fields',
+    meta: {
+      title: 'Text Fields',
+    },
+    component: () =>
+      import(/* webpackChunkName: "text-fields" */ '../views/TextFields.vue'),
+  },
+  {
+    path: '/number-fields',
+    name: 'Number Fields',
+    meta: {
+      title: 'Number Fields',
+    },
+    component: () =>
+      import(/* webpackChunkName: "text-fields" */ '../views/NumberFields.vue'),
+  },
+  {
+    path: '/select-fields',
+    name: 'Select Fields',
+    meta: {
+      title: 'Select Fields',
+    },
+    component: () =>
+      import(/* webpackChunkName: "text-fields" */ '../views/SelectFields.vue'),
+  },
+  {
+    path: '/textarea-fields',
+    name: 'TextArea Fields',
+    meta: {
+      title: 'TextArea Fields',
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "text-fields" */ '../views/TextAreaFields.vue'
+      ),
+  },
+  {
+    path: '/checkbox-fields',
+    name: 'Checkbox Fields',
+    meta: {
+      title: 'Checkbox Fields',
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "checkbox-fields" */ '../views/CheckboxFields.vue'
+      ),
+  },
+  {
+    path: '/radio-fields',
+    name: 'Radio Fields',
+    meta: {
+      title: 'Radio Fields',
+    },
+    component: () =>
+      import(/* webpackChunkName: "radio-fields" */ '../views/RadioFields.vue'),
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    meta: {
+      title: 'Login',
+    },
+    component: () =>
+      import(/* webpackChunkName: "campaigns" */ '../views/Login.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
diff --git a/demos/vue-3/src/shims-vue.d.ts b/demos/vue-3/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}
diff --git a/demos/vue-3/src/styles/_vendors.scss b/demos/vue-3/src/styles/_vendors.scss
@@ -0,0 +1,7 @@
+@import 'tailwindcss/base';
+
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';
+
+@import '@/styles/themes/default.scss';
diff --git a/dev/vue/styles/base.scss → demos/vue-3/src/styles/base.scss b/dev/vue/styles/base.scss → demos/vue-3/src/styles/base.scss
@@ -1,7 +1,17 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;1,400&family=Roboto:wght@300;500;700&display=swap');
 
 .card {
-  @apply max-w-lg w-full rounded-lg shadow-lg;
+  @apply w-full rounded-lg shadow-lg border border-gray-100;
+}
+
+.text-bg {
+  background-image: linear-gradient(
+    to top,
+    #99ffd580 54%,
+    transparent 54%,
+    transparent 100%
+  );
+  width: fit-content;
 }
 
 .container {
@@ -16,8 +26,8 @@
   @apply font-serif font-bold text-gray-800 text-2xl;
 }
 
-pre {
-  @apply bg-gray-900 text-white text-xs p-4 rounded-md;
+.chip {
+  @apply text-xs rounded-full bg-gray-300 mr-4 py-1 px-2 font-thin;
 }
 
 .btn {

diff --git a/dev/vue/styles/main.scss → demos/vue-3/src/styles/main.scss b/dev/vue/styles/main.scss → demos/vue-3/src/styles/main.scss