Skip to content

Commit

Permalink
Port spec for Timepicker (buefy#72)
Browse files Browse the repository at this point in the history 
* test(lib): update Timepicker spec

- Updates the unit tests (spec) of `Timepicker` so that they can work
  with Vue 3 and `@vue/test-utils` V2:
    - Prevents the following components from becoming stubs because
      default slots in a stub are no longer rendered on
      `@vue/test-utils` V2:
        - `Dropdown`
        - `DropdownItem`
        - `Field`
        - `Select`

      The snapshot and test case "disables hour if no selectable minutes
      available" depend on slots in `Select`.
    - Updates expected values of "disabled" attribute, because Vue 3
      changed treatment of boolean attributes:
        - disabled: "disabled" → ""
        - not disabled: non "disabled" → undefined
    - Awaits `wrapper.setProps` 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.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot.

issue ntohq#1

* test(lib): update TimepickerMixin spec

- Updates the unit tests (spec) of `TimepickerMixin` so that they can
  work with `@vue/test-utils` V2:
    - Corrects a v-model binding:
        - event: `input` → `update:modelValue`
    - Moves the `mixins` option for `shallowMount` to the component's
      definition. Because it is more straightforward.
    - Replaces `attachToDocument` with `attachTo: document.body`,
      because `attachToDocument` might be deprecated in the future.
    - Replaces legacy async test cases with async functions.

issue ntohq#1
  • Loading branch information
@kikuomax
kikuomax committed Sep 15, 2023
1 parent 2b1d85c commit e70e8ed
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 286 deletions.
36 changes: 25 additions & 11 deletions src/components/timepicker/Timepicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,44 @@ let wrapper

describe('BTimepicker', () => {
beforeEach(() => {
wrapper = shallowMount(BTimepicker)
wrapper = shallowMount(BTimepicker, {
global: {
stubs: {
// these components must not be stubs
// to reproduce a snapshot closer to the legacy one
//
// "disables hour if no selectable minutes available"
// test case also depends on slots in <b-select>
'b-dropdown': false,
'b-dropdown-item': false,
'b-field': false,
'b-select': false
}
}
})
})

it('is called', () => {
expect(wrapper.name()).toBe('BTimepicker')
expect(wrapper.isVueInstance()).toBeTruthy()
expect(wrapper.vm).toBeTruthy()
expect(wrapper.vm.$options.name).toBe('BTimepicker')
})

it('render correctly', () => {
expect(wrapper.html()).toMatchSnapshot()
})

it('returns "1" for nativeStep is enableSeconds is true', () => {
it('returns "1" for nativeStep is enableSeconds is true', async () => {
expect(wrapper.vm.nativeStep).toBeUndefined()
wrapper.setProps({ enableSeconds: true })
await wrapper.setProps({ enableSeconds: true })
expect(wrapper.vm.nativeStep).toBe('1')
})

it('disables hour if no selectable minutes available', () => {
wrapper.setProps({
'minTime': new Date(2019, 8, 22, 11, 55),
'incrementMinutes': 10
it('disables hour if no selectable minutes available', async () => {
await wrapper.setProps({
minTime: new Date(2019, 8, 22, 11, 55),
incrementMinutes: 10
})
expect(wrapper.find('option[value="11"]').attributes()['disabled']).toBe('disabled')
expect(wrapper.find('option[value="12"]').attributes()['disabled']).not.toBe('disabled')
expect(wrapper.find('option[value="11"]').attributes().disabled).toBe('')
expect(wrapper.find('option[value="12"]').attributes().disabled).toBeUndefined()
})
})
271 changes: 35 additions & 236 deletions src/components/timepicker/__snapshots__/Timepicker.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,241 +2,40 @@

exports[`BTimepicker render correctly 1`] = `
<div class="timepicker control">
<b-dropdown-stub maxheight="200" triggers="click" mobilemodal="true" animation="fade" trapfocus="true" closeonclick="true" canclose="true" appendtobodycopyparent="true">
<b-dropdown-item-stub custom="true" focusable="true" ariarole="">
<b-field-stub grouped="true" position="is-centered" addons="true">
<b-select-stub usehtml5validation="true" statusicon="true" placeholder="00">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="0">
12
</option>
</b-select-stub> <span class="control is-colon">:</span>
<b-select-stub usehtml5validation="true" statusicon="true" placeholder="00">
<option value="0">
00
</option>
<option value="1">
01
</option>
<option value="2">
02
</option>
<option value="3">
03
</option>
<option value="4">
04
</option>
<option value="5">
05
</option>
<option value="6">
06
</option>
<option value="7">
07
</option>
<option value="8">
08
</option>
<option value="9">
09
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
<option value="32">
32
</option>
<option value="33">
33
</option>
<option value="34">
34
</option>
<option value="35">
35
</option>
<option value="36">
36
</option>
<option value="37">
37
</option>
<option value="38">
38
</option>
<option value="39">
39
</option>
<option value="40">
40
</option>
<option value="41">
41
</option>
<option value="42">
42
</option>
<option value="43">
43
</option>
<option value="44">
44
</option>
<option value="45">
45
</option>
<option value="46">
46
</option>
<option value="47">
47
</option>
<option value="48">
48
</option>
<option value="49">
49
</option>
<option value="50">
50
</option>
<option value="51">
51
</option>
<option value="52">
52
</option>
<option value="53">
53
</option>
<option value="54">
54
</option>
<option value="55">
55
</option>
<option value="56">
56
</option>
<option value="57">
57
</option>
<option value="58">
58
</option>
<option value="59">
59
</option>
</b-select-stub>
<!---->
<b-select-stub usehtml5validation="true" statusicon="true" value="AM">
<option value="AM">
AM
</option>
<option value="PM">
PM
</option>
</b-select-stub>
</b-field-stub>
<!---->
</b-dropdown-item-stub>
</b-dropdown-stub>
<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="dropdown-item" tabindex="0">
<div class="field">
<!--v-if-->
<div class="field-body">
<div class="field is-grouped is-grouped-centered">
<!--v-if-->
<div class="control"><span class="select is-empty"><select><option disabled="" hidden="">00</option><option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select></span>
<!--v-if-->
</div><span class="control is-colon">:</span>
<div class="control"><span class="select is-empty"><select><option disabled="" hidden="">00</option><option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option></select></span>
<!--v-if-->
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</div>
</transition-stub>
</div>
</div>
`;

0 comments on commit e70e8ed

Please sign in to comment.