fix: fix template for shadowdom and cssmodule

3cp · 3cp · commit 8ea024807987 · 2019-09-02T14:32:55.000+10:00
diff --git a/app-min/cypress__if_cypress/integration/app.e2e.js b/app-min/cypress__if_cypress/integration/app.e2e.js
@@ -3,6 +3,11 @@
 context('The app', () => {
   it('shows message', () => {
     cy.visit('/');
-    cy.get('app>div').contains('Hello World!');
+    // @if shadow-dom-open || shadow-dom-closed
+    cy.shadowGet('my-app').shadowFind('div').shadowContains('Hello World!');
+    // @endif
+    // @if !shadow-dom-open && !shadow-dom-closed
+    cy.get('my-app>div').contains('Hello World!');
+    // @endif
   });
 });
diff --git a/app-min/src/app.html b/app-min/src/app.html
diff --git a/app-min/src/my-app.css b/app-min/src/my-app.css
@@ -0,0 +1,3 @@
+.message {
+  background-color: lightblue;
+}
diff --git a/app-min/src/my-app.ext b/app-min/src/my-app.ext
@@ -1,3 +1,3 @@
-export class App {
+export class MyApp {
   message = 'Hello World!';
 }
diff --git a/app-min/src/my-app.html b/app-min/src/my-app.html
@@ -0,0 +1,3 @@
+<template>
+  <div class="message">${message}</div>
+</template>
diff --git a/browserify/index.html b/browserify/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <app></app>
+  <my-app></my-app>
   <script src="/dist/bundle.js"></script>
 </body>
 
diff --git a/cypress/cypress/support/commands.js b/cypress/cypress/support/commands.js
@@ -23,3 +23,7 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+// @if shadow-dom-open || shadow-dom-closed
+import 'cypress-shadow-dom';
+// @endif
diff --git a/cypress/package.json b/cypress/package.json
@@ -2,7 +2,10 @@
   "devDependencies": {
     "cypress": "^3.0.0",
     "babel-eslint": "^10.0.0",
-    "eslint": "^6.0.0"
+    "eslint": "^6.0.0",
+    // @if shadow-dom-open || shadow-dom-closed
+    "cypress-shadow-dom": "^1.0.0",
+    // @endif
   },
   "scripts": {
     "test:e2e": "cypress run"
diff --git a/dumber/_index.html b/dumber/_index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <app></app>
+  <my-app></my-app>
   <script src="/dist/entry-bundle.js" data-main="main"></script>
 </body>
 
diff --git a/e2e-test.js b/e2e-test.js
@@ -80,15 +80,23 @@ async function takeScreenshot(url, filePath) {
 
 const skeletons = [
   'webpack babel app-min cypress',
+  'webpack babel shadow-dom-open app-min cypress',
+  'webpack babel css-module app-min cypress',
   'webpack typescript app-min cypress',
+  'webpack typescript shadow-dom-closed app-min cypress',
+  'webpack typescript css-module app-min cypress',
   // 'parcel babel app-min cypress',
   // 'parcel typescript app-min cypress',
   // 'browserify babel app-min cypress',
   // 'browserify typescript app-min cypress',
   // 'fuse-box babel app-min cypress',
   // 'fuse-box typescript app-min cypress',
   'dumber babel app-min cypress',
-  'dumber typescript app-min cypress'
+  'dumber babel shadow-dom-closed app-min cypress',
+  'dumber babel css-module app-min cypress',
+  'dumber typescript app-min cypress',
+  'dumber typescript shadow-dom-open app-min cypress',
+  'dumber typescript css-module app-min cypress'
 ];
 
 function getServerRegex(features) {
diff --git a/fuse-box/index.html b/fuse-box/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <app></app>
+  <my-app></my-app>
   $bundles
 </body>
 
diff --git a/parcel/index.html b/parcel/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <app></app>
+  <my-app></my-app>
   <!-- @if babel -->
   <script src="src/main.js"></script>
   <!-- @endif -->
diff --git a/webpack/index.ejs b/webpack/index.ejs
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <app></app>
+  <my-app></my-app>
 </body>
 
 </html>
diff --git a/webpack/package.json b/webpack/package.json
@@ -5,6 +5,9 @@
     "webpack-cli": "^3.0.0",
     "webpack-dev-server": "^3.0.0",
     "html-webpack-plugin": "^3.0.0",
+    // @if shadow-dom-open || shadow-dom-closed
+    "raw-loader": "^3.0.0",
+    // @endif
     "style-loader": "^0.23.0",
     "css-loader": "^3.0.0",
     "@aurelia/webpack-loader": "dev",
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -28,7 +28,12 @@ module.exports = function(env, { mode }) {
     },
     module: {
       rules: [
+        // @if !css-module
         { test: /\.css$/i, use: ["style-loader", "css-loader"] },
+        // @endif
+        // @if css-module
+        { test: /\.css$/i, use: ["style-loader", { loader: "css-loader", options: { modules: true } }] },
+        // @endif
         // @if babel
         { test: /\.js$/i, use: ['babel-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
         // @endif

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.message {`
	`2`	`+ background-color: lightblue;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-export class App {`
	`1`	`+export class MyApp {`
`2`	`2`	`message = 'Hello World!';`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <div class="message">${message}</div>`
	`3`	`+</template>`