test(NDrawer): add test for placement (#902)

src/drawer/tests/Drawer.spec.tsx

@@ -1,7 +1,12 @@
 import { mount } from '@vue/test-utils'
 import { defineComponent, h, nextTick, ref } from 'vue'
 import { NButton } from '../../button'
-import { NDrawer, NDrawerContent } from '../index'
+import {
+  DrawerContentProps,
+  DrawerProps,
+  NDrawer,
+  NDrawerContent
+} from '../index'
 
 // It seems due to special handling of transition in naive-ui, the drawer's DOM
 // won't disappear even if its `show` prop is false. No time to find out the
@@ -14,12 +19,15 @@ function expectDrawerExists (): void {
   ).toEqual('none')
 }
 
-describe('n-drawer', () => {
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  it('should work with import on demand', () => {
+function mountDrawer ({
-    mount(NDrawer)
+  drawerProps,
-  })
+  drawerContentProps
-  it('closable', async () => {
+}: {
-    const wrapper = mount(
+  drawerProps?: DrawerProps
+  drawerContentProps?: DrawerContentProps
+}) {
+  return mount(
     defineComponent({
       setup () {
         return {
@@ -40,8 +48,13 @@ describe('n-drawer', () => {
             onUpdateShow={(show) => {
               this.show = show
             }}
+            {...drawerProps}
           >
-              {{ default: () => <NDrawerContent closable></NDrawerContent> }}
+            {{
+              default: () => (
+                <NDrawerContent {...drawerContentProps}></NDrawerContent>
+              )
+            }}
           </NDrawer>
         ]
       }
@@ -50,6 +63,15 @@ describe('n-drawer', () => {
       attachTo: document.body
     }
   )
+}
+
+describe('n-drawer', () => {
+  it('should work with import on demand', () => {
+    mount(NDrawer)
+  })
+
+  it('closable', async () => {
+    const wrapper = mountDrawer({ drawerContentProps: { closable: true } })
     expect(document.querySelector('.n-drawer')).toEqual(null)
     await wrapper.find('button').trigger('click')
     expect(document.querySelector('.n-drawer')).not.toEqual(null)
@@ -60,4 +82,38 @@ describe('n-drawer', () => {
     expectDrawerExists()
     wrapper.unmount()
   })
+
+  it('should work with `placement` prop', async () => {
+    let wrapper = mountDrawer({ drawerProps: { placement: 'top' } })
+    await wrapper.find('button').trigger('click')
+    expect(document.querySelector('.n-drawer')?.className).toContain(
+      'n-drawer--top-placement'
+    )
+    expectDrawerExists()
+    wrapper.unmount()
+
+    wrapper = mountDrawer({ drawerProps: { placement: 'right' } })
+    await wrapper.find('button').trigger('click')
+    expect(document.querySelector('.n-drawer')?.className).toContain(
+      'n-drawer--right-placement'
+    )
+    expectDrawerExists()
+    wrapper.unmount()
+
+    wrapper = mountDrawer({ drawerProps: { placement: 'bottom' } })
+    await wrapper.find('button').trigger('click')
+    expect(document.querySelector('.n-drawer')?.className).toContain(
+      'n-drawer--bottom-placement'
+    )
+    expectDrawerExists()
+    wrapper.unmount()
+
+    wrapper = mountDrawer({ drawerProps: { placement: 'left' } })
+    await wrapper.find('button').trigger('click')
+    expect(document.querySelector('.n-drawer')?.className).toContain(
+      'n-drawer--left-placement'
+    )
+    expectDrawerExists()
+    wrapper.unmount()
+  })
 })