Skip to content

Commit

Permalink
[ACS-6842] [ACA] Clicking "Create" button multiple times in folder cr…
Browse files Browse the repository at this point in the history 
…eation modal sends the same folder creation request multiple times (#9554)

* ACS-6842 add disable mode to submit button

* ACS-6842 refactor ts and spec files

* ACS-6842 add setFormValues function

---------

Co-authored-by: DaryaBalvanovich <[email protected]>
  • Loading branch information
@DaryaBalvanovich
DaryaBalvanovich and DaryaBalvanovich authored Apr 15, 2024
1 parent 05884e8 commit 86d3ca7
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 157 deletions.
2 changes: 1 addition & 1 deletion lib/content-services/src/lib/dialogs/folder.dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
id="adf-folder-create-button"
mat-button
(click)="submit()"
[disabled]="!form.valid">
[disabled]="!form.valid || disableSubmitButton">
{{
(editing
? 'CORE.FOLDER_DIALOG.UPDATE_BUTTON.LABEL'
Expand Down
187 changes: 103 additions & 84 deletions lib/content-services/src/lib/dialogs/folder.dialog.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,24 @@ import { MatDialogRef } from '@angular/material/dialog';
import { NodesApiService } from '../common/services/nodes-api.service';

import { FolderDialogComponent } from './folder.dialog';
import { of, throwError } from 'rxjs';
import { BehaviorSubject, throwError } from 'rxjs';
import { ContentTestingModule } from '../testing/content.testing.module';
import { By } from '@angular/platform-browser';

describe('FolderDialogComponent', () => {
let fixture: ComponentFixture<FolderDialogComponent>;
let component: FolderDialogComponent;
let nodesApi: NodesApiService;

let submitButton: HTMLButtonElement;
const dialogRef = {
close: jasmine.createSpy('close')
};
let updateNodeSpy: jasmine.Spy;
let createFolderSpy: jasmine.Spy;

const updateNode$ = new BehaviorSubject(null);
const createFolderNode$ = new BehaviorSubject(null);

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -41,6 +48,10 @@ describe('FolderDialogComponent', () => {
fixture = TestBed.createComponent(FolderDialogComponent);
component = fixture.componentInstance;
nodesApi = TestBed.inject(NodesApiService);

createFolderSpy = spyOn(nodesApi, 'createFolder').and.returnValue(createFolderNode$);
updateNodeSpy = spyOn(nodesApi, 'updateNode').and.returnValue(updateNode$);
submitButton = fixture.nativeElement.querySelector('#adf-folder-create-button');
});

afterEach(() => {
Expand Down Expand Up @@ -77,24 +88,25 @@ describe('FolderDialogComponent', () => {
});

it('should update form input', () => {
component.form.controls['name'].setValue('folder-name-update');
component.form.controls['title'].setValue('folder-title-update');
component.form.controls['description'].setValue('folder-description-update');
setFormValues();

expect(component.name).toBe('folder-name-update');
expect(component.title).toBe('folder-title-update');
expect(component.description).toBe('folder-description-update');
});

it('should submit updated values if form is valid', () => {
spyOn(nodesApi, 'updateNode').and.returnValue(of(null));
updateNode$.next(null);

component.form.controls['name'].setValue('folder-name-update');
component.form.controls['title'].setValue('folder-title-update');
component.form.controls['description'].setValue('folder-description-update');
setFormValues();

component.submit();
fixture.detectChanges();
submitButton.click();
fixture.detectChanges();

expect(component.form.valid).toBeTrue();
expect(submitButton.disabled).toBeTrue();
expect(component.disableSubmitButton).toBeTrue();
expect(nodesApi.updateNode).toHaveBeenCalledWith('node-id', {
name: 'folder-name-update',
properties: {
Expand All @@ -104,49 +116,49 @@ describe('FolderDialogComponent', () => {
});
});

it('should call dialog to close with form data when submit is successfully', () => {
const folder: any = {
data: 'folder-data'
};

spyOn(nodesApi, 'updateNode').and.returnValue(of(folder));
it('should not submit if form is invalid', () => {
component.form.controls['name'].setValue('');
component.form.controls['description'].setValue('');

component.submit();
fixture.detectChanges();
submitButton.click();
fixture.detectChanges();

expect(dialogRef.close).toHaveBeenCalledWith(folder);
expect(submitButton.disabled).toBeTrue();
expect(component.form.valid).toBeFalse();
expect(updateNodeSpy).not.toHaveBeenCalled();
});

it('should emit success output event with folder when submit is successful', async () => {
describe('when submit is successfully', () => {
const folder: any = { data: 'folder-data' };
let expectedNode = null;

spyOn(nodesApi, 'updateNode').and.returnValue(of(folder));

component.success.subscribe((node) => {
expectedNode = node;
beforeAll(() => {
updateNode$.next(folder);
});
component.submit();

fixture.detectChanges();
await fixture.whenStable();
it('should call dialog to close with form data', () => {
component.submit();

expect(expectedNode).toBe(folder);
});
expect(dialogRef.close).toHaveBeenCalledWith(folder);
});

it('should not submit if form is invalid', () => {
spyOn(nodesApi, 'updateNode');
it('should emit success output event with folder', async () => {
let expectedNode = null;

component.form.controls['name'].setValue('');
component.form.controls['description'].setValue('');
component.success.subscribe((node) => {
expectedNode = node;
});
component.submit();

component.submit();
fixture.detectChanges();
await fixture.whenStable();

expect(component.form.valid).toBe(false);
expect(nodesApi.updateNode).not.toHaveBeenCalled();
expect(expectedNode).toBe(folder);
});
});

it('should not call dialog to close if submit fails', () => {
spyOn(nodesApi, 'updateNode').and.returnValue(throwError('error'));
updateNode$.error(throwError('error'));
spyOn(component, 'handleError').and.callFake((val) => val);

component.submit();
Expand Down Expand Up @@ -177,49 +189,50 @@ describe('FolderDialogComponent', () => {
});

it('should update form input', () => {
component.form.controls['name'].setValue('folder-name-update');
component.form.controls['description'].setValue('folder-description-update');
setFormValues();

expect(component.name).toBe('folder-name-update');
expect(component.description).toBe('folder-description-update');
});

it('should submit updated values if form is valid', () => {
spyOn(nodesApi, 'createFolder').and.returnValue(of(null));

component.form.controls['name'].setValue('folder-name-update');
component.form.controls['title'].setValue('folder-title-update');
component.form.controls['description'].setValue('folder-description-update');
describe('when form is valid', () => {
beforeEach(() => {
createFolderNode$.next(null);
setFormValues();
});

component.submit();
it('should submit updated values', () => {
component.submit();

expect(nodesApi.createFolder).toHaveBeenCalledWith('parentNodeId', {
name: 'folder-name-update',
properties: {
'cm:title': 'folder-title-update',
'cm:description': 'folder-description-update'
},
nodeType: 'cm:folder'
expect(component.disableSubmitButton).toBeTrue();
expect(createFolderSpy).toHaveBeenCalledWith('parentNodeId', {
name: 'folder-name-update',
properties: {
'cm:title': 'folder-title-update',
'cm:description': 'folder-description-update'
},
nodeType: 'cm:folder'
});
});
});

it('should submit updated values if form is valid (with custom nodeType)', () => {
spyOn(nodesApi, 'createFolder').and.returnValue(of(null));
it('should submit updated values (with custom nodeType)', () => {
component.nodeType = 'cm:sushi';

component.form.controls['name'].setValue('folder-name-update');
component.form.controls['title'].setValue('folder-title-update');
component.form.controls['description'].setValue('folder-description-update');
component.nodeType = 'cm:sushi';
fixture.detectChanges();
submitButton.click();
fixture.detectChanges();

component.submit();

expect(nodesApi.createFolder).toHaveBeenCalledWith('parentNodeId', {
name: 'folder-name-update',
properties: {
'cm:title': 'folder-title-update',
'cm:description': 'folder-description-update'
},
nodeType: 'cm:sushi'
expect(component.form.valid).toBeTrue();
expect(submitButton.disabled).toBeTrue();
expect(component.disableSubmitButton).toBeTrue();
expect(createFolderSpy).toHaveBeenCalledWith('parentNodeId', {
name: 'folder-name-update',
properties: {
'cm:title': 'folder-title-update',
'cm:description': 'folder-description-update'
},
nodeType: 'cm:sushi'
});
});
});

Expand All @@ -228,31 +241,26 @@ describe('FolderDialogComponent', () => {
data: 'folder-data'
};

component.form.controls['name'].setValue('name');
component.form.controls['title'].setValue('title');
component.form.controls['description'].setValue('description');
setFormValues();

spyOn(nodesApi, 'createFolder').and.returnValue(of(folder));
createFolderNode$.next(folder);

component.submit();

expect(dialogRef.close).toHaveBeenCalledWith(folder);
});

it('should not submit if form is invalid', () => {
spyOn(nodesApi, 'createFolder');

component.form.controls['name'].setValue('');
component.form.controls['description'].setValue('');

component.submit();

expect(component.form.valid).toBe(false);
expect(nodesApi.createFolder).not.toHaveBeenCalled();
expect(submitButton.disabled).toBeTrue();
expect(component.form.valid).toBeFalse();
expect(createFolderSpy).not.toHaveBeenCalled();
});

it('should not call dialog to close if submit fails', () => {
spyOn(nodesApi, 'createFolder').and.returnValue(throwError('error'));
createFolderNode$.error(throwError('error'));
spyOn(component, 'handleError').and.callFake((val) => val);

component.form.controls['name'].setValue('name');
Expand All @@ -264,19 +272,22 @@ describe('FolderDialogComponent', () => {
expect(dialogRef.close).not.toHaveBeenCalled();
});

describe('Error events ', () => {
describe('Error events', () => {
afterEach(() => {
createFolderNode$.next(null);
});

it('should raise error for 409', (done) => {
const error = {
message: '{ "error": { "statusCode" : 409 } }'
};
createFolderNode$.error(error);

component.error.subscribe((message) => {
expect(message).toBe('CORE.MESSAGES.ERRORS.EXISTENT_FOLDER');
done();
});

spyOn(nodesApi, 'createFolder').and.returnValue(throwError(error));

component.form.controls['name'].setValue('name');
component.form.controls['description'].setValue('description');

Expand All @@ -287,19 +298,27 @@ describe('FolderDialogComponent', () => {
const error = {
message: '{ "error": { "statusCode" : 123 } }'
};
createFolderNode$.error(error);

component.error.subscribe((message) => {
expect(message).toBe('CORE.MESSAGES.ERRORS.GENERIC');
done();
});

spyOn(nodesApi, 'createFolder').and.returnValue(throwError(error));

component.form.controls['name'].setValue('name');
component.form.controls['description'].setValue('description');

component.submit();
});
});
});

/**
* Set mock values to form
*/
function setFormValues() {
component.form.controls['name'].setValue('folder-name-update');
component.form.controls['title'].setValue('folder-title-update');
component.form.controls['description'].setValue('folder-description-update');
}
});
Loading

0 comments on commit 86d3ca7

Please sign in to comment.