tests(e2e): make the tests a little more literal (#74)

here I fix a few mistakes that were made in the writing of e2e tests
this will help us monitor the refactoring of the library

some of the components were not valid vue components
some of the texts were not understandable english

* run prettier on unit tests files

* fix failing snapshot

Author: elevatebart

tests/components/button-functinoal/MyButton.vue

@@ -1,33 +1,9 @@
 <template functional>
-  <button :style="`width: ${size}px;`" class="buttonComponent">
-    <!-- @slot Use this slot default -->
-    <slot/>
-  </button>
+  <div>
+    <button :style="`width: ${props.size}px;`" class="buttonComponent">
+      <!-- @slot Use this slot default -->
+      <slot/>
+    </button>
+    {{props.text}}
+  </div>
 </template>
-
-<script>
-export default {
-  functional: true,
-  props: {
-    /**
-     * The size of the button
-     */
-    size: {
-      default: 'normal',
-    },
-  },
-}
-</script>
-
-<style scoped>
-.button {
-  padding: 0.5em 1.5em;
-  color: #666;
-  background-color: #fff;
-  border: 1px solid blue;
-  border-radius: 0.3em;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-}
-</style>

tests/components/button-functinoal/__snapshots__/button-functional.test.js.snap

@@ -1,29 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tests button should match the snapshot 1`] = `
+exports[`tests button functional should match the snapshot 1`] = `
 Object {
   "comment": "",
   "description": "",
   "displayName": "MyButton",
   "events": Object {},
   "methods": Array [],
-  "props": Object {
-    "size": Object {
-      "comment": "/**
-            * The size of the button
-            */",
-      "defaultValue": Object {
-        "func": false,
-        "value": "\\"normal\\"",
-      },
-      "description": "The size of the button",
-      "required": "",
-      "tags": Object {},
-      "type": Object {
-        "name": "string",
-      },
-    },
-  },
+  "props": undefined,
   "slots": Object {
     "default": Object {
       "description": "Use this slot default",

tests/components/button-functinoal/button-functional.test.js

@@ -1,31 +1,27 @@
-const path = require('path')
+import * as path from 'path'
 
-const api = require('../../../src/main')
+import { parse } from '../../../src/main'
 const button = path.join(__dirname, './MyButton.vue')
 let docButton
 
-describe('tests button', () => {
-  beforeEach(function(done) {
-    docButton = api.parse(button)
+describe('tests button functional', () => {
+  beforeEach(done => {
+    docButton = parse(button)
     done()
   })
 
   it('should have a slot.', () => {
-    expect(Object.keys(docButton['slots']).length).toEqual(1)
+    expect(Object.keys(docButton.slots).length).toEqual(1)
   })
 
   it('should have a default slot.', () => {
-    expect(typeof docButton['slots']['default'] !== 'undefined').toBe(true)
+    expect(docButton.slots.default).not.toBeUndefined()
   })
 
   it('the default slot should have "Use this slot default" as description', () => {
-    expect(docButton['slots']['default']['description']).toEqual('Use this slot default')
+    expect(docButton.slots.default.description).toEqual('Use this slot default')
   })
 
-  it('should the component has size prop description equal The size of the button', () => {
-    expect(docButton['props']['size']['description']).toEqual('The size of the button')
-  })
-  
   it('should match the snapshot', () => {
     expect(docButton).toMatchSnapshot()
   })

tests/components/button-noscript/__snapshots__/button-noscript.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tests button should match the snapshot 1`] = `
+exports[`tests button with no script block should match the snapshot 1`] = `
 Object {
   "comment": "",
   "description": "",

tests/components/button-noscript/button-noscript.test.js

@@ -1,25 +1,25 @@
-const path = require('path')
+import * as path from 'path'
 
-const api = require('../../../src/main')
+import { parse } from '../../../src/main'
 const button = path.join(__dirname, './MyButton.vue')
 let docButton
 
-describe('tests button', () => {
-  beforeEach(function(done) {
-    docButton = api.parse(button)
+describe('tests button with no script block', () => {
+  beforeEach(done => {
+    docButton = parse(button)
     done()
   })
 
   it('should have a slot.', () => {
-    expect(Object.keys(docButton['slots']).length).toEqual(1)
+    expect(Object.keys(docButton.slots).length).toEqual(1)
   })
 
   it('should have a default slot.', () => {
-    expect(typeof docButton['slots']['default'] !== 'undefined').toBe(true)
+    expect(typeof docButton.slots.default !== 'undefined').toBe(true)
   })
 
   it('the default slot should have "Use this slot default" as description', () => {
-    expect(docButton['slots']['default']['description']).toEqual('Use this slot default')
+    expect(docButton.slots.default.description).toEqual('Use this slot default')
   })
 
   it('should match the snapshot', () => {

tests/components/button-typescript/Button.vue

@@ -1,24 +1,12 @@
 <template>
-	<button class="buttonComponent" @click.prevent="onClick">
-		<!-- @slot Use this slot default -->
-		<slot></slot>
-	</button>
+  <button class="buttonComponent" @click.prevent="onClick">
+    <!-- @slot Use this slot default -->
+    <slot></slot>
+  </button>
 </template>
 
 <script lang='ts'>
-import {
-  Component,
-  Emit,
-  Inject,
-  Model,
-  Prop,
-  Provide,
-  Vue,
-  Watch,
-} from 'vue-property-decorator'
-import anotherMixin from '../../mixins/anotherMixin'
-import genericMixin from './genericMixin'
-import colorMixin from './colorMixin'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 
 /**
  * This is an example of creating a reusable button component and using it with external data.

tests/components/button-typescript/button-ts.test.js

@@ -1,16 +1,16 @@
-const path = require('path')
+import * as path from 'path'
 
-const api = require('../../../src/main')
+import { parse } from '../../../src/main'
 const button = path.join(__dirname, './Button.vue')
 
 let docButton
 xdescribe('tests button', () => {
-    beforeAll(function(done) {
-      docButton = api.parse(button)
-      done()
-    })
-  
-    it('should return an object', () => {
-      expect(typeof docButton).toEqual('object')
-    })
-});
+  beforeAll(done => {
+    docButton = parse(button)
+    done()
+  })
+
+  it('should return an object', () => {
+    expect(typeof docButton).toEqual('object')
+  })
+})

tests/components/button/button.test.js

@@ -1,12 +1,12 @@
-const path = require('path')
+import * as path from 'path'
 
-const api = require('../../../src/main')
+import { parse } from '../../../src/main'
 const button = path.join(__dirname, './Button.vue')
 let docButton
 
 describe('tests button', () => {
-  beforeAll(function(done) {
-    docButton = api.parse(button)
+  beforeAll(done => {
+    docButton = parse(button)
     done()
   })
 

tests/components/extended/Base.test.js

@@ -1,12 +1,12 @@
-const path = require('path')
+import * as path from 'path'
 
-const api = require('../../../src/main')
+import { parse } from '../../../src/main'
 const Base = path.join(__dirname, './Base.vue')
 let docBase
 
 describe('tests Base', () => {
-  beforeAll(function(done) {
-    docBase = api.parse(Base)
+  beforeAll(done => {
+    docBase = parse(Base)
     done()
   })
 
@@ -23,10 +23,10 @@ describe('tests Base', () => {
   })
 
   it('should has props', () => {
-    expect(typeof docBase['props'] !== 'undefined').toBe(true)
+    expect(typeof docBase.props !== 'undefined').toBe(true)
   })
 
   it('should the component has one prop', () => {
-    expect(Object.keys(docBase['props']).length).toEqual(1)
+    expect(Object.keys(docBase.props || {}).length).toEqual(1)
   })
 })

tests/components/extended/InputText.test.js

@@ -1,12 +1,11 @@
-const path = require('path')
-
-const api = require('../../../src/main')
+import * as path from 'path'
+import { parse } from '../../../src/main'
 const InputText = path.join(__dirname, './InputText.vue')
 let docInputText
 
 describe('tests InputText', () => {
-  beforeAll(function(done) {
-    docInputText = api.parse(InputText)
+  beforeAll(done => {
+    docInputText = parse(InputText)
     done()
   })
 
@@ -23,11 +22,11 @@ describe('tests InputText', () => {
   })
 
   it('should has props', () => {
-    expect(docInputText['props']).not.toBeUndefined()
+    expect(docInputText.props).not.toBeUndefined()
   })
 
   it('should the component has two props', () => {
-    expect(Object.keys(docInputText['props']).length).toEqual(2)
+    expect(Object.keys(docInputText.props || {}).length).toEqual(2)
   })
 
   it('should match the snapshot', () => {