我一直在将我的应用程序从4迁移到6,我无法为我的e2e测试执行我的代理脚本.脚本列表如下所示:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:tst1": "ng serve --proxy-config config/proxy/proxy.tst1.json",
    "start:tst5": "ng serve --proxy-config config/proxy/proxy.tst5.json",
    ...
    "test:watch": "ng test",
    "lint": "ng lint --type-check true",
    "e2e": "ng e2e",
    "e2e:tst1": "ng e2e --proxy-config config/proxy/proxy.tst1.json",
    "e2e:tst5": "ng e2e --proxy-config config/proxy/proxy.tst5.json",
  },

我不明白的是,启动命令(ng serve)工作得非常好npm run start:tst5.但是,当我尝试执行e2e测试时,npm run e2e:tst5它会抛出错误:Unknown option: '--proxyConfig'.

我的angular.json中的配置如下所示:

angular.json

...
"lmsbo-bo-e2e": {
  "root": "e2e",
  "sourceRoot": "e2e",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": { …

测试方法

  public onSubmit(registerData: RegisterDataModel): void {
    this.registrationService.registerWithEmailAndPassword(registerData).then((msg: string[]) =>
      this.router.navigate(['/completeSignUp']).then(() => {
        msg.forEach(singleMessage => this.notificationService.primary(singleMessage));
      }))
      .catch((msg) => msg.forEach(singleMessage => {
        this.notificationService.danger(singleMessage);
      }));
  }

我想测试是否router.navigate在我的方法中调用.现在我想嘲笑我的 service.registerWithEmailAndPasswort承诺但不知何故我不能嘲笑它.

我的规范文件

//Stubs
const routerStub: Router = jasmine.createSpyObj('Router', ['navigate']);
const registryStub: RegistrationService = jasmine.createSpyObj('RegistrationService', ['registerWithEmailAndPassword']);

单元测试

  it('should navigate on promise - success', () => {
    (<jasmine.Spy>registryStub.registerWithEmailAndPassword).and.callThrough();
    const spy = (<jasmine.Spy>routerStub.navigate);
    component.onSubmit({username: null, email: null, password: null, passwordConfirm: null, termsAndCondition: null});
    expect(spy).toHaveBeenCalledWith(['/completeSignUp']);
  });

出现的错误是:TypeError: Cannot read property 'then' of undefined 有人如何正确模拟此服务？

编辑 …

我目前正在使用ngBootstrap的自动完成机制(typeahead).现在我想要对输入事件的每个序列调用一个方法进行单元测试.我的测试用例的错误目前是:Cannot read property 'pipe' of undefined

HTML:

<input id="locationEdit" type="text" class="form-control"
         [(ngModel)]="user.location" name="location [ngbTypeahead]="search"/>

零件:

public ngOnInit() {
    this.search = (text$: Observable<string>) =>
      text$.pipe(
        tap(() => {
          this.isSearching = true;
          this.searchFailed = false;
        }),
        debounceTime(750),
        distinctUntilChanged(),
        switchMap(term =>
          this.cityService.getLocation(term).pipe(
            tap((response) => {
              this.searchFailed = response.length === 0;
              this.isSearching = false;
            })))
      );
  }

spec.ts

  it('should call spy on city search', fakeAsync(() => {
    component.user = <User>{uid: 'test', username: 'mleko', location: null, description: null};
    const spy = (<jasmine.Spy>cityStub.getLocation).and.returnValue(of['München Bayern']);

    fixture.detectChanges(); …

我问自己@Input/ @Output在父/子组件和使用服务之间的区别在哪里，只有依赖注入使该服务无效@Injectable()。还是除了输入/输出只能在父/子补偿中使用以外，是否还有其他区别。

以下示例提供了更好的可视化效果：

使用@Input：

<parent-comp>
   <child-comp [inputFromParent]="valueFromParent"></child-comp>
</parent-comp>

ChildComponent：

@Component({
  selector: 'child-comp',
  template: ...
})
export class ChildComponent {
  @Input() public inputFromParent: string;
}

使用依赖注入

@Injectable()
export class Service {
   private value: string;

public get value(): string {
   return value;
}

public set value(input): void {
   value = input;
}

}

现在我们可以在父组件中设置值。并通过依赖注入获得子代的价值。ChildComponent：

@Component({
  selector: 'child-comp',
  template: ...
})
export class ChildComponent {
  private value: string;
  constructor(private service: Service) {
  this.value = this.service.getValue;
} …

在我代理到一个地址之前，我想设置代理的标头（就像拦截器一样）。我使用 express-http-library 并用 Node.JS 表达。到目前为止，我的代码如下所示。顺便提一句。这个图书馆的文档并没有让我变得更聪明。

app.use('/v1/*', proxy('velodrome.usefixie.com', {
userResHeaderDecorator(headers, userReq, userRes, proxyReq, proxyRes) {
    // recieves an Object of headers, returns an Object of headers.
    headers = {
        Host: 'api.clashofclans.com',
        'Proxy-Authorization': `Basic ${new Buffer('token').toString('base64')}`
    };
    console.log(headers);

    return headers;
}

}));

即使控制台将标题 obj 打印出来。正如预期的那样，代理授权不起作用：

{ Host: 'api.clashofclans.com',
  'Proxy-Authorization': 'Basic token' }

谁能帮我吗？

我想要一个Enter-comp.作为概述和基本上两个孩子comp.例如login-and register-comp.此外,我想用多个路由器插座来管理它.但"当然"它还没有奏效.它让我一扔:Error: Cannot match any routes. URL Segment: ',%20%7Boutlets:%20%7Blogin:%20%5B'login'%5D%7D%7D'

应用路由配置

const routes: Routes = [
  {path: 'stories', component: StoriesComponent},
  {path: '', component: EnterOverviewComponent, children: [
      {path: 'login', component: LoginComponent, outlet: 'login'},
      {path: 'register', component: RegisterComponent, outlet: 'register'},
    ]}
];

应用程序根

<app-navbar></app-navbar>

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>
<router-outlet name="register"></router-outlet>

Navbar comp.

期待这里的错误.我怀疑,我称之为虚假路线:

<ul class="navbar-nav ml-auto">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {login: ['login']}}">Sign In</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {register: ['register']}}">Register</a>
  </li>
</ul>

我发现这个问题在这里相对经常被问到，但我仍然不知道如何管理独特属性的规则。我有以下文档数据模型：

users/{usereId}/Object
users/usernames/Object

第一个对象包含有关用户的基本信息，例如：

{
email: "example@hotmail.edu"
photoURL: null
providerId: null
role: "admin"
username:"hello_world"
}

同时 usernames 对象仅包含 作为username属性键和作为uid值，例如：

{
hello_world:"F3YAm8ynF1fXaurezxaQTg8RzMB3"
}

我这样设置是因为我希望每个用户都有一个唯一的用户名。迭代第二个对象比迭代第一个对象消耗的时间更少。但回到我的问题。我需要它hello_world在写操作中是唯一的。但到目前为止我的规则还不起作用。我有：

service cloud.firestore {
  match /databases/{database}/documents {
  
    match /{document=**} {
      allow read, write: if request.auth.uid != null
    }
    
    match /users/{userID} {
        allow create: if !exists(/databases/$(database)/documents/users/$(request.resource.data.username)) <== does not apply
    }
    
  }
}

第二个匹配是，什么应该应用唯一属性规则。有谁知道如何正确设置规则？

在控制台中，对象模型如下所示

I have a repo that contains two subprojects. Just for completeness a frontend project and a firebase cloud-function project (both using separate package.jsons). Now for this project, I want to start two jobs concurrently. But I can't get the setup done with CircleCI. I don't have any cache-configuration.

project structure

-creepy-stories
  -.circleci
  -cloud-functions
    -functions
     package.json
  -frontend
   package.json

config.yml

version: 2.1
jobs:
  cloud-functions:
    docker:
      - image: circleci/node:10.8.0

    working_directory: ~/creepy-stories/cloud-functions/functions

    steps:
      - checkout
      - run: npm install
      - run: npm run …

在开始这个问题之前。我知道，有很多类似的问题和我的一样。但没有任何解决方案能够帮助我。

我用 rxjs 创建了一个自定义的自动完成，并想测试一个方法是否在输入事件上被调用。但错误表明该方法从未被调用，例如：

 Expected spy CityService.getLocation to have been called with [ 'mun' ] but it was never called.

html

我通过async管道在 HTML 中订阅了我的 observable 。

 Expected spy CityService.getLocation to have been called with [ 'mun' ] but it was never called.

成分

      <input type="text" [(ngModel)]="location" class="form-control" id="locationSearchInput"/>
      <div class="spacer">
        <p class="invalid-feedBack" *ngIf="searchFailed && location.length > 0">Nothing found.</p>
        <ul id="search" *ngFor="let item of (search | async)">
          <li class="resultItem" type="radio" (click)="location = item">{{item}}</li>
      </ul>
    </div>

测试

      ngOnInit(): void { …

我有一个直接的反应补偿。我想根据反应状态测试样式。该 comp 如下所示：

反应补偿。

const Backdrop = ({ showBackdrop }) => {
    const backdropRef = useRef();

    function getBackdropHeight() {
        if (typeof window !== 'undefined') {
            return `calc(${document.body.clientHeight}px -
            ${backdropRef.current?.offsetTop || 0}px)`;
        }

        return 0;
    }

    return (
        <div
            data-testid="backdrop"
            className={classNames(styles.backdrop, showBackdrop ? styles.show : styles.hide)}
            ref={backdropRef}
            style={{ height: getBackdropHeight() }}
        />
    );
};

造型

.backdrop {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 156px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 3;
    ...
}

.show {
    opacity: 0;
    visibility: …