小编dec*_*bal的帖子

当我尝试测试为 Angular Material 设置值的组件方法时MatPaginator，出现以下错误：

TypeError: Cannot set property 'pageIndex' of undefined

这是我的代码：

成分：

resetVacancySearch = () => {
    this.isVacanciesSearchMode = false;
    this.searchVacanciesValue = '';
    this.paginatorVacancies.pageIndex = 0; // reset to the first page
    this.paginatorVacancies.pageSize = 10;
    this.getVacanciesList(0, 10, 'name', 'ASC');
}

测试文件：

it('should call sourcingService.getVacanciesList and reset the search value from the input field', () => {
        spyOn(sourcingService, 'getVacanciesList').and.returnValue(Observable.of());
        component.resetVacancySearch();
        expect(sourcingService.getVacanciesList).toHaveBeenCalledWith(0, 10, 'name', 'ASC');
        expect(component.searchVacanciesValue).toEqual('');
 });

该应用程序工作正常，但我无法将 MatPaginator 的实例放入测试文件中。有人可以告诉我如何模拟 MatPaginator 进行测试吗？谢谢！

我想编写一个测试来检查点击后页面上是否存在元素.因此,当我单击带有"addItem"类的元素时,使用*ngIf隐藏此元素.我试过这样的:

it('Should handle click on .addItem button', () => {
    spyOn(component, 'addItem');
    addItemDebugElement = componentFixture.debugElement.query(By.css('.addItem'));
    addItemDebugElement.nativeElement.click();  //  click on the button
    expect(addItemDebugElement).toExist();
});

但它说:Property 'toExist' does not exist on type 'Matchers<DebugElement>'. 你能告诉我该怎么做吗？非常感谢!

当我想登录我的应用程序时，在输入正确的详细信息并按“登录”按钮后，出现此错误：

如代码所示，URL 更改为“仪表板”，但我看不到页面内容，但出现上述错误。

在控制台中，我可以看到来自 Header 组件（它是仪表板的一部分）的代码被多次访问（我认为这是导致问题的原因）：

如果我刷新页面，一切正常。另外，如果我注销并返回登录页面，我可以毫无错误地登录。但是，如果我刷新页面并尝试登录，则会返回错误。

这是代码：

标题组件：

const Header = withRouter(({ history }) => {

const values = useSelector((state) => ({...state.sharedReducer}));
console.log('***  VALUES: ', values);
const dispatch = useDispatch();

const handleMenuClick = () => dispatch(menuClickAction());
const handleLinkClick = () => dispatch(closeMenuAction());
................

登录组件：

  //  Runs only once on init
  useEffect(() => {
    if(isAuth) {
      props.history.push("dashboard"); //  Redirect to 'dashboard'
    }
  });

  useEffect(() => {
    //  Clear the form
    dispatch(clearFormDataAction());
  }, [dispatch]);

  useEffect(() => {
    if(!values.emailEmptyError && !values.passwordEmptyError && …

我正在尝试将mat-paginator用于我想显示通过 HTTP 调用检索到的数据的表，但我遇到的问题是我无法将分页器的长度设置为我从应用程序接口。在这个例子中，长度在组件中是硬编码的，但这应该不是问题（我也尝试在视图中将它设置为 [length]="100" 并且它不起作用）。这是 HTML：

<mat-table #table1="matSort" [dataSource]="dataSource1" matSort>

   <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>
            <mat-checkbox name="all" class="" [checked]="isAllChecked()" (change)="checkAll($event)" *ngIf="bulkView"></mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <mat-checkbox class="" [checked]="isAllRowsSelected" [(ngModel)]="element.state" *ngIf="bulkView"></mat-checkbox>
        </mat-cell>
   </ng-container>

    <ng-container matColumnDef="firstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyAgent"> First name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <img class="personal-data-table__img" src="/assets/app/media/img/users/100_3.jpg" alt="user" width="50" />
                {{element.firstName}} 
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyEmail"> Last name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="city">
        <mat-header-cell *matHeaderCellDef mat-sort-header="Website"> City </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.city}} …

我试图用ngx-image-cropper我的应用程序上传图像,但我无法保存裁剪的图像.例如,如果我尝试保存主文件(通过该文件加载的文件input type="file"),一切正常.在这种情况下,文件发送方式如下:

{name: "300_3.jpg", 
lastModified: 1510510128437, 
lastModifiedDate: Sun Nov 12 2017 20:08:48 GMT+0200 (GTB Standard Time), webkitRelativePath: "", 
size: 81972, …}

但是,如果我尝试上传图像的裁剪版本,则文件如下所示:

data:image/png;base64,iVBORw0KGgoAAAANSU............

而服务器的响应是这样的:

{error: "Bad Request",
exception:"org.springframework.web.multipart.support.MissingServletRequestPartException",
message: "Required request part 'file' is not present",
path: "/api/myEndPoint/",
status: 400,
timestamp: 1518424822285}

所以基本上我需要像第一种情况一样发送一个abject,但我所拥有的只是一个base64项目.

这里也是HTML代码,如果它有帮助:

<image-cropper
                    [imageChangedEvent]="imageChangedEvent"
                    [maintainAspectRatio]="true"
                    [aspectRatio]="4 / 4"
                    [resizeToWidth]="250"
                    format="png"
                    (imageCropped)="imageCropped($event)"
                    (imageLoaded)="imageLoaded()"
                    (loadImageFailed)="loadImageFailed()"
                    *ngIf="isUploadedFile">
                </image-cropper>

有人可以建议我如何上传裁剪版本而不是我上传的初始文件？或者这是需要在服务器上修复的东西,所以它可以接受我发送的文件？谢谢!

我想测试按钮的功能，但该元素在页面上不可见，因为它位于*ngIf. 我想将变量 from 设置*ngIf为 true，以便能够显示数据。我尝试这样做：

beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    component.currentUser = {firstName: 'xxx'} as User; // Changing currentUser so it won't be undefined anymore 
    fixture.detectChanges();
  });

但仍然不起作用。这是我的组件：

<div class="menu-button-container">
    <div class="menu-button" [ngClass]="{'menu-open': isMenuOpen}" (click)="toggleMenu()" *ngIf="currentUser">
        <div class="line-menu-button line-menu-button__top"></div>
        <div class="line-menu-button line-menu-button__middle"></div>
        <div class="line-menu-button line-menu-button__bottom"></div>
    </div>
</div>

以及我尝试运行的测试：

it('should open the menu when the button menu is clicked', () => {
    const fixture = TestBed.createComponent(HeaderComponent);
    fixture.detectChanges();
    const menuDebugElement = fixture.debugElement.query(By.css('.menu-button'));
    expect(menuDebugElement).toBeTruthy();
  }); …