From f7c8dc87ce0ec3f611ae6ccbfaed8e0fb8cf1b17 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Thu, 2 May 2019 09:25:28 +0800
Subject: [PATCH] Truncate too long texture name (fix #44)

---
 resources/assets/src/views/skinlib/Show.vue   |  2 +-
 .../assets/tests/views/skinlib/Show.test.ts   | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/resources/assets/src/views/skinlib/Show.vue b/resources/assets/src/views/skinlib/Show.vue
index 58aef058..7b3b7c03 100644
--- a/resources/assets/src/views/skinlib/Show.vue
+++ b/resources/assets/src/views/skinlib/Show.vue
@@ -88,7 +88,7 @@
               <tr>
                 <td v-t="'skinlib.show.name'" />
                 <td>
-                  {{ name }}
+                  {{ name.length > 15 ? `${name.slice(0, 15)}...` : name }}
                   <small v-if="uploader === currentUid || admin">
                     <a v-t="'skinlib.show.edit'" href="#" @click="changeTextureName" />
                   </small>
diff --git a/resources/assets/tests/views/skinlib/Show.test.ts b/resources/assets/tests/views/skinlib/Show.test.ts
index 8b1f93e6..f3eb8387 100644
--- a/resources/assets/tests/views/skinlib/Show.test.ts
+++ b/resources/assets/tests/views/skinlib/Show.test.ts
@@ -146,15 +146,14 @@ test('download texture', async () => {
 
 test('link to downloading texture', async () => {
   Object.assign(window.blessing.extra, { download: false })
-  Vue.prototype.$http.get.mockResolvedValue({ data: { hash: '123' } })
+  Vue.prototype.$http.get.mockResolvedValue({ data: { name: '', hash: '123' } })
   const wrapper = mount(Show, {
     mocks: {
       $route: ['/skinlib/show/1', '1'],
     },
   })
   await wrapper.vm.$nextTick()
-  expect(wrapper.contains('a[title="123"]')).toBeFalse()
-  expect(wrapper.contains('span[title="123"]')).toBeTrue()
+  expect(wrapper.find('span[title="123"]').exists()).toBeTrue()
 })
 
 test('set as avatar', async () => {
@@ -435,3 +434,18 @@ test('apply texture to player', () => {
   wrapper.find('[data-target="#modal-use-as"]').trigger('click')
   expect(wrapper.find('[data-target="#modal-add-player"]').exists()).toBeFalse()
 })
+
+test('truncate too long texture name', async () => {
+  Vue.prototype.$http.get.mockResolvedValue({
+    data: {
+      name: 'very-very-long-texture-name',
+    },
+  })
+  const wrapper = mount(Show, {
+    mocks: {
+      $route: ['/skinlib/show/1', '1'],
+    },
+  })
+  await wrapper.vm.$nextTick()
+  expect(wrapper.find('.box-primary').text()).toContain('very-very-long-...')
+})