test(VMenu): improve rounded dimensions test

see #2977
vuetifyjs · Jan 13, 2018 · 909a8e5 · 909a8e5
1 parent fced92f
commit 909a8e5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 26 deletions.
diff --git a/src/components/VMenu/VMenu.spec.js b/src/components/VMenu/VMenu.spec.js
@@ -336,7 +336,7 @@ test('VMenu.js', ({ mount }) => {
  expect('Unable to locate target [data-app]').toHaveBeenTipped()
  })
 
- it('should render component with rounded min-width and left and match snapshot', async () => {
+ it('should round dimensions', async () => {
  const wrapper = mount(VMenu, {
  propsData: {
  value: false
@@ -346,6 +346,8 @@ test('VMenu.js', ({ mount }) => {
  }
  })
 
+ const content = wrapper.find('.menu__content')[0]
+
  const getBoundingClientRect = () => {
  return {
  width: 100.5,
@@ -362,12 +364,11 @@ test('VMenu.js', ({ mount }) => {
  wrapper.vm.$refs.activator.querySelector('.btn').getBoundingClientRect = getBoundingClientRect
  wrapper.vm.$refs.content.getBoundingClientRect = getBoundingClientRect
 
- wrapper.setProps({ value: true})
+ wrapper.setProps({ value: true })
 
- // There's gotta be a better way
- await new Promise(resolve => setTimeout(resolve, 200))
+ await new Promise(resolve => requestAnimationFrame(resolve))
 
- expect(wrapper.html()).toMatchSnapshot()
+ expect(content.getAttribute('style')).toMatchSnapshot()
  expect('Unable to locate target [data-app]').toHaveBeenTipped()
  })
 })
diff --git a/src/components/VMenu/__snapshots__/VMenu.spec.js.snap b/src/components/VMenu/__snapshots__/VMenu.spec.js.snap
@@ -364,27 +364,7 @@ exports[`VMenu.js should render component with custom transition and match snaps
 
 `;
 
-exports[`VMenu.js should render component with rounded min-width and left and match snapshot 1`] = `
-
-<div class="menu"
- style="display: inline-block;"
->
- <div class="menu__activator menu__activator--active">
- <button type="button"
- class="btn"
- data-ripple="true"
- >
- <div class="btn__content">
- </div>
- </button>
- </div>
- <div class="menu__content menuable__content__active menu-transition-enter-active menu-transition-enter-to"
- style="max-height: auto; min-width: 101px; max-width: auto; top: 12px; left: 50px; z-index: 8; z-index: 8;"
- >
- </div>
-</div>
-
-`;
+exports[`VMenu.js should round dimensions 1`] = `"max-height: auto; min-width: 101px; max-width: auto; top: 12px; left: 50px; z-index: 8; display: none; z-index: 8;"`;
 
 exports[`VMenu.js should work 1`] = `