Change test describes

Author: Daniel Weber

src/Components.vue

@@ -26,12 +26,12 @@
             <div class="item"><AsyncMethods :name="'Lebowski'" /></div>
           </div>
           <div class="row">
-            <div class="item"><h6>Dynamical generated tests</h6></div>
-            <div class="item"><p>Toggle should be true</p><Toggle :dudeName="'Lebowski'" :isDude="true" /></div>
+            <div class="item"><h6>TestScenarios</h6></div>
+            <div class="item"><p>Toggle should be true</p><TestScenarios :dudeName="'Lebowski'" :isDude="true" /></div>
           </div>
           <div class="row">
-            <div class="item"><h6>Dynamical generated tests</h6></div>
-            <div class="item"><p>Toggle should be false</p><Toggle :dudeName="''" :isDude="true" /></div>
+            <div class="item"><h6>TestScenarios</h6></div>
+            <div class="item"><p>Toggle should be false</p><TestScenarios :dudeName="''" :isDude="true" /></div>
           </div>
           <div class="row">
             <div class="item"><h6>Route params tests</h6></div>
@@ -52,17 +52,17 @@ import Props from './components/props/';
 import Computed from './components/computed/';
 import Methods from './components/methods/';
 import AsyncMethods from './components/asyncMethods/';
-import Toggle from './components/toggle/';
+import TestScenarios from './components/testScenarios/';
 
 export default {
-  name: 'app',
+  name: 'Components',
   components: {
     Elements,
     Props,
     Computed,
     Methods,
     AsyncMethods,
-    Toggle,
+    TestScenarios,
   },
 };
 </script>

src/components/asyncMethods/asyncMethods.spec.js

@@ -3,19 +3,23 @@ import AsyncMethods from './index';
 
 const Constructor = Vue.extend(AsyncMethods);
 
-describe('Test async methods', () => {
-  it('check getFeedbackData', () => {
-    const vm = new Constructor({
-      propsData: {
-        isDude: true,
-        count: 1,
-        name: 'Lebowski',
-      },
-    }).$mount();
-    // TODO
-    // sinon.stub(vm.methods, 'getFeedbackData').callsFake(() => {
-    //   'nix gefunden';
-    // });
-    expect(vm.$el.querySelector('button').textContent).to.equal('Get async data');
+describe('ASYNC METHODS', () => {
+  describe('#getFeedbackData', () => {
+    it('return "Get async data"', () => {
+      const vm = new Constructor({
+        propsData: {
+          isDude: true,
+          count: 1,
+          name: 'Lebowski',
+        },
+      }).$mount();
+      // TODO
+      // sinon.stub(vm.methods, 'getFeedbackData').callsFake(() => {
+      //   'nix gefunden';
+      // });
+      expect(vm.$el.querySelector('button').textContent).to.equal(
+        'Get async data',
+      );
+    });
   });
 });

src/components/computed/computed.spec.js

@@ -30,38 +30,40 @@ import Computed from './index';
 
 const Constructor = Vue.extend(Computed);
 
-describe('Test computed', () => {
-  it('there is just one Dude', () => {
-    const vm = new Constructor({
-      propsData: {
-        isDude: true,
-        count: 1,
-        name: 'Lebowski',
-      },
-    }).$mount();
+describe('COMPUTED', () => {
+  describe('#isJustOneDude', () => {
+    it('there is just one Dude', () => {
+      const vm = new Constructor({
+        propsData: {
+          isDude: true,
+          count: 1,
+          name: 'Lebowski',
+        },
+      }).$mount();
 
-    expect(vm.isJustOneDude).to.equal(true);
-  });
-  it('there are more than one Dude', () => {
-    const vm = new Constructor({
-      propsData: {
-        isDude: true,
-        count: 2,
-        name: 'Lebowski',
-      },
-    }).$mount();
+      expect(vm.isJustOneDude).to.equal(true);
+    });
+    it('there are more than one Dude', () => {
+      const vm = new Constructor({
+        propsData: {
+          isDude: true,
+          count: 2,
+          name: 'Lebowski',
+        },
+      }).$mount();
 
-    expect(vm.isJustOneDude).to.equal(false);
-  });
-  it('there are no negative Dudes', () => {
-    const vm = new Constructor({
-      propsData: {
-        isDude: true,
-        count: -1,
-        name: 'Lebowski',
-      },
-    }).$mount();
+      expect(vm.isJustOneDude).to.equal(false);
+    });
+    it('there are no negative Dudes', () => {
+      const vm = new Constructor({
+        propsData: {
+          isDude: true,
+          count: -1,
+          name: 'Lebowski',
+        },
+      }).$mount();
 
-    expect(vm.isJustOneDude).to.equal(false);
+      expect(vm.isJustOneDude).to.equal(false);
+    });
   });
 });

src/components/methods/methods.spec.js

@@ -3,8 +3,9 @@ import Methods from './index';
 
 const Constructor = Vue.extend(Methods);
 
-describe('Test methods', () => {
-  it('Dude always speaks a quote', () => {
+describe('METHODS', () => {
+describe('#getRandomQuote', () => {
+  it('is not empty', () => {
     const vm = new Constructor({
       propsData: {
         isDude: true,
@@ -16,3 +17,4 @@ describe('Test methods', () => {
     expect(vm.getRandomQuote).to.not.equal('');
   });
 });
+});

src/components/props/props.spec.js

@@ -3,7 +3,7 @@ import Props from './index';
 
 const Constructor = Vue.extend(Props);
 
-describe('Test props', () => {
+describe('PROPS', () => {
   it('is uniqe, true and called Lebowski', () => {
     const vm = new Constructor({
       propsData: {
@@ -13,19 +13,6 @@ describe('Test props', () => {
       },
     }).$mount();
 
-    expect(vm.$el.querySelector('.isDude')).to.not.equal(null);
-    expect(vm.$el.querySelector('p span').textContent).to.equal('Lebowski');
-    expect(vm.$el.querySelector('p em').textContent).to.equal('1');
-  });
-  it('is props correct', () => {
-    const vm = new Constructor({
-      propsData: {
-        isDude: true,
-        count: 1,
-        name: 'Lebowski',
-      },
-    }).$mount();
-
     expect(vm.$el.querySelector('.isDude')).to.not.equal(null);
     expect(vm.$el.querySelector('p span').textContent).to.equal('Lebowski');
     expect(vm.$el.querySelector('p em').textContent).to.equal('1');

src/components/routeParams/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>Hello {{name}} :)</p>
+    <p>Hello {{nameFromParams}} :)</p>
     <p><router-link to="/">back</router-link></p>
   </div>
 </template>
@@ -9,8 +9,8 @@
 export default {
   name: 'routeParams',
   computed: {
-    name() {
-      return this.$route.params.id;
+    nameFromParams() {
+      return (typeof this.$route.params.id !== 'undefined') ? this.$route.params.id : '';
     },
   },
 };

src/components/routeParams/routeParams.spec.js

@@ -1,13 +1,14 @@
 import Vue from 'vue';
 import RouteParams from './index';
 
-const Constructor = Vue.extend(RouteParams);
-
-describe('Test route params', () => {
-  it('should be Dude', () => {
-    const vm = new Constructor().$mount();
-    vm.$route = { params: { id: 'Dude' } };
-
-    expect(vm.name).to.equal('Dude');
+describe('PARAMS', () => {
+  describe('#nameFromParams', () => {
+    it('should be Dude', () => {
+      const Constructor = Vue.extend(RouteParams);
+      const vm = new Constructor();
+      vm.$route = { params: { id: 'Dude' } };
+      vm.$mount();
+      expect(vm.nameFromParams).to.equal('Dude');
+    });
   });
 });

src/components/toggle/index.vue renamed to src/components/testScenarios/index.vue

@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import Toggle from './index';
+
+const Constructor = Vue.extend(Toggle);
+
+describe('TEST WITH SCENARIOS', () => {
+  describe('#isCheckedFromProps', () => {
+    const testScenarios = [
+      { propsData: { isDude: true, dudeName: 'Lebowski' }, expected: true },
+      { propsData: { isDude: false, dudeName: 'Lebowski' }, expected: false },
+      { propsData: { isDude: true, dudeName: '' }, expected: false },
+      { propsData: { isDude: true, dudeName: null }, expected: false },
+      { propsData: { isDude: true, dudeName: [] }, expected: false },
+      { propsData: { isDude: true, dudeName: {} }, expected: false },
+      { propsData: { isDude: true, dudeName: undefined }, expected: false },
+      { propsData: { isDude: true }, expected: false },
+    ];
+
+    testScenarios.map((scenario, i) => {
+      it('(' + i + ') should be ' + scenario.expected, () => {
+        const vm = new Constructor({
+          propsData: scenario.propsData,
+        }).$mount();
+
+        expect(vm.isCheckedFromProps).to.equal(scenario.expected);
+      });
+    });
+  });
+});