@dimailn/vuetify 2.7.2-alpha29 → 2.7.2-alpha31

package/src/components/VTreeview/__tests__/__snapshots__/VTreeviewNode.spec.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VTreeViewNode.ts should be able to have active children with empty array 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node v-treeview-node--leaf v-treeview-node--click"
+<div class="v-treeview-node v-treeview-node--leaf v-treeview-node--click"
+     aria-expanded="false"
 >
   <div class="v-treeview-node__root">
     <div class="v-treeview-node__level">
@@ -17,8 +17,8 @@ exports[`VTreeViewNode.ts should be able to have active children with empty arra
 `;
 
 exports[`VTreeViewNode.ts should generate a transition element 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node v-treeview-node--leaf"
+<div class="v-treeview-node v-treeview-node--leaf"
+     aria-expanded="false"
 >
   <div class="v-treeview-node__root">
     <div class="v-treeview-node__level">
@@ -32,8 +32,8 @@ exports[`VTreeViewNode.ts should generate a transition element 1`] = `
 `;
 
 exports[`VTreeViewNode.ts should not be able to have active children with empty array when disabled 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node v-treeview-node--leaf v-treeview-node--click v-treeview-node--disabled"
+<div class="v-treeview-node v-treeview-node--leaf v-treeview-node--click v-treeview-node--disabled"
+     aria-expanded="false"
 >
   <div class="v-treeview-node__root">
     <div class="v-treeview-node__level">
@@ -48,14 +48,14 @@ exports[`VTreeViewNode.ts should not be able to have active children with empty
 `;
 
 exports[`VTreeViewNode.ts should not be able to have active children with empty array when loadChildren is specified 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node v-treeview-node--click"
+<div class="v-treeview-node v-treeview-node--click"
+     aria-expanded="false"
 >
   <div class="v-treeview-node__root">
-    <button type="button"
-            class="v-icon notranslate v-treeview-node__toggle v-icon--link material-icons theme--light"
+    <button aria-hidden="false"
+            class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+            type="button"
     >
-      arrow_drop_down
     </button>
     <div class="v-treeview-node__content">
       <div class="v-treeview-node__label">
@@ -67,28 +67,16 @@ exports[`VTreeViewNode.ts should not be able to have active children with empty
 `;
 
 exports[`VTreeViewNode.ts should render disabled item 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node v-treeview-node--disabled"
+<div class="v-treeview-node v-treeview-node--leaf"
+     aria-expanded="false"
+     slots="[object Object]"
+     props="[object Object]"
 >
   <div class="v-treeview-node__root">
-    <button type="button"
-            class="v-icon notranslate v-treeview-node__toggle v-icon--link material-icons theme--light"
-    >
-      arrow_drop_down
-    </button>
+    <div class="v-treeview-node__level">
+    </div>
     <div class="v-treeview-node__content">
-      <div class="v-treeview-node__prepend">
-        <div>
-          foobar
-        </div>
-      </div>
       <div class="v-treeview-node__label">
-        Root
-      </div>
-      <div class="v-treeview-node__append">
-        <div>
-          foobar
-        </div>
       </div>
     </div>
   </div>
@@ -96,20 +84,16 @@ exports[`VTreeViewNode.ts should render disabled item 1`] = `
 `;
 
 exports[`VTreeViewNode.ts should use label slot 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node"
+<div class="v-treeview-node v-treeview-node--leaf"
+     aria-expanded="false"
+     props="[object Object]"
+     slots="[object Object]"
 >
   <div class="v-treeview-node__root">
-    <button type="button"
-            class="v-icon notranslate v-treeview-node__toggle v-icon--link material-icons theme--light"
-    >
-      arrow_drop_down
-    </button>
+    <div class="v-treeview-node__level">
+    </div>
     <div class="v-treeview-node__content">
       <div class="v-treeview-node__label">
-        <div>
-          ROOT
-        </div>
       </div>
     </div>
   </div>
@@ -117,25 +101,16 @@ exports[`VTreeViewNode.ts should use label slot 1`] = `
 `;
 
 exports[`VTreeViewNode.ts should use scoped slots 1`] = `
-<div aria-expanded="false"
-     class="v-treeview-node v-treeview-node--leaf"
+<div class="v-treeview-node v-treeview-node--leaf"
+     aria-expanded="false"
+     slots="[object Object]"
 >
   <div class="v-treeview-node__root">
     <div class="v-treeview-node__level">
     </div>
     <div class="v-treeview-node__content">
-      <div class="v-treeview-node__prepend">
-        <div>
-          foobar
-        </div>
-      </div>
       <div class="v-treeview-node__label">
       </div>
-      <div class="v-treeview-node__append">
-        <div>
-          foobar
-        </div>
-      </div>
     </div>
   </div>
 </div>

package/src/components/VVirtualScroll/VVirtualScroll.ts

@@ -20,7 +20,6 @@ import { VNode, defineComponent } from 'vue'
 export default defineComponent({
   name: 'v-virtual-scroll',
 
-
   extends: Measurable,
 
   props: {

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

@@ -5,13 +5,14 @@ import VVirtualScroll from '../VVirtualScroll'
 import {
   mount,
   VueWrapper,
+  MountingOptions,
   enableAutoUnmount,
 } from '@vue/test-utils'
-import { h } from 'vue'
+import { h, nextTick } from 'vue'
 
 describe('VVirtualScroll.ts', () => {
   type Instance = InstanceType<typeof VVirtualScroll>
-  let mountFunction: (options?: object) => VueWrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   let propsData: Object
   let mock: jest.SpyInstance
   const elementHeight = 100
@@ -46,7 +47,7 @@ describe('VVirtualScroll.ts', () => {
       props: propsData,
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -68,7 +69,7 @@ describe('VVirtualScroll.ts', () => {
       },
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -83,6 +84,7 @@ describe('VVirtualScroll.ts', () => {
 
     wrapper.vm.scrollTop = 500
     await wrapper.trigger('scroll')
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -92,11 +94,6 @@ describe('VVirtualScroll.ts', () => {
     const spy = jest.spyOn(helpers, 'getSlot')
     const wrapper = mountFunction({
       props: propsData,
-      global: {
-        mocks: {
-          firstToRender: 2,
-        },
-      },
     })
 
     wrapper.vm.first = 2

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

@@ -398,4 +398,82 @@ describe('VWindow.ts', () => {
     vm.next()
     expect(vm.internalIndex).toBe(2)
   })
+
+  it('should render with correct structure and classes', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [h(VWindowItem), h(VWindowItem)],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with arrows when showArrows is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        showArrows: true,
+      },
+      slots: {
+        default: () => [h(VWindowItem), h(VWindowItem)],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with custom height style', async () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [h(VWindowItem), h(VWindowItem)],
+      },
+    })
+
+    const vm = wrapper.vm as any
+    vm.internalHeight = '300px'
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with transition height style', async () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [h(VWindowItem), h(VWindowItem)],
+      },
+    })
+
+    const vm = wrapper.vm as any
+    vm.transitionHeight = '200px'
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with vertical prop', () => {
+    const wrapper = mountFunction({
+      props: {
+        vertical: true,
+      },
+      slots: {
+        default: () => [h(VWindowItem), h(VWindowItem)],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with showArrowsOnHover prop', () => {
+    const wrapper = mountFunction({
+      props: {
+        showArrows: true,
+        showArrowsOnHover: true,
+      },
+      slots: {
+        default: () => [h(VWindowItem), h(VWindowItem)],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

package/src/components/VWindow/__tests__/VWindowItem.spec.ts

@@ -213,5 +213,132 @@ describe("VWindowItem.ts", () => {
     expect(windowVm.transitionCount).toBe(0);
     expect(windowVm.isActive).toBeFalsy();
   });
+
+  it("should render with correct structure and classes when active", () => {
+    const wrapper = mountFunction({
+      data: () => ({
+        isActive: true,
+        windowGroup: {
+          internalReverse: false,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render with custom transition when active", () => {
+    const wrapper = mountFunction({
+      props: {
+        transition: "custom-transition"
+      },
+      data: () => ({
+        isActive: true,
+        windowGroup: {
+          internalReverse: false,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render with reverse transition when active", () => {
+    const wrapper = mountFunction({
+      props: {
+        reverseTransition: "custom-reverse-transition"
+      },
+      data: () => ({
+        isActive: true,
+        windowGroup: {
+          internalReverse: true,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-reverse-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render with disabled prop when active", () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true
+      },
+      data: () => ({
+        isActive: true,
+        windowGroup: {
+          internalReverse: false,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render with slot content when active", () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => h("div", { class: "test-content" }, "Test content")
+      },
+      data: () => ({
+        isActive: true,
+        windowGroup: {
+          internalReverse: false,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render with value prop when active", () => {
+    const wrapper = mountFunction({
+      props: {
+        value: "test-value"
+      },
+      data: () => ({
+        isActive: true,
+        windowGroup: {
+          internalReverse: false,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should not render when not active", () => {
+    const wrapper = mountFunction({
+      data: () => ({
+        isActive: false,
+        windowGroup: {
+          internalReverse: false,
+          register: () => {},
+          unregister: () => {},
+          computedTransition: "v-window-x-transition"
+        }
+      })
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 });
 

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

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VWindow.ts should render with arrows when showArrows is true 1`] = `
+<div class="v-window v-item-group theme--light">
+  <div class="v-window__container">
+    <div class="v-window-item v-window-item--active">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VWindow.ts should render with correct structure and classes 1`] = `
+<div class="v-window v-item-group theme--light">
+  <div class="v-window__container">
+    <div class="v-window-item v-window-item--active">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VWindow.ts should render with custom height style 1`] = `
+<div class="v-window v-item-group theme--light">
+  <div class="v-window__container"
+       style="height: 300px;"
+  >
+    <div class="v-window-item v-window-item--active">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VWindow.ts should render with showArrowsOnHover prop 1`] = `
+<div class="v-window v-item-group theme--light v-window--show-arrows-on-hover">
+  <div class="v-window__container">
+    <div class="v-window-item v-window-item--active">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VWindow.ts should render with transition height style 1`] = `
+<div class="v-window v-item-group theme--light">
+  <div class="v-window__container"
+       style="height: 200px;"
+  >
+    <div class="v-window-item v-window-item--active">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VWindow.ts should render with vertical prop 1`] = `
+<div class="v-window v-item-group theme--light">
+  <div class="v-window__container">
+    <div class="v-window-item v-window-item--active">
+    </div>
+  </div>
+</div>
+`;

package/src/components/VWindow/__tests__/__snapshots__/VWindowItem.spec.ts.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VWindowItem.ts should not render when not active 1`] = `""`;
+
+exports[`VWindowItem.ts should render with correct structure and classes when active 1`] = `
+<div class="v-window-item">
+</div>
+`;
+
+exports[`VWindowItem.ts should render with custom transition when active 1`] = `
+<div class="v-window-item">
+</div>
+`;
+
+exports[`VWindowItem.ts should render with disabled prop when active 1`] = `
+<div class="v-window-item">
+</div>
+`;
+
+exports[`VWindowItem.ts should render with reverse transition when active 1`] = `
+<div class="v-window-item">
+</div>
+`;
+
+exports[`VWindowItem.ts should render with slot content when active 1`] = `
+<div class="v-window-item">
+  <div class="test-content">
+    Test content
+  </div>
+</div>
+`;
+
+exports[`VWindowItem.ts should render with value prop when active 1`] = `
+<div class="v-window-item">
+</div>
+`;