test: add css module tests

Author: haoqunjiang

test/advanced.spec.ts

@@ -147,7 +147,53 @@ test('extract CSS with code spliting', async () => {
   expect(mfs.existsSync('/basic.test.output.css')).toBe(true)
 })
 
-test.todo('support rules with oneOf')
+test('support rules with oneOf', async () => {
+  const run = (entry: string) => {
+    return mockBundleAndRun({
+      entry,
+      modify: (config: any) => {
+        config!.module!.rules = [
+          { test: /\.vue$/, loader: 'vue-loader' },
+          {
+            test: /\.css$/,
+            use: 'style-loader',
+            oneOf: [
+              {
+                resourceQuery: /module/,
+                use: [
+                  {
+                    loader: 'css-loader',
+                    options: {
+                      modules: {
+                        localIdentName: '[local]_[hash:base64:5]',
+                      },
+                    },
+                  },
+                ],
+              },
+              {
+                use: ['css-loader'],
+              },
+            ],
+          },
+        ]
+      },
+    })
+  }
+
+  const { window: window1 } = await run('basic.vue')
+  let style = normalizeNewline(
+    window1.document.querySelector('style')!.textContent!
+  )
+  expect(style).toContain('comp-a h2 {\n  color: #f00;\n}')
+
+  const { window, instance } = await run('css-modules-simple.vue')
+
+  const className = instance.$style.red
+  expect(className).toMatch(/^red_\w{5}/)
+  style = normalizeNewline(window.document.querySelector('style')!.textContent!)
+  expect(style).toContain('.' + className + ' {\n  color: red;\n}')
+})
 
 test.todo('should work with eslint loader')
 

test/edgeCases.spec.ts

@@ -60,7 +60,33 @@ test('normalize multiple use + options', async () => {
   })
 })
 
-test.todo('should not duplicate css modules value imports')
+test('should not duplicate css modules value imports', async () => {
+  const { window, exports } = await mockBundleAndRun({
+    entry: './test/fixtures/duplicate-cssm.js',
+    modify: (config: any) => {
+      config!.module!.rules[1] = {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      }
+    },
+  })
+
+  const styles = window.document.querySelectorAll('style')
+  expect(styles.length).toBe(2) // one for values, one for the component
+  const style = normalizeNewline(styles[1]!.textContent!)
+  // value should be injected
+  expect(style).toMatch('color: red;')
+  // exports is set as the locals imported from values.css
+  expect(exports.color).toBe('red')
+})
 
 // #1213
 test.todo('html-webpack-plugin')

test/fixtures/css-modules-extend.vue

@@ -0,0 +1,17 @@
+<style module>
+.red {
+  color: #FF0000;
+}
+</style>
+
+<script>
+import CssModuleSimple from './css-modules-simple.vue'
+
+export default {
+  extends: CssModuleSimple
+}
+</script>
+
+<template>
+  <div :class="$style.red"></div>
+</template>

test/fixtures/css-modules-simple.vue

@@ -0,0 +1,9 @@
+<style module>
+.red {
+  color: red;
+}
+</style>
+
+<script>
+export default {}
+</script>

test/fixtures/css-modules.vue

@@ -0,0 +1,20 @@
+<style module="style">
+.red {
+  color: red;
+}
+@keyframes fade {
+  from { opacity: 1; } to { opacity: 0; }
+}
+.animate {
+  animation: fade 1s;
+}
+</style>
+
+<style lang="stylus" module scoped>
+.red
+  color: red
+</style>
+
+<script>
+export default {}
+</script>

test/fixtures/duplicate-cssm.css

@@ -0,0 +1 @@
+@value color: red;

test/fixtures/duplicate-cssm.js

@@ -0,0 +1,7 @@
+import values from './duplicate-cssm.css'
+import Comp from './duplicate-cssm.vue'
+
+export { values }
+export default Comp
+
+window.exports = values

test/fixtures/duplicate-cssm.vue

@@ -0,0 +1,11 @@
+<template>
+  <h1 :class="$style.red">hi</h1>
+</template>
+
+<style module>
+@value color from './duplicate-cssm.css';
+
+.red {
+  color: color;
+}
+</style>

test/style.spec.ts

@@ -86,8 +86,111 @@ test('postcss', async () => {
   expect(style).toContain(`h1[${id}] {\n  color: red;\n  font-size: 14px\n}`)
 })
 
-test.todo('CSS Modules')
+test('CSS Modules', async () => {
+  const testWithIdent = async (
+    localIdentName: string | undefined,
+    regexToMatch: RegExp
+  ) => {
+    const baseLoaders = [
+      'style-loader',
+      {
+        loader: 'css-loader',
+        options: {
+          modules: {
+            localIdentName,
+          },
+        },
+      },
+    ]
+
+    const { window, instance } = await mockBundleAndRun({
+      entry: 'css-modules.vue',
+      modify: (config: any) => {
+        config!.module!.rules = [
+          {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+          },
+          {
+            test: /\.css$/,
+            use: baseLoaders,
+          },
+          {
+            test: /\.stylus$/,
+            use: [...baseLoaders, 'stylus-loader'],
+          },
+        ]
+      },
+    })
+
+    // get local class name
+    const className = instance.$style.red
+    expect(className).toMatch(regexToMatch)
+
+    // class name in style
+    let style = [].slice
+      .call(window.document.querySelectorAll('style'))
+      .map((style: any) => {
+        return style!.textContent
+      })
+      .join('\n')
+    style = normalizeNewline(style)
+    expect(style).toContain('.' + className + ' {\n  color: red;\n}')
+
+    // animation name
+    const match = style.match(/@keyframes\s+(\S+)\s+{/)
+    expect(match).toHaveLength(2)
+    const animationName = match[1]
+    expect(animationName).not.toBe('fade')
+    expect(style).toContain('animation: ' + animationName + ' 1s;')
+
+    // default module + pre-processor + scoped
+    const anotherClassName = instance.$style.red
+    expect(anotherClassName).toMatch(regexToMatch)
+    const id = 'data-v-' + genId('css-modules.vue')
+    expect(style).toContain('.' + anotherClassName + '[' + id + ']')
+  }
+
+  // default ident
+  await testWithIdent(undefined, /^\w{21,}/)
+
+  // custom ident
+  await testWithIdent(
+    '[path][name]---[local]---[hash:base64:5]',
+    /css-modules---red---\w{5}/
+  )
+})
 
-test.todo('CSS Modules Extend')
+test('CSS Modules Extend', async () => {
+  const baseLoaders = [
+    'style-loader',
+    {
+      loader: 'css-loader',
+      options: {
+        modules: true,
+      },
+    },
+  ]
+
+  const { window, instance } = await mockBundleAndRun({
+    entry: 'css-modules-extend.vue',
+    modify: (config: any) => {
+      config!.module!.rules = [
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+        },
+        {
+          test: /\.css$/,
+          use: baseLoaders,
+        },
+      ]
+    },
+  })
+
+  expect(instance.$el.className).toBe(instance.$style.red)
+  const style = window.document.querySelectorAll('style')![1]!.textContent
+  expect(style).toContain(`.${instance.$style.red} {\n  color: #FF0000;\n}`)
+})
 
 test.todo('experimental <style vars>')