test: add e2e test setup

Author: znck

.github/workflows/ci.yaml

@@ -40,3 +40,32 @@ jobs:
         with:
           name: coverage
           path: coverage/
+
+  e2e:
+    name: E2E tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node_modules cache
+        uses: actions/cache@v1
+        env:
+          cache-name: yarn
+        with:
+          path: .yarn
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+
+      - name: Install yarn
+        run: hash yarn 2>/dev/null || curl -s -L https://yarnpkg.com/install.sh | sudo node
+
+      - name: Install dependencies and build packages
+        run: |
+          yarn config set cache-folder $(pwd)/.yarn
+          yarn install --frozen-lockfile
+          yarn run build
+
+      - name: Run unit tests
+        run: yarn test:e2e

examples/css-modules/rollup.config.js

@@ -1,6 +1,6 @@
 import VuePlugin from 'rollup-plugin-vue'
-import postcss from 'rollup-plugin-postcss'
-import resolve from '@rollup/plugin-node-resolve'
+import PostCSS from 'rollup-plugin-postcss'
+import NodeResolve from '@rollup/plugin-node-resolve'
 
 /** @type {import('rollup').RollupOptions[]} */
 const config = [
@@ -12,15 +12,19 @@ const config = [
       sourcemap: 'inline',
     },
     plugins: [
-      resolve(),
+      // Resolve packages from `node_modules` e.g. `style-inject` module
+      // used by `rollup-plugin-postcss` to inline CSS.
+      NodeResolve(),
       VuePlugin(),
-      postcss({
+      // Process only `<style module>` blocks.
+      PostCSS({
         modules: {
           generateScopedName: '[local]___[hash:base64:5]',
         },
         include: /&module=.*\.css$/,
       }),
-      postcss({ include: /(?<!&module=.*)\.css$/ }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
     ],
     external(id) {
       return /^(vue)$/.test(id)

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   rootDir: __dirname,
   testEnvironment: 'node',
   transform: {
-    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.(ts|js)$': 'ts-jest',
   },
   coveragePathIgnorePatterns: ['.*\\.spec\\.ts'],
   globals: {

jest.e2e.config.js

@@ -0,0 +1,6 @@
+const config = require('./jest.config')
+
+module.exports = {
+  ...config,
+  testMatch: ['**/*.e2e.ts'],
+}

package.json

@@ -12,7 +12,9 @@
     "build": "tsc -p .",
     "prepublishOnly": "tsc -p .",
     "dev": "tsc -w -p .",
-    "test:unit": "jest"
+    "test": "run-p test:*",
+    "test:unit": "jest",
+    "test:e2e": "jest --config jest.e2e.config.js"
   },
   "dependencies": {
     "debug": "^4.1.1",
@@ -30,6 +32,7 @@
     "husky": "^4.2.0",
     "jest": "^26.0.1",
     "lint-staged": "^10.1.7",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "rollup": "^2.7.2",
     "ts-jest": "^26.0.0",

test/core.e2e.ts

@@ -0,0 +1,71 @@
+import { rollup, RollupOutput, RollupWarning } from 'rollup'
+
+describe('simple', () => {
+  let result!: RollupOutput
+
+  beforeAll(async () => {
+    result = await roll('simple')
+  })
+
+  it('should compile <template>', () => {
+    expect(result.output[0].code).toEqual(expect.stringContaining('.render ='))
+  })
+})
+
+describe('css-modules', () => {
+  let result!: RollupOutput
+
+  beforeAll(async () => {
+    result = await roll('css-modules')
+  })
+
+  it('should process <style module> blocks', () => {
+    expect(result.output[0].code).toEqual(
+      expect.stringContaining('cssModules["$style"] =')
+    )
+    expect(result.output[0].code).not.toEqual(
+      expect.stringContaining('.red {\n  color: red;\n}')
+    )
+    expect(result.output[0].code).toEqual(expect.stringContaining('._red_'))
+    expect(result.output[0].code).toEqual(
+      expect.stringContaining('{"red":"_red_')
+    )
+  })
+
+  it('should process <style scoped> blocks', () => {
+    expect(result.output[0].code).toEqual(
+      expect.stringContaining('.__scopeId = "data-v-')
+    )
+    expect(result.output[0].code).not.toEqual(
+      expect.stringContaining('.green {\n  color: red;\n}')
+    )
+    expect(result.output[0].code).toEqual(
+      expect.stringContaining('.green[data-v-')
+    )
+  })
+})
+
+import Path from 'path'
+async function roll(name: string) {
+  const configFile = `../examples/${name}/rollup.config.js`
+  const configModule = require(configFile)
+  const configs = configModule.__esModule ? configModule.default : configModule
+  const config = Array.isArray(configs) ? configs[0] : configs
+
+  config.input = Path.resolve(__dirname, Path.dirname(configFile), config.input)
+  delete config.output
+
+  config.onwarn = function (warning: RollupWarning, warn: Function) {
+    switch (warning.code) {
+      case 'UNUSED_EXTERNAL_IMPORT':
+        return
+      default:
+        warning.message = `(${name}) ${warning.message}`
+        warn(warning)
+    }
+  }
+
+  const bundle = await rollup(config)
+
+  return bundle.generate({ format: 'esm' })
+}

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src", "types"],
+  "include": ["src", "types", "test"],
   "exclude": ["**/*.spec.ts"],
   "compilerOptions": {
     "target": "esnext",
@@ -11,6 +11,7 @@
     "rootDir": "src",
     "outDir": "dist",
     "strict": true,
+    "allowJs": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,