create more case in my spec.ts // --- Mocks --- const mockInitialData: CreateCriteriaContract = { id: null, label: null, columnId: null, columnName: null, columns: [], componentType: null, name: null, seq: 0, tableName: null, tableId: null, }; const mockloadedData: CreateCriteriaContract[] = [ { id: 'id', label: 'label', seq: 1, name: 'name', tableName: 'tableName', tableId: 'tableid', selectColumn: null as unknown as Nullable, columnName: 'columnName', componentType: 'TB', columnId: 'columnId', columns: [], controlType: 5, } ]; class MockUrlHelper { redirectTo = jest.fn(); getData = jest.fn().mockReturnValue({}); // Default to no ID } class MockCreateInquiryScreenStore { // Methods generateSourceCode = jest.fn(); saveTemplate = jest.fn(); getById = jest.fn(); } class MockPageInformationStore { getFeatureById = jest.fn(); } // --- End Mocks --- describe('CreateInquiryScreenComponent', () => { let component: CreateInquiryScreenComponent; let fixture: ComponentFixture; let debugElement: DebugElement; let mockStore: MockCreateInquiryScreenStore; let mockUrlHelper: MockUrlHelper; let mockPageInformationStore: MockPageInformationStore; // Modify initializeComponent to be synchronous function initializeComponent(urlParams: { id?: string } = {}) { mockPageInformationStore.getFeatureById.mockReturnValue(urlParams); // Create fixture/component here, synchronously fixture = TestBed.createComponent(CreateInquiryScreenComponent); component = fixture.componentInstance; debugElement = fixture.debugElement; fixture.componentRef.setInput('controlKeyCriteria', 'criteriaKey'); fixture.componentRef.setInput('componentTypes', []); fixture.componentRef.setInput('tableDatas', []); fixture.componentRef.setInput('criteriaDataSource', []); fixture.componentRef.setInput('disabled', false); // Initial detectChanges is fine here fixture.detectChanges(); } // Keep beforeEach async for compileComponents beforeEach(async () => { mockStore = new MockCreateInquiryScreenStore(); mockUrlHelper = new MockUrlHelper(); mockPageInformationStore = new MockPageInformationStore(); await TestBed.configureTestingModule({ imports: [ CreateInquiryScreenComponent, // Import standalone component CommonModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule, NzButtonModule, NzCheckboxModule, NzCollapseModule, NzDatePickerModule, NzFormModule, NzIconModule, NzInputModule, NzInputNumberModule, NzPopconfirmModule, NzRadioModule, NzSelectModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }, }), ], providers: [ { provide: UrlHelper, useValue: mockUrlHelper }, { provide: NZ_I18N, useValue: en_US }, { provide: ControlContainer, useValue: { control: new FormGroup({}) } }, { provide: NZ_ICONS, useValue: [PlusOutline] } ], }) .overrideComponent(CreateInquiryScreenComponent, { set: { providers: [{ provide: CreateInquiryScreenStore, useValue: mockStore }, { provide: PageInformationStore, useValue: mockPageInformationStore }], }, }) .compileComponents(); }); afterEach(() => { jest.clearAllMocks(); }); describe('Initialization', () => { // Change async to fakeAsync it('should create', fakeAsync(() => { initializeComponent(); tick(); // Simulate time for ngOnInit, registerForm, etc. expect(component).toBeTruthy(); })); it('should NOT get data if ID is 0', fakeAsync(() => { initializeComponent(); tick(); // Simulate time for ngOnInit, registerForm, etc. expect(mockStore.getById).not.toHaveBeenCalled(); })); it('should initialize form correctly', fakeAsync(() => { initializeComponent(); tick(); expect(component['criteriaDataForm']).toBeDefined(); expect(component['criteriaDataForm'].controls.length).toBe(0); })); it('should initialize form with default values if ID is 0', fakeAsync(() => { initializeComponent(); tick(); // Simulate time for ngOnInit, registerForm, etc. const spy = jest.spyOn(component['newRowCriteria$'], 'next'); component['newRowCriteria$'].next(); const formValue = component['criteriaDataForm'].getRawValue(); expect(formValue[0].id).toBeNull(); expect(formValue[0].label).toBeNull(); expect(formValue[0].seq).toBeUndefined(); expect(formValue[0].name).toBeUndefined(); expect(formValue[0].tableName).toBeNull(); expect(formValue[0].tableId).toBeUndefined(); expect(formValue[0].componentType).toBeNull (); expect(formValue[0].columnId).toBeNull(); expect(formValue[0].columnName).toBeNull(); })); it('should trigger newRowCriteria$', fakeAsync(() => { initializeComponent(); tick(); const spy = jest.spyOn(component['newRowCriteria$'], 'next'); component['newRowCriteria$'].next(); expect(spy).toHaveBeenCalled(); })); it('should trigger deleteRowCriteria$', fakeAsync(() => { initializeComponent(); tick(); const spy = jest.spyOn(component['deleteRowCriteria$'], 'next'); component['deleteRowCriteria$'].next(1); expect(spy).toHaveBeenCalledWith(1); })); it('should handle row movement correctly', fakeAsync(() => { initializeComponent(); tick(); const spy = jest.spyOn(component['moveRow$'], 'next'); component['moveRow$'].next({ from: 1, to: 2 }); expect(spy).toHaveBeenCalledWith({ from: 1, to: 2 }); })); describe('Form Interaction and Data Transformation', () => { }); describe('User Actions', () => { discardPeriodicTasks(); // Cleanup after flush })); }); }); }); from this component export class CreateInquiryScreenComponent implements OnInit { store = inject(CreateInquiryScreenStore); componentTypes = input.required(); tableDatas = input.required(); controlKeyCriteria = input.required(); criteriaDataSource = input.required(); disabled = input.required(); protected newRowCriteria$ = new Subject(); protected deleteRowCriteria$ = new Subject(); protected moveRow$: Subject = new Subject(); sourceCode = this.store.sourceCode; errorService = this.store.error; #formBuilder = inject(NonNullableFormBuilder); protected criteriaDataForm = this.#formBuilder.array>([]); protected criteriaFormItems = createFormArray( this.criteriaDataForm, this.criteriaDataSource, this.newRowCriteria$, this.moveRow$, this.deleteRowCriteria$, this.#createCriteriaFrom.bind(this) ); #injector = inject(Injector); ngOnInit() { runInInjectionContext(this.#injector, () => registerSubForm({ key: this.controlKeyCriteria(), form: this.criteriaDataForm, disable$: new Observable(), }) ); } #createCriteriaFrom(info: CreateCriteriaContract) { const form = this.#formBuilder.group({ id: [info.id], label: [info.label, Validators.required], tableName: [info.tableName, Validators.required], selectColumn: [info.selectColumn, Validators.required], columnName: [info.columnName, Validators.required], componentType: [info.componentType, Validators.required], columns: [info.columns as ColumnDetailInfo[], Validators.required], columnId: [info.columnId], }); form.controls.tableName.valueChanges.subscribe(tableId => { form.patchValue({ columnId: null, columnName: null, selectColumn: null, columns: tableId ? this.tableDatas().find(table => table.id == tableId)!.columns : [], }); }); form.controls.selectColumn.valueChanges.subscribe(selectColumn => { form.patchValue({ columnId: selectColumn?.id, columnName: selectColumn?.name, }); }); return form; } protected dropCriteria(event: CdkDragDrop): void { this.moveRow$.next({ from: event.previousIndex, to: event.currentIndex }); } }