feat: add support for CSS modules in hasClass (#106)

* Added support for $style in hasClass

Checks the className against $style where available.

* Reworked to not redefine variables

* Added unit test

* Linting fixes

* Fixed unit test

Author: nblackburn

src/wrappers/wrapper.js

@@ -98,11 +98,18 @@ export default class Wrapper implements BaseWrapper {
    * Asserts wrapper has a class name
    */
   hasClass (className: string) {
-    if (typeof className !== 'string') {
+    let targetClass = className
+
+    if (typeof targetClass !== 'string') {
       throwError('wrapper.hasClass() must be passed a string')
     }
 
-    return !!(this.element && this.element.classList.contains(className))
+    // if $style is available and has a matching target, use that instead.
+    if (this.vm && this.vm.$style && this.vm.$style[targetClass]) {
+      targetClass = this.vm.$style[targetClass]
+    }
+
+    return !!(this.element && this.element.classList.contains(targetClass))
   }
 
   /**

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

@@ -0,0 +1,15 @@
+<template>
+    <div :class="$style['color-red']"></div>
+</template>
+
+<style module>
+    .color-red {
+        color: red;
+    }
+</style>
+
+<script>
+    export default{
+      name: 'component-with-css-modules'
+    }
+</script>

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

@@ -1,3 +1,4 @@
+import ComponentWithCssModules from '~resources/components/component-with-css-modules.vue'
 import { compileToFunctions } from 'vue-template-compiler'
 import mount from '~src/mount'
 
@@ -39,4 +40,10 @@ describe('hasClass', () => {
       expect(fn).to.throw().with.property('message', message)
     })
   })
+
+  it('returns true when element contains class name mapped in css modules', () => {
+    const wrapper = mount(ComponentWithCssModules)
+
+    expect(wrapper.hasClass('color-red')).to.equal(true)
+  })
 })