fix(tests): re-enable sass/less/stylus tests (#1363)

Author: filipesilva

addon/ng2/blueprints/component/files/__path__/__name__.component.ts

@@ -10,7 +10,7 @@ import { Component, OnInit } from '@angular/core';
   `,<% } else { %>
   templateUrl: '<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['<%= dasherizedModuleName %>.component.css']<% } %>
+  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %>
 })
 export class <%= classifiedModuleName %>Component implements OnInit {
 

addon/ng2/blueprints/component/index.js

@@ -54,7 +54,8 @@ module.exports = {
       route: options.route,
       isLazyRoute: !!options.isLazyRoute,
       isAppComponent: !!options.isAppComponent,
-      selector: this.selector
+      selector: this.selector,
+      styleExt: this.styleExt
     };
   },
 

addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts

@@ -11,7 +11,7 @@ import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
   `,
   styles: [],
   directives: [APP_SHELL_DIRECTIVES]<% } else { %>templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']<% } %>
+  styleUrls: ['app.component.<%= styleExt %>']<% } %>
 })
 export class AppComponent {
   title = 'app works!';

addon/ng2/blueprints/ng2/files/package.json

@@ -47,6 +47,6 @@
     "ts-node": "0.9.1",
     "tslint": "3.11.0",
     "typescript": "^1.9.0-dev.20160627-1.0",
-    "typings": "^1.3.1"<%= stylePackage %>
+    "typings": "^1.3.1"
   }
 }

addon/ng2/blueprints/ng2/index.js

@@ -2,7 +2,6 @@ const Blueprint   = require('ember-cli/lib/models/blueprint');
 const path        = require('path');
 const stringUtils = require('ember-cli-string-utils');
 const getFiles = Blueprint.prototype.files;
-const EOL = require('os').EOL;
 
 module.exports = {
   description: '',
@@ -29,17 +28,6 @@ module.exports = {
     const fullAppName = stringUtils.dasherize(options.entity.name)
       .replace(/-(.)/g, (_, l) => ' ' + l.toUpperCase())
       .replace(/^./, (l) => l.toUpperCase());
-    
-    var stylePackage = '';
-    switch(options.style.toLowerCase()) {
-    case 'sass':
-    case 'scss':
-      stylePackage = `,${EOL}    "node-sass": "3.7.0"`;
-      break;
-    case 'styl':
-      stylePackage = `,${EOL}    "stylus": "0.54.5"`;
-      break; 
-    }
 
     return {
       htmlComponentName: stringUtils.dasherize(options.entity.name),
@@ -50,8 +38,7 @@ module.exports = {
       prefix: options.prefix,
       styleExt: this.styleExt,
       refToTypings: refToTypings,
-      isMobile: options.mobile,
-      stylePackage: stylePackage
+      isMobile: options.mobile
     };
   },
 

tests/e2e/e2e_workflow.spec.js

@@ -319,120 +319,93 @@ describe('Basic end-to-end Workflow', function () {
     expect(existsSync(tmpFileLocation)).to.be.equal(true);
   });
 
-  it.skip('Installs sass support successfully', function() {
+  // Mobile mode doesn't have styles
+  it_not_mobile('Supports scss in styleUrls', function() {
     this.timeout(420000);
 
-    sh.exec('npm install node-sass', { silent: true });
-    return ng(['generate', 'component', 'test-component'])
-    .then(() => {
-      let componentPath = path.join(process.cwd(), 'src', 'app', 'test-component');
-      let cssFile = path.join(componentPath, 'test-component.component.css');
-      let scssFile = path.join(componentPath, 'test-component.component.scss');
-      let scssPartialFile = path.join(componentPath, '_test-component.component.partial.scss');
-
-      let scssPartialExample = '.partial {\n @extend .outer;\n }';
-      fs.writeFileSync(scssPartialFile, scssPartialExample, 'utf8');
-      expect(existsSync(scssPartialFile)).to.be.equal(true);
-
-      expect(existsSync(componentPath)).to.be.equal(true);
-      sh.mv(cssFile, scssFile);
-      expect(existsSync(scssFile)).to.be.equal(true);
-      expect(existsSync(cssFile)).to.be.equal(false);
-      let scssExample = '@import "test-component.component.partial";\n\n.outer {\n  .inner { background: #fff; }\n }';
-      fs.writeFileSync(scssFile, scssExample, 'utf8');
-
-      sh.exec(`${ngBin} build`);
-      let destCss = path.join(process.cwd(), 'dist', 'app', 'test-component', 'test-component.component.css');
-      expect(existsSync(destCss)).to.be.equal(true);
-      let contents = fs.readFileSync(destCss, 'utf8');
-      expect(contents).to.include('.outer .inner');
-      expect(contents).to.include('.partial .inner');
-
-      sh.rm('-f', destCss);
-      process.chdir('src');
-      sh.exec(`${ngBin} build`);
-      expect(existsSync(destCss)).to.be.equal(true);
-      contents = fs.readFileSync(destCss, 'utf8');
-      expect(contents).to.include('.outer .inner');
-      expect(contents).to.include('.partial .inner');
-
-      process.chdir('..');
-      sh.exec('npm uninstall node-sass', { silent: true });
-    });
+    let cssFilename = 'app.component.css';
+    let scssFilename = 'app.component.scss';
+    let componentPath = path.join(process.cwd(), 'src', 'app');
+    let componentFile = path.join(componentPath, 'app.component.ts');
+    let cssFile = path.join(componentPath, cssFilename);
+    let scssFile = path.join(componentPath, scssFilename);
+    let scssExample = '@import "app.component.partial";\n\n.outer {\n  .inner { background: #fff; }\n }';
+    let scssPartialFile = path.join(componentPath, '_app.component.partial.scss');
+    let scssPartialExample = '.partial {\n @extend .outer;\n }';
+    let componentContents = fs.readFileSync(componentFile, 'utf8');
+
+    sh.mv(cssFile, scssFile);
+    fs.writeFileSync(scssFile, scssExample, 'utf8');
+    fs.writeFileSync(scssPartialFile, scssPartialExample, 'utf8');
+    fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), scssFilename), 'utf8');
+
+    sh.exec(`${ngBin} build`);
+    let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js');
+    let contents = fs.readFileSync(destCssBundle, 'utf8');
+    expect(contents).to.include('.outer .inner');
+    expect(contents).to.include('.partial .inner');
+
+    sh.mv(scssFile, cssFile);
+    fs.writeFileSync(cssFile, '', 'utf8');
+    fs.writeFileSync(componentFile, componentContents, 'utf8');
+    sh.rm('-f', scssPartialFile);
   });
 
-  it.skip('Installs less support successfully', function() {
+  // Mobile mode doesn't have styles
+  it_not_mobile('Supports less in styleUrls', function() {
     this.timeout(420000);
 
-    sh.exec('npm install less', { silent: true });
-    return ng(['generate', 'component', 'test-component'])
-    .then(() => {
-      let componentPath = path.join(process.cwd(), 'src', 'app', 'test-component');
-      let cssFile = path.join(componentPath, 'test-component.component.css');
-      let lessFile = path.join(componentPath, 'test-component.component.less');
-
-      expect(existsSync(componentPath)).to.be.equal(true);
-      sh.mv(cssFile, lessFile);
-      expect(existsSync(lessFile)).to.be.equal(true);
-      expect(existsSync(cssFile)).to.be.equal(false);
-      let lessExample = '.outer {\n  .inner { background: #fff; }\n }';
-      fs.writeFileSync(lessFile, lessExample, 'utf8');
-
-      sh.exec(`${ngBin} build`);
-      let destCss = path.join(process.cwd(), 'dist', 'app', 'test-component', 'test-component.component.css');
-      expect(existsSync(destCss)).to.be.equal(true);
-      let contents = fs.readFileSync(destCss, 'utf8');
-      expect(contents).to.include('.outer .inner');
-
-      sh.rm('-f', destCss);
-      process.chdir('src');
-      sh.exec(`${ngBin} build`);
-      expect(existsSync(destCss)).to.be.equal(true);
-      contents = fs.readFileSync(destCss, 'utf8');
-      expect(contents).to.include('.outer .inner');
-
-      process.chdir('..');
-      sh.exec('npm uninstall less', { silent: true });
-    });
+    let cssFilename = 'app.component.css';
+    let lessFilename = 'app.component.less';
+    let componentPath = path.join(process.cwd(), 'src', 'app');
+    let componentFile = path.join(componentPath, 'app.component.ts');
+    let cssFile = path.join(componentPath, cssFilename);
+    let lessFile = path.join(componentPath, lessFilename);
+    let lessExample = '.outer {\n  .inner { background: #fff; }\n }';
+    let componentContents = fs.readFileSync(componentFile, 'utf8');
+    
+    sh.mv(cssFile, lessFile);      
+    fs.writeFileSync(lessFile, lessExample, 'utf8');
+    fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), lessFilename), 'utf8');
+
+    sh.exec(`${ngBin} build`);
+    let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js');
+    let contents = fs.readFileSync(destCssBundle, 'utf8');
+    expect(contents).to.include('.outer .inner');
+
+    fs.writeFileSync(lessFile, '', 'utf8');
+    sh.mv(lessFile, cssFile);
+    fs.writeFileSync(componentFile, componentContents, 'utf8');
   });
 
-  it.skip('Installs stylus support successfully', function() {
+  // Mobile mode doesn't have styles
+  it_not_mobile('Supports stylus in styleUrls', function() {
     this.timeout(420000);
 
-    sh.exec('npm install stylus', { silent: true });
-    return ng(['generate', 'component', 'test-component'])
-    .then(() => {
-      let componentPath = path.join(process.cwd(), 'src', 'app', 'test-component');
-      let cssFile = path.join(componentPath, 'test-component.component.css');
-      let stylusFile = path.join(componentPath, 'test-component.component.styl');
-
-      sh.mv(cssFile, stylusFile);
-      expect(existsSync(stylusFile)).to.be.equal(true);
-      expect(existsSync(cssFile)).to.be.equal(false);
-      let stylusExample = '.outer {\n  .inner { background: #fff; }\n }';
-      fs.writeFileSync(stylusFile, stylusExample, 'utf8');
-
-      sh.exec(`${ngBin} build`);
-      let destCss = path.join(process.cwd(), 'dist', 'app', 'test-component', 'test-component.component.css');
-      expect(existsSync(destCss)).to.be.equal(true);
-      let contents = fs.readFileSync(destCss, 'utf8');
-      expect(contents).to.include('.outer .inner');
-
-      sh.rm('-f', destCss);
-      process.chdir('src');
-      sh.exec(`${ngBin} build`);
-      expect(existsSync(destCss)).to.be.equal(true);
-      contents = fs.readFileSync(destCss, 'utf8');
-      expect(contents).to.include('.outer .inner');
-
-      process.chdir('..');
-      sh.exec('npm uninstall stylus', { silent: true });
-    });
+    let cssFilename = 'app.component.css';
+    let stylusFilename = 'app.component.scss';
+    let componentPath = path.join(process.cwd(), 'src', 'app');
+    let componentFile = path.join(componentPath, 'app.component.ts');
+    let cssFile = path.join(componentPath, cssFilename);
+    let stylusFile = path.join(componentPath, stylusFilename);
+    let stylusExample = '.outer {\n  .inner { background: #fff; }\n }';
+    let componentContents = fs.readFileSync(componentFile, 'utf8');
+    
+    sh.mv(cssFile, stylusFile);      
+    fs.writeFileSync(stylusFile, stylusExample, 'utf8');
+    fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), stylusFilename), 'utf8');
+
+    sh.exec(`${ngBin} build`);
+    let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js');
+    let contents = fs.readFileSync(destCssBundle, 'utf8');
+    expect(contents).to.include('.outer .inner');
+
+    fs.writeFileSync(stylusFile, '', 'utf8');
+    sh.mv(stylusFile, cssFile);
+    fs.writeFileSync(componentFile, componentContents, 'utf8');
   });
 
-  // This test causes complications with path resolution in TS broccoli plugin,
-  // and isn't mobile specific
-  it_not_mobile('Turn on `noImplicitAny` in tsconfig.json and rebuild', function () {
+  it('Turn on `noImplicitAny` in tsconfig.json and rebuild', function () {
     this.timeout(420000);
 
     const configFilePath = path.join(process.cwd(), 'src', 'tsconfig.json');
@@ -443,10 +416,8 @@ describe('Basic end-to-end Workflow', function () {
 
     sh.rm('-rf', path.join(process.cwd(), 'dist'));
 
-    return ng(['build'])
-      .then(() => {
-        expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true);
-      });
+    sh.exec(`${ngBin} build`);
+    expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true);
   });
 
   it('Turn on path mapping in tsconfig.json and rebuild', function () {