Extract common code

resources/assets/src/components/mixins/enablePlugin.ts

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  data: () => ({ plugins: [] }),
+  methods: {
+    async enablePlugin({
+      name, dependencies: { requirements }, originalIndex,
+    }: {
+      name: string,
+      dependencies: { requirements: string[] },
+      originalIndex: number
+    }) {
+      if (requirements.length === 0) {
+        try {
+          await this.$confirm(
+            this.$t('admin.noDependenciesNotice'),
+            { type: 'warning' }
+          )
+        } catch {
+          return
+        }
+      }
+
+      const {
+        errno, msg, reason,
+      } = await this.$http.post(
+        '/admin/plugins/manage',
+        { action: 'enable', name }
+      ) as { errno: number, msg: string, reason: string[] }
+      if (errno === 0) {
+        this.$message.success(msg)
+        this.$set(this.plugins[originalIndex], 'enabled', true)
+      } else {
+        const div = document.createElement('div')
+        const p = document.createElement('p')
+        p.textContent = msg
+        div.appendChild(p)
+        const ul = document.createElement('ul')
+        reason.forEach(item => {
+          const li = document.createElement('li')
+          li.textContent = item
+          ul.appendChild(li)
+        })
+        div.appendChild(ul)
+        this.$alert(div.innerHTML.replace(/`([\w-_]+)`/g, '<code>$1</code>'), {
+          dangerouslyUseHTMLString: true,
+          type: 'warning',
+        })
+      }
+    },
+  },
+})

resources/assets/src/views/admin/Market.vue

@@ -73,6 +73,7 @@
 <script>
 import { VueGoodTable } from 'vue-good-table'
 import 'vue-good-table/dist/vue-good-table.min.css'
+import enablePlugin from '../../components/mixins/enablePlugin'
 import tableOptions from '../../components/mixins/tableOptions'
 
 export default {
@@ -81,6 +82,7 @@ export default {
     VueGoodTable,
   },
   mixins: [
+    enablePlugin,
     tableOptions,
   ],
   data() {
@@ -154,47 +156,6 @@ export default {
 
       this.installPlugin(plugin)
     },
-    async enablePlugin({
-      name, dependencies: { requirements }, originalIndex,
-    }) {
-      if (requirements.length === 0) {
-        try {
-          await this.$confirm(
-            this.$t('admin.noDependenciesNotice'),
-            { type: 'warning' }
-          )
-        } catch {
-          return
-        }
-      }
-
-      const {
-        errno, msg, reason,
-      } = await this.$http.post(
-        '/admin/plugins/manage',
-        { action: 'enable', name }
-      )
-      if (errno === 0) {
-        this.$message.success(msg)
-        this.$set(this.plugins[originalIndex], 'enabled', true)
-      } else {
-        const div = document.createElement('div')
-        const p = document.createElement('p')
-        p.textContent = msg
-        div.appendChild(p)
-        const ul = document.createElement('ul')
-        reason.forEach(item => {
-          const li = document.createElement('li')
-          li.textContent = item
-          ul.appendChild(li)
-        })
-        div.appendChild(ul)
-        this.$alert(div.innerHTML.replace(/`([\w-_]+)`/g, '<code>$1</code>'), {
-          dangerouslyUseHTMLString: true,
-          type: 'warning',
-        })
-      }
-    },
   },
 }
 </script>

resources/assets/src/views/admin/Plugins.vue

@@ -77,6 +77,7 @@
 <script>
 import { VueGoodTable } from 'vue-good-table'
 import 'vue-good-table/dist/vue-good-table.min.css'
+import enablePlugin from '../../components/mixins/enablePlugin'
 import tableOptions from '../../components/mixins/tableOptions'
 
 export default {
@@ -85,6 +86,7 @@ export default {
     VueGoodTable,
   },
   mixins: [
+    enablePlugin,
     tableOptions,
   ],
   props: {
@@ -125,47 +127,6 @@ export default {
     rowStyleClassFn(row) {
       return row.enabled ? 'plugin-enabled' : 'plugin'
     },
-    async enablePlugin({
-      name, dependencies: { requirements }, originalIndex,
-    }) {
-      if (requirements.length === 0) {
-        try {
-          await this.$confirm(
-            this.$t('admin.noDependenciesNotice'),
-            { type: 'warning' }
-          )
-        } catch {
-          return
-        }
-      }
-
-      const {
-        errno, msg, reason,
-      } = await this.$http.post(
-        '/admin/plugins/manage',
-        { action: 'enable', name }
-      )
-      if (errno === 0) {
-        this.$message.success(msg)
-        this.$set(this.plugins[originalIndex], 'enabled', true)
-      } else {
-        const div = document.createElement('div')
-        const p = document.createElement('p')
-        p.textContent = msg
-        div.appendChild(p)
-        const ul = document.createElement('ul')
-        reason.forEach(item => {
-          const li = document.createElement('li')
-          li.textContent = item
-          ul.appendChild(li)
-        })
-        div.appendChild(ul)
-        this.$alert(div.innerHTML.replace(/`([\w-_]+)`/g, '<code>$1</code>'), {
-          dangerouslyUseHTMLString: true,
-          type: 'warning',
-        })
-      }
-    },
     async disablePlugin({ name, originalIndex }) {
       const { errno, msg } = await this.$http.post(
         '/admin/plugins/manage',

resources/assets/tests/views/admin/Market.test.ts

@@ -100,51 +100,3 @@ test('update plugin', async () => {
     { name: 'a' }
   )
 })
-
-test('enable installed plugin', async () => {
-  Vue.prototype.$http.get.mockResolvedValue([
-    {
-      name: 'a', dependencies: { requirements: [] }, installed: true,
-    },
-    {
-      name: 'b', dependencies: { requirements: {} }, installed: true,
-    },
-  ])
-  Vue.prototype.$http.post
-    .mockResolvedValueOnce({
-      errno: 1, msg: '1', reason: ['`a<div></div>`b'],
-    })
-    .mockResolvedValue({ errno: 0, msg: '0' })
-  Vue.prototype.$confirm
-    .mockRejectedValueOnce('')
-    .mockResolvedValue('confirm')
-  const wrapper = mount(Market)
-  await flushPromises()
-  const buttons = wrapper.findAll('button')
-
-  buttons.at(0).trigger('click')
-  await flushPromises()
-  expect(Vue.prototype.$confirm).toBeCalledWith(
-    'admin.noDependenciesNotice',
-    { type: 'warning' }
-  )
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-
-  buttons.at(0).trigger('click')
-  await flushPromises()
-  expect(Vue.prototype.$http.post).toBeCalledWith(
-    '/admin/plugins/manage',
-    { action: 'enable', name: 'a' }
-  )
-  expect(Vue.prototype.$alert).toBeCalledWith(
-    '<p>1</p><ul><li>`a&lt;div&gt;&lt;/div&gt;`b</li></ul>',
-    {
-      type: 'warning',
-      dangerouslyUseHTMLString: true,
-    }
-  )
-
-  buttons.at(1).trigger('click')
-  await flushPromises()
-  expect(wrapper.text()).toContain('admin.statusEnabled')
-})