如何使用单元测试或其他测试来测试Angular中从UI层到数据库条目的整个过程？

Question

这里我正在检查单击提交按钮时通过表单发送的验证和输入值。到目前为止，我的测试很好但是如何将输入值发送到数据库以检查整个过程是否正常工作。有可能与单元测试有关吗？还是其他任何测试？

describe('CategoryAddComponent', () => {

    let fixture: ComponentFixture<CategoryAddComponent>;
    let component: CategoryAddComponent;
    let categoryService: CategoryService;
    let de: DebugElement;
    let el: HTMLElement;

    beforeEach(async(() => {

        TestBed.configureTestingModule({
            imports: [ReactiveFormsModule, FormsModule, SharedModule, UiSwitchModule, AlertModule.forRoot(), NgaModule, HttpModule, RouterModule.forRoot([]), CookieModule.forRoot()],

            declarations: [CategoryAddComponent],
            //providers:    [ {provide: CustomerService, useValue: customerServiceStub }, CustomerService,CustomerModelService,AppState,BaThemeConfigProvider ]
            providers: [{ provide: APP_BASE_HREF, useValue: '/' }, CategoryService, CategoryModelService, AppState, BaThemeConfigProvider],
        })
            .compileComponents();

    }));

    beforeEach(() => {

        fixture = TestBed.createComponent(CategoryAddComponent);
        component = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('h1'));
        el = de.nativeElement;
        categoryService = TestBed.get(CategoryService);

        component.ngOnInit();
        fixture.detectChanges();

    });


    it('form invalid when empty', () => {
        expect(component.form.valid).toBeFalsy();
    });

    it('submitting the form by clicking the button', () => {

        expect(component.form.valid).toBeFalsy();
        component.form.controls['code'].setValue('1234');

        expect(component.form.controls['code'].valid).toBeTruthy();

        spyOn(component, 'onSubmit');
        de = fixture.debugElement.query(By.css('#buto'));
        el = de.nativeElement;

        el.click();
        fixture.detectChanges();

        expect(component.onSubmit).toHaveBeenCalledWith({
            code: '1234',
            name:new Object(),
            status: true,
            remarks: ''
        });

    });

    it('dom ', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain('Add Category');
    });


 });