Support disable portal

resources/assets/src/components/Portal.ts

@@ -11,8 +11,16 @@ export default Vue.extend({
       type: String,
       default: 'div',
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
+    if (this.disabled) {
+      return
+    }
+
     const container = document.querySelector(this.selector)
     if (container) {
       if (container.firstChild) {

resources/assets/src/views/user/Closet.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <portal selector="#email-verification"><email-verification /></portal>
+    <portal selector="#email-verification" :disabled="disablePortal">
+      <email-verification />
+    </portal>
 
-    <portal selector="#closet-list">
+    <portal selector="#closet-list" :disabled="disablePortal">
       <div class="card card-primary card-tabs">
         <div class="card-header p-0 pt-1 pl-1">
           <div class="d-flex justify-content-between">
@@ -140,7 +142,7 @@
       </div>
     </portal>
 
-    <portal selector="#previewer">
+    <portal selector="#previewer" :disabled="disablePortal">
       <previewer
         closet-mode
         :skin="skinUrl"
@@ -165,7 +167,7 @@
       </previewer>
     </portal>
 
-    <portal selector="#modals">
+    <portal selector="#modals" :disabled="disablePortal">
       <apply-to-player-dialog ref="useAs" :skin="selectedSkin" :cape="selectedCape" />
       <add-player-dialog @add="fetchPlayersList" />
     </portal>
@@ -218,6 +220,7 @@ export default {
     capeUrl: '',
     linkToSkin: `${blessing.base_url}/skinlib?filter=skin`,
     linkToCape: `${blessing.base_url}/skinlib?filter=cape`,
+    disablePortal: process.env.NODE_ENV === 'test',
   }),
   created() {
     this.search = debounce(this.loadCloset, 350)

resources/assets/src/views/user/Players.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <portal selector="#players-list">
+    <portal selector="#players-list" :disabled="disablePortal">
       <div class="card card-primary">
         <div class="card-body table-responsive p-0">
           <table class="table table-hover">
@@ -49,7 +49,7 @@
       </div>
     </portal>
 
-    <portal selector="#previewer">
+    <portal selector="#previewer" :disabled="disablePortal">
       <previewer
         v-if="using3dPreviewer"
         :skin="skinUrl"
@@ -101,7 +101,7 @@
       </div>
     </portal>
 
-    <portal selector="#modals">
+    <portal selector="#modals" :disabled="disablePortal">
       <add-player-dialog @add="fetchPlayers" />
 
       <modal
@@ -162,6 +162,7 @@ export default {
         skin: false,
         cape: false,
       },
+      disablePortal: process.env.NODE_ENV === 'test',
     }
   },
   async beforeMount() {

resources/assets/tests/components/Portal.test.ts

@@ -28,6 +28,20 @@ test('custom wrapper tag', () => {
   expect(document.querySelectorAll('span')).toHaveLength(1)
 })
 
+test('disable portal', () => {
+  document.body.innerHTML = '<div id="c"></div>'
+  mount(Portal, {
+    propsData: {
+      selector: '#c',
+      disabled: true,
+    },
+    slots: {
+      default: 'children',
+    },
+  })
+  expect(document.querySelector('#c')!.innerHTML).toBe('')
+})
+
 test('should pass if container does not exist', () => {
   mount(Portal, {
     propsData: {

resources/assets/tests/views/user/Closet.test.ts

@@ -6,11 +6,6 @@ import ClosetItem from '@/components/ClosetItem.vue'
 import Previewer from '@/components/Previewer.vue'
 
 beforeEach(() => {
-  document.body.innerHTML = `
-    <div id="closet-list"></div>
-    <div id="previewer"></div>
-  `
-
   window.blessing.extra = { unverified: false }
 })
 

resources/assets/tests/views/user/Players.test.ts

@@ -11,18 +11,10 @@ window.blessing.extra = {
   length: 'length',
 }
 
-beforeEach(() => {
-  document.body.innerHTML = `
-    <div id="players-list"></div>
-    <div id="previewer"></div>
-    <div id="modals"></div>
-  `
-})
-
 test('display player name constraints', () => {
   Vue.prototype.$http.get.mockResolvedValue({ data: [] })
-  mount(Players)
-  const text = document.querySelector('#modals')!.textContent
+  const wrapper = mount(Players)
+  const text = wrapper.text()
   expect(text).toContain('rule')
   expect(text).toContain('length')
 })
@@ -118,9 +110,7 @@ test('change player name', async () => {
   )
   button.trigger('click')
   await flushPromises()
-  expect(
-    document.querySelector('#players-list')!.textContent,
-  ).toContain('new-name')
+  expect(wrapper.text()).toContain('new-name')
 })
 
 test('delete player', async () => {
@@ -139,7 +129,6 @@ test('delete player', async () => {
   const wrapper = mount(Players)
   await flushPromises()
   const button = wrapper.findAll('.btn-danger')
-  const list = document.querySelector('#players-list')!
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
@@ -147,20 +136,18 @@ test('delete player', async () => {
   button.trigger('click')
   await flushPromises()
   expect(Vue.prototype.$http.post).toBeCalledWith('/user/player/delete/1')
-  expect(list.textContent).toContain('to-be-deleted')
+  expect(wrapper.text()).toContain('to-be-deleted')
 
   button.trigger('click')
   await flushPromises()
-  expect(list.textContent).not.toContain('to-be-deleted')
+  expect(wrapper.text()).not.toContain('to-be-deleted')
 })
 
 test('toggle preview mode', () => {
   Vue.prototype.$http.get.mockResolvedValueOnce({ data: [] })
   const wrapper = mount(Players)
   wrapper.find('[data-test="to2d"]').trigger('click')
-  expect(
-    document.querySelector('#previewer')!.textContent,
-  ).toContain('user.player.texture-empty')
+  expect(wrapper.text()).toContain('user.player.texture-empty')
 })
 
 test('clear texture', async () => {