test: add e2e test bed with some tests

Author: xidedix

angular.json

@@ -23,7 +23,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "node_modules/simple-line-icons/css/simple-line-icons.css",
+              "src/scss/style.scss"
             ],
             "scripts": []
           },
@@ -72,7 +73,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/scss/style.scss"
             ],
             "scripts": [],
             "assets": [

e2e/protractor.conf.js

@@ -12,7 +12,7 @@ exports.config = {
     'browserName': 'chrome'
   },
   directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: 'http://localhost:4201/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
@@ -25,4 +25,4 @@ exports.config = {
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};

e2e/src/app.e2e-spec.ts

@@ -1,14 +1,55 @@
-import { AppPage } from './app.po';
+import { AppDashboard } from './app.po';
 
-describe('workspace-project App', () => {
-  let page: AppPage;
+describe('CoreUI template', () => {
+  let page: AppDashboard;
+  const sleep = 300;
 
-  beforeEach(() => {
-    page = new AppPage();
+  page = new AppDashboard();
+  const browser = page.getBrowser();
+  browser.driver.manage().window().setSize(600, 800);
+  browser.sleep(sleep);
+  page.navigateTo();
+
+  // beforeEach(() => {
+  //   page = new AppDashboard();
+  //   page.navigateTo();
+  // });
+
+  it('should display CoreUI Dashboard', () => {
+    expect(page.getParagraphText()).toEqual('CoreUI Dashboard');
+  });
+
+  it('should toggle `sidebar-minimized` body.class on `sidebar-minimizer` click', () => {
+    browser.manage().window().maximize();
+    browser.sleep(1000);
+    const body = page.getBody();
+    expect(body.getAttribute('class')).not.toContain('sidebar-minimized');
+    const button = page.getByCss('.sidebar-minimizer');
+    button.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).toContain('sidebar-minimized');
+    browser.sleep(sleep);
+    button.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).not.toContain('sidebar-minimized');
+    browser.driver.manage().window().setSize(600, 800);
+    browser.sleep(1000);
   });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  it('should toggle `sidebar-show` body.class on `navbar-toggler` click', () => {
+    browser.driver.manage().window().setSize(600, 800);
+    browser.sleep(1000);
+    const body = page.getBody();
+    expect(body.getAttribute('class')).not.toContain('sidebar-show');
+    const button1 = page.getByCss('.navbar-toggler.d-lg-none').first();
+    browser.sleep(sleep);
+    button1.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).toContain('sidebar-show');
+    const button2 = page.getByCss('.navbar-toggler').first();
+    browser.sleep(sleep);
+    button2.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).not.toContain('sidebar-show');
   });
 });

e2e/src/app.po.ts

@@ -1,11 +1,24 @@
 import { browser, by, element } from 'protractor';
 
-export class AppPage {
+export class AppDashboard {
+
+  getBrowser() {
+    return browser;
+  }
+
   navigateTo() {
     return browser.get('/');
   }
 
   getParagraphText() {
-    return element(by.css('app-root h1')).getText();
+    return element(by.xpath('/html/body/app-dashboard/div/main/div/ng-component/div/span')).getText();
+  }
+  getBody() {
+    return element(by.xpath('/html/body'));
   }
+  getByCss(selector) {
+    return element.all(by.css(selector));
+  }
+
+
 }

package.json

@@ -17,7 +17,6 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
     "build-lib": "ng build @coreui/angular --prod",
     "test": "ng test",
     "test-lib": "ng test @coreui/angular",

projects/coreui/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "CoreUI Angular Bootstrap 4 components",
   "license": "MIT",
   "homepage": "https://coreui.io/angular",

src/app/_nav.ts

@@ -0,0 +1,34 @@
+import { INavData } from '../../dist/@coreui/angular';
+
+export const navItems: INavData[] = [
+  {
+    name: 'Dashboard',
+    url: '/dashboard',
+    icon: 'icon-speedometer',
+    badge: {
+      variant: 'info',
+      text: 'NEW'
+    }
+  },
+  {
+    name: 'Disabled',
+    url: '/dashboard',
+    icon: 'icon-ban',
+    attributes: { disabled: true },
+  },
+  {
+    name: 'Download CoreUI',
+    url: 'http://coreui.io/angular/',
+    icon: 'icon-cloud-download',
+    class: 'mt-auto',
+    variant: 'success',
+    attributes: { target: '_blank', rel: 'noopener' }
+  },
+  {
+    name: 'Try CoreUI PRO',
+    url: 'http://coreui.io/pro/angular/',
+    icon: 'icon-layers',
+    variant: 'danger',
+    attributes: { target: '_blank', rel: 'noopener' }
+  }
+];

src/app/app.component.html

@@ -1,3 +1,4 @@
+import { RouterTestingModule } from '@angular/router/testing';
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
@@ -6,22 +7,12 @@ describe('AppComponent', () => {
       declarations: [
         AppComponent
       ],
+      imports: [ RouterTestingModule ]
     }).compileComponents();
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
 });

src/app/app.component.spec.ts

@@ -1,10 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  // tslint:disable-next-line
+  selector: 'body',
+  template: '<router-outlet></router-outlet>'
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit {
+  title = 'CoreUI 2 for Angular 8';
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+    this.router.events.subscribe((evt) => {
+      if (!(evt instanceof NavigationEnd)) {
+        return;
+      }
+      window.scrollTo(0, 0);
+    });
+  }
 }