* temperature.spec.js: Test for Watched property for temperature does not work the way Vue states it should. Has an open bug: vuejs/vue-test-utils#1419 * Commented out test. Skipping does not work well with output

Author: hcunninghampk

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "jest": "jest"
+    "test": "jest"
   },
   "repository": "https://github.com/codebryo/vue-school-test-utils-base.git",
   "author": "Roman Kuba <[email protected]>",

specs/temperature.spec.js

@@ -1,7 +1,8 @@
 import Temperature from '@/temperature'
-import { mount } from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
+
+describe('Computed and Watched Properties Tests', () => {
 
-describe('Computed Properties Tests', () => {
     test('celsius property', () => {
         //const wrapper = mount(Temperature);
         const {vm} = mount(Temperature);
@@ -25,5 +26,32 @@ describe('Computed Properties Tests', () => {
 
         vm.degrees = 16;
         expect(vm.fahrenheit).toBe(60.8);
-    })
+    });
+
+    //can suffix test with .skip or prefix with x to skip, but then lists output as pending test
+    /*test('temperature watcher method', () => {
+        //set the default data to be 40 degrees celsius
+        const wrapper = mount(Temperature, {propsData: {temp: 40/!*, watch: '40c'*!/}});
+        const {vm} = wrapper;
+        expect(vm.degrees).toBe(40);
+        expect(vm.type).toBe('celsius');
+
+        //setProps() allows you to set the props while the comp is mounted already
+        //Sets Wrapper vm props and forces update.
+        wrapper.setProps({temp: '50f'});//This setProps() doesn't work.  Per Vue docs: "setProps could be called only for
+        // top-level component, mounted by mount or shallowMount".  To change the properties in the Vue instance, you
+        // need to use propsData: "pass a propsData object, which will initialize the Vue instance with passed values."
+        //wrapper.setProps({watch: '50f'});//This doesn't work either.
+
+        /!*wrapper.setProps({
+            watch: {
+                temp: {handler: '50f'}
+            }
+        });*!/  //this doesn't work either
+
+        //wrapper.setData({type: 'fahrenheit', degrees: 50}); //this works, but does not test the watched temperature property
+        console.log("Current degrees: " + vm.degrees + " " + vm.type);
+        expect(vm.degrees).toBe(50);
+        expect(vm.type).toBe('fahrenheit');
+    });*/
 });

specs/test.spec.js

@@ -4,57 +4,58 @@ import ListComponent from '@/list.vue'
 
 /*When testing vue.js components, need a way to mount and render the component; use the mount function.  Mount
 creates a Wrapper containing the mounted and rendered Vue component. */
-it('should mount a vue TestComponent', () => {
-    const wrapper = mount(TestComponent);
-    console.log("TestComponent wrapper: " + wrapper);
-    expect(wrapper.text()).toContain("Hello Test");
-
-    //Wrapper HTML function returns the entire component DOM node as a string. toMatchSnapshot() creates a snapshot
-    // of the component in the __snapshots__ dir.  To learn more about snapshots, check out Snapshot Testing with Jest
-    // at Vue School, but this class is not free.
-    //debugger;
-    expect(wrapper.html()).toMatchSnapshot();
-    console.log("TestComponent wrapper html(): " + wrapper.html());
-    expect(wrapper.html()).toContain("<h1>Hello Test</h1>");
-});
-
-it('should override the default value to say Hello to in the TestComponent', () => {
-    const wrapper = mount(TestComponent,
-        {
-            propsData: {value: 'VueSchool'}
-        });
-    expect(wrapper.text()).toContain("Hello VueSchool");
-
-    expect(wrapper.html()).toMatchSnapshot();
-    console.log("Overriden TestComponent wrapper html(): " + wrapper.html());
-    expect(wrapper.html()).toContain("<h1>Hello VueSchool</h1>");
-});
-
-it('should shallowMount the ListComponent', () => {
-    // shallowMount() and mount() are almost the same except child components of the one comp u shallowMounted get
-    // stubbed automatically.  Use mount() as much as pos as the default approach as it helps to find issues in child
-    // comps early.
-    console.log("Log of mount(ListComponent): " + mount(ListComponent).html());
-    const wrapper = shallowMount(ListComponent);
-    console.log("Log of shallowMount(ListComponent): " + wrapper.html());
-    //shallowMount() should stub out the list items in the list
-    expect(wrapper.html()).toContain('<listitem-stub movie="Iron Man"></listitem-stub>');
-});
+describe('TestComponent and ListComponent Tests', () => {
+
+    it('should mount a vue TestComponent', () => {
+        const wrapper = mount(TestComponent);
+        console.log("TestComponent wrapper: " + wrapper);
+        expect(wrapper.text()).toContain("Hello Test");
+
+        //Wrapper HTML function returns the entire component DOM node as a string. toMatchSnapshot() creates a snapshot
+        // of the component in the __snapshots__ dir.  To learn more about snapshots, check out Snapshot Testing with Jest
+        // at Vue School, but this class is not free.
+        //debugger;
+        expect(wrapper.html()).toMatchSnapshot();
+        console.log("TestComponent wrapper html(): " + wrapper.html());
+        expect(wrapper.html()).toContain("<h1>Hello Test</h1>");
+    });
+
+    it('should override the default value to say Hello to in the TestComponent', () => {
+        const wrapper = mount(TestComponent,
+            {propsData: {value: 'VueSchool'}});
+        expect(wrapper.text()).toContain("Hello VueSchool");
+
+        expect(wrapper.html()).toMatchSnapshot();
+        console.log("Overriden TestComponent wrapper html(): " + wrapper.html());
+        expect(wrapper.html()).toContain("<h1>Hello VueSchool</h1>");
+    });
+
+    it('should shallowMount the ListComponent', () => {
+        // shallowMount() and mount() are almost the same except child components of the one comp u shallowMounted get
+        // stubbed automatically.  Use mount() as much as pos as the default approach as it helps to find issues in child
+        // comps early.
+        console.log("Log of mount(ListComponent): " + mount(ListComponent).html());
+        const wrapper = shallowMount(ListComponent);
+        console.log("Log of shallowMount(ListComponent): " + wrapper.html());
+        //shallowMount() should stub out the list items in the list
+        expect(wrapper.html()).toContain('<listitem-stub movie="Iron Man"></listitem-stub>');
+    });
 
 //Wrapper properties --> most important one is VM.  It gives access to the Vue instance, the same instance you could
 // interact w/ from the browser console.
-it('should add a list item to the ListComponent', () => {
-    const wrapper = mount(ListComponent);
-    //Need to get the current set of data in list.vue, which we can get from the wrapper's VM property:
-    //let movies = wrapper.vm.marvelMovies;
-
-    //Now, use setData() to update the actual data set.
-    wrapper.setData({marvelMovies: [...wrapper.vm.marvelMovies, 'Endgame']});
-    //this above does update the data set/list, but not in the snapshot file (test.spec.js.snap)
-    //can see the update in the following log
-    console.log("marvelMovies: " + wrapper.vm.marvelMovies);
-
-    expect(wrapper.vm.marvelMovies).toContain('Endgame');
-    expect(wrapper.html()).toMatchSnapshot();
+    it('should add a list item to the ListComponent', () => {
+        const wrapper = mount(ListComponent);
+        //Need to get the current set of data in list.vue, which we can get from the wrapper's VM property:
+        //let movies = wrapper.vm.marvelMovies;
+
+        //Now, use setData() to update the actual data set.
+        wrapper.setData({marvelMovies: [...wrapper.vm.marvelMovies, 'Endgame']});
+        //this above does update the data set/list, but not in the snapshot file (test.spec.js.snap)
+        //can see the update in the following log
+        console.log("marvelMovies: " + wrapper.vm.marvelMovies);
+
+        expect(wrapper.vm.marvelMovies).toContain('Endgame');
+        expect(wrapper.html()).toMatchSnapshot();
+    });
 });