test: stabilize style-related tests

Author: Aybrea

packages/varlet-ui/src/app-bar/__tests__/__snapshots__/index.spec.js.snap

@@ -1,20 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`test app bar component props > app bar image and image-linear-gradient 1`] = `
-"<div class="var-app-bar var--box var-elevation--3" style="background-image: linear-gradient(to right top, rgba(29, 68, 147, 0.5) 0%, rgba(74, 198, 170, 0.9) 100%), url(&quot;https://1.png&quot;); background-position: center center; background-size: cover; z-index: 1;">
-  <div class="var-app-bar__toolbar">
-    <div class="var-app-bar__left">
-      <div class="var-app-bar__title"></div>
-    </div>
-    <!--v-if-->
-    <div class="var-app-bar__right">
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-<!--v-if-->"
-`;
-
 exports[`test app bar slots > app bar content slot 1`] = `
 "<div class="var-app-bar var--box var-elevation--3" style="z-index: 1;">
   <div class="var-app-bar__toolbar">

packages/varlet-ui/src/app-bar/__tests__/index.spec.js

@@ -113,7 +113,15 @@ describe('test app bar component props', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.rootStyles).toMatchObject({
+      'background-image':
+        'linear-gradient(to right top, rgba(29, 68, 147, 0.5) 0%, rgba(74, 198, 170, 0.9) 100%), url(https://1.png)',
+      'background-position': 'center center',
+      'background-size': 'cover',
+      'z-index': 1,
+    })
+
+    wrapper.unmount()
   })
 
   test('app bar fixed', async () => {

packages/varlet-ui/src/card/__tests__/__snapshots__/index.spec.js.snap

@@ -269,7 +269,12 @@ describe('test card component slots', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const floater = wrapper.find('.var-card__floater')
+    const style = floater.attributes('style') ?? ''
+    expect(style).toContain('width: 100%')
+    expect(style).toContain('height: 100%')
+    expect(style).toContain('overflow: hidden')
+    expect(wrapper.find('img').attributes('src')).toBe('https://varletjs.org/varlet/cat.jpg')
 
     wrapper.unmount()
   })
@@ -293,7 +298,12 @@ describe('test card component slots', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const floater = wrapper.find('.var-card__floater')
+    const style = floater.attributes('style') ?? ''
+    expect(style).toContain('width: 100%')
+    expect(style).toContain('height: 100%')
+    expect(style).toContain('overflow: hidden')
+    expect(wrapper.find('.var-card__title').text()).toBe('title')
 
     wrapper.unmount()
   })
@@ -305,7 +315,12 @@ describe('test card component slots', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const floater = wrapper.find('.var-card__floater')
+    const style = floater.attributes('style') ?? ''
+    expect(style).toContain('width: 100%')
+    expect(style).toContain('height: 100%')
+    expect(style).toContain('overflow: hidden')
+    expect(wrapper.find('.var-card__subtitle').text()).toBe('subtitle')
 
     wrapper.unmount()
   })
@@ -317,7 +332,12 @@ describe('test card component slots', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const floater = wrapper.find('.var-card__floater')
+    const style = floater.attributes('style') ?? ''
+    expect(style).toContain('width: 100%')
+    expect(style).toContain('height: 100%')
+    expect(style).toContain('overflow: hidden')
+    expect(wrapper.find('.var-card__description').text()).toBe('description')
 
     wrapper.unmount()
   })
@@ -329,7 +349,12 @@ describe('test card component slots', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const floater = wrapper.find('.var-card__floater')
+    const style = floater.attributes('style') ?? ''
+    expect(style).toContain('width: 100%')
+    expect(style).toContain('height: 100%')
+    expect(style).toContain('overflow: hidden')
+    expect(wrapper.find('.var-card__footer').text()).toBe('extra')
 
     wrapper.unmount()
   })
@@ -341,12 +366,20 @@ describe('test card component slots', () => {
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    const floater = wrapper.find('.var-card__floater')
+    const style = floater.attributes('style') ?? ''
+    expect(style).toContain('width: 100%')
+    expect(style).toContain('height: 100%')
+    expect(style).toContain('overflow: hidden')
 
     await wrapper.setProps({
       layout: 'row',
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    const rowFloater = wrapper.find('.var-card__floater')
+    const rowStyle = rowFloater.attributes('style') ?? ''
+    expect(rowStyle).toContain('width: auto')
+    expect(rowStyle).toContain('height: auto')
+    expect(rowStyle).toContain('overflow: hidden')
 
     wrapper.unmount()
   })

packages/varlet-ui/src/card/__tests__/index.spec.js

@@ -18,15 +18,16 @@ test('drag direction', async () => {
   })
 
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  const drag = container.querySelector('.var-drag')
+  expect(drag.getAttribute('style')).toContain('transform: translate(10px, 10px)')
 
   wrapper.setProps({ direction: 'x' })
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  expect(drag.getAttribute('style')).toContain('transform: translate(10px, 0px)')
 
   wrapper.setProps({ direction: 'y' })
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  expect(drag.getAttribute('style')).toContain('transform: translate(0px, 10px)')
 
   wrapper.unmount()
 })
@@ -40,15 +41,16 @@ test('drag attraction', async () => {
     },
   })
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  const drag = container.querySelector('.var-drag')
+  expect(drag.getAttribute('style')).toContain('transform: translate(0px, 10px)')
 
   wrapper.setProps({ attraction: 'y' })
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  expect(drag.getAttribute('style')).toContain('transform: translate(10px, 0px)')
 
   wrapper.setProps({ attraction: 'xy' })
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  expect(drag.getAttribute('style')).toContain('transform: translate(0px, 0px)')
 
   wrapper.unmount()
 })
@@ -63,7 +65,9 @@ test('drag disabled', async () => {
   })
 
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  const drag = container.querySelector('.var-drag')
+  expect(drag.getAttribute('style')).toContain('z-index: 90')
+  expect(drag.getAttribute('style')).not.toContain('transform:')
 
   wrapper.unmount()
 })
@@ -84,7 +88,8 @@ test('drag boundary', async () => {
   await trigger(el, 'touchstart', 0, 0)
   await trigger(el, 'touchmove', 1, 1)
   await trigger(el, 'touchend', 1, 1)
-  expect(container.innerHTML).toMatchSnapshot()
+  const drag = container.querySelector('.var-drag')
+  expect(drag.getAttribute('style')).toContain('transform: translate(10px, 10px)')
 
   wrapper.unmount()
 })
@@ -98,11 +103,12 @@ test('drag reset', async () => {
   })
 
   await triggerDrag(container.childNodes[1], 10, 10)
-  expect(container.innerHTML).toMatchSnapshot()
+  const drag = container.querySelector('.var-drag')
+  expect(drag.getAttribute('style')).toContain('transform: translate(10px, 10px)')
 
   wrapper.vm.reset()
   await delay()
-  expect(container.innerHTML).toMatchSnapshot()
+  expect(drag.getAttribute('style')).not.toContain('transform:')
 
   wrapper.unmount()
 })

packages/varlet-ui/src/drag/__tests__/__snapshots__/index.spec.js.snap

@@ -18,8 +18,6 @@ exports[`fab drag 1`] = `"<div class="var-drag var--box var-fab--position-right-
 
 exports[`fab drag 2`] = `"<div class="var-drag var--box var-fab--position-right-bottom" style="z-index: 90;"><div class="var-fab var-fab--direction-top"><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--icon-container-primary var-fab__trigger" type="button" var-fab-cover="true"><!--v-if--><div class="var-button__content"><i class="var-icon var-icon--set var-icon-plus var-fab__trigger-inactive-icon" style="transition-duration: 200ms;" var-fab-cover="true"></i></div><div class="var-hover-overlay"></div></button><div class="var-fab__actions" style="display: none;"></div></div></div>"`;
 
-exports[`fab events and fragment default slots and click outside close 1`] = `"<div class="var-drag var--box var-fab--position-right-bottom" style="z-index: 90;"><div class="var-fab var-fab--direction-top"><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--icon-container-primary var-fab__trigger" type="button" var-fab-cover="true"><!--v-if--><div class="var-button__content"><i class="var-icon var-icon--set var-icon-plus var-fab__trigger-inactive-icon" style="transition-duration: 200ms;" var-fab-cover="true"></i></div><div class="var-hover-overlay"></div></button><div class="var-fab__actions" style="display: none;"><div class="var-fab__action"><div>action</div></div><div class="var-fab__action"><div>action</div></div><div class="var-fab__action"><div>action</div></div></div></div></div>"`;
-
 exports[`fab fixed equals false 1`] = `"<div class="var-drag var--box var-fab--position-right-bottom var-fab--absolute" style="z-index: 90;"><div class="var-fab var-fab--direction-top"><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--icon-container-primary var-fab__trigger" type="button" var-fab-cover="true"><!--v-if--><div class="var-button__content"><i class="var-icon var-icon--set var-icon-plus var-fab__trigger-inactive-icon" style="transition-duration: 200ms;" var-fab-cover="true"></i></div><div class="var-hover-overlay"></div></button><div class="var-fab__actions" style="display: none;"></div></div></div>"`;
 
 exports[`fab position 1`] = `"<div class="var-drag var--box var-fab--position-left-top" style="z-index: 90;"><div class="var-fab var-fab--direction-top"><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--icon-container-primary var-fab__trigger" type="button" var-fab-cover="true"><!--v-if--><div class="var-button__content"><i class="var-icon var-icon--set var-icon-plus var-fab__trigger-inactive-icon" style="transition-duration: 200ms;" var-fab-cover="true"></i></div><div class="var-hover-overlay"></div></button><div class="var-fab__actions" style="display: none;"></div></div></div>"`;

packages/varlet-ui/src/drag/__tests__/index.spec.js

@@ -289,9 +289,9 @@ test('fab events and fragment default slots and click outside close', async () =
     },
   })
 
-  const button = container.querySelector('.var-button')
-  expect(container.innerHTML).toMatchSnapshot()
-  await trigger(button, 'click')
+  const drag = container.querySelector('.var-drag')
+  expect(container.querySelectorAll('.var-fab__action').length).toBe(3)
+  await trigger(drag, 'click')
 
   expect(onOpen).toBeCalledTimes(1)
   expect(onUpdateActive).toBeCalledWith(true)