为activatedRoute数据创建测试

时间:2018-03-27 06:49:12

标签: angular phantomjs karma-runner

我想为我的组件创建测试。我有路由器解析器,解析数据并在ng init中读取数据。我想为此创建测试。如何为此代码创建测试

Missing parameter type: post

和路线就是这样

$profile_photo = $request->file('profile_photo');
$finalData = [];
$names = [];
$addresses = [];
$images = [];
for ($i=0; $i < count(request('profile_photo')); $i++) {
  $pro_fileExt =  $profile_photo[$i]->getClientOriginalExtension();
  $pro_fileNameToStore = time().'.'.$pro_fileExt;
  $pro_pathToStore = public_path('images');
  Image::make($profile_photo[$i])->save($pro_pathToStore . DIRECTORY_SEPARATOR. $pro_fileNameToStore);
  $profile_ph = '/images/'.$pro_fileNameToStore; }
  $names[] = $request->input('name');
  $addresses[] = $request->input('address');
  $images[] = $profile_ph;
}
 $cust_details=json_encode(['name' => $names, 'address' => $addresses, 'images' => $images]);
 $customer_details->insert($cust_details);

并解决这个问题

    @Component({
    selector: 'jhi-label-detail',
    templateUrl: './label-detail.component.html'
})
export class LabelDetailComponent implements OnInit {

    label: Label;

    constructor(
        private route: ActivatedRoute
    ) {
    }

    ngOnInit() {
        this.route.data.subscribe(({label}) => {
            this.label = label.body ? label.body : label;
        });
    }


}

2 个答案:

答案 0 :(得分:8)

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs/observable/of';
import { Observable } from 'rxjs/Observable';

import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  const route = ({ data: of({ label: 'hello' }) } as any) as ActivatedRoute;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [MyComponent],
        providers: [{ provide: ActivatedRoute, useValue: route }],
      }).compileComponents();
    }),
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should set the label', () => {
    expect(component.label).toEqual('hello');
  });
});

这里要注意的重要一点是,我们在ActivatedRoute中提供了TestBed.providers的自己实现,只有一个属性(data)由我们的组件使用。< / p>

答案 1 :(得分:1)

在angular 8+中有一个RouterTestingModule,您可以使用它来访问组件的ActivatedRoute或Router。您也可以将路由传递到RouterTestingModule并为请求的路由方法创建间谍。

例如,在我的组件中,我有:

ngOnInit() {
    this.data = this.route.data
}

在我的测试中,我有:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductLinePageComponent ],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [
        RouterTestingModule.withRoutes([])
      ],
    })
    .compileComponents()
  }))

  beforeEach(() => {
    router = TestBed.get(Router)
    route = TestBed.get(ActivatedRoute)
    route.data = hot('(a)', {a: someData})
  })

以及稍后在“ it”部分:

  it('should update', () => {
    const spyRoute = spyOn(route.snapshot.paramMap, 'get')
    spyRoute.and.returnValue('21')
    fixture = TestBed.createComponent(ProductLinePageComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
    // here you can test the functionality which is triggered by route data
    const expected = cold('(a)', {a: someData})
    expect(component.data).toBeObservable(expected)
  })