test: finish migrating core tests from v15

Author: haoqunjiang

Diff for: test/core.spec.ts

@@ -1,4 +1,4 @@
-import { mockBundleAndRun, normalizeNewline } from './utils'
+import { mockBundleAndRun, normalizeNewline, genId } from './utils'
 
 test('basic', async () => {
   const { window, instance, componentModule } = await mockBundleAndRun({
@@ -61,12 +61,111 @@ test('pre-processors', async () => {
   expect(componentModule.data().msg).toContain('Hello from Babel')
 
   // style
-  const style = window.document.querySelector('style')!.textContent!
+  const style = normalizeNewline(
+    window.document.querySelector('style')!.textContent!
+  )
   expect(style).toContain(
     'body {\n  font: 100% Helvetica, sans-serif;\n  color: #999;\n}'
   )
 })
 
+test('style import', async () => {
+  const { window } = await mockBundleAndRun({
+    entry: 'style-import.vue',
+  })
+
+  const styles = window.document.querySelectorAll('style')
+  expect(styles[0].textContent).toContain('h1 { color: red;\n}')
+
+  // import with scoped
+  const id = 'data-v-' + genId('style-import.vue')
+  expect(styles[1].textContent).toContain('h1[' + id + '] { color: green;\n}')
+})
+
+test('style import for a same file twice', async () => {
+  const { window } = await mockBundleAndRun({
+    entry: 'style-import-twice.vue',
+  })
+
+  const styles = window.document.querySelectorAll('style')
+  expect(styles.length).toBe(3)
+  expect(styles[0].textContent).toContain('h1 { color: red;\n}')
+
+  // import with scoped
+  const id = 'data-v-' + genId('style-import-twice-sub.vue')
+  expect(styles[1].textContent).toContain('h1[' + id + '] { color: green;\n}')
+  const id2 = 'data-v-' + genId('style-import-twice.vue')
+  expect(styles[2].textContent).toContain('h1[' + id2 + '] { color: green;\n}')
+})
+
+test('template import', async () => {
+  const { instance } = await mockBundleAndRun({
+    entry: 'template-import.vue',
+  })
+
+  const el: Element = instance.$el
+  // '<div><h1>hello</h1></div>'
+  expect(el.children[0].tagName).toBe('H1')
+  expect(el.children[0].textContent).toBe('hello')
+})
+
+test('template import with pre-processors', async () => {
+  const { instance } = await mockBundleAndRun({
+    entry: 'template-import-pre.vue',
+    module: {
+      rules: [
+        {
+          test: /\.pug$/,
+          loader: 'pug-plain-loader',
+        },
+      ],
+    },
+  })
+
+  const el: Element = instance.$el
+  // '<div><h1>hello</h1></div>'
+  expect(el.children[0].tagName).toBe('H1')
+  expect(el.children[0].textContent).toBe('hello')
+})
+
+test('script import', async () => {
+  const { componentModule } = await mockBundleAndRun({
+    entry: 'script-import.vue',
+  })
+  expect(componentModule.data().msg).toContain('Hello from Component A!')
+})
+
+// #1620
+test('cloned rules should not intefere with each other', async () => {
+  await mockBundleAndRun({
+    entry: 'basic.vue',
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {},
+            },
+          ],
+        },
+        {
+          test: /\.some-random-extension$/,
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                url: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  })
+})
+
 test('script setup', async () => {
   await mockBundleAndRun({ entry: 'ScriptSetup.vue' })
 })

Diff for: test/fixtures/script-import.js

@@ -0,0 +1,7 @@
+export default {
+  data() {
+    return {
+      msg: 'Hello from Component A!',
+    }
+  },
+}

Diff for: test/fixtures/script-import.vue

@@ -0,0 +1 @@
+<script src="./script-import.js"></script>

Diff for: test/fixtures/style-import-scoped.css

@@ -0,0 +1 @@
+h1 { color: green; }

Diff for: test/fixtures/style-import-twice-sub.vue

@@ -0,0 +1,3 @@
+<template><div></div></template>
+<style src="./style-import.css"></style>
+<style src="./style-import-scoped.css" scoped></style>

Diff for: test/fixtures/style-import-twice.vue

@@ -0,0 +1,9 @@
+<template><SubComponent></SubComponent></template>
+<style src="./style-import.css"></style>
+<style src="./style-import-scoped.css" scoped></style>
+<script>
+import SubComponent from './style-import-twice-sub.vue'
+export default {
+  components: { SubComponent }
+}
+</script>

Diff for: test/fixtures/style-import.css

@@ -0,0 +1 @@
+h1 { color: red; }

Diff for: test/fixtures/style-import.vue

@@ -0,0 +1,2 @@
+<style src="./style-import.css"></style>
+<style src="./style-import-scoped.css" scoped></style>

Diff for: test/fixtures/template-import-pre.vue

@@ -0,0 +1 @@
+<template lang="pug" src="./template-import.pug"></template>

Diff for: test/fixtures/template-import.html

@@ -0,0 +1,3 @@
+<div>
+  <h1>hello</h1>
+</div>

Diff for: test/fixtures/template-import.pug

@@ -0,0 +1,2 @@
+div
+  h1 hello

Diff for: test/fixtures/template-import.vue

@@ -0,0 +1 @@
+<template src="./template-import.html"></template>

Diff for: test/utils.ts

@@ -2,6 +2,7 @@
 import path from 'path'
 import webpack from 'webpack'
 import merge from 'webpack-merge'
+import hash from 'hash-sum'
 // import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { fs as mfs } from 'memfs'
 
@@ -173,3 +174,9 @@ export async function mockBundleAndRun(
 export function normalizeNewline(input: string): string {
   return input.replace(new RegExp('\r\n', 'g'), '\n')
 }
+
+// see the logic at src/index.ts
+// in non-production environment, shortFilePath is used to generate scope id
+export function genId(fixtureName: string): string {
+  return hash(path.join('test', 'fixtures', fixtureName).replace(/\\/g, '/'))
+}