Fix async karma - jasmine tests

- Fix that use async wait for rendering
-- Make proper usage of async and await
- Add waitUntil util method for tests
This commit is contained in:
Clemente Raposo 2021-01-13 17:32:56 +00:00 committed by Dillon-Brown
parent fc9fcfd2cf
commit 3e9aaa6675
7 changed files with 171 additions and 224 deletions

View file

@ -17,6 +17,7 @@ import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/tes
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {LanguageStore} from '@store/language/language.store'; import {LanguageStore} from '@store/language/language.store';
import {languageStoreMock} from '@store/language/language.store.spec.mock'; import {languageStoreMock} from '@store/language/language.store.spec.mock';
import {waitUntil} from '@app-common/testing/utils.spec';
@Component({ @Component({
@ -77,49 +78,35 @@ describe('BooleanFilterFieldComponent', () => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
}); });
it('should have value', () => { it('should have value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
testHostComponent.field = {
type: 'boolean',
value: '1',
metadata: null,
definition: {
options: 'dom_int_bool'
},
criteria: {
values: ['1'],
operator: '='
},
formControl: new FormControl('1')
};
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => {
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-boolean-filter')[0];
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-boolean-filter')[0]; expect(field).toBeTruthy();
expect(field).toBeTruthy(); await waitUntil(() => field.getElementsByTagName('tag-input').item(0));
const tagInput = field.getElementsByTagName('tag-input').item(0); const tagInput = field.getElementsByTagName('tag-input').item(0);
expect(tagInput).toBeTruthy(); expect(tagInput).toBeTruthy();
const tag = tagInput.getElementsByTagName('tag').item(0); const tag = tagInput.getElementsByTagName('tag').item(0);
expect(tag).toBeTruthy(); expect(tag).toBeTruthy();
const tagText = tag.getElementsByClassName('tag__text').item(0); const tagText = tag.getElementsByClassName('tag__text').item(0);
expect(tagText.textContent).toContain('Yes'); expect(tagText.textContent).toContain('Yes');
expect(tagText.textContent).not.toContain('1'); expect(tagText.textContent).not.toContain('1');
const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0); const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0);
expect(deleteIcon).toBeTruthy(); expect(deleteIcon).toBeTruthy();
}); done();
}); });

View file

@ -71,44 +71,33 @@ describe('DynamicEnumEditFieldComponent', () => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
}); });
it('should have value', () => { it('should have value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
testHostComponent.field = {
type: 'dynamicenum',
value: '_customer',
metadata: null,
definition: {
options: 'account_type_dom'
}
};
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => { await testHostFixture.whenRenderingDone();
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-dynamicenum-edit')[0];
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-dynamicenum-edit')[0]; expect(field).toBeTruthy();
expect(field).toBeTruthy(); const tagInput = field.getElementsByTagName('tag-input').item(0);
const tagInput = field.getElementsByTagName('tag-input').item(0); expect(tagInput).toBeTruthy();
expect(tagInput).toBeTruthy(); const tag = tagInput.getElementsByTagName('tag').item(0);
const tag = tagInput.getElementsByTagName('tag').item(0); expect(tag).toBeTruthy();
expect(tag).toBeTruthy(); const tagText = tag.getElementsByClassName('tag__text').item(0);
const tagText = tag.getElementsByClassName('tag__text').item(0); expect(tagText.textContent).toContain('Customer');
expect(tagText.textContent).not.toContain('_customer');
expect(tagText.textContent).toContain('Customer'); const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0);
expect(tagText.textContent).not.toContain('_customer');
const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0); expect(deleteIcon).toBeTruthy();
expect(deleteIcon).toBeTruthy();
});
done();
}); });
}); });

View file

@ -17,6 +17,7 @@ import {datetimeFormatterMock} from '@services/formatters/datetime/datetime-form
import {DateFormatter} from '@services/formatters/datetime/date-formatter.service'; import {DateFormatter} from '@services/formatters/datetime/date-formatter.service';
import {dateFormatterMock} from '@services/formatters/datetime/date-formatter.service.spec.mock'; import {dateFormatterMock} from '@services/formatters/datetime/date-formatter.service.spec.mock';
import {CurrencyFormatter} from '@services/formatters/currency/currency-formatter.service'; import {CurrencyFormatter} from '@services/formatters/currency/currency-formatter.service';
import {waitUntil} from '@app-common/testing/utils.spec';
@Component({ @Component({
selector: 'enum-edit-field-test-host-component', selector: 'enum-edit-field-test-host-component',
@ -71,148 +72,116 @@ describe('EnumEditFieldComponent', () => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
}); });
it('should have value', () => { it('should have value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
testHostComponent.field = {
type: 'enum',
value: '_customer',
metadata: null,
definition: {
options: 'account_type_dom'
}
};
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => { await testHostFixture.whenRenderingDone();
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-enum-edit')[0];
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-enum-edit')[0]; expect(field).toBeTruthy();
expect(field).toBeTruthy(); const tagInput = field.getElementsByTagName('tag-input').item(0);
const tagInput = field.getElementsByTagName('tag-input').item(0); expect(tagInput).toBeTruthy();
expect(tagInput).toBeTruthy(); const tag = tagInput.getElementsByTagName('tag').item(0);
const tag = tagInput.getElementsByTagName('tag').item(0); expect(tag).toBeTruthy();
expect(tag).toBeTruthy(); const tagText = tag.getElementsByClassName('tag__text').item(0);
const tagText = tag.getElementsByClassName('tag__text').item(0); expect(tagText.textContent).toContain('Customer');
expect(tagText.textContent).not.toContain('_customer');
expect(tagText.textContent).toContain('Customer'); const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0);
expect(tagText.textContent).not.toContain('_customer');
const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0); expect(deleteIcon).toBeTruthy();
expect(deleteIcon).toBeTruthy();
});
done();
}); });
it('should allow removing value', () => { it('should allow removing value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
const element = testHostFixture.nativeElement; const element = testHostFixture.nativeElement;
testHostComponent.field = { testHostFixture.detectChanges();
type: 'enum', await testHostFixture.whenRenderingDone();
value: '_customer',
metadata: null, const deleteIcon = element.getElementsByTagName('delete-icon').item(0);
definition: {
options: 'account_type_dom' expect(deleteIcon).toBeTruthy();
}
}; deleteIcon.click();
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => { await testHostFixture.whenStable();
const deleteIcon = element.getElementsByTagName('delete-icon').item(0); const field = testHostFixture.nativeElement.getElementsByTagName('scrm-enum-edit')[0];
expect(deleteIcon).toBeTruthy(); expect(field).toBeTruthy();
deleteIcon.click(); await waitUntil(() => !field.getElementsByTagName('tag').item(0));
testHostFixture.detectChanges(); const tag = field.getElementsByTagName('tag');
testHostFixture.whenRenderingDone().then(() => {
const tag = element.getElementsByClassName('tag__text');
expect(tag).toBeTruthy();
expect(tag.length).toEqual(0);
});
});
expect(tag).toBeTruthy();
expect(tag.length).toEqual(0);
done();
}); });
it('should allow adding value', () => { it('should allow adding value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
const element = testHostFixture.nativeElement; const element = testHostFixture.nativeElement;
testHostComponent.field = { testHostFixture.detectChanges();
type: 'enum', await testHostFixture.whenRenderingDone();
value: '_customer',
metadata: null, const deleteIcon = element.getElementsByTagName('delete-icon').item(0);
definition: {
options: 'account_type_dom' expect(deleteIcon).toBeTruthy();
}
}; deleteIcon.click();
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => { await testHostFixture.whenStable();
const deleteIcon = element.getElementsByTagName('delete-icon').item(0); const input = element.getElementsByTagName('tag-input-form').item(0);
expect(deleteIcon).toBeTruthy(); input.click();
deleteIcon.click(); testHostFixture.detectChanges();
await testHostFixture.whenStable();
testHostFixture.detectChanges(); const menu = document.getElementsByClassName('ng2-dropdown-menu').item(0);
testHostFixture.whenRenderingDone().then(() => { const item = menu.getElementsByClassName('ng2-menu-item').item(0);
const input = element.getElementsByTagName('tag-input-form').item(0); expect(menu).toBeTruthy();
expect(item).toBeTruthy();
input.click(); item.parentElement.click();
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenRenderingDone().then(() => { await testHostFixture.whenStable();
const menu = window.document.getElementsByClassName('ng2-dropdown-menu').item(0); const tag = element.getElementsByTagName('tag').item(0);
const item = menu.getElementsByClassName('ng2-menu-item').item(0);
expect(menu).toBeTruthy(); expect(tag).toBeTruthy();
expect(item).toBeTruthy();
item.parentElement.click(); const tagText = tag.getElementsByClassName('tag__text').item(0);
testHostFixture.detectChanges(); expect(tagText.textContent).toContain('Customer');
testHostFixture.whenRenderingDone().then(() => { expect(tagText.textContent).not.toContain('_customer');
const tag = element.getElementsByTagName('tag').item(0); const newDeleteIcon = element.getElementsByTagName('delete-icon').item(0);
expect(tag).toBeTruthy(); expect(newDeleteIcon).toBeTruthy();
const tagText = tag.getElementsByClassName('tag__text').item(0); done();
expect(tagText.textContent).toContain('Customer');
expect(tagText.textContent).not.toContain('_customer');
const newDeleteIcon = element.getElementsByTagName('delete-icon').item(0);
expect(newDeleteIcon).toBeTruthy();
});
});
});
});
}); });
}); });

View file

@ -17,6 +17,7 @@ import {datetimeFormatterMock} from '@services/formatters/datetime/datetime-form
import {DateFormatter} from '@services/formatters/datetime/date-formatter.service'; import {DateFormatter} from '@services/formatters/datetime/date-formatter.service';
import {dateFormatterMock} from '@services/formatters/datetime/date-formatter.service.spec.mock'; import {dateFormatterMock} from '@services/formatters/datetime/date-formatter.service.spec.mock';
import {CurrencyFormatter} from '@services/formatters/currency/currency-formatter.service'; import {CurrencyFormatter} from '@services/formatters/currency/currency-formatter.service';
import {waitUntil} from '@app-common/testing/utils.spec';
@Component({ @Component({
selector: 'multienum-edit-field-test-host-component', selector: 'multienum-edit-field-test-host-component',
@ -24,7 +25,7 @@ import {CurrencyFormatter} from '@services/formatters/currency/currency-formatte
}) })
class MultiEnumEditFieldTestHostComponent { class MultiEnumEditFieldTestHostComponent {
field: Field = { field: Field = {
type: 'enum', type: 'multienum',
value: null, value: null,
valueList: [ valueList: [
'_customer', '_customer',
@ -75,103 +76,73 @@ describe('MultiEnumEditFieldComponent', () => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
}); });
it('should have value', () => { it('should have value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
testHostComponent.field = {
type: 'enum',
value: null,
valueList: [
'_customer',
'_reseller'
],
metadata: null,
definition: {
options: 'account_type_dom'
}
};
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => { await testHostFixture.whenRenderingDone();
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-multienum-edit')[0];
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-multienum-edit')[0]; expect(field).toBeTruthy();
expect(field).toBeTruthy(); const tagInput = field.getElementsByTagName('tag-input').item(0);
const tagInput = field.getElementsByTagName('tag-input').item(0); expect(tagInput).toBeTruthy();
expect(tagInput).toBeTruthy(); const tag1 = tagInput.getElementsByTagName('tag').item(0);
const tag1 = tagInput.getElementsByTagName('tag').item(0); expect(tag1).toBeTruthy();
expect(tag1).toBeTruthy(); const tagText1 = tag1.getElementsByClassName('tag__text').item(0);
const tagText1 = tag1.getElementsByClassName('tag__text').item(0); expect(tagText1.textContent).toContain('Customer');
expect(tagText1.textContent).not.toContain('_customer');
expect(tagText1.textContent).toContain('Customer'); const deleteIcon1 = tag1.getElementsByTagName('delete-icon').item(0);
expect(tagText1.textContent).not.toContain('_customer');
const deleteIcon1 = tag1.getElementsByTagName('delete-icon').item(0); expect(deleteIcon1).toBeTruthy();
expect(deleteIcon1).toBeTruthy(); const tag2 = tagInput.getElementsByTagName('tag').item(1);
const tag2 = tagInput.getElementsByTagName('tag').item(1); expect(tag2).toBeTruthy();
expect(tag2).toBeTruthy(); const tagText2 = tag2.getElementsByClassName('tag__text').item(0);
const tagText2 = tag2.getElementsByClassName('tag__text').item(0); expect(tagText2.textContent).toContain('Reseller');
expect(tagText2.textContent).not.toContain('_reseller');
expect(tagText2.textContent).toContain('Reseller'); const deleteIcon2 = tag1.getElementsByTagName('delete-icon').item(0);
expect(tagText2.textContent).not.toContain('_reseller');
const deleteIcon2 = tag1.getElementsByTagName('delete-icon').item(0); expect(deleteIcon2).toBeTruthy();
expect(deleteIcon2).toBeTruthy();
});
done();
}); });
it('should allow removing value', () => { it('should allow removing value', async (done) => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
testHostFixture.detectChanges();
await testHostFixture.whenRenderingDone();
const element = testHostFixture.nativeElement; const element = testHostFixture.nativeElement;
testHostComponent.field = { await waitUntil(() => element.getElementsByTagName('delete-icon').item(0));
type: 'enum',
value: null, const deleteIcon = element.getElementsByTagName('delete-icon').item(0);
valueList: [
'_customer', expect(deleteIcon).toBeTruthy();
'_reseller'
], deleteIcon.click();
metadata: null,
definition: {
options: 'account_type_dom'
}
};
testHostFixture.detectChanges(); testHostFixture.detectChanges();
testHostFixture.whenStable().then(() => { await testHostFixture.whenRenderingDone();
const deleteIcon = element.getElementsByTagName('delete-icon').item(0); const tag = element.getElementsByTagName('tag');
expect(deleteIcon).toBeTruthy();
deleteIcon.click();
testHostFixture.detectChanges();
testHostFixture.whenRenderingDone().then(() => {
const tag = element.getElementsByClassName('tag__text');
expect(tag).toBeTruthy();
expect(tag.length).toEqual(1);
});
});
expect(tag).toBeTruthy();
expect(tag.length).toEqual(1);
done();
}); });
}); });

View file

@ -26,7 +26,7 @@ import {dataTypeFormatterMock} from '@services/formatters/data-type.formatter.sp
}) })
class MultiEnumFilterFieldTestHostComponent { class MultiEnumFilterFieldTestHostComponent {
field: Field = { field: Field = {
type: 'enum', type: 'multienum',
value: null, value: null,
valueList: [ valueList: [
'_customer', '_customer',
@ -82,5 +82,35 @@ describe('MultiEnumFilterFieldComponent', () => {
expect(testHostComponent).toBeTruthy(); expect(testHostComponent).toBeTruthy();
}); });
it('should have value', async (done) => {
expect(testHostComponent).toBeTruthy();
testHostFixture.detectChanges();
await testHostFixture.whenRenderingDone();
const field = testHostFixture.nativeElement.getElementsByTagName('scrm-multienum-filter')[0];
expect(field).toBeTruthy();
const tagInput = field.getElementsByTagName('tag-input').item(0);
expect(tagInput).toBeTruthy();
const tag = tagInput.getElementsByTagName('tag').item(0);
expect(tag).toBeTruthy();
const tagText = tag.getElementsByClassName('tag__text').item(0);
expect(tagText.textContent).toContain('Customer');
expect(tagText.textContent).not.toContain('_customer');
const deleteIcon = tagInput.getElementsByTagName('delete-icon').item(0);
expect(deleteIcon).toBeTruthy();
done();
});
}); });

View file

@ -20,18 +20,9 @@ import {listStoreFactoryMock} from '@store/record-list/record-list.store.spec.mo
import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing'; import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {RelateEditFieldModule} from '@fields/relate/templates/edit/relate.module'; import {RelateEditFieldModule} from '@fields/relate/templates/edit/relate.module';
import {take} from 'rxjs/operators';
import {interval} from 'rxjs';
import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-name-mapper.service'; import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-name-mapper.service';
import {moduleNameMapperMock} from '@services/navigation/module-name-mapper/module-name-mapper.service.spec.mock'; import {moduleNameMapperMock} from '@services/navigation/module-name-mapper/module-name-mapper.service.spec.mock';
import {waitUntil} from '@app-common/testing/utils.spec';
export const waitUntil = async (untilTruthy: Function): Promise<boolean> => {
while (!untilTruthy()) {
await interval(25).pipe(take(1)).toPromise();
}
// eslint-disable-next-line compat/compat
return Promise.resolve(true);
};
@Component({ @Component({
selector: 'relate-edit-field-test-host-component', selector: 'relate-edit-field-test-host-component',

View file

@ -0,0 +1,10 @@
import {take} from 'rxjs/operators';
import {interval} from 'rxjs';
export const waitUntil = async (untilTruthy: Function): Promise<boolean> => {
while (!untilTruthy()) {
await interval(25).pipe(take(1)).toPromise();
}
// eslint-disable-next-line compat/compat
return Promise.resolve(true);
};