test(integration): Wire up ui-router example

Author: christopherthielen

test-angular-versions/v6/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:4000",
+  "videoRecording": false
+}

test-angular-versions/v6/cypress/integration/sample_app_spec.js

@@ -0,0 +1,105 @@
+describe('Angular v6 app', () => {
+  beforeEach(() => {
+    window.sessionStorage.clear();
+  });
+
+  it('loads', () => {
+    cy.visit('');
+  });
+
+  it('loads home state by default', () => {
+    cy.visit('');
+    cy.url().should('include', '/home');
+  });
+
+  it('renders uisref as links', () => {
+    cy.visit('');
+    cy.get('a').contains('home');
+    cy.get('a').contains('about');
+    cy.get('a').contains('lazy');
+    cy.get('a').contains('lazy.child');
+    cy.get('a').contains('lazy.child.viewtarget');
+  });
+
+  it('renders home', () => {
+    cy.visit('/home');
+    cy
+      .get('a')
+      .contains('home')
+      .should('have.class', 'active');
+    cy
+      .get('a')
+      .contains('about')
+      .should('not.have.class', 'active');
+    cy.get('#default').contains('home works');
+  });
+
+  it('renders about', () => {
+    cy.visit('/home');
+    cy.visit('/about');
+    cy
+      .get('a')
+      .contains('home')
+      .should('not.have.class', 'active');
+    cy
+      .get('a')
+      .contains('about')
+      .should('have.class', 'active');
+    cy.get('#default').contains('about works');
+  });
+
+  it('loads lazy routes', () => {
+    cy.visit('/home');
+    cy.visit('/lazy');
+    cy
+      .get('a')
+      .contains('home')
+      .should('not.have.class', 'active');
+    cy
+      .get('a')
+      .contains('lazy')
+      .should('have.class', 'active');
+    cy.get('#default').contains('lazy works');
+  });
+
+  it('routes to lazy routes', () => {
+    cy.visit('/lazy');
+    cy
+      .get('a')
+      .contains('home')
+      .should('not.have.class', 'active');
+    cy
+      .get('a')
+      .contains('lazy')
+      .should('have.class', 'active');
+    cy.get('#default').contains('lazy works');
+  });
+
+  it('routes to lazy child routes', () => {
+    cy.visit('/lazy/child');
+    cy
+      .get('a')
+      .contains('home')
+      .should('not.have.class', 'active');
+    cy
+      .get('a')
+      .contains('lazy.child')
+      .should('have.class', 'active');
+    cy.get('#default').contains('lazy.child works');
+  });
+
+  it('targets named views', () => {
+    cy.visit('/lazy/child/viewtarget');
+    cy
+      .get('a')
+      .contains('home')
+      .should('not.have.class', 'active');
+    cy
+      .get('a')
+      .contains('lazy.child')
+      .should('have.class', 'active');
+    cy.get('#default').contains('lazy.child works');
+    cy.get('#header').contains('lazy.child.viewtarget works');
+    cy.get('#footer').contains('lazy.child.viewtarget works');
+  });
+});

test/angular-versions/v6/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
+    "start": "ng serve --prod --source-map",
+    "build": "ng build --prod --source-map",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -20,15 +20,15 @@
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",
+    "@uirouter/angular": "^1.1.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.0",
     "@angular-devkit/build-angular": "~0.6.0",
-    "typescript": "~2.7.2",
     "@angular/cli": "~6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
     "@angular/language-service": "^6.0.0",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
@@ -43,6 +43,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1"
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
   }
-}
+}

test/angular-versions/v6/src/app/about.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  template: `<p>about works!</p>`,
+})
+export class AboutComponent {}

test/angular-versions/v6/src/app/app.component.css

@@ -1,10 +1,40 @@
 import { Component } from '@angular/core';
 
+const template = `
+<ui-view name="header" id="header"></ui-view>
+
+<div class="app">
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+
+  <div>
+
+    <a uiSref="home" uiSrefActive="active">home</a>
+    <a uiSref="about" uiSrefActive="active">about</a>
+    <a uiSref="lazy" uiSrefActiveEq="active">lazy</a>
+    <a uiSref="lazy.child" uiSrefActive="active">lazy.child</a>
+    <a uiSref="lazy.child.viewtarget" uiSrefActive="active">lazy.child.viewtarget</a>
+  </div>
+
+  <ui-view id="default"></ui-view>
+</div>
+
+<ui-view name="footer" id="footer"></ui-view>
+`;
+
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  template: template,
+  styles: [
+    `
+      .app {
+        text-align: center;
+        border: 1px solid;
+      }
+
+      .active {
+        font-weight: bold;
+      }
+    `,
+  ],
 })
-export class AppComponent {
-  title = 'app';
-}
+export class AppComponent {}

test/angular-versions/v6/src/app/app.component.html

@@ -1,12 +1,26 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
+import { UIRouterModule } from '@uirouter/angular';
+import { UIRouter } from '@uirouter/core';
 
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home.component';
+import { AboutComponent } from './about.component';
+
+export const states = [
+  { name: 'home', url: '/home', component: HomeComponent },
+  { name: 'about', url: '/about', component: AboutComponent },
+  { name: 'lazy.**', url: '/lazy', loadChildren: './lazy/lazy.module#LazyModule' },
+];
+
+export function config(router: UIRouter) {
+  router.urlService.rules.initial({ state: 'home' });
+}
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
+  imports: [BrowserModule, UIRouterModule.forRoot({ states, config })],
+  providers: [{ provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }],
+  declarations: [AppComponent, HomeComponent, AboutComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

test/angular-versions/v6/src/app/app.component.spec.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `<p>home works!</p>`,
+})
+export class HomeComponent {}