Port spec for Clockpicker (buefy#74)

* test(lib): update Clockpicker spec

- Updates the unit tests (spec) of `Clockpicker` so that they can work
  with `@vue/test-utils` V2:
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state.
    - Replaces direct data modification with `wrapper.setData` and
      awaits it to make sure the subsequent tests verify the updated
      state.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Replaces `propsData` option for `shallowMount` with `props`
      because `propsData` might be deprecated in the future.
    - Refreshes the snapshot. Prevents `b-dropdown` from becoming a stub
      to reproduce a snapshot closer to the legacy one, because default
      slots in a stub are no longer rendered on `@vue/test-utils` V2. I
      did not find any problems in the updated snapshot.

issue ntohq#1

* test(lib): update ClockpickerFace spec

- Updates the unit tests of `ClockpickerFace` so that they can work with
  `@vue/test-utils` V2:
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state.
    - Replaces direct data modification with `wrapper.setData` and
      awaits it to make sure the subsequent tests verify the updated
      state.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Replaces `propsData` option for `shallowMount` with `props`
      because `propsData` might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot.

issue ntohq#1

src/components/clockpicker/Clockpicker.spec.js

@@ -6,89 +6,98 @@ let wrapper
 describe('BClockpicker', () => {
     beforeEach(() => {
         wrapper = shallowMount(BClockpicker, {
-            propsData: {
+            props: {
                 locale: 'en-US'
+            },
+            global: {
+                stubs: {
+                    'b-dropdown': false
+                }
             }
         })
     })
 
     it('is called', () => {
-        expect(wrapper.name()).toBe('BClockpicker')
-        expect(wrapper.isVueInstance()).toBeTruthy()
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BClockpicker')
     })
 
     it('render correctly', () => {
         expect(wrapper.html()).toMatchSnapshot()
     })
 
-    it('displays hours accordingly', () => {
+    it('displays hours accordingly', async () => {
         expect(wrapper.vm.hoursDisplay).toBe('--')
 
-        wrapper.setProps({hourFormat: '24'})
-        wrapper.vm.hoursSelected = 5
+        await wrapper.setProps({ hourFormat: '24' })
+        await wrapper.setData({ hoursSelected: 5 })
         expect(wrapper.vm.hoursDisplay).toBe('05')
-        wrapper.vm.hoursSelected = 10
+        await wrapper.setData({ hoursSelected: 10 })
         expect(wrapper.vm.hoursDisplay).toBe('10')
-        wrapper.vm.hoursSelected = 15
+        await wrapper.setData({ hoursSelected: 15 })
         expect(wrapper.vm.hoursDisplay).toBe('15')
 
-        wrapper.setProps({hourFormat: '12'})
-        wrapper.vm.meridienSelected = wrapper.vm.AM
-        wrapper.vm.hoursSelected = 5
+        await wrapper.setProps({ hourFormat: '12' })
+        await wrapper.setData({
+            meridienSelected: wrapper.vm.AM,
+            hoursSelected: 5
+        })
         expect(wrapper.vm.hoursDisplay).toBe(5)
-        wrapper.vm.hoursSelected = 10
+        await wrapper.setData({ hoursSelected: 10 })
         expect(wrapper.vm.hoursDisplay).toBe(10)
-        wrapper.vm.meridienSelected = wrapper.vm.PM
-        wrapper.vm.hoursSelected = 12
+        await wrapper.setData({
+            meridienSelected: wrapper.vm.PM,
+            hoursSelected: 12
+        })
         expect(wrapper.vm.hoursDisplay).toBe(12)
-        wrapper.vm.hoursSelected = 15
+        await wrapper.setData({ hoursSelected: 15 })
         expect(wrapper.vm.hoursDisplay).toBe(3)
     })
 
-    it('displays minutes accordingly', () => {
+    it('displays minutes accordingly', async () => {
         expect(wrapper.vm.minutesDisplay).toBe('--')
 
-        wrapper.vm.minutesSelected = 5
+        await wrapper.setData({ minutesSelected: 5 })
         expect(wrapper.vm.minutesDisplay).toBe('05')
 
-        wrapper.vm.minutesSelected = 10
+        await wrapper.setData({ minutesSelected: 10 })
         expect(wrapper.vm.minutesDisplay).toBe('10')
     })
 
-    it('return if face is disabled accordingly', () => {
-        wrapper.vm.isSelectingHour = true
+    it('return if face is disabled accordingly', async () => {
+        await wrapper.setData({ isSelectingHour: true })
         expect(wrapper.vm.faceDisabledValues).toBe(wrapper.vm.isHourDisabled)
 
-        wrapper.vm.isSelectingHour = false
+        await wrapper.setData({ isSelectingHour: false })
         expect(wrapper.vm.faceDisabledValues).toBe(wrapper.vm.isMinuteDisabled)
     })
 
-    it('react accordingly when a value is selected', () => {
+    it('react accordingly when a value is selected', async () => {
         const value = 5
 
-        wrapper.vm.isSelectingHour = true
+        await wrapper.setData({ isSelectingHour: true })
         wrapper.vm.onHoursChange = jest.fn()
         wrapper.vm.onClockInput(value)
         expect(wrapper.vm.hoursSelected).toBe(value)
         expect(wrapper.vm.onHoursChange).toHaveBeenCalledWith(value)
 
-        wrapper.vm.isSelectingHour = false
+        await wrapper.setData({ isSelectingHour: false })
         wrapper.vm.onMinutesChange = jest.fn()
         wrapper.vm.onClockInput(value)
         expect(wrapper.vm.minutesSelected).toBe(value)
         expect(wrapper.vm.onMinutesChange).toHaveBeenCalledWith(value)
     })
 
-    it('react accordingly when changing clock', () => {
-        wrapper.vm.isSelectingHour = false
+    it('react accordingly when changing clock', async () => {
+        await wrapper.setData({ isSelectingHour: false })
         wrapper.vm.onClockChange()
-        wrapper.vm.isSelectingHour = true
+        await wrapper.setData({ isSelectingHour: true })
         wrapper.vm.onClockChange()
         expect(wrapper.vm.isSelectingHour).toBeFalsy()
     })
-    it('react accordingly when changing meridien', () => {
+    it('react accordingly when changing meridien', async () => {
         wrapper.vm.onMeridienChange = jest.fn()
-        wrapper.vm.meridienSelected = wrapper.vm.PM
+        await wrapper.setData({ meridienSelected: wrapper.vm.PM })
         wrapper.vm.onMeridienClick(wrapper.vm.PM)
         wrapper.vm.onMeridienClick(wrapper.vm.AM)
         expect(wrapper.vm.meridienSelected).toBe(wrapper.vm.AM)

src/components/clockpicker/ClockpickerFace.spec.js

@@ -9,7 +9,7 @@ const pickerSize = 500
 describe('BClockpickerFace', () => {
     beforeEach(() => {
         wrapper = shallowMount(BClockpickerFace, {
-            propsData: {
+            props: {
                 pickerSize,
                 min: 0,
                 max: 23
@@ -18,19 +18,19 @@ describe('BClockpickerFace', () => {
     })
 
     it('is called', () => {
-        expect(wrapper.name()).toBe('BClockpickerFace')
-        expect(wrapper.isVueInstance()).toBeTruthy()
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BClockpickerFace')
     })
 
     it('render correctly', () => {
         expect(wrapper.html()).toMatchSnapshot()
     })
 
-    it('returns countPerRing correctly', () => {
+    it('returns countPerRing correctly', async () => {
         const count = wrapper.vm.max - wrapper.vm.min + 1
         expect(wrapper.vm.countPerRing).toEqual(count)
 
-        wrapper.setProps({double: true})
+        await wrapper.setProps({ double: true })
         expect(wrapper.vm.countPerRing).toEqual(count / 2)
     })
 
@@ -53,17 +53,17 @@ describe('BClockpickerFace', () => {
         expect(wrapper.vm.degrees).toEqual(wrapper.vm.degreesPerUnit * Math.PI / 180)
     })
 
-    it('set inputValue when value changed', () => {
-        wrapper.vm.inputValue = 2
-        wrapper.setProps({value: 2})
+    it('set inputValue when value changed', async () => {
+        await wrapper.setData({ inputValue: 2 })
+        await wrapper.setProps({ value: 2 })
         expect(wrapper.vm.inputValue).toEqual(2)
 
-        wrapper.setProps({value: 3})
+        await wrapper.setProps({ value: 3 })
         expect(wrapper.vm.inputValue).toEqual(3)
     })
 
-    it('calls disabledValues function when isDisabled is called', () => {
-        wrapper.setProps({disabledValues: jest.fn()})
+    it('calls disabledValues function when isDisabled is called', async () => {
+        await wrapper.setProps({ disabledValues: jest.fn() })
         wrapper.vm.isDisabled(2)
         expect(wrapper.vm.disabledValues).toHaveBeenCalled()
     })
@@ -84,11 +84,11 @@ describe('BClockpickerFace', () => {
         expect(wrapper.vm.isDragging).toBeFalsy()
     })
 
-    it('manage onDragMove', () => {
+    it('manage onDragMove', async () => {
         const e = {
             preventDefault: jest.fn()
         }
-        wrapper.setData({isDragging: true})
+        await wrapper.setData({ isDragging: true })
         wrapper.vm.update = jest.fn()
         wrapper.vm.onDragMove(e)
         expect(e.preventDefault).toHaveBeenCalled()

src/components/clockpicker/__snapshots__/Clockpicker.spec.js.snap

@@ -2,23 +2,35 @@
 
 exports[`BClockpicker render correctly 1`] = `
 <div class="b-clockpicker control is-primary">
-    <b-dropdown-stub maxheight="200" triggers="click" mobilemodal="true" animation="fade" trapfocus="true" closeonclick="true" canclose="true" appendtobodycopyparent="true">
-        <div custom="" class="card">
-            <!---->
+  <div class="dropdown dropdown-menu-animation is-mobile-modal">
+    <div tabindex="0" class="dropdown-trigger" aria-haspopup="true">
+      <b-input-stub type="text" lazy="false" passwordreveal="false" iconclickable="false" hascounter="true" customclass="" iconrightclickable="false" autocomplete="off" loading="false" readonly="" rounded="false" use-html5-validation="true"></b-input-stub>
+    </div>
+    <transition-stub name="fade" appear="false" persisted="false" css="true">
+      <div class="background" aria-hidden="true" style="display: none;"></div>
+    </transition-stub>
+    <transition-stub name="fade" appear="false" persisted="true" css="true">
+      <div class="dropdown-menu" aria-hidden="true" style="display: none;">
+        <div class="dropdown-content" aria-modal="true">
+          <div class="card" custom="">
+            <!--v-if-->
             <div class="card-content">
-                <div class="b-clockpicker-body" style="width: 266px; height: 266px;">
-                    <div class="b-clockpicker-time">
-                        <div class="b-clockpicker-btn active">Hours</div> <span class="b-clockpicker-btn">Min</span>
-                    </div>
-                    <div class="b-clockpicker-period">
-                        <div class="b-clockpicker-btn active">AM</div>
-                        <div class="b-clockpicker-btn">PM</div>
-                    </div>
-                    <b-clockpicker-face-stub pickersize="266" min="0" max="11" facenumbers="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" disabledvalues="function () { [native code] }"></b-clockpicker-face-stub>
+              <div class="b-clockpicker-body" style="width: 266px; height: 266px;">
+                <div class="b-clockpicker-time">
+                  <div class="b-clockpicker-btn active">Hours</div><span class="b-clockpicker-btn">Min</span>
                 </div>
+                <div class="b-clockpicker-period">
+                  <div class="b-clockpicker-btn active">AM</div>
+                  <div class="b-clockpicker-btn">PM</div>
+                </div>
+                <b-clockpicker-face-stub pickersize="266" min="0" max="11" facenumbers="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" disabledvalues="[Function]" double="false"></b-clockpicker-face-stub>
+              </div>
             </div>
-            <!---->
+            <!--v-if-->
+          </div>
         </div>
-    </b-dropdown-stub>
+      </div>
+    </transition-stub>
+  </div>
 </div>
 `;

src/components/clockpicker/__snapshots__/ClockpickerFace.spec.js.snap

@@ -2,8 +2,8 @@
 
 exports[`BClockpickerFace render correctly 1`] = `
 <div class="b-clockpicker-face">
-    <div class="b-clockpicker-face-outer-ring">
-        <div class="b-clockpicker-face-hand" style="transform: rotate(720deg) scaleY(1); transition: .3s cubic-bezier(.25,.8,.50,1);"></div>
-    </div>
+  <div class="b-clockpicker-face-outer-ring">
+    <div class="b-clockpicker-face-hand" style="transform: rotate(720deg) scaleY(1); transition: .3s cubic-bezier(.25,.8,.50,1);"></div>
+  </div>
 </div>
 `;