@dimailn/vuetify 2.7.2-alpha32 → 2.7.2-alpha33

package/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap

@@ -45,287 +45,3 @@ exports[`VSelect.ts should add color to selected index 1`] = `
   </div>
 </div>
 `;
-
-exports[`VSelect.ts should open the select is multiple and key down is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-106"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-113-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-113-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select is multiple and key up is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-92"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-99-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-99-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select when enter is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-68"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-75-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-75-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select when space is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-80"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-87-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-87-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/VSelect/__tests__/__snapshots__/VSelectList.spec.ts.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VSelectList.ts should display falsy items 1`] = `
-<div role="listbox"
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
      tabindex="-1"
-     class="v-list v-select-list v-sheet theme--light theme--light"
 >
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-0"
+  <div aria-selected="false"
+       id="list-item-39-0"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -17,10 +17,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-1"
+  <div aria-selected="false"
+       id="list-item-39-1"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -29,10 +29,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-2"
+  <div aria-selected="false"
+       id="list-item-39-2"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -41,10 +41,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-3"
+  <div aria-selected="false"
+       id="list-item-39-3"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -53,10 +53,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-4"
+  <div aria-selected="false"
+       id="list-item-39-4"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -68,9 +68,9 @@ exports[`VSelectList.ts should display falsy items 1`] = `
 `;
 
 exports[`VSelectList.ts should display no-data-text when item slot is provided 1`] = `
-<div role="listbox"
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
      tabindex="-1"
-     class="v-list v-select-list v-sheet theme--light theme--light"
 >
   <div tabindex="-1"
        class="v-list-item theme--light"
@@ -85,21 +85,24 @@ exports[`VSelectList.ts should display no-data-text when item slot is provided 1
 `;
 
 exports[`VSelectList.ts should generate children 1`] = `
-<div role="listbox"
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
      tabindex="-1"
-     class="v-list v-select-list v-sheet theme--light theme--light"
 >
-  <div class="v-subheader theme--light">
+  <div header="true"
+       class="v-subheader theme--light"
+  >
     true
   </div>
-  <hr role="separator"
-      aria-orientation="horizontal"
+  <hr divider="true"
       class="v-divider theme--light"
+      role="separator"
+      aria-orientation="horizontal"
   >
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-14-2"
+  <div aria-selected="false"
+       id="list-item-16-2"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">

package/src/components/VSlideGroup/__tests__/VSlideGroup.spec.ts

@@ -9,21 +9,26 @@ import { preset } from '../../../presets/default'
 import { ExtractVue } from '../../../util/mixins'
 import {
   shallowMount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VSlideGroup.ts', () => {
   type Instance = ExtractVue<typeof VSlideGroup>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return shallowMount(VSlideGroup, {
-        methods: { setWidths: jest.fn() },
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            breakpoint: new Breakpoint(preset),
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              breakpoint: new Breakpoint(preset),
+            },
           },
         },
         ...options,
@@ -36,7 +41,7 @@ describe('VSlideGroup.ts', () => {
       data: () => ({
         isOverflowing: true,
       }),
-      propsData: {
+      props: {
         showArrows: true,
       },
     })
@@ -45,23 +50,19 @@ describe('VSlideGroup.ts', () => {
     expect(wrapper.vm.hasNext).toBe(false)
     expect(wrapper.vm.hasPrev).toBe(false)
 
-    wrapper.setData({
-      scrollOffset: 100,
-      widths: {
-        content: 1000,
-        wrapper: 500,
-      },
-    })
+    wrapper.vm.scrollOffset = 100
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
 
     expect(wrapper.vm.hasPrev).toBe(true)
 
-    wrapper.setData({
-      scrollOffset: -100,
-      widths: {
-        content: 1000,
-        wrapper: 500,
-      },
-    })
+    wrapper.vm.scrollOffset = -100
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
 
     expect(wrapper.vm.hasNext).toBe(true)
   })
@@ -175,10 +176,8 @@ describe('VSlideGroup.ts', () => {
 
     expect(wrapper.vm.scrollOffset).toBe(0)
 
-    wrapper.setData({
-      scrollOffset: 90,
-      isOverflowing: true,
-    })
+    wrapper.vm.scrollOffset = 90
+    wrapper.vm.isOverflowing = true
 
     wrapper.vm.onTouchEnd()
     expect(wrapper.vm.scrollOffset).toBe(0)
@@ -203,7 +202,7 @@ describe('VSlideGroup.ts', () => {
     wrapper.vm.overflowCheck(event, fn)
     expect(fn).not.toHaveBeenCalled()
 
-    wrapper.setData({ isOverflowing: true })
+    wrapper.vm.isOverflowing = true
     wrapper.vm.overflowCheck(event, fn)
     expect(fn).toHaveBeenCalled()
   })
@@ -213,24 +212,33 @@ describe('VSlideGroup.ts', () => {
     const scrollTo = jest.fn()
     const setWidths = jest.fn()
     const wrapper = mountFunction({
-      methods: { scrollTo, setWidths },
-      propsData: {
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            breakpoint: new Breakpoint(preset),
+          },
+        },
+      },
+      props: {
         showArrows: true,
       },
-      listeners: {
-        'click:prev': onClick,
-        'click:next': onClick,
+      attrs: {
+        'onClick:prev': onClick,
+        'onClick:next': onClick,
       },
     })
 
-    wrapper.setData({
-      isOverflowing: true,
-      scrollOffset: 200,
-      widths: {
-        content: 1000,
-        wrapper: 500,
-      },
-    })
+    // Mock the methods
+    wrapper.vm.scrollTo = scrollTo
+    wrapper.vm.setWidths = setWidths
+
+    wrapper.vm.isOverflowing = true
+    wrapper.vm.scrollOffset = 200
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
 
     await wrapper.vm.$nextTick()
 
@@ -250,10 +258,10 @@ describe('VSlideGroup.ts', () => {
         hasNext: () => true,
         hasPrev: () => true,
       },
-      propsData: {
+      props: {
         showArrows: true,
       },
-      scopedSlots: {
+      slots: {
         prev () {
           return h('div', {
             class: 'fizz',
@@ -267,39 +275,37 @@ describe('VSlideGroup.ts', () => {
       },
     })
 
-    wrapper.setData({ isOverflowing: true })
+    wrapper.vm.isOverflowing = true
 
     expect(wrapper.findAll('.fizz')).toHaveLength(2)
   })
 
   it('should match snapshot in rtl', async () => {
     const wrapper = mountFunction({
-      computed: {
-        hasAffixes: () => true,
-        hasNext: () => true,
-        hasPrev: () => true,
-      },
-      propsData: {
+      props: {
         showArrows: true,
       },
-      mocks: {
-        $vuetify: {
-          rtl: true,
-          breakpoint: { mobileBreakpoint: 1264 },
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true,
+            breakpoint: { mobileBreakpoint: 1264 },
+          },
         },
       },
     })
 
+    // Set up data to show affixes
+    wrapper.vm.isOverflowing = true
+    wrapper.vm.scrollOffset = 200
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
+
     const html1 = wrapper.html()
 
     expect(html1).toMatchSnapshot()
-
-    wrapper.vm.$vuetify.rtl = false
-
-    const html2 = wrapper.html()
-
-    expect(html1).not.toEqual(html2)
-    expect(html2).toMatchSnapshot()
   })
 
   // showArrows | isOverflowing | isMobile | hasAffixes
@@ -326,7 +332,7 @@ describe('VSlideGroup.ts', () => {
     const wrapper = mountFunction({
       data: () => ({ isOverflowing }),
       computed: { isMobile: () => isMobile },
-      propsData: { showArrows },
+      props: { showArrows },
     })
 
     expect(wrapper.vm.hasAffixes).toBe(hasAffixes)
@@ -356,9 +362,11 @@ describe('VSlideGroup.ts', () => {
       data: () => ({
         items: [{ $el: {} }],
       }),
-      methods: { calculateNewOffset },
     })
 
+    // Mock the method
+    wrapper.vm.calculateNewOffset = calculateNewOffset
+
     const setWrapperPosition = ({ left = 0, right = 0 } = {}) => {
       wrapper.vm.$refs.wrapper.getBoundingClientRect = () => ({ left, right } as DOMRectReadOnly)
     }

package/src/components/VSlideGroup/__tests__/__snapshots__/VSlideGroup.spec.ts.snap

@@ -1,46 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VSlideGroup.ts should match snapshot in rtl 1`] = `
-<div class="v-item-group theme--light v-slide-group v-slide-group--has-affixes">
-  <div class="v-slide-group__prev">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $next
-      </vuecomponent-stub>
+<div class="v-item-group theme--light v-slide-group">
+  <div class="v-slide-group__prev v-slide-group__prev--disabled">
+    <fade-transition-stub group="false"
+                          hideonleave="false"
+                          leaveabsolute="false"
+                          origin="top center 0"
+    >
     </fade-transition-stub>
   </div>
   <div class="v-slide-group__wrapper">
     <div class="v-slide-group__content">
     </div>
   </div>
-  <div class="v-slide-group__next">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $prev
-      </vuecomponent-stub>
-    </fade-transition-stub>
-  </div>
-</div>
-`;
-
-exports[`VSlideGroup.ts should match snapshot in rtl 2`] = `
-<div class="v-item-group theme--light v-slide-group v-slide-group--has-affixes">
-  <div class="v-slide-group__prev">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $prev
-      </vuecomponent-stub>
-    </fade-transition-stub>
-  </div>
-  <div class="v-slide-group__wrapper">
-    <div class="v-slide-group__content">
-    </div>
-  </div>
-  <div class="v-slide-group__next">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $next
-      </vuecomponent-stub>
+  <div class="v-slide-group__next v-slide-group__next--disabled">
+    <fade-transition-stub group="false"
+                          hideonleave="false"
+                          leaveabsolute="false"
+                          origin="top center 0"
+    >
     </fade-transition-stub>
   </div>
 </div>