up 1 down

Так я вроде новый с угловым и веб-разработчика. в целом, так что я не знаю, что доступно для меня, когда дело доходит до модульного тестирования.

Я сделал вид, что требуется имя и два файла. Если один из них отсутствует или не соблюдать условия, связанные с их соответствующими полями, пользователь не может отправить форму. Для того, чтобы сделать это, я создал группу под названием формы Myform, которая содержит валидатор для каждого элемента управления формой (имя, originalImage, modifiedImage)

Я думаю, что я понял, как проверить правильность имени, но я не нашел способ, чтобы проверить корректность файлов. Кто-то сказал мне, что я могу издеваться файлы, но это немного сложно для моего случая. Вот список того, что я хотел бы проверить:

  1. Поле изображения не является пустым (обязательно)
  2. Изображения имеют хороший тип файла (шаблон)
  3. Изображения не пустые
  4. Мой FileReader (в моей функции onFileChange) работает должным образом
  5. Какое-то образом проверить мое событие (с шпионами?)

Вот мой код:

игра-form.component.ts

 import { Component, OnInit} from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';

                @Component({
                selector: 'app-game-form',
                templateUrl: './game-form.component.html',
                styleUrls: ['./game-form.component.scss']
                })
                export class GameFormComponent implements OnInit {

                myForm: FormGroup;

                constructor(private fb: FormBuilder) {}

                ngOnInit() {

                this.myForm = this.fb.group({
                    name: ['', [
                        Validators.required,
                        Validators.minLength(4),
                        Validators.maxLength(10),
                        Validators.pattern("[^ @]*")
                    ]],
                    originalImage: ['', [
                        Validators.required,
                        Validators.pattern("[^@]*(.bmp|.BMP)")
                    ]],
                    modifiedImage: ['', [
                        Validators.required,
                        Validators.pattern("[^@]*(.bmp|.BMP)")
                    ]],
                    });
                }

                public get name() {
                    return this.myForm.get('name');
                }
                public get originalImage() {
                    return this.myForm.get('originalImage');
                }
                public get modifiedImage() {
                    return this.myForm.get('modifiedImage');
                }

                public onFileChange(event:Event) {
                    const reader = new FileReader();
                    const files:FileList | null =  (event.target as HTMLInputElement).files;
                    const file:File | null = (files != null)?files[0]:null;
                    const idControl:string = (event.target != null)?(event.target as HTMLInputElement)["id"]:"";
                    reader.onload = () => 
                    {

                    switch(idControl)
                    {
                        case "originalImage":
                            this.myForm.patchValue({
                            originalImage : reader.result
                            });
                        break;
                        case "modifiedImage":
                            this.myForm.patchValue({
                            modifiedImage : reader.result
                            });
                        break;
                        }


                    };

                    if(file != null)
                    {
                    reader.readAsDataURL(file);

                    }

                }
                }

игра-form.component.spec.ts

    import { async, ComponentFixture, TestBed} from "@angular/core/testing";
import { GameFormComponent } from "./game-form.component";
import { MatIconModule } from "@angular/material/icon";

import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { AppComponent } from '../app.component';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


describe('GameFormComponent', () => {
  let component: GameFormComponent;
  let fixture: ComponentFixture<GameFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        GameFormComponent, 
        AppComponent 
      ],
      imports:[
        RouterModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        BrowserAnimationsModule,
        MatIconModule 
      ]
    })
    .compileComponents();
  }));

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

  it("should create", () => {
    expect(component).toBeTruthy();
  });

  it('should not allow a form when empty', () => {
    expect(component.myForm.valid).toBeFalsy();
  });

  it('should accept the name in the form', () => {
    let name = component.myForm.controls['name'];

    // 4 <= number of characters <= 10 (correct)
    name.setValue("test");
    let errors = name.errors || {};
    expect(errors['required']).toBeFalsy();
    expect(errors['minlength']).toBeFalsy();
    expect(errors['maxlength']).toBeFalsy();
    expect(errors['pattern']).toBeFalsy();
  });

  it('should not accept the name in the form since too many characters are entered', () => {

    // 10 < number of characters (incorrect)
    let name = component.myForm.controls['name'];
    name.setValue("12345678900"); 
    let errors = name.errors || {};
    expect(errors['required']).toBeFalsy();
    expect(errors['minlength']).toBeFalsy();
    expect(errors['maxlength']).toBeTruthy();
    expect(errors['pattern']).toBeFalsy();
  });

  it('should not accept the name in the form since few characters are entered', () => {

    // 4 > number of characters (incorrect)
    let name = component.myForm.controls['name'];
    name.setValue("123"); 
    let errors = name.errors || {};
    expect(errors['required']).toBeFalsy();
    expect(errors['minlength']).toBeTruthy();
    expect(errors['maxlength']).toBeFalsy();
    expect(errors['pattern']).toBeFalsy();
  });

  it('should not accept the name in the form since spaces are entered', () => {
    // spaces (incorrect)
    let name = component.myForm.controls['name'];
    name.setValue("    1"); 
    let errors = name.errors || {};
    expect(errors['required']).toBeFalsy();
    expect(errors['minlength']).toBeFalsy();
    expect(errors['maxlength']).toBeFalsy();
    expect(errors['pattern']).toBeTruthy();
  });

  it('should not accept the name in the form since nothing is entered', () => {

    // nothing (incorrect)
    let name = component.myForm.controls['name'];
    name.setValue(""); 
    let errors = name.errors || {};
    expect(errors['required']).toBeTruthy(); 

  });


  it('should not accept the original image since she has not been choosen', () => {    
    // the user hasn't choose an original image yet
    let image = component.myForm.controls['originalImage'];
    let errors = image.errors || {};
    expect(errors['required']).toBeTruthy();
  });

  it('should not accept the modified image since she has not been choosen', () => {  

     // the user hasn't choose an modified image yet
    let image = component.myForm.controls['modifiedImage'];
    let errors = image.errors || {};
    expect(errors['required']).toBeTruthy();
  });

});

Я не знаю, если это поможет вам (чтобы помочь мне), но я также Postin мой HTML-файл:

игра-form.component.html

<form [formGroup]="myForm" (ngSubmit) ="onSubmit()">

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Game name" [value]="" formControlName="name">

        <mat-error *ngIf="name.errors?.minlength && name.touched">
            The name entered should at least contain 4 letters
        </mat-error>

        <mat-error *ngIf="name.errors?.maxlength && name.touched">
            The name entered should at most contain 10 letters
        </mat-error>


        <mat-error *ngIf="name.errors?.pattern && name.touched">
            The name entered must contain spaces
        </mat-error>

    </mat-form-field>

    <br><br/>
    <br><br/>

    <mat-form-field class="example-full-width">

        <input matInput placeholder="Original image" disabled value="No file selected" name="fist_entry" id="first_entry">
        <div class="example-button-row">
            <button (click)="originalImageInput.click()" mat-icon-button >
                <mat-icon matSuffix>folder</mat-icon>
            </button>
        </div>

        <input hidden (change)="onFileChange($event)" #originalImageInput type="file" accept = ".bmp" id="originalImage"
            formControlName = "originalImage"
            onchange="document.getElementById('first_entry').value = this.value.split('\\').pop().split('/').pop()">
            <div class="error-message" *ngIf="originalImage.errors?.pattern">
                    The type of the file entered isn't ".bmp"
            </div>  

    </mat-form-field>

    <img [src]="this.myForm.get('originalImage').value" *ngIf="originalImage" class="image" id="originalImage" style="width:150px"> 

    <br><br/>
    <br><br/>
    <br><br/>
    <br><br/>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Modified Image" disabled value="No file selected" name="second_entry" id="second_entry"> 
        <div class="example-button-row">
            <button (click)="modifiedImageInput.click()" mat-icon-button >
                <mat-icon >folder</mat-icon>
            </button>
        </div>
        <input hidden (change)="onFileChange($event)" #modifiedImageInput type="file" accept= ".bmp" id="modifiedImage"
            formControlName = "modifiedImage"
            onchange="document.getElementById('second_entry').value = this.value.split('\\').pop().split('/').pop()">
            <div class="error-message" *ngIf="modifiedImage.errors?.pattern">
                    The type of the file entered isn't ".bmp"
            </div>  
    </mat-form-field>

    <img [src]="this.myForm.get('modifiedImage').value" *ngIf="modifiedImage" class="image" id="modifiedImage" style="width:150px"> 

    <br><br/>

      <div id="submitPosition">
        <button mat-button color="primary" type="submit" id="submit" [disabled]="myForm.invalid">Submit</button>
    </div>

</form> 

Заранее спасибо вам помочь (или, по крайней мере, время), в надежде, что я найти решение и узнать больше о тестах на Угловом.