feat: add classes, attributes, and props methods (#141)

* Add classes wrapper method

* Add support for css modules

* Add attributes wrapper method

* Added props wrapper method

Author: tim-hutchinson

src/wrappers/error-wrapper.js

@@ -12,6 +12,14 @@ export default class ErrorWrapper implements BaseWrapper {
     throwError(`find did not return ${this.selector}, cannot call at() on empty Wrapper`)
   }
 
+  attributes (): void {
+    throwError(`find did not return ${this.selector}, cannot call attributes() on empty Wrapper`)
+  }
+
+  classes (): void {
+    throwError(`find did not return ${this.selector}, cannot call classes() on empty Wrapper`)
+  }
+
   contains (): void {
     throwError(`find did not return ${this.selector}, cannot call contains() on empty Wrapper`)
   }
@@ -72,6 +80,10 @@ export default class ErrorWrapper implements BaseWrapper {
     throwError(`find did not return ${this.selector}, cannot call name() on empty Wrapper`)
   }
 
+  props (): void {
+    throwError(`find did not return ${this.selector}, cannot call props() on empty Wrapper`)
+  }
+
   text (): void {
     throwError(`find did not return ${this.selector}, cannot call text() on empty Wrapper`)
   }

src/wrappers/wrapper-array.js

@@ -20,6 +20,18 @@ export default class WrapperArray implements BaseWrapper {
     return this.wrappers[index]
   }
 
+  attributes (): void {
+    this.throwErrorIfWrappersIsEmpty('attributes')
+
+    throwError('attributes must be called on a single wrapper, use at(i) to access a wrapper')
+  }
+
+  classes (): void {
+    this.throwErrorIfWrappersIsEmpty('classes')
+
+    throwError('classes must be called on a single wrapper, use at(i) to access a wrapper')
+  }
+
   contains (selector: Selector): boolean {
     this.throwErrorIfWrappersIsEmpty('contains')
 
@@ -107,6 +119,12 @@ export default class WrapperArray implements BaseWrapper {
     throwError('name must be called on a single wrapper, use at(i) to access a wrapper')
   }
 
+  props (): void {
+    this.throwErrorIfWrappersIsEmpty('props')
+
+    throwError('props must be called on a single wrapper, use at(i) to access a wrapper')
+  }
+
   text (): void {
     this.throwErrorIfWrappersIsEmpty('text')
 

src/wrappers/wrapper.js

@@ -33,6 +33,38 @@ export default class Wrapper implements BaseWrapper {
     throwError('at() must be called on a WrapperArray')
   }
 
+  /**
+   * Returns an Object containing all the attribute/value pairs on the element.
+   */
+  attributes (): { [name: string]: string } {
+    const attributes = [...this.element.attributes] // NameNodeMap is not iterable
+    const attributeMap = {}
+    attributes.forEach((att) => {
+      attributeMap[att.localName] = att.value
+    })
+    return attributeMap
+  }
+
+  /**
+   * Returns an Array containing all the classes on the element
+   */
+  classes (): Array<string> {
+    let classes = [...this.element.classList]
+    // Handle converting cssmodules identifiers back to the original class name
+    if (this.vm && this.vm.$style) {
+      const cssModuleIdentifiers = {}
+      let moduleIdent
+      Object.keys(this.vm.$style).forEach((key) => {
+        moduleIdent = this.vm.$style[key]
+        // CSS Modules may be multi-class if they extend others. Extended classes should be already present in $style.
+        moduleIdent = moduleIdent.split(' ')[0]
+        cssModuleIdentifiers[moduleIdent] = key
+      })
+      classes = classes.map(className => cssModuleIdentifiers[className] || className)
+    }
+    return classes
+  }
+
   /**
    * Checks if wrapper contains provided selector.
    */
@@ -309,6 +341,23 @@ export default class Wrapper implements BaseWrapper {
     return this.vnode.tag
   }
 
+  /**
+   * Returns an Object containing the prop name/value pairs on the element
+   */
+  props (): { [name: string]: any } {
+    if (!this.isVueComponent) {
+      throwError('wrapper.props() must be called on a Vue instance')
+    }
+    // $props object does not exist in Vue 2.1.x, so use $options.propsData instead
+    let _props
+    if (this.vm && this.vm.$options && this.vm.$options.propsData) {
+      _props = this.vm.$options.propsData
+    } else {
+      _props = this.vm.$props
+    }
+    return _props || {} // Return an empty object if no props exist
+  }
+
   /**
    * Sets vm data
    */

test/resources/components/component-with-css-modules.vue

@@ -1,11 +1,16 @@
 <template>
-  <div :class="$style['color-red']"></div>
+    <div :class="$style['extension']"></div>
 </template>
 
 <style module>
   .color-red {
     color: red;
   }
+
+  .extension {
+    composes: color-red;
+    background: blue;
+  }
 </style>
 
 <script>

test/unit/specs/mount/Wrapper/attributes.spec.js

@@ -0,0 +1,25 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+
+describe('attributes', () => {
+  it('returns true if wrapper contains attribute matching value', () => {
+    const attribute = 'attribute'
+    const value = 'value'
+    const compiled = compileToFunctions(`<div ${attribute}=${value}></div>`)
+    const wrapper = mount(compiled)
+    expect(wrapper.attributes()).to.eql({ attribute: value })
+  })
+
+  it('returns empty object if wrapper does not contain any attributes', () => {
+    const compiled = compileToFunctions('<div />')
+    const wrapper = mount(compiled)
+    expect(wrapper.attributes()).to.eql({})
+  })
+
+  it('returns empoty object if wrapper element is null', () => {
+    const compiled = compileToFunctions('<div />')
+    const wrapper = mount(compiled)
+    wrapper.element = null
+    expect(wrapper.attributes()).to.eql({})
+  })
+})

test/unit/specs/mount/Wrapper/classes.spec.js

@@ -0,0 +1,24 @@
+
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+import ComponentWithCssModules from '~resources/components/component-with-css-modules.vue'
+
+describe('classes', () => {
+  it('returns array of class names if wrapper has class names', () => {
+    const compiled = compileToFunctions('<div class="a-class b-class" />')
+    const wrapper = mount(compiled)
+    expect(wrapper.classes()).to.eql(['a-class', 'b-class'])
+  })
+
+  it('returns empty array if wrapper has no classes', () => {
+    const compiled = compileToFunctions('<div />')
+    const wrapper = mount(compiled)
+    expect(wrapper.classes()).to.eql([])
+  })
+
+  it('returns original class names when element mapped in css modules', () => {
+    const wrapper = mount(ComponentWithCssModules)
+
+    expect(wrapper.classes()).to.eql(['extension', 'color-red'])
+  })
+})

test/unit/specs/mount/Wrapper/props.spec.js

@@ -0,0 +1,28 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+import ComponentWithProps from '~resources/components/component-with-props.vue'
+
+describe('props', () => {
+  it('returns true if wrapper has prop', () => {
+    const prop1 = {}
+    const prop2 = 'string val'
+    const wrapper = mount(ComponentWithProps, {
+      propsData: { prop1, prop2 }
+    })
+    expect(wrapper.props()).to.eql({ prop1: {}, prop2: 'string val' })
+  })
+
+  it('returns an empty object if wrapper does not have props', () => {
+    const compiled = compileToFunctions('<div />')
+    const wrapper = mount(compiled)
+    expect(wrapper.props()).to.eql({})
+  })
+
+  it('throws an error if called on a non vm wrapper', () => {
+    const compiled = compileToFunctions('<div><p /></div>')
+    const p = mount(compiled).findAll('p').at(0)
+    const message = '[vue-test-utils]: wrapper.props() must be called on a Vue instance'
+    const fn = () => p.props()
+    expect(fn).to.throw().with.property('message', message)
+  })
+})

test/unit/specs/mount/WrapperArray/attributes.spec.js

@@ -0,0 +1,18 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+
+describe('attributes', () => {
+  it('throws error if wrapper array contains no items', () => {
+    const compiled = compileToFunctions('<div />')
+    const message = '[vue-test-utils]: attributes cannot be called on 0 items'
+    expect(() => mount(compiled).findAll('p').attributes('p')).to.throw().with.property('message', message)
+  })
+
+  it('throws error when called on a WrapperArray', () => {
+    const compiled = compileToFunctions('<div><div /></div>')
+    const wrapper = mount(compiled)
+    const message = '[vue-test-utils]: attributes must be called on a single wrapper, use at(i) to access a wrapper'
+    const fn = () => wrapper.findAll('div').attributes()
+    expect(fn).to.throw().with.property('message', message)
+  })
+})

test/unit/specs/mount/WrapperArray/classes.spec.js

@@ -0,0 +1,18 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+
+describe('classes', () => {
+  it('throws error if wrapper array contains no items', () => {
+    const compiled = compileToFunctions('<div />')
+    const message = '[vue-test-utils]: classes cannot be called on 0 items'
+    expect(() => mount(compiled).findAll('p').classes('p')).to.throw().with.property('message', message)
+  })
+
+  it('throws error when called on a WrapperArray', () => {
+    const compiled = compileToFunctions('<div><div /></div>')
+    const wrapper = mount(compiled)
+    const message = '[vue-test-utils]: classes must be called on a single wrapper, use at(i) to access a wrapper'
+    const fn = () => wrapper.findAll('div').classes()
+    expect(fn).to.throw().with.property('message', message)
+  })
+})

test/unit/specs/mount/WrapperArray/props.spec.js

@@ -0,0 +1,18 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+
+describe('props', () => {
+  it('throws error if wrapper array contains no items', () => {
+    const compiled = compileToFunctions('<div />')
+    const message = '[vue-test-utils]: props cannot be called on 0 items'
+    expect(() => mount(compiled).findAll('p').props('p')).to.throw().with.property('message', message)
+  })
+
+  it('throws error when called on a WrapperArray', () => {
+    const compiled = compileToFunctions('<div><div /></div>')
+    const wrapper = mount(compiled)
+    const message = '[vue-test-utils]: props must be called on a single wrapper, use at(i) to access a wrapper'
+    const fn = () => wrapper.findAll('div').props()
+    expect(fn).to.throw().with.property('message', message)
+  })
+})