川川Jason

Angular单元测试与E2E测试

本文介绍了Angular 7单元测试和E2E测试的配置与测试方法。使用Angular CLI新建工程，已配置好基础测试环境，生成了测试样例代码。默认，Angular单元测试使用Jasmine测试框架和Karma测试运行器，E2E测试使用Jasmine和Protractor测试框架。

配置单元测试

Jasmine是用于测试JavaScript的行为驱动(Behavior-Driven)框架，不依赖于任何其他JavaScript框架。
Karma是测试运行器，为开发人员提供了高效、真实的测试环境，支持多种浏览器，易于调试。

配置文件

单元测试配置文件test.ts和karma.conf.js：
test.ts

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

默认，测试文件扩展名必须为.spec.ts。
karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plug×××: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plug×××/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

默认，使用Chrome浏览器，可生成单元测试报告和覆盖率报告，覆盖率报告保存在根目录coverage文件夹内，启用autoWatch。
singleRun默认为false，如设为true则测试结束后会自动退出并根据测试结果返回代码0或1，常用于CI环境。

浏览器配置

Karma支持的浏览器：

Chrome
ChromeCanary
ChromeHeadless
PhantomJS
Firefox
Opera
IE
Safari

可同时配置多个浏览器进行测试，要启用其他浏览器，需安装依赖，比如启用Firefox：

npm i karma-firefox-launcher --save-dev

然后在karma.conf.js内增加配置：

...
require('karma-chrome-launcher'),
require('karma-firefox-launcher'),
...
browsers: ['Chrome', 'Firefox'],
...

运行测试

用CLI创建App生成了一个单元测试文件app.component.spec.ts。执行CLI命令ng test即可运行单元测试：

ng test

运行后在控制台输出测试结果并打开浏览器：

浏览器会显示测试结果，总测试数，失败数。在顶部，每个点或叉对应一个测试用例，点表示成功，叉表示失败，鼠标移到点或叉上会显示测试信息。点击测试结果中的某一行，可重新运行某个或某组（测试套件）测试。

常用参数：
--browsers 指定使用的浏览器
--code-coverage 输出覆盖率报告
--code-coverage-exclude 排除文件或路径
--karma-config 指定Karma配置文件
--prod 启用production环境
--progress 默认为true，将编译进度输出到控制台
--watch 默认为true，代码修改后会重新运行测试

自定义Launcher

karma-chrome-launcher、karma-firefox-launcher、karma-ie-launcher等均支持自定义Launcher，customLaunchers与--browsers结合使用可满足多种环境的测试需求。每种浏览器支持的自定义属性请查看Karma Browsers文档。
比如，CI环境下常用Headless模式，不需显示浏览器界面，在karma.conf.js中增加如下配置：

browsers: ['Chrome'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

运行如下命令进行测试：

ng test --watch=false --progress=false --browsers=ChromeHeadlessCI

测试覆盖率

运行如下命令生成测试覆盖率报告，报告保存在项目根目录下的coverage文件夹内：

ng test --watch=false --code-coverage

如想每次测试都生成报告，可修改CLI配置文件angular.json：

"test": {
  "options": {
    "codeCoverage": true
  }
}

设置排除的文件或路径

ng test --watch=false --code-coverage --code-coverage-exclude=src/app/heroes/heroes.component.ts --code-coverage-exclude=src/app/hero-search/*

同样可以在angular.json中配置：

"test": {
  "options": {
    "codeCoverage": true,
    "codeCoverageExclude": ["src/app/heroes/heroes.component.ts", "src/app/hero-search/*"]
  }
}

设定测试覆盖率指标
编辑配置文件karma.conf.js，增加如下内容：

coverageIstanbulReporter: {
  reports: [ 'html', 'lcovonly' ],
  fixWebpackSourcePaths: true,
  thresholds: {
    statements: 80,
    lines: 80,
    branches: 80,
    functions: 80
  }
}

测试报告中达到标准的背景为绿色：

注意：与CI集成时不要设置覆盖率指标，否则若未到达指标，Job会终止。
LCOV
coverageIstanbulReporter中reports参数为[ 'html', 'lcovonly' ]，会生成html和lcov两种格式的报告。报告文件lcov.info可与Sonar集成，在Sonar管理界面配置LCOV Files路径，即可在Sonar中查看测试情况。

另外，与Sonar集成时需配置TypeScript Exclusions，排除.spec.ts，否则统计覆盖率时将包含测试文件。

编写测试

第一个测试

使用CLI创建Service、Component等时会自动创建测试文件，我们以创建App时生成的测试文件app.component.spec.ts为例：

import {async, TestBed} from '@angular/core/testing';
import {RouterTestingModule} from '@angular/router/testing';
import {AppComponent} from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'hello'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('hello');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to hello!');
  });
});

测试结构
从上例我们可以了解测试的主要结构：
describe函数中包含了beforeEach和it两类函数。describe相当于Java测试中的suite，也就是测试组，其中可以包含多个测试用例it。一般一个测试文件含有一个describe，当然也可以有多个。beforeEach相当于Java测试中的@Before方法，每个测试用例执行前调用一次。同样，还有afterEach、beforeAll、afterAll函数，afterEach在每个测试用例执行后调用一次，beforeAll、afterAll相当于Java测试中的@BeforeClass、@AfterClass方法，每个describe执行前后调用一次。

describe和it的第一个参数是测试说明。一个it中可以包含一个或多个expect来执行测试验证。

TestBed
TestBed是Angular测试中最重要的工具。

TestBed.configureTestingModule()方法动态构建TestingModule来模拟Angular @NgModule，支持@NgModule的大多数属性。

测试中需导入测试的组件及依赖。在AppComponent页面中使用了router-outlet，因此我们导入了RouterTestingModule来模拟RouterModule。Test Module预配置了一些元素，比如BrowserModule，不需导入。

TestBed.createComponent()方法创建组件实例，返回ComponentFixture。ComponentFixture是一个测试工具(test harness)，用于与创建的组件和相应元素进行交互。

nativeElement和DebugElement
示例中使用了fixture.debugElement.nativeElement，也可以写成fixture.nativeElement。实际上，fixture.nativeElement是fixture.debugElement.nativeElement的一种简化写法。nativeElement依赖于运行时环境，Angular依赖DebugElement抽象来支持跨平台。Angular创建DebugElement tree来包装native element，nativeElement返回平台相关的元素对象。

我们的测试样例仅运行在浏览器中，因此nativeElement总为HTMLElement，可以使用querySelector()、querySelectorAll()方法来查询元素。

element.querySelector('p');
element.querySelector('input');
element.querySelector('.welcome');
element.querySelectorAll('span');

detectChanges
createComponent() 函数不会绑定数据，必须调用fixture.detectChanges()来执行数据绑定，才能在组件元素中取得内容：

it('should render title in a h1 tag', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('Welcome to hello!');
});

当数据模型值改变后，也需调用fixture.detectChanges()方法：

it('should render title in a h1 tag', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  app.title = 'china';
  fixture.detectChanges();
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('Welcome to china!');
});

可以配置自动检测，增加ComponentFixtureAutoDetect provider：

import { ComponentFixtureAutoDetect } from '@angular/core/testing';
...
TestBed.configureTestingModule({
  providers: [
    { provide: ComponentFixtureAutoDetect, useValue: true }
  ]
});

启用自动检测后仅需在数值改变后调用detectChanges()：

it('should display original title', () => {
  // Hooray! No `fixture.detectChanges()` needed
  expect(h1.textContent).toContain(comp.title);
});

it('should still see original title after comp.title change', () => {
  const oldTitle = comp.title;
  comp.title = 'Test Title';
  // Displayed title is old because Angular didn't hear the change :(
  expect(h1.textContent).toContain(oldTitle);
});

it('should display updated title after detectChanges', () => {
  comp.title = 'Test Title';
  fixture.detectChanges(); // detect changes explicitly
  expect(h1.textContent).toContain(comp.title);
});

同步和异步beforeEach
组件常用 @Component.templateUrl 和 @Component.styleUrls 属性来指定外部模板和CSS，Angular编译器会在编译期间读取外部文件。

@Component({
  selector: 'app-banner',
  templateUrl: './banner-external.component.html',
  styleUrls:  ['./banner-external.component.css']
})

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ BannerComponent ],
  });
  fixture = TestBed.createComponent(BannerComponent);
});

当用CLI的ng test命令运行含有如上同步beforeEach方法的测试时没有问题，因为会在运行测试之前先编译。若在非CLI环境下运行这些测试则可能失败。要解决这个问题，可以调用compileComponents()进行显示的编译。compileComponents()方法是异步的，必须在async()方法中调用：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule
    ],
    declarations: [
      AppComponent
    ],
  }).compileComponents();
}));

调用compileComponents()会关闭当前的TestBed实例，不再允许进行配置，不能再调用任何TestBed中的配置方法，既不能调 configureTestingModule()，也不能调用任何 override... 方法。

常同时使用同步beforeEach和异步beforeEach来协同工作，异步的 beforeEach() 负责编译组件，同步的beforeEach()负责执行其余的准备代码。测试运行器会先调用异步beforeEach方法，运行完毕后再调用同步方法。

重构
示例中重复代码较多，我们用两个beforeEach来简化一下：

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {RouterTestingModule} from '@angular/router/testing';
import {AppComponent} from './app.component';

describe('AppComponent', () => {
  let fixture: ComponentFixture;
  let app: AppComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(app).toBeTruthy();
  });

  it(`should have as title 'hello'`, () => {
    expect(app.title).toEqual('hello');
  });

  it('should render title in a h1 tag', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to hello!');
  });
});

也可以把这两个 beforeEach() 重构成一个异步的beforeEach():

beforeEach(async(() => {
  TestBed.configureTestingModule({
     imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
  })
  .compileComponents()
  .then(() => {
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
    fixture.detectChanges();
  });
}));

依赖注入与Mock

对简单对象进行测试可以用new创建实例：

describe('ValueService', () => {
  let service: ValueService;
  beforeEach(() => { service = new ValueService(); });
    ...
});

不过大多数Service、Component等有多个依赖项，使用new很不方便。若用DI来创建测试对象，当依赖其他服务时，DI会找到或创建依赖的服务。要测试某个对象，在configureTestingModule中配置测试对象本身及依赖项，然后调用TestBed.get()注入测试对象：

beforeEach(() => {
  TestBed.configureTestingModule({ providers: [ValueService] });
  service = TestBed.get(ValueService);
});

单元测试的原则之一：仅对要测试对象本身进行测试，而不对其依赖项进行测试，依赖项通过mock方式注入，而不使用实际的对象，否则测试不可控。

Mock优先使用Spy方式：

let masterService: MasterService;

beforeEach(() => {
  const spy = jasmine.createSpyObj('ValueService', ['getValue']);
    spy.getValue.and.returnValue('stub value');

  TestBed.configureTestingModule({
    // Provide both the service-to-test and its (spy) dependency
    providers: [
      MasterService,
      { provide: ValueService, useValue: spy }
    ]
  });

  masterService = TestBed.get(MasterService);
});

HttpClient、Router、Location

同测试含其它依赖的对象一样，可以mock HttpClient、Router、Location：

beforeEach(() => {
  const httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);

  TestBed.configureTestingModule({
    providers: [
      {provide: HttpClient, useValue: httpClientSpy}
    ]
  });
});

beforeEach(async(() => {
  const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
  const locationSpy = jasmine.createSpyObj('Location', ['back']);

  TestBed.configureTestingModule({
    providers: [
      {provide: Router, useValue: routerSpy},
      {provide: Location, useValue: locationSpy}
    ]
  })
    .compileComponents();
}));

Component测试

仅测试组件类

测试组件类就像测试服务那样简单：
组件类

export class WelcomeComponent  implements OnInit {
  welcome: string;
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name : 'Please log in.';
  }
}

Mock类

class MockUserService {
  isLoggedIn = true;
  user = { name: 'Test User'};
};

测试

...
beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});
...
it('should ask user to log in if not logged in after ngOnInit', () => {
  userService.isLoggedIn = false;
  comp.ngOnInit();
  expect(comp.welcome).not.toContain(userService.user.name);
  expect(comp.welcome).toContain('log in');
});

组件DOM测试

只涉及类的测试可以判断组件类的行为是否正常，但不能确定组件是否能正常渲染和交互。
进行组件DOM测试，需要使用TestBed.createComponent()等方法，第一个测试即为组件DOM测试。

TestBed.configureTestingModule({
  declarations: [ BannerComponent ]
});
const fixture = TestBed.createComponent(BannerComponent);
const component = fixture.componentInstance;
expect(component).toBeDefined();

dispatchEvent
为模拟用户输入，比如为input元素输入值，要找到input元素并设置它的 value 属性。Angular不知道你设置了input元素的value属性，需要调用 dispatchEvent() 触发输入框的 input 事件，再调用 detectChanges():

it('should convert hero name to Title Case', () => {
  // get the name's input and display elements from the DOM
  const hostElement = fixture.nativeElement;
  const nameInput: HTMLInputElement = hostElement.querySelector('input');
  const nameDisplay: HTMLElement = hostElement.querySelector('span');

  nameInput.value = 'quick BROWN  fOx';

  // dispatch a DOM event so that Angular learns of input value change.
  nameInput.dispatchEvent(newEvent('input'));

  fixture.detectChanges();

  expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
});

嵌套组件

组件中常常使用其他组件：




  Dashboard
  Heroes
  About

对于无害的内嵌组件可以直接将其添加到declarations中，这是最简单的方式：

describe('AppComponent & TestModule', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        BannerComponent,
        WelcomeComponent
      ]
    })
    .compileComponents().then(() => {
      fixture = TestBed.createComponent(AppComponent);
      comp    = fixture.componentInstance;
    });
  }));
  ...
});

也可为无关紧要的组件创建一些测试桩：

@Component({selector: 'app-banner', template: ''})
class BannerStubComponent {}

@Component({selector: 'router-outlet', template: ''})
class RouterOutletStubComponent { }

@Component({selector: 'app-welcome', template: ''})
class WelcomeStubComponent {}

然后在TestBed的配置中声明它们：

TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    BannerStubComponent,
    RouterOutletStubComponent,
    WelcomeStubComponent
  ]
})

另一种办法是使用NO_ERRORS_SCHEMA，要求 Angular编译器忽略那些不认识的元素和属性：

TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    RouterLinkDirectiveStub
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})

NO_ERRORS_SCHEMA方法比较简单，但不要过度使用。NO_ERRORS_SCHEMA 会阻止编译器因疏忽或拼写错误而缺失的组件和属性，如人工找出这些 bug会很费时。
RouterLinkDirectiveStub

import { Directive, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkDirectiveStub {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  @HostListener('click')
  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

属性指令测试

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive({ selector: '[highlight]' })
/** Set backgroundColor for the attached element to highlight color and set the element's customProperty to true */
export class HighlightDirective implements OnChanges {

  defaultColor =  'rgb(211, 211, 211)'; // lightgray

  @Input('highlight') bgColor: string;

  constructor(private el: ElementRef) {
    el.nativeElement.style.customProperty = true;
  }

  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
  }
}

属性型指令肯定要操纵 DOM，如只针对类测试不能证明指令的有效性。若通过组件来测试，单一的用例一般无法探索指令的全部能力。因此，更好的方法是创建一个能展示该指令所有用法的人造测试组件：

@Component({
  template: `
  Something Yellow
  The Default (Gray)
  No Highlight
  `
})
class TestComponent { }

测试程序：

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [ HighlightDirective, TestComponent ]
  })
  .createComponent(TestComponent);

  fixture.detectChanges(); // initial binding

  // all elements with an attached HighlightDirective
  des = fixture.debugElement.queryAll(By.directive(HighlightDirective));

  // the h2 without the HighlightDirective
  bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
});

// color tests
it('should have three highlighted elements', () => {
  expect(des.length).toBe(3);
});

it('should color 1st  background "yellow"', () => {
  const bgColor = des[0].nativeElement.style.backgroundColor;
  expect(bgColor).toBe('yellow');
});

it('should color 2nd 
 background w/ default color', () => {
  const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
  const bgColor = des[1].nativeElement.style.backgroundColor;
  expect(bgColor).toBe(dir.defaultColor);
});

it('should bind  background to value color', () => {
  // easier to work with nativeElement
  const input = des[2].nativeElement as HTMLInputElement;
  expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');

  // dispatch a DOM event so that Angular responds to the input value change.
  input.value = 'green';
  input.dispatchEvent(newEvent('input'));
  fixture.detectChanges();

  expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
});

it('bare  should not have a customProperty', () => {
  expect(bareH2.properties['customProperty']).toBeUndefined();
});

Pipe测试

describe('TitleCasePipe', () => {
  // This pipe is a pure, stateless function so no need for BeforeEach
  let pipe = new TitleCasePipe();

  it('transforms "abc" to "Abc"', () => {
    expect(pipe.transform('abc')).toBe('Abc');
  });

  it('transforms "abc def" to "Abc Def"', () => {
    expect(pipe.transform('abc def')).toBe('Abc Def');
  });

  ...
});

Testing Module

RouterTestingModule
在前面的测试中我们使用了测试桩RouterOutletStubComponent，与Router有关的测试还可以使用RouterTestingModule：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule
    ],
    declarations: [
      AppComponent
    ],
  }).compileComponents();
}));

RouterTestingModule还可以模拟路由：

beforeEach(() => {
  TestBed.configureTestModule({
    imports: [
      RouterTestingModule.withRoutes(
        [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]
      )
    ]
  });
});

HttpClientTestingModule

describe('HttpClient testing', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ]
    });

    // Inject the http service and test controller for each test
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  afterEach(() => {
    // After every test, assert that there are no more pending requests.
    httpTestingController.verify();
  });

  it('can test HttpClient.get', () => {
    const testData: Data = {name: 'Test Data'};

    // Make an HTTP GET request
    httpClient.get(testUrl)
      .subscribe(data =>
        // When observable resolves, result should match test data
        expect(data).toEqual(testData)
      );

    // The following `expectOne()` will match the request's URL.
    // If no requests or multiple requests matched that URL
    // `expectOne()` would throw.
    const req = httpTestingController.expectOne('/data');

    // Assert that the request is a GET.
    expect(req.request.method).toEqual('GET');

    // Respond with mock data, causing Observable to resolve.
    // Subscribe callback asserts that correct data was returned.
    req.flush(testData);

    // Finally, assert that there are no outstanding requests.
    httpTestingController.verify();
  });

    ...
});

调试

在浏览器测试结果页面，点击“DEBUG”按钮会打开新浏标签页并重新运行测试程序。按"F12"打开调试界面，然后进入Sources找到测试文件（CTRL+P），在测试程序中设置断点即可调试。

配置E2E测试

E2E测试使用Jasmine和Protractor测试框架，Protractor是Angular端到端测试框架。

安装Protractor

npm i -g protractor

安装后，node_modules\protractor\bin目录含有两个命令行工具protractor和webdriver-manager，其中webdriver-manager负责管理驱动、启停Selenium Server。

webdriver-manager命令：

clean      removes all downloaded driver files from the out_dir
start      start up the selenium server
shutdown   shut down the selenium server
status     list the current available drivers
update     update selected binaries
version    get the current version

更新驱动：

webdriver-manager update

默认安装chromedriver、geckodriver和selenium standalone，驱动目录为node_modules\protractor\node_modules\webdriver-manager\selenium，下载使用的url配置在webdriver-manager\config.json文件内：

"cdnUrls": {
  "selenium": "https://selenium-release.storage.googleapis.com/",
  "chromedriver": "https://chromedriver.storage.googleapis.com/",
  "geckodriver": "https://github.com/mozilla/geckodriver/releases/download/",
  "iedriver": "https://selenium-release.storage.googleapis.com/",
  "androidsdk": "http://dl.google.com/android/"
}

可以修改为其它CDN：

"cdnUrls": {
  "selenium": "https://mirrors.huaweicloud.com/selenium/",
  "chromedriver": "https://mirrors.huaweicloud.com/chromedriver/",
  "geckodriver": "https://mirrors.huaweicloud.com/geckodriver/",
  "iedriver": "https://selenium-release.storage.googleapis.com/",
  "androidsdk": "http://dl.google.com/android/"
}

也可以使用参数--alternate_cdn：

webdriver-manager update --alternate_cdn=...

配置文件

使用CLI创建的App会生成一个e2e项目，其中包含测试配置protractor.conf.js及测试代码。
protractor.conf.js

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

默认，Protractor使用Jasmine测试框架，使用直连方式连接Chrome浏览器，测试文件扩展名为.e2e-spec.ts。

浏览器配置

Protractor支持Chrome、Firefox、Safari、IE等浏览器。
多浏览器
Protractor支持同时启动多个浏览器，一个浏览器时，在配置中使用capabilities选项；多个浏览器时，使用multiCapabilities：

multiCapabilities: [{
  browserName: 'firefox'
}, {
  browserName: 'chrome'
}]

另外需在package.json中增加配置：

"scripts": {
  "webdriver-update": "webdriver-manager update"
}

在运行测试前更新浏览器驱动：

npm run webdriver-update

否则项目中的驱动不会更新（默认只有chrome驱动，运行webdriver-manager update仅更新全局的驱动），运行测试会报如下错误：

No update-config.json found. Run 'webdriver-manager update' to download binaries

浏览器选项

capabilities: {
  'browserName': 'chrome',
  'chromeOptions': {
    'args': ['show-fps-counter=true']
  }
},

capabilities: {
  'browserName': 'firefox',
  'moz:firefoxOptions': {
    'args': ['--safe-mode']
  }
},

更多选项请查看相应驱动ChromeDriver、GeckoDriver。

Selenium Server配置

使用Standalone Selenium Server时，需安装JDK。
更新driver后启动Selenium Server：

webdriver-manager update
webdriver-manager start

删除原配置中的directConnect、baseUrl：

directConnect: true,
baseUrl: 'http://localhost:4200/',

增加seleniumAddress(默认为http://localhost:4444/wd/hub)：

seleniumAddress: 'http://localhost:4444/wd/hub',

运行测试

运行E2E测试：

ng e2e

常用参数：

--base-url  Base URL for protractor to connect to.
--configuration (-c)  A named configuration environment, as specified in the "configurations" section of angular.json.
--host  Host to listen on.
--port  The port to use to serve the application.
--prod  When true, sets the build configuration to the production environment.
--protractor-config  The name of the Protractor configuration file.
--webdriver-update  Try to update webdriver.

driver安装好后，若未更新浏览器，不必每次都更新driver：

ng e2e --webdriver-update=false

如运行测试时报如下错误：

events.js:167
      throw er; // Unhandled 'error' event
      ^
Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
Emitted 'error' event

可尝试更新package后再测试：

npm i npm@latest -g
npm update

指定配置文件

不同的环境若配置不同，可使用不同的配置文件。

比如，在CI环境中启用Chrome Headless模式：
在e2e根目录下创建一名为protractor-ci.conf.js的新文件，内容如下：

const config = require('./protractor.conf').config;

config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--no-sandbox']
  }
};

exports.config = config;

注意： windows系统要增加参数--disable-gpu

运行以下命令测试：

ng e2e --protractor-config=e2e\protractor-ci.conf.js --webdriver-update=false

编写E2E测试

第一个测试

import { AppPage } from './app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Welcome to hello!');
  });
});

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getTitleText() {
    return element(by.css('app-root h1')).getText();
  }
}

E2E测试与单元测试都使用了Jasmine，测试结构相同。Protractor提供了全局的browser、element、by，分别用来打开页面和查找元素。

Protractor

describe('Protractor Demo App', function() {
  it('should add one and two', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    element(by.model('first')).sendKeys(1);
    element(by.model('second')).sendKeys(2);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).
        toEqual('5'); // This is wrong!
  });
});

by.model('first') 查找元素ng-model="first"
by.id('gobutton') 根据id查找元素
by.binding('latest') 查找绑定变量的元素 {{latest}}

2018上海马拉松

参考资料

Angular Testing
Jasmine Behavior-Driven JavaScript
Karma
Protractor - end-to-end testing for Angular

你可能感兴趣的:(Angular,Test,Jasmine,Angular)

四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
K近邻算法_分类鸢尾花数据集 _feivirus_ 算法机器学习和数学分类机器学习 K近邻
importnumpyasnpimportpandasaspdfromsklearn.datasetsimportload_irisfromsklearn.model_selectionimporttrain_test_splitfromsklearn.metricsimportaccuracy_score1.数据预处理iris=load_iris()df=pd.DataFrame(data=ir
多线程之——ExecutorCompletionService 阿福德
在我们开发中，经常会遇到这种情况，我们起多个线程来执行，等所有的线程都执行完成后，我们需要得到个线程的执行结果来进行聚合处理。我在内部代码评审时，发现了不少这种情况。看很多同学都使用正确，但比较啰嗦，效率也不高。本文介绍一个简单处理这种情况的方法：直接上代码：publicclassExecutorCompletionServiceTest{@TestpublicvoidtestExecutorCo
Linux查看服务器日志 TPBoreas 运维 linux 运维
一、tail这个是我最常用的一种查看方式用法如下：tail-n10test.log查询日志尾部最后10行的日志;tail-n+10test.log查询10行之后的所有日志;tail-fn10test.log循环实时查看最后1000行记录(最常用的)一般还会配合着grep用，(实时抓包)例如:tail-fn1000test.log|grep'关键字'（动态抓包）tail-fn1000test.log
Python 课程10-单元测试可愛小吉 Python教學 python 单元测试开发语言 TDD unittest
前言在现代软件开发中，单元测试已成为一种必不可少的实践。通过测试，我们可以确保每个功能模块在开发和修改过程中按预期工作，从而减少软件缺陷，提高代码质量。而测试驱动开发（TDD）则进一步将测试作为开发的核心部分，先编写测试，再编写代码，以测试为指导开发出更稳定、更可靠的代码。Python提供了强大的unittest模块，它是Python标准库的一部分，专门用于编写和执行单元测试。与其他测试框架相比，
[Swift]LeetCode943. 最短超级串 | Find the Shortest Superstring 黄小二哥 swift
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号：山青咏芝（shanqingyongzhi）➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）➤GitHub地址：https://github.com/strengthen/LeetCode➤原文地址：https://www.cnblogs.com/streng
Dockerfile（1） - FROM 指令详解小菠萝测试笔记 docker python java cmd 大数据
FROM指明当前的镜像基于哪个镜像构建dockerfile必须以FROM开头，除了ARG命令可以在FROM前面FROM[--platform=][AS]FROM[--platform=][:][AS]FROM[--platform=][@][AS]小栗子FROMalpine:latest一个dockerfile可以有多个FROM可以有多个FROM来创建多个镜像，或区分构建阶段，将一个构建阶段作为另
详解mybatis的一二级缓存以及缓存失效原因仰望天花板缓存数据库 mybatis java mysql
数据库的大部分场景下是从磁盘读取，如果数据从内存进行读取，速度较比磁盘要快得多。但因为内存的容量有限，所以一般只会把使用和查询较多的数据缓存起来，以便快速反应，其他使用率不太多的继续存放在磁盘。mybatis分为一级缓存和二级缓存1.一级缓存一级缓存存放在SqlSqeeion上，默认开启1.1pojo@DatapublicclassRole{privateLongid;privateStringr
[移动端自动化] AppAgent介绍大卫软件测试自动化
AUITestAgentAUITestAgent/README_zh.mdatmain·bz-lab/AUITestAgent(github.com)1/MobileAgentX-PLUG/MobileAgent:Mobile-Agent:ThePowerfulMobileDeviceOperationAssistantFamily(github.com)2/AppAgentAppAgent/RE
python比较字符串是否一样,Python如何确定两个字符串是否相同鲁东学子 python比较字符串是否一样
I'vetriedtounderstandwhenPythonstringsareidentical(akasharingthesamememorylocation).Howeverduringmytests,thereseemstobenoobviousexplanationwhentwostringvariablesthatareequalsharethesamememory:importsy
UI 自动化的页面对象管理神器 PO-Manager TesterHome
原文由alex发表于TesterHome社区网站，点击原文链接可于作者直接交流。做UI自动化的同学都知道，UI自动化一个难点就是页面元素的变化，让自动化维护成为一个痛点。在此，为了减轻这个痛点，我在基于Page-Object模式的基础上开发了页面对象维护的工具。该工具为vscode的一个插件，可以通过vscode插件市场搜索PO-Manager来下载安装本文中的页面对象库文件基于json.一个元素
【C#Mutex】 initiallyOwned错误引起的缺陷闻缺陷则喜何志丹 c#互斥量进程同步 WaitOne initiallyOwned 临界区
临界区只能对同一个进程的不同线程同步，互斥量可以跨进程同步。典型应用场景：两个exe会操作同一个注册表项。错误代码封装类publicclassCMutexHelp:IDisposable{publicCMutexHelp(){s_mutex.WaitOne();}privatestaticMutexs_mutex=newMutex(true,"Time202409091406ab");public
python读写CSV文件 bcbobo21cn .Net python 开发语言机器学习 CSV
做数据分析，有时候要分析的数据在CSV文件里；先看一下python读写CSV文件；importpandasaspddf=pd.read_csv('test1.csv')print(df)print('')print(df.head(2))companyname=["A1","B2","E3","F4"]legperson=["lier","yanqi","wangwu","zhangsan"]le
基于Python执行lua脚本 xu-jssy Python自动化脚本 python lua 自动化 rpa
一、依赖安装pipinstalllupa二、源码将lua文件存放在base_path路径，将lua文件名称（不包含后缀名）传递给lua_runner函数即可importmultiprocessingimportlupa#lua文件存放位置base_path='D:\\test\\lua'classLuaFuncion:#创建Lua运行时环境lua=lupa.LuaRuntime(unpack_re
Presto【基础 01】简介+架构+数据源+数据模型 2401_84254343 程序员架构
一个Catalog包含Schema和Connector。例如，配置JMX的Catalog，通过JXMConnector访问JXM信息。当执行一条SQL语句时，可以同时运行在多个Catalog。Presto处理table时，是通过表的完全限定（fully-qualified）名来找到Catalog。例如，一个表的权限定名是hive.test_data.test，则test是表名，test_data是
安装依赖时报错：npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving 帅气绝非偶然 npm 前端 node.js
这里我在npmivant@latest-v2或者其他依赖包的时候出现以上错误可能是npm版本问题报错解决方法：在安装命令后边加上1|--legacy-peer-deps或者--force如图中的指令：
HALTT4LLM：大型语言模型的幻觉检测指标谢忻含Norma
HALTT4LLM：大型语言模型的幻觉检测指标haltt4llmThisprojectisanattempttocreateacommonmetrictotestLLM'sforprogressineliminatinghallucinationswhichisthemostseriouscurrentprobleminwidespreadadoptionofLLM'sformanyrealpur
5-【JavaWeb】JUnit 单元测试及JUL 日志系统 weixin_44329069 JavaWeb junit 单元测试
1.使用JUnit进行单元测试JUnit是Java中非常流行的单元测试框架，MyBatis与JUnit可以很好地结合，来测试持久层代码的正确性。1.1添加JUnit依赖在使用JUnit之前，需要在pom.xml中引入JUnit依赖。junitjunit4.13.2test1.2单元测试基本结构假设我们要测试UserMapper中的getUserById方法，测试代码如下：importorg.apa
Python OS模块操作文件小丫头呀 #Python随笔 python
在Python中，可以使用os模块主要对文件进行重命名，删除等一些操作以下为os模块常用的方法示例:重命名操作importosos.rename('Test.txt','Test_重命名.txt')#参数1：要重命名的源文件#参数2：对源文件要重新命名的名称删除文件importosos.remove('Test_重命名.txt')#参数为要删除的源文件名称，如果该文件不存在则抛出异常创建空文件夹i
学生管理系统 wu1113_ java
文章目录1.案例需求2.编程思路3.运行效果4.案例源码5.小结1.案例需求上次我们完成了一个酒店管理系统，这次我们使用面向对象思维，完成一个学生管理系统。实现一个简单的学生管理系统，它具备5个功能，分别为显示所有的学生信息添加学生修改学生信息删除学生退出本系统功能2.编程思路首先我们要额外定义一个Studnet类，包括学生的学号、姓名、年龄、性别等属性。其次我们定义一个测试类Test，在测试类的
VUE实现大小缩放轮播图书边事. vue.js 前端 javascript
效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
python 判断 ‘NoneType’的方法 cuisidong1997 文本转换 python
的错误时说明需要进行判断，而对‘NoneType’进行判断时直接使用‘isNone’即可，如下：iftextisNone:print('testis’+None)else:print('testisnot’+None)a=re.match(r’主叫号码(.*)客户姓名’,r’2、主叫号码：15558191990;3、客户姓名：韩东远;')print(type(a))ifaisNone:print(
Unity3D多线程UI之ScrollYExtand 胡强_79a4
先附上git地址https://github.com/huqiang0204/huqiang.UnitySubThreadUI示例代码请看ScrollExTestPage可以绑定三种模型，头部，尾部，和中间数据部分这里只用到了中间数据模型和头部模型Listdatas=newList();ScrollYExtand.DataTemplatetmp=newScrollYExtand.DataTempl
Ihandy Unity开发面试题 2024 z2014z 面试职场和发展
1.当i>10时，调用test是否会出现死锁？原因是什么？voidtest(inti){lock(this){if(i>10){i--;test(i);}}}2.有一个表有n条记录，每条记录有两个字段，weight和id，写出程序保证id出现的概率与权重相同3.从1到n，一共有多少个14.二叉树的层次遍历5.给定两个链表，将对应数值相加6.检查两棵树是否相同
PCIe进阶之Gen3 Physical Layer Transmit Logic（二）芯芯之火，可以燎原 PCIe进阶硬件工程信息与通信
1文章概述本文是接着上面一篇文章《Gen3PhysicalLayerTransmitLogic（一）》继续对Gen3PhysicalLayerTransmitLogic做进一步的解析，具体包含ByteStriping和Scrambling以及Serializer。1.1ByteStripingGen3x1OrderedSetConstruction如下所示：OrderedSetBlock由一个Sy
避免 PyCharm 将该 Python 脚本作为测试运行 MonkeyKing.sun python pycharm ide
为了避免PyCharm将该Python脚本作为测试运行（即pytest自动捕获），你可以做以下几步来确保该脚本作为普通的Python程序执行，而不是作为pytest运行。解决方案：1.确保文件名不以test_开头：Pytest会自动检测以test_开头的文件，并尝试将其作为测试运行。如果你的文件名是test_milvus.py，pytest会尝试收集并运行它。可以重命名文件为不包含test_的前缀
PostgreSQL | 生成UUID 报错：HINT: No function matches the given name and argument types 慌途L PostgreSQL postgresql uuid uuid_generate gen_random_uuid
在PG数据库上新建表结构：CREATETABLE"public"."t_test"("guid"uuidNOTNULLDEFAULTuuid_generate_v4(),"data"jsonb,"create_time"timestamptz(6)DEFAULTnow(),CONSTRAINT"test_pkey"PRIMARYKEY("guid"));报错：ERROR:functionuuid_
vue3 + vite + js 配置Eslint + prettier 菜鸡的崛起 vue javascript vue
第一步安装ESlintnpmieslint@latest-D或pnpmaddeslint@latest-D/pnpminstalleslint@latest-D或yarnaddeslint@latest-D第二步初始化Eslintnpxeslint--init执行npxeslint--init控制台会出现以下步骤1）你想如何使用ESLint（选择最后一个）Youcanalsorunthiscomm
xml解析小猪猪08 xml
1、DOM解析的步奏准备工作： 1.创建DocumentBuilderFactory的对象 2.创建DocumentBuilder对象 3.通过DocumentBuilder对象的parse(String fileName)方法解析xml文件 4.通过Document的getElem
每个开发人员都需要了解的一个SQL技巧 brotherlamp linux linux视频 linux教程 linux自学 linux资料
对于数据过滤而言CHECK约束已经算是相当不错了。然而它仍存在一些缺陷，比如说它们是应用到表上面的，但有的时候你可能希望指定一条约束，而它只在特定条件下才生效。使用SQL标准的WITH CHECK OPTION子句就能完成这点，至少Oracle和SQL Server都实现了这个功能。下面是实现方式： CREATE TABLE books ( id &
Quartz——CronTrigger触发器 eksliang quartz CronTrigger
转载请出自出处：http://eksliang.iteye.com/blog/2208295 一.概述 CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案，调度规则基于 Cron 表达式，CronTrigger 支持日历相关的重复时间间隔（比如每月第一个周一执行），而不是简单的周期时间间隔。二.Cron表达式介绍 1）Cron表达式规则表 Quartz
Informatica基础 18289753290 Informatica Monitor manager workflow Designer
1. 1）PowerCenter Designer：设计开发环境，定义源及目标数据结构；设计转换规则，生成ETL映射。 2）Workflow Manager：合理地实现复杂的ETL工作流，基于时间，事件的作业调度 3）Workflow Monitor：监控Workflow和Session运行情况，生成日志和报告 4）Repository Manager：
linux下为程序创建启动和关闭的的sh文件，scrapyd为例酷的飞上天空 scrapy
对于一些未提供service管理的程序每次启动和关闭都要加上全部路径，想到可以做一个简单的启动和关闭控制的文件下面以scrapy启动server为例，文件名为run.sh： #端口号，根据此端口号确定PID PORT=6800 #启动命令所在目录 HOME='/home/jmscra/scrapy/' #查询出监听了PORT端口
人--自私与无私永夜-极光
今天上毛概课,老师提出一个问题--人是自私的还是无私的,根源是什么? 从客观的角度来看,人有自私的行为,也有无私的
Ubuntu安装NS-3 环境脚本随便小屋 ubuntu
将附件下载下来之后解压，将解压后的文件ns3environment.sh复制到下载目录下（其实放在哪里都可以，就是为了和我下面的命令相统一）。输入命令： sudo ./ns3environment.sh >>result 这样系统就自动安装ns3的环境，运行的结果在result文件中，如果提示 com
创业的简单感受 aijuans 创业的简单感受
2009年11月9日我进入a公司实习，2012年4月26日，我离开a公司，开始自己的创业之旅。今天是2012年5月30日，我忽然很想谈谈自己创业一个月的感受。当初离开边锋时，我就对自己说：“自己选择的路，就是跪着也要把他走完”，我也做好了心理准备，准备迎接一次次的困难。我这次走出来，不管成败
如何经营自己的独立人脉 aoyouzi 如何经营自己的独立人脉
独立人脉不是父母、亲戚的人脉，而是自己主动投入构造的人脉圈。“放长线，钓大鱼”，先行投入才能产生后续产出。现在几乎做所有的事情都需要人脉。以银行柜员为例，需要拉储户，而其本质就是社会人脉，就是社交！很多人都说，人脉我不行，因为我爸不行、我妈不行、我姨不行、我舅不行……我谁谁谁都不行，怎么能建立人脉？我这里说的人脉，是你的独立人脉。以一个普通的银行柜员
JSP基础百合不是茶 jsp 注释隐式对象
1,JSP语句的声明 <%! 声明 %> 　　声明：这个就是提供java代码声明变量、方法等的场所。表达式 <%= 表达式 %> 　　这个相当于赋值，可以在页面上显示表达式的结果，程序代码段/小型指令　<% 程序代码片段 %> 2,JSP的注释
web.xml之session-config、mime-mapping bijian1013 java web.xml servlet session-config mime-mapping
session-config 1.定义： <session-config> <session-timeout>20</session-timeout> </session-config> 2.作用：用于定义整个WEB站点session的有效期限，单位是分钟。 mime-mapping 1.定义： <mime-m
互联网开放平台（1） Bill_chen 互联网 qq 新浪微博百度腾讯
现在各互联网公司都推出了自己的开放平台供用户创造自己的应用，互联网的开放技术欣欣向荣，自己总结如下： 1.淘宝开放平台(TOP) 网址：http://open.taobao.com/ 依赖淘宝强大的电子商务数据，将淘宝内部业务数据作为API开放出去，同时将外部ISV的应用引入进来。目前TOP的三条主线： TOP访问网站：open.taobao.com ISV后台：my.open.ta
【MongoDB学习笔记九】MongoDB索引 bit1129 mongodb
索引可以在任意列上建立索引索引的构造和使用与传统关系型数据库几乎一样,适用于Oracle的索引优化技巧也适用于Mongodb 使用索引可以加快查询,但同时会降低修改,插入等的性能内嵌文档照样可以建立使用索引测试数据 var p1 = { "name":"Jack", "age&q
JDBC常用API之外的总结白糖_ jdbc
做JAVA的人玩JDBC肯定已经很熟练了，像DriverManager、Connection、ResultSet、Statement这些基本类大家肯定很常用啦，我不赘述那些诸如注册JDBC驱动、创建连接、获取数据集的API了，在这我介绍一些写框架时常用的API，大家共同学习吧。 ResultSetMetaData获取ResultSet对象的元数据信息
apache VelocityEngine使用记录 bozch VelocityEngine
VelocityEngine是一个模板引擎，能够基于模板生成指定的文件代码。使用方法如下： VelocityEngine engine = new VelocityEngine();// 定义模板引擎 Properties properties = new Properties();// 模板引擎属
编程之美-快速找出故障机器 bylijinnan 编程之美
package beautyOfCoding; import java.util.Arrays; public class TheLostID { /*编程之美假设一个机器仅存储一个标号为ID的记录，假设机器总量在10亿以下且ID是小于10亿的整数，假设每份数据保存两个备份，这样就有两个机器存储了同样的数据。 1.假设在某个时间得到一个数据文件ID的列表，是
关于Java中redirect与forward的区别 chenbowen00 java servlet
在Servlet中两种实现： forward方式：request.getRequestDispatcher(“/somePage.jsp”).forward(request, response); redirect方式：response.sendRedirect(“/somePage.jsp”); forward是服务器内部重定向，程序收到请求后重新定向到另一个程序，客户机并不知
[信号与系统]人体最关键的两个信号节点 comsci 系统
如果把人体看做是一个带生物磁场的导体,那么这个导体有两个很重要的节点,第一个在头部,中医的名称叫做百汇穴, 另外一个节点在腰部,中医的名称叫做命门如果要保护自己的脑部磁场不受到外界有害信号的攻击,最简单的
oracle 存储过程执行权限 daizj oracle 存储过程权限执行者调用者
在数据库系统中存储过程是必不可少的利器，存储过程是预先编译好的为实现一个复杂功能的一段Sql语句集合。它的优点我就不多说了，说一下我碰到的问题吧。我在项目开发的过程中需要用存储过程来实现一个功能，其中涉及到判断一张表是否已经建立，没有建立就由存储过程来建立这张表。 CREATE OR REPLACE PROCEDURE TestProc IS fla
为mysql数据库建立索引 dengkane mysql 性能索引
前些时候，一位颇高级的程序员居然问我什么叫做索引，令我感到十分的惊奇，我想这绝不会是沧海一粟，因为有成千上万的开发者（可能大部分是使用MySQL的）都没有受过有关数据库的正规培训，尽管他们都为客户做过一些开发，但却对如何为数据库建立适当的索引所知较少，因此我起了写一篇相关文章的念头。最普通的情况，是为出现在where子句的字段建一个索引。为方便讲述，我们先建立一个如下的表。
学习C语言常见误区如何看懂一个程序如何掌握一个程序以及几个小题目示例 dcj3sjt126com c 算法
如果看懂一个程序，分三步 1、流程 2、每个语句的功能 3、试数如何学习一些小算法的程序尝试自己去编程解决它，大部分人都自己无法解决如果解决不了就看答案关键是把答案看懂，这个是要花很大的精力，也是我们学习的重点看懂之后尝试自己去修改程序，并且知道修改之后程序的不同输出结果的含义照着答案去敲调试错误
centos6.3安装php5.4报错 dcj3sjt126com centos6
报错内容如下: Resolving Dependencies --> Running transaction check ---> Package php54w.x86_64 0:5.4.38-1.w6 will be installed --> Processing Dependency: php54w-common(x86-64) = 5.4.38-1.w6 for
JSONP请求 flyer0126 jsonp
使用jsonp不能发起POST请求。 It is not possible to make a JSONP POST request. JSONP works by creating a <script> tag that executes Javascript from a different domain; it is not pos
Spring Security（03）——核心类简介 234390216 Authentication
核心类简介目录 1.1 Authentication 1.2 SecurityContextHolder 1.3 AuthenticationManager和AuthenticationProvider 1.3.1 &nb
在CentOS上部署JAVA服务 java--hhf java jdk centos Java服务
本文将介绍如何在CentOS上运行Java Web服务，其中将包括如何搭建JAVA运行环境、如何开启端口号、如何使得服务在命令执行窗口关闭后依旧运行第一步：卸载旧Linux自带的JDK ①查看本机JDK版本 java -version 结果如下 java version "1.6.0"
oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date] ldzyz007 oracle mysql SQL Server
oracle &n
记Protocol Oriented Programming in Swift of WWDC 2015 ningandjin protocol WWDC 2015 Swift2.0
其实最先朋友让我就这个题目写篇文章的时候，我是拒绝的，因为觉得苹果就是在炒冷饭，把已经流行了数十年的OOP中的“面向接口编程”还拿来讲，看完整个Session之后呢，虽然还是觉得在炒冷饭，但是毕竟还是加了蛋的，有些东西还是值得说说的。通常谈到面向接口编程，其主要作用是把系统设计和具体实现分离开，让系统的每个部分都可以在不影响别的部分的情况下，改变自身的具体实现。接口的设计就反映了系统
搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS rensanning keepalived
（一）Keepalived （1）安装 # cd /usr/local/src # wget http://www.keepalived.org/software/keepalived-1.2.15.tar.gz # tar zxvf keepalived-1.2.15.tar.gz # cd keepalived-1.2.15 # ./configure # make &a
ORACLE数据库SCN和时间的互相转换 tomcat_oracle oracle sql
SCN（System Change Number 简称 SCN）是当Oracle数据库更新后，由DBMS自动维护去累积递增的一个数字，可以理解成ORACLE数据库的时间戳，从ORACLE 10G开始，提供了函数可以实现SCN和时间进行相互转换；　　用途：在进行数据库的还原和利用数据库的闪回功能时，进行SCN和时间的转换就变的非常必要了；　　操作方法：　　1、通过dbms_f
Spring MVC 方法注解拦截器 xp9802 spring mvc
应用场景，在方法级别对本次调用进行鉴权，如api接口中有个用户唯一标示accessToken,对于有accessToken的每次请求可以在方法加一个拦截器，获得本次请求的用户，存放到request或者session域。 python中，之前在python flask中可以使用装饰器来对方法进行预处理，进行权限处理先看一个实例,使用@access_required拦截： ?

Angular单元测试与E2E测试

配置单元测试

配置文件

浏览器配置

运行测试

自定义Launcher

测试覆盖率

编写测试

第一个测试

依赖注入与Mock

HttpClient、Router、Location

Component测试

嵌套组件

属性指令测试

Something Yellow

The Default (Gray)

No Highlight

background "yellow"', () => { const bgColor = des[0].nativeElement.style.backgroundColor; expect(bgColor).toBe('yellow'); }); it('should color 2nd

should not have a customProperty', () => { expect(bareH2.properties['customProperty']).toBeUndefined(); });

Pipe测试

Testing Module

调试

配置E2E测试

安装Protractor

配置文件

浏览器配置

Selenium Server配置

运行测试

指定配置文件

编写E2E测试

第一个测试

Protractor

参考资料

你可能感兴趣的:(Angular,Test,Jasmine,Angular)

`should not have a customProperty', () => { expect(bareH2.properties['customProperty']).toBeUndefined(); });`