fix: change overlay test className

varletjs · Dec 10, 2022 · 093cbaa · 093cbaa
1 parent 4699be6
commit 093cbaa
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 78 deletions.
diff --git a/packages/varlet-ui/src/overlay/Overlay.tsx b/packages/varlet-ui/src/overlay/Overlay.tsx
@@ -1,11 +1,16 @@
-import { defineComponent, Teleport } from 'vue'
+import { defineComponent, Teleport, useAttrs } from 'vue'
 import { props } from './props'
 import { useZIndex } from '../context/zIndex'
 import { createNamespace, useTeleport } from '../utils/components'
 
 import '../styles/common.less'
 import './overlay.less'
 
+interface attrsAttribute {
+  class?: string
+  style?: StyleSheet
+}
+
 const { n, classes } = createNamespace('overlay')
 
 export default defineComponent({
@@ -15,36 +20,40 @@ export default defineComponent({
   setup(props, { slots }) {
     const { zIndex } = useZIndex(() => props.show, 1)
     const { disabled } = useTeleport()
+    const attrs: attrsAttribute = useAttrs()
     const hideOverlay = () => {
       const { onClickOverlay } = props
       onClickOverlay?.()
       props['onUpdate:show']?.(false)
     }
 
     const renderOverlay = () => {
-      return (
-        <div
-          class={classes(n('overlay'), props.class)}
-          style={{
-            zIndex: zIndex.value - 1,
-            ...props.style,
-          }}
-          onClick={hideOverlay}
-        >
-          {slots.default?.()}
-        </div>
-      )
+      const { show } = props
+      if (show) {
+        return (
+          <div
+            class={classes(n(), attrs.class)}
+            style={{
+              zIndex: zIndex.value - 1,
+              ...attrs.style,
+            }}
+            onClick={hideOverlay}
+          >
+            {slots.default?.()}
+          </div>
+        )
+      }
     }
     return () => {
-      const { show, teleport } = props
+      const { teleport } = props
       if (teleport) {
         return (
           <Teleport to={teleport} disabled={disabled.value}>
-            {show && renderOverlay()}
+            {renderOverlay()}
           </Teleport>
         )
       }
-      return show && renderOverlay()
+      return renderOverlay()
     }
   },
 })
diff --git a/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
@@ -1,36 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test overlay show 1`] = `"<div class=\\"var-overlay__overlay\\" style=\\"z-index: 2000;\\"> default slot content </div>"`;
-
-exports[`test popup show 1`] = `
-"<transition-stub>
-  <div class=\\"var--box var-popup\\" style=\\"z-index: 1998; display: none;\\">
-    <div class=\\"var-popup__overlay\\" style=\\"z-index: 1999;\\"></div>
-    <transition-stub>
-      <!---->
-    </transition-stub>
-  </div>
-</transition-stub>"
-`;
-
-exports[`test popup show 2`] = `
-"<transition-stub>
-  <div class=\\"var--box var-popup\\" style=\\"z-index: 2001;\\">
-    <div class=\\"var-popup__overlay\\" style=\\"z-index: 2002;\\"></div>
-    <transition-stub>
-      <div class=\\"var-popup__content var-elevation--3 var-popup--center\\" style=\\"z-index: 2003;\\"> default slot content </div>
-    </transition-stub>
-  </div>
-</transition-stub>"
-`;
-
-exports[`test popup show 3`] = `
-"<transition-stub>
-  <div class=\\"var--box var-popup\\" style=\\"z-index: 2001; display: none;\\">
-    <div class=\\"var-popup__overlay\\" style=\\"z-index: 2002;\\"></div>
-    <transition-stub>
-      <!---->
-    </transition-stub>
-  </div>
-</transition-stub>"
-`;
+exports[`test overlay show 1`] = `"<div class=\\"var-overlay\\" style=\\"z-index: 2000;\\"> default slot content </div>"`;
diff --git a/packages/varlet-ui/src/overlay/__tests__/index.spec.js b/packages/varlet-ui/src/overlay/__tests__/index.spec.js
@@ -25,14 +25,14 @@ const Wrapper = {
 
 test('test overlay show', async () => {
   const wrapper = mount(Wrapper)
-  expect(document.body.querySelector('.var-overlay__overlay')).toBeFalsy()
+  expect(document.body.querySelector('.var-overlay')).toBeFalsy()
 
   await wrapper.setData({ show: true })
-  expect(wrapper.find('.var-overlay__overlay').isVisible()).toBeTruthy()
+  expect(wrapper.find('.var-overlay').isVisible()).toBeTruthy()
   expect(wrapper.html()).toMatchSnapshot()
 
   await wrapper.setData({ show: false })
-  expect(document.body.querySelector('.var-overlay__overlay')).toBeFalsy()
+  expect(document.body.querySelector('.var-overlay')).toBeFalsy()
 
   wrapper.unmount()
 })
@@ -48,12 +48,12 @@ test('test overlay click on clickOverlay', async () => {
 
   await wrapper.setData({ show: true })
 
-  await wrapper.find('.var-overlay__overlay').trigger('click')
+  await wrapper.find('.var-overlay').trigger('click')
   expect(onClickOverlay).toHaveBeenCalledTimes(1)
 
   await wrapper.setData({ show: true })
   await wrapper.setProps({ closeOnClickOverlay: false })
-  await wrapper.find('.var-overlay__overlay').trigger('click')
+  await wrapper.find('.var-overlay').trigger('click')
   expect(onClickOverlay).toHaveBeenCalledTimes(2)
 
   wrapper.unmount()
@@ -64,13 +64,11 @@ test('test overlay z-index', async () => {
 
   await wrapper.setData({ show: true })
 
-  const prevOverlayZIndex = window.getComputedStyle(wrapper.find('.var-overlay__overlay').element).zIndex
+  const prevOverlayZIndex = window.getComputedStyle(wrapper.find('.var-overlay').element).zIndex
 
   await wrapper.setData({ show: false })
   await wrapper.setData({ show: true })
-  expect(window.getComputedStyle(wrapper.find('.var-overlay__overlay').element).zIndex).toBe(
-    String(+prevOverlayZIndex + 1)
-  )
+  expect(window.getComputedStyle(wrapper.find('.var-overlay').element).zIndex).toBe(String(+prevOverlayZIndex + 1))
 
   wrapper.unmount()
 })
diff --git a/packages/varlet-ui/src/overlay/overlay.less b/packages/varlet-ui/src/overlay/overlay.less
@@ -3,16 +3,14 @@
 }
 
 .var-overlay {
-  &__overlay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--popup-overlay-background-color);
-    transition: all 0.25s;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--popup-overlay-background-color);
+  transition: all 0.25s;
 }
diff --git a/packages/varlet-ui/src/overlay/props.ts b/packages/varlet-ui/src/overlay/props.ts
@@ -5,12 +5,12 @@ export const props = {
     type: Boolean,
     default: false,
   },
-  class: {
-    type: String,
-  },
-  style: {
-    type: Object,
-  },
+  // class: {
+  //   type: String,
+  // },
+  // style: {
+  //   type: Object,
+  // },
   onClickOverlay: {
     type: Function as PropType<() => void>,
   },

diff --git a/packages/varlet-ui/src/popup/__tests__/index.spec.js b/packages/varlet-ui/src/popup/__tests__/index.spec.js
@@ -24,7 +24,6 @@ const Wrapper = {
 }
 
 test('test popup show', async () => {
-  console.log(Wrapper, 222)
   const wrapper = mount(Wrapper)
   expect(wrapper.find('.var-popup').isVisible()).toBeFalsy()
   expect(wrapper.html()).toMatchSnapshot()