fix(image-list): linting files (#464)

* fix(image-list): linting files
docs(image-list): update
test(image-list): add snapshots

* test(image-list): add snapshots

Author: tychenjiajun

components/image-list/ImageList.vue

@@ -26,18 +26,18 @@ export default {
   },
   computed: {
     classes () {
-      let standard = {}
+      const standard = {}
       if (this.column > 0 && !this.masonry) {
         standard['image-list-standard-' + this.column] = true
       }
 
-      let masonry = {}
+      const masonry = {}
       if (this.column > 0 && this.masonry) {
         masonry['image-list-masonry-' + this.column] = true
         masonry['mdc-image-list--masonry'] = true
       }
 
-      let others = {}
+      const others = {}
       others['mdc-image-list--with-text-protection'] = this.textProtection
 
       return { ...standard, ...masonry, ...others }

components/image-list/ImageListItem.vue

@@ -11,7 +11,7 @@
       name="image"
     />
     <div
-      v-if="$slots['default']"
+      v-if="$slots.default"
       class="mdc-image-list__supporting"
     >
       <span class="mdc-image-list__label">
@@ -48,8 +48,8 @@ export default {
   methods: {
     updateSlot () {
       if (this.$slots.image) {
-        this.$slots.image.map(n => {
-          n.elm.classList.add('mdc-image-list__image')
+        this.$slots.image.forEach(n => {
+          if (n.elm instanceof Element) n.elm.classList.add('mdc-image-list__image')
         })
       }
     }

components/image-list/README.md

@@ -1,25 +1,25 @@
-## ImageList
+## Image List
 
 ### Markup
 
 ```html
   <m-image-list
-    :standardColumn="2"
-    textProtection>
+    :column="2"
+    text-protection>
     <m-image-list-item>
-      <img slot="image" src="../assets/images/cat.jpg">
+      <img slot="image" src="../assets/images/cat.jpg" alt="Cat">
       Cat
     </m-image-list-item>
     <m-image-list-item> 
-      <img slot="image" src="../assets/images/cat.jpg">
+      <img slot="image" src="../assets/images/cat.jpg" alt="Cat">
       Cat
     </m-image-list-item>
     <m-image-list-item>
-      <img slot="image" src="../assets/images/cat.jpg">
+      <img slot="image" src="../assets/images/cat.jpg" alt="Cat">
       Cat
     </m-image-list-item>
     <m-image-list-item>
-      <img slot="image" src="../assets/images/cat.jpg">
+      <img slot="image" src="../assets/images/cat.jpg" alt="Cat">
       Cat
     </m-image-list-item>
   </m-image-list>
@@ -30,17 +30,17 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| standardColumn | Number | - | standard columns per line |
-| masonryColumn | Number | - | masonry columns per line |
+| column | Number | 0 | columns per line, `0` means not to shrink or grow |
+| masonry | Boolean | false | masonry if `true`, standard if `false` |
 | textProtection | Boolean | false | label will be positioned in a scrim overlaying each image |
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
-| default | should be ImageListItem(s) |
+| default | should be `<m-image-list-item>` |
 
-## ImageListItem
+## Image List Item
 
 ### Props
 
@@ -50,7 +50,7 @@
 
 ### Slots
 
-| Slot |Description |
+| Slot | Description |
 |------|-------------|
 | default | image label |
 | image | img element |

components/image-list/__tests__/ImageList.spec.js

@@ -0,0 +1,83 @@
+import 'mutationobserver-shim'
+import { mount } from '@vue/test-utils'
+import ImageList from '../ImageList.vue'
+import ImageListItem from '../ImageListItem'
+
+describe('ImageList', () => {
+  it('should mount', () => {
+    const wrapper = mount(ImageList)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(ImageList)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-image-list')
+  })
+
+  it('should render as standard', () => {
+    const wrapper = mount(ImageList, {
+      propsData: {
+        column: 1
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('image-list-standard-1')
+  })
+
+  it('should render as masonry', () => {
+    const wrapper = mount(ImageList, {
+      propsData: {
+        masonry: true,
+        column: 1
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-image-list--masonry')
+    expect(wrapper.classes()).toContain('image-list-masonry-1')
+  })
+
+  it('should render with text-protection', () => {
+    const wrapper = mount(ImageList, {
+      propsData: {
+        textProtection: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-image-list--with-text-protection')
+  })
+})
+
+describe('ImageListItem', () => {
+  it('should mount', () => {
+    const wrapper = mount(ImageListItem)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(ImageListItem)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-image-list__item')
+    expect(wrapper.vm.$data.slotObserver).toBeDefined()
+  })
+
+  it('should render without adjust aspect ratio', () => {
+    const wrapper = mount(ImageListItem, {
+      propsData: {
+        adjustAspectRatio: false
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.find('.mdc-image-list__image-aspect-container').exists()).toBe(false)
+  })
+
+  it('should render with img', () => {
+    const wrapper = mount(ImageListItem, {
+      slots: {
+        image: '<img src="cat.jpg" alt="Cat">'
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.find('.mdc-image-list__image').is('img')).toBe(true)
+  })
+})

components/image-list/__tests__/__snapshots__/ImageList.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageList should render as masonry 1`] = `<ul class="mdc-image-list image-list-masonry-1 mdc-image-list--masonry"></ul>`;
+
+exports[`ImageList should render as standard 1`] = `<ul class="mdc-image-list image-list-standard-1"></ul>`;
+
+exports[`ImageList should render with no prop 1`] = `<ul class="mdc-image-list"></ul>`;
+
+exports[`ImageList should render with text-protection 1`] = `<ul class="mdc-image-list mdc-image-list--with-text-protection"></ul>`;
+
+exports[`ImageListItem should render with img 1`] = `
+<li class="mdc-image-list__item">
+  <div class="mdc-image-list__image-aspect-container"><img src="cat.jpg" alt="Cat" class="mdc-image-list__image"></div>
+  <!---->
+</li>
+`;
+
+exports[`ImageListItem should render with no prop 1`] = `
+<li class="mdc-image-list__item">
+  <div class="mdc-image-list__image-aspect-container"></div>
+  <!---->
+</li>
+`;
+
+exports[`ImageListItem should render without adjust aspect ratio 1`] = `
+<li class="mdc-image-list__item">
+  <!---->
+</li>
+`;