test: add test for styles

haoqunjiang · haoqunjiang · commit 3c669e8277e0 · 2020-09-15T19:43:39.000+08:00
diff --git a/package.json b/package.json
@@ -55,9 +55,11 @@
     "lint-staged": "^10.3.0",
     "memfs": "^3.1.2",
     "mini-css-extract-plugin": "^0.11.2",
+    "normalize-newline": "^3.0.0",
     "prettier": "^2.1.1",
     "pug": "^2.0.0",
     "pug-plain-loader": "^1.0.0",
+    "style-loader": "^1.2.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "ts-jest": "^26.2.0",
diff --git a/test/core.spec.ts b/test/core.spec.ts
@@ -1,12 +1,17 @@
-import { mockBundleAndRun } from './utils'
+import { mockBundleAndRun, normalizeNewline } from './utils'
 
 test('basic', async () => {
-  const { instance } = await mockBundleAndRun({ entry: 'basic.vue' })
+  const { window, instance } = await mockBundleAndRun({ entry: 'basic.vue' })
 
   // <h2 class="red">{{msg}}</h2>
   expect(instance.$el.tagName).toBe('H2')
   expect(instance.$el.className).toBe('red')
   expect(instance.$el.textContent).toBe('Hello from Component A!')
+
+  const style = normalizeNewline(
+    window.document.querySelector('style')!.textContent!
+  )
+  expect(style).toContain('comp-a h2 {\n  color: #f00;\n}')
 })
 
 test('script setup', async () => {
diff --git a/test/utils.ts b/test/utils.ts
@@ -2,7 +2,7 @@
 import path from 'path'
 import webpack from 'webpack'
 import merge from 'webpack-merge'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+// import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { fs as mfs } from 'memfs'
 
 import { JSDOM, VirtualConsole } from 'jsdom'
@@ -37,10 +37,11 @@ const baseConfig: webpack.Configuration = {
       {
         test: /\.css$/,
         use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: { hmr: true },
-          },
+          // {
+          //   loader: MiniCssExtractPlugin.loader,
+          //   options: { hmr: true },
+          // },
+          'style-loader',
           'css-loader',
         ],
       },
@@ -52,9 +53,9 @@ const baseConfig: webpack.Configuration = {
       __VUE_OPTIONS_API__: true,
       __VUE_PROD_DEVTOOLS__: false,
     }),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
+    // new MiniCssExtractPlugin({
+    //   filename: '[name].css',
+    // }),
   ],
 }
 
@@ -142,7 +143,7 @@ export async function mockBundleAndRun(
 
   let jsdomError
   const dom = new JSDOM(
-    `<!DOCTYPE html><html><head></head><body></body></html>`,
+    `<!DOCTYPE html><html><head></head><body><div id="#app"></div></body></html>`,
     {
       runScripts: 'outside-only',
       virtualConsole: new VirtualConsole(),
@@ -171,3 +172,7 @@ export async function mockBundleAndRun(
     jsdomError,
   }
 }
+
+export function normalizeNewline(input: string): string {
+  return input.replace(new RegExp('\r\n', 'g'), '\n')
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -14,13 +14,14 @@
     "strictNullChecks": true,
     "noImplicitAny": true,
     "removeComments": false,
-    "skipLibCheck": true,
     "lib": [
       "es6",
-      "es7"
+      "es7",
+      "DOM"
     ]
   },
   "include": [
-    "src"
+    "src",
+    "test"
   ]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -5648,6 +5648,11 @@ node-releases@^1.1.61:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
   integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
 
+normalize-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-newline/-/normalize-newline-3.0.0.tgz#1cbea804aba436001f83938ab21ec039d69ae9d3"
+  integrity sha1-HL6oBKukNgAfg5OKsh7AOdaa6dM=
+
 normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -6846,7 +6851,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.7.1:
+schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -7416,6 +7421,14 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
+style-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
+  integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
+
 stylus-loader@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"

Original file line number	Diff line number	Diff line change
`@@ -14,13 +14,14 @@`
`14`	`14`	`"strictNullChecks": true,`
`15`	`15`	`"noImplicitAny": true,`
`16`	`16`	`"removeComments": false,`
`17`		`- "skipLibCheck": true,`
`18`	`17`	`"lib": [`
`19`	`18`	`"es6",`
`20`		`- "es7"`
	`19`	`+ "es7",`
	`20`	`+ "DOM"`
`21`	`21`	`]`
`22`	`22`	`},`
`23`	`23`	`"include": [`
`24`		`- "src"`
	`24`	`+ "src",`
	`25`	`+ "test"`
`25`	`26`	`]`
`26`	`27`	`}`