feat: Provide custom external css/style (#158)

* Bootstrap test

* Material UI test

* skip until works

* Custom test style

examples/ng9/angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": [],
@@ -90,6 +91,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -121,6 +123,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "angular-project"
 }

examples/ng9/package.json

@@ -15,10 +15,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "9.1.11",
+    "@angular/cdk": "9.2.4",
     "@angular/common": "9.1.11",
     "@angular/compiler": "9.1.11",
     "@angular/core": "9.1.11",
     "@angular/forms": "9.1.11",
+    "@angular/material": "9.2.4",
     "@angular/platform-browser": "9.1.11",
     "@angular/platform-browser-dynamic": "9.1.11",
     "@angular/router": "9.1.11",

examples/ng9/src/app/add-style/add-style.component.css

@@ -0,0 +1,3 @@
+.my-class {
+    color: red;
+}

examples/ng9/src/app/add-style/add-style.component.cy-spec.ts

@@ -0,0 +1,19 @@
+import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
+import { AddStyleComponent } from './add-style.component';
+
+describe('AddStyleComponent', () => {
+
+  beforeEach(() => {
+    setConfig({ style: 'p {background-color: blue;}' });
+    initEnv(AddStyleComponent);
+  });
+
+  it('should create', () => {
+    mount(AddStyleComponent);
+    cy.get('p')
+      .should('contain', 'add-style works!')
+      .should('have.css', 'color', 'rgb(255, 0, 0)')
+      .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+  });
+
+});

examples/ng9/src/app/add-style/add-style.component.html

@@ -0,0 +1,3 @@
+<p class="my-class">
+  add-style works!
+</p>

examples/ng9/src/app/add-style/add-style.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-style',
+  templateUrl: './add-style.component.html',
+  styleUrls: ['./add-style.component.css']
+})
+export class AddStyleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

examples/ng9/src/app/app.module.ts

@@ -10,19 +10,27 @@ import { NetworkService } from './network.service';
 import { HtmlMountComponent } from './html-mount/html-mount.component';
 import { OutputSubscribeComponent } from './output-subscribe/output-subscribe.component';
 import { ImageSnapshotComponent } from './image-snapshot/image-snapshot.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialButtonComponent } from './material-button/material-button.component';
+import { BootstrapButtonComponent } from './bootstrap-button/bootstrap-button.component';
+import { AddStyleComponent } from './add-style/add-style.component';
 
 @NgModule({
-  declarations: [
+  declarations: [	
     AppComponent,
     OnPushStratComponent,
     NetworkComponent,
     HtmlMountComponent,
     OutputSubscribeComponent,
     ImageSnapshotComponent,
-  ],
+    MaterialButtonComponent,
+    BootstrapButtonComponent,
+      AddStyleComponent
+   ],
   imports: [
     BrowserModule,
     HttpClientModule,
+    BrowserAnimationsModule,
   ],
   providers: [HeroService, NetworkService],
   bootstrap: [AppComponent]

examples/ng9/src/app/bootstrap-button/bootstrap-button.component.cy-spec.ts

@@ -0,0 +1,17 @@
+import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
+import { BootstrapButtonComponent } from './bootstrap-button.component';
+
+describe('BootstrapButtonComponent', () => {
+
+  beforeEach(() => {
+    setConfig({ stylesheet: 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' });
+    initEnv(BootstrapButtonComponent);
+  });
+
+  it('should create', () => {
+    mount(BootstrapButtonComponent);
+    // Should have BootStrap color style
+    cy.get('button').should('have.css', 'background-color', 'rgb(0, 123, 255)');
+  });
+
+});

examples/ng9/src/app/bootstrap-button/bootstrap-button.component.html

@@ -0,0 +1 @@
+<button type="button" class="btn btn-primary">Primary</button>

examples/ng9/src/app/bootstrap-button/bootstrap-button.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-bootstrap-button',
+  templateUrl: './bootstrap-button.component.html',
+  styleUrls: ['./bootstrap-button.component.css']
+})
+export class BootstrapButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

examples/ng9/src/app/material-button/material-button.component.cy-spec.ts

@@ -0,0 +1,16 @@
+import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
+import { MaterialButtonComponent } from './material-button.component';
+import { MatButtonModule } from '@angular/material/button';
+
+describe('MaterialButtonComponent', () => {
+
+  beforeEach(() => {
+    setConfig({ cssFile: 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css' });
+    initEnv(MaterialButtonComponent, { imports: [MatButtonModule] });
+  });
+
+  it.skip('should create', () => {
+    mount(MaterialButtonComponent);
+  });
+
+});

examples/ng9/src/app/material-button/material-button.component.html

@@ -0,0 +1,2 @@
+<p>material-button works!</p>
+<button mat-raised-button color="primary">Primary</button>

examples/ng9/src/app/material-button/material-button.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import '@angular/material/prebuilt-themes/indigo-pink.css';
+
+@Component({
+  selector: 'app-material-button',
+  templateUrl: './material-button.component.html',
+  styleUrls: ['./material-button.component.css']
+})
+export class MaterialButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

examples/ng9/src/app/work.cy-spec.ts

@@ -73,7 +73,6 @@ describe('AppComponent', () => {
 
     // component + any inputs object
     const fixture = mountt(AppComponent, { title: 'World' });
-    console.log(fixture);
 
     // use any Cypress command afterwards
     cy.contains('World app is running!');
@@ -88,7 +87,6 @@ describe('AppComponent', () => {
 
     // component + any inputs object
     const fixture = mountt(AppComponent, { title: 'World' });
-    console.log(fixture);
 
     // use any Cypress command afterwards
     cy.contains('World app is running!');

examples/ng9/src/index.html

@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

examples/ng9/src/styles.css

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

lib/config.ts

@@ -1,5 +1,46 @@
-export class CypressAngularConfig {
+export class StyleOptions {
 
-    detectChanges = true;
+    /**
+     * Creates <link href="..." /> element for each stylesheet
+     * @alias stylesheet
+     */
+    stylesheets?: string[];
 
+    /**
+     * Creates <link href="..." /> element for each stylesheet
+     * @alias stylesheets
+     */
+    stylesheet?: string;
+
+    /**
+     * Creates <style>...</style> element and inserts given CSS.
+     * @alias styles
+     */
+    style?: string;
+
+    /**
+     * Creates <style>...</style> element for each given CSS text.
+     * @alias style
+     */
+    styles?: string[];
+
+    /**
+     * Loads each file and creates a <style>...</style> element
+     * with the loaded CSS
+     * @alias cssFile
+     */
+    cssFiles?: string[];
+
+    /**
+     * Single CSS file to load into a <style></style> element
+     * @alias cssFile
+     */
+    cssFile?: string;
+
+}
+export class CypressAngularConfig extends StyleOptions {
+
+    detectChanges?= true;
+
+    log?= false;
 }