diff --git a/modules/ui/src/app/mocks/profile.mock.ts b/modules/ui/src/app/mocks/profile.mock.ts index 34c14ac40..23bf500a4 100644 --- a/modules/ui/src/app/mocks/profile.mock.ts +++ b/modules/ui/src/app/mocks/profile.mock.ts @@ -121,6 +121,27 @@ export const NEW_PROFILE_MOCK = { ], }; +export const NEW_PROFILE_MOCK_DRAFT = { + status: ProfileStatus.DRAFT, + name: 'New profile', + questions: [ + { question: 'Email', answer: '' }, + { + question: 'What type of device do you need reviewed?', + answer: '', + }, + { + question: 'Are any of the following statements true about your device?', + answer: '', + }, + { + question: 'What features does the device have?', + answer: [], + }, + { question: 'Comments', answer: '' }, + ], +}; + export const RENAME_PROFILE_MOCK = { ...NEW_PROFILE_MOCK, name: 'Primary profile', diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html index 77c078636..17b7d58d5 100644 --- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html +++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html @@ -68,15 +68,14 @@ [disabled]=" !profileForm.valid || (profileForm.valid && profileForm.pristine) " - (click)="onSaveClick()"> + (click)="onSaveClick(ProfileStatus.VALID)"> Save Profile diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts index 29bec9af3..89b3be2b4 100644 --- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts +++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.spec.ts @@ -19,12 +19,13 @@ import { ProfileFormComponent } from './profile-form.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NEW_PROFILE_MOCK, + NEW_PROFILE_MOCK_DRAFT, PROFILE_FORM, PROFILE_MOCK, PROFILE_MOCK_2, RENAME_PROFILE_MOCK, } from '../../../mocks/profile.mock'; -import { FormControlType } from '../../../model/profile'; +import { FormControlType, ProfileStatus } from '../../../model/profile'; describe('ProfileFormComponent', () => { let component: ProfileFormComponent; @@ -296,12 +297,30 @@ describe('ProfileFormComponent', () => { }); describe('Draft button', () => { - it('should be enabled when valid profile name is present', () => { - const name: HTMLInputElement = compiled.querySelector( - '.form-name' - ) as HTMLInputElement; - name.value = 'name'; - name.dispatchEvent(new Event('input')); + it('should be disabled when profile name is empty', () => { + component.nameControl.setValue(''); + fixture.detectChanges(); + const draftButton = compiled.querySelector( + '.save-draft-button' + ) as HTMLButtonElement; + + expect(draftButton.disabled).toBeTrue(); + }); + + it('should be disabled when profile name is not empty but other fields in wrong format', () => { + component.nameControl.setValue('New profile'); + component.getControl('0').setValue('test'); + fixture.detectChanges(); + const draftButton = compiled.querySelector( + '.save-draft-button' + ) as HTMLButtonElement; + + expect(draftButton.disabled).toBeTrue(); + }); + + it('should be enabled when profile name is not empty; other fields are empty or in correct format', () => { + component.nameControl.setValue('New profile'); + component.getControl('0').setValue('a@test.te;b@test.te, c@test.te'); fixture.detectChanges(); const draftButton = compiled.querySelector( '.save-draft-button' @@ -309,6 +328,20 @@ describe('ProfileFormComponent', () => { expect(draftButton.disabled).toBeFalse(); }); + + it('should emit new profile in draft status', () => { + component.nameControl.setValue('New profile'); + fixture.detectChanges(); + const emitSpy = spyOn(component.saveProfile, 'emit'); + const draftButton = compiled.querySelector( + '.save-draft-button' + ) as HTMLButtonElement; + draftButton.click(); + + expect(emitSpy).toHaveBeenCalledWith({ + ...NEW_PROFILE_MOCK_DRAFT, + }); + }); }); describe('Save button', () => { @@ -349,7 +382,7 @@ describe('ProfileFormComponent', () => { it('save profile should have rename field', () => { const emitSpy = spyOn(component.saveProfile, 'emit'); fillForm(component); - component.onSaveClick(); + component.onSaveClick(ProfileStatus.VALID); expect(emitSpy).toHaveBeenCalledWith(RENAME_PROFILE_MOCK); }); @@ -364,7 +397,7 @@ describe('ProfileFormComponent', () => { it('save profile should not have rename field', () => { const emitSpy = spyOn(component.saveProfile, 'emit'); fillForm(component); - component.onSaveClick(); + component.onSaveClick(ProfileStatus.VALID); expect(emitSpy).toHaveBeenCalledWith(NEW_PROFILE_MOCK); }); diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts index e8d50c0a6..d5a2db753 100644 --- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts +++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts @@ -75,6 +75,7 @@ export class ProfileFormComponent implements OnInit { private profile: Profile | null = null; private injector = inject(Injector); public readonly FormControlType = FormControlType; + public readonly ProfileStatus = ProfileStatus; profileForm: FormGroup = this.fb.group({}); @ViewChildren(CdkTextareaAutosize) autosize!: QueryList; @@ -105,6 +106,23 @@ export class ProfileFormComponent implements OnInit { } } + get isDraftDisabled(): boolean { + return ( + !this.nameControl.valid || + this.fieldsHasError || + (this.profileForm.valid && this.profileForm.pristine) + ); + } + + private get fieldsHasError(): boolean { + return this.profileFormat.some((field, index) => { + return ( + this.getControl(index).hasError('invalid_format') || + this.getControl(index).hasError('maxlength') + ); + }); + } + get nameControl() { return this.getControl('name'); } @@ -191,11 +209,11 @@ export class ProfileFormComponent implements OnInit { this.triggerResize(); } - onSaveClick() { + onSaveClick(status: ProfileStatus) { const response = this.buildResponseFromForm( this.profileFormat, this.profileForm, - ProfileStatus.VALID, + status, this.selectedProfile ); this.saveProfile.emit(response);