mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
b28a53afe7
* remove xit test and ban xit and xdescribe use in the future * remove xit test and ban xit and xdescribe use in the future * remove test excluded * remove consecutive blank line
671 lines
26 KiB
TypeScript
671 lines
26 KiB
TypeScript
/*!
|
|
* @license
|
|
* Copyright 2019 Alfresco Software, Ltd.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { Component, DebugElement, ViewChild } from '@angular/core';
|
|
import { async, discardPeriodicTasks, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
|
|
import { By } from '@angular/platform-browser';
|
|
import {
|
|
AuthenticationService,
|
|
SearchService,
|
|
setupTestBed,
|
|
CoreModule,
|
|
UserPreferencesService
|
|
} from '@alfresco/adf-core';
|
|
import { ThumbnailService } from '@alfresco/adf-core';
|
|
import { noResult, results } from '../../mock';
|
|
import { SearchControlComponent } from './search-control.component';
|
|
import { SearchTriggerDirective } from './search-trigger.directive';
|
|
import { SearchComponent } from './search.component';
|
|
import { EmptySearchResultComponent } from './empty-search-result.component';
|
|
import { of } from 'rxjs';
|
|
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
|
|
|
@Component({
|
|
template: `
|
|
<adf-search-control [highlight]="true" #search>
|
|
<adf-empty-search-result>
|
|
<span id="custom-no-result">{{customMessage}}</span>
|
|
</adf-empty-search-result>
|
|
</adf-search-control>
|
|
`
|
|
})
|
|
|
|
export class SimpleSearchTestCustomEmptyComponent {
|
|
|
|
customMessage: string = '';
|
|
|
|
@ViewChild(SearchControlComponent)
|
|
searchComponent: SearchControlComponent;
|
|
|
|
constructor() {
|
|
}
|
|
|
|
setCustomMessageForNoResult(message: string) {
|
|
this.customMessage = message;
|
|
}
|
|
|
|
}
|
|
|
|
describe('SearchControlComponent', () => {
|
|
|
|
let fixture: ComponentFixture<SearchControlComponent>;
|
|
let component: SearchControlComponent;
|
|
let element: HTMLElement;
|
|
let debugElement: DebugElement;
|
|
let searchService: SearchService;
|
|
let authService: AuthenticationService;
|
|
let fixtureCustom: ComponentFixture<SimpleSearchTestCustomEmptyComponent>;
|
|
let elementCustom: HTMLElement;
|
|
let componentCustom: SimpleSearchTestCustomEmptyComponent;
|
|
let searchServiceSpy: any;
|
|
let userPreferencesService: UserPreferencesService;
|
|
|
|
setupTestBed({
|
|
imports: [
|
|
NoopAnimationsModule,
|
|
CoreModule.forRoot()
|
|
],
|
|
declarations: [
|
|
SearchControlComponent,
|
|
SearchComponent,
|
|
SearchTriggerDirective,
|
|
EmptySearchResultComponent,
|
|
SimpleSearchTestCustomEmptyComponent
|
|
],
|
|
providers: [
|
|
ThumbnailService,
|
|
SearchService,
|
|
UserPreferencesService
|
|
]
|
|
});
|
|
|
|
beforeEach(() => {
|
|
fixture = TestBed.createComponent(SearchControlComponent);
|
|
debugElement = fixture.debugElement;
|
|
searchService = TestBed.get(SearchService);
|
|
authService = TestBed.get(AuthenticationService);
|
|
userPreferencesService = TestBed.get(UserPreferencesService);
|
|
spyOn(authService, 'isEcmLoggedIn').and.returnValue(true);
|
|
component = fixture.componentInstance;
|
|
element = fixture.nativeElement;
|
|
|
|
searchServiceSpy = spyOn(searchService, 'search').and.returnValue(of(''));
|
|
});
|
|
|
|
afterEach(() => {
|
|
fixture.destroy();
|
|
TestBed.resetTestingModule();
|
|
});
|
|
|
|
function typeWordIntoSearchInput(word: string): void {
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
inputDebugElement.nativeElement.value = word;
|
|
inputDebugElement.nativeElement.focus();
|
|
inputDebugElement.nativeElement.dispatchEvent(new Event('input'));
|
|
}
|
|
|
|
describe('when input values are inserted', () => {
|
|
|
|
beforeEach(() => {
|
|
fixture.detectChanges();
|
|
});
|
|
|
|
it('should emit searchChange when search term input changed', (done) => {
|
|
searchServiceSpy.and.returnValue(
|
|
of({ entry: { list: [] } })
|
|
);
|
|
|
|
const searchDisposable = component.searchChange.subscribe((value) => {
|
|
expect(value).toBe('customSearchTerm');
|
|
searchDisposable.unsubscribe();
|
|
done();
|
|
});
|
|
|
|
typeWordIntoSearchInput('customSearchTerm');
|
|
fixture.detectChanges();
|
|
});
|
|
|
|
it('should update FAYT search when user inputs a valid term', (done) => {
|
|
typeWordIntoSearchInput('customSearchTerm');
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
expect(element.querySelector('#result_option_0')).not.toBeNull();
|
|
expect(element.querySelector('#result_option_1')).not.toBeNull();
|
|
expect(element.querySelector('#result_option_2')).not.toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should NOT update FAYT term when user inputs an empty string as search term ', (done) => {
|
|
typeWordIntoSearchInput('');
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
expect(element.querySelector('#result_option_0')).toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should still fire an event when user inputs a search term less than 3 characters', (done) => {
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
|
|
const searchDisposable = component.searchChange.subscribe((value) => {
|
|
expect(value).toBe('cu');
|
|
searchDisposable.unsubscribe();
|
|
});
|
|
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
typeWordIntoSearchInput('cu');
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('expandable option false', () => {
|
|
|
|
beforeEach(() => {
|
|
component.expandable = false;
|
|
fixture.detectChanges();
|
|
});
|
|
|
|
it('search button should be hide', () => {
|
|
const searchButton: any = element.querySelector('#adf-search-button');
|
|
expect(searchButton).toBe(null);
|
|
});
|
|
|
|
it('should not have animation', () => {
|
|
expect(component.subscriptAnimationState.value).toBe('no-animation');
|
|
});
|
|
});
|
|
|
|
describe('component rendering', () => {
|
|
|
|
it('should display a text input field by default', async(() => {
|
|
fixture.detectChanges();
|
|
expect(element.querySelectorAll('#adf-control-input').length).toBe(1);
|
|
expect(element.querySelector('#adf-control-input')).toBeDefined();
|
|
expect(element.querySelector('#adf-control-input')).not.toBeNull();
|
|
}));
|
|
|
|
it('should set browser autocomplete to off by default', async(() => {
|
|
fixture.detectChanges();
|
|
const attr = element.querySelector('#adf-control-input').getAttribute('autocomplete');
|
|
expect(attr).toBe('off');
|
|
}));
|
|
|
|
it('should display a search input field when specified', async(() => {
|
|
component.inputType = 'search';
|
|
fixture.detectChanges();
|
|
expect(element.querySelectorAll('input[type="search"]').length).toBe(1);
|
|
}));
|
|
|
|
it('should set browser autocomplete to on when configured', async(() => {
|
|
component.autocomplete = true;
|
|
fixture.detectChanges();
|
|
expect(element.querySelector('#adf-control-input').getAttribute('autocomplete')).toBe('on');
|
|
}));
|
|
|
|
});
|
|
|
|
describe('autocomplete list', () => {
|
|
|
|
it('should make autocomplete list control hidden initially', (done) => {
|
|
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
expect(element.querySelector('#autocomplete-search-result-list')).toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should make autocomplete list control visible when search box has focus and there is a search result', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
fixture.detectChanges();
|
|
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
const resultElement: Element = element.querySelector('#autocomplete-search-result-list');
|
|
expect(resultElement).not.toBe(null);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should show autocomplete list noe results when search box has focus and there is search result with length 0', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(noResult));
|
|
fixture.detectChanges();
|
|
|
|
typeWordIntoSearchInput('NO RES');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
const noResultElement: Element = element.querySelector('#search_no_result');
|
|
expect(noResultElement).not.toBe(null);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should hide autocomplete list results when the search box loses focus', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
fixture.detectChanges();
|
|
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
typeWordIntoSearchInput('NO RES');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
let resultElement: Element = element.querySelector('#autocomplete-search-result-list');
|
|
expect(resultElement).not.toBe(null);
|
|
inputDebugElement.nativeElement.dispatchEvent(new Event('blur'));
|
|
|
|
fixture.detectChanges();
|
|
resultElement = element.querySelector('#autocomplete-search-result-list');
|
|
expect(resultElement).not.toBe(null);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should keep autocomplete list control visible when user tabs into results', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
fixture.detectChanges();
|
|
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
const resultElement: HTMLElement = <HTMLElement> element.querySelector('#result_option_0');
|
|
resultElement.focus();
|
|
expect(resultElement).not.toBe(null);
|
|
inputDebugElement.nativeElement.dispatchEvent(new KeyboardEvent('keypress', { key: 'TAB' }));
|
|
fixture.detectChanges();
|
|
|
|
expect(element.querySelector('#autocomplete-search-result-list')).not.toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should close the autocomplete when user press ESCAPE', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
fixture.detectChanges();
|
|
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
let resultElement: HTMLElement = <HTMLElement> element.querySelector('#result_option_0');
|
|
expect(resultElement).not.toBeNull();
|
|
const escapeEvent: any = new Event('ESCAPE');
|
|
escapeEvent.keyCode = 27;
|
|
inputDebugElement.triggerEventHandler('keydown', escapeEvent);
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
resultElement = <HTMLElement> element.querySelector('#result_option_0');
|
|
expect(resultElement).toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it('should close the autocomplete when user press ENTER on input', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
fixture.detectChanges();
|
|
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
let resultElement: HTMLElement = <HTMLElement> element.querySelector('#result_option_0');
|
|
expect(resultElement).not.toBeNull();
|
|
const escapeEvent: any = new Event('ENTER');
|
|
escapeEvent.keyCode = 13;
|
|
inputDebugElement.triggerEventHandler('keydown', escapeEvent);
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
resultElement = <HTMLElement> element.querySelector('#result_option_0');
|
|
expect(resultElement).toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
it('should focus input element when autocomplete list is cancelled', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
fixture.detectChanges();
|
|
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
const escapeEvent: any = new Event('ESCAPE');
|
|
escapeEvent.keyCode = 27;
|
|
inputDebugElement.nativeElement.focus();
|
|
inputDebugElement.nativeElement.dispatchEvent(escapeEvent);
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
expect(element.querySelector('#result_name_0')).toBeNull();
|
|
expect(document.activeElement.id).toBe(inputDebugElement.nativeElement.id);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should NOT display a autocomplete list control when configured not to', (done) => {
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
component.liveSearchEnabled = false;
|
|
fixture.detectChanges();
|
|
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
expect(element.querySelector('#autocomplete-search-result-list')).toBeNull();
|
|
done();
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
describe('search button', () => {
|
|
|
|
it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => {
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
component.subscriptAnimationState.value = 'active';
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('active');
|
|
|
|
searchButton.triggerEventHandler('click', null);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('inactive');
|
|
discardPeriodicTasks();
|
|
}));
|
|
|
|
it('click on the search button should open the input box when is close', fakeAsync(() => {
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
searchButton.triggerEventHandler('click', null);
|
|
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('active');
|
|
discardPeriodicTasks();
|
|
}));
|
|
|
|
it('Search button should not change the input state too often', fakeAsync(() => {
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
component.subscriptAnimationState.value = 'active';
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('active');
|
|
searchButton.triggerEventHandler('click', null);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
searchButton.triggerEventHandler('click', null);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('inactive');
|
|
discardPeriodicTasks();
|
|
}));
|
|
|
|
it('Search bar should close when user press ESC button', fakeAsync(() => {
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
|
|
component.subscriptAnimationState.value = 'active';
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('active');
|
|
|
|
inputDebugElement.triggerEventHandler('keyup.escape', {});
|
|
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.value).toBe('inactive');
|
|
discardPeriodicTasks();
|
|
}));
|
|
});
|
|
|
|
describe('option click', () => {
|
|
|
|
it('should emit a option clicked event when item is clicked', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
const clickDisposable = component.optionClicked.subscribe((item) => {
|
|
expect(item.entry.id).toBe('123');
|
|
clickDisposable.unsubscribe();
|
|
done();
|
|
});
|
|
fixture.detectChanges();
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.detectChanges();
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
const firstOption: DebugElement = debugElement.query(By.css('#result_name_0'));
|
|
firstOption.nativeElement.click();
|
|
});
|
|
});
|
|
|
|
it('should set deactivate the search after element is clicked', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
const clickDisposable = component.optionClicked.subscribe((item) => {
|
|
expect(component.subscriptAnimationState.value).toBe('inactive');
|
|
clickDisposable.unsubscribe();
|
|
done();
|
|
});
|
|
fixture.detectChanges();
|
|
|
|
typeWordIntoSearchInput('TEST');
|
|
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
const firstOption: DebugElement = debugElement.query(By.css('#result_name_0'));
|
|
firstOption.nativeElement.click();
|
|
});
|
|
});
|
|
|
|
it('should NOT reset the search term after element is clicked', (done) => {
|
|
spyOn(component, 'isSearchBarActive').and.returnValue(true);
|
|
searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
|
|
const clickDisposable = component.optionClicked.subscribe((item) => {
|
|
expect(component.searchTerm).not.toBeFalsy();
|
|
expect(component.searchTerm).toBe('TEST');
|
|
clickDisposable.unsubscribe();
|
|
done();
|
|
});
|
|
fixture.detectChanges();
|
|
typeWordIntoSearchInput('TEST');
|
|
fixture.detectChanges();
|
|
|
|
fixture.whenStable().then(() => {
|
|
fixture.detectChanges();
|
|
const firstOption: DebugElement = debugElement.query(By.css('#result_name_0'));
|
|
firstOption.nativeElement.click();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('SearchControlComponent - No result custom', () => {
|
|
|
|
beforeEach(() => {
|
|
fixtureCustom = TestBed.createComponent(SimpleSearchTestCustomEmptyComponent);
|
|
componentCustom = fixtureCustom.componentInstance;
|
|
elementCustom = fixtureCustom.nativeElement;
|
|
});
|
|
|
|
it('should display the custom no results when it is configured', (done) => {
|
|
const noResultCustomMessage = 'BANDI IS NOTHING';
|
|
spyOn(componentCustom.searchComponent, 'isSearchBarActive').and.returnValue(true);
|
|
componentCustom.setCustomMessageForNoResult(noResultCustomMessage);
|
|
searchServiceSpy.and.returnValue(of(noResult));
|
|
fixtureCustom.detectChanges();
|
|
|
|
const inputDebugElement = fixtureCustom.debugElement.query(By.css('#adf-control-input'));
|
|
inputDebugElement.nativeElement.value = 'SOMETHING';
|
|
inputDebugElement.nativeElement.focus();
|
|
inputDebugElement.nativeElement.dispatchEvent(new Event('input'));
|
|
|
|
fixtureCustom.detectChanges();
|
|
fixtureCustom.whenStable().then(() => {
|
|
fixtureCustom.detectChanges();
|
|
expect(elementCustom.querySelector('#custom-no-result').textContent).toBe(noResultCustomMessage);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('directionality', () => {
|
|
describe('initial animation state', () => {
|
|
beforeEach(() => {
|
|
component.expandable = true;
|
|
});
|
|
|
|
it('should have positive transform translation', () => {
|
|
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
|
|
fixture.detectChanges();
|
|
expect(component.subscriptAnimationState.params.transform).toBe('translateX(82%)');
|
|
});
|
|
|
|
it('should have negative transform translation ', () => {
|
|
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
|
|
fixture.detectChanges();
|
|
expect(component.subscriptAnimationState.params.transform).toBe('translateX(-82%)');
|
|
});
|
|
});
|
|
|
|
describe('toggle animation', () => {
|
|
beforeEach(() => {
|
|
fixture.detectChanges();
|
|
});
|
|
|
|
it('should have margin-left set when active and direction is ltr', fakeAsync(() => {
|
|
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
|
|
fixture.detectChanges();
|
|
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
|
|
searchButton.triggerEventHandler('click', null);
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.params).toEqual({ 'margin-left': 13 });
|
|
discardPeriodicTasks();
|
|
}));
|
|
|
|
it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => {
|
|
userPreferencesService.setWithoutStore('textOrientation', 'ltr');
|
|
component.subscriptAnimationState.value = 'active';
|
|
|
|
fixture.detectChanges();
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
|
|
searchButton.triggerEventHandler('click', null);
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.params).toEqual({ 'transform': 'translateX(82%)' });
|
|
discardPeriodicTasks();
|
|
}));
|
|
|
|
it('should have margin-right set when active and direction is rtl', fakeAsync(() => {
|
|
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
|
|
fixture.detectChanges();
|
|
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
|
|
searchButton.triggerEventHandler('click', null);
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.params).toEqual({ 'margin-right': 13 });
|
|
discardPeriodicTasks();
|
|
}));
|
|
|
|
it('should have negative transform translateX set when inactive and direction is rtl', fakeAsync(() => {
|
|
userPreferencesService.setWithoutStore('textOrientation', 'rtl');
|
|
component.subscriptAnimationState.value = 'active';
|
|
|
|
fixture.detectChanges();
|
|
const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button'));
|
|
|
|
searchButton.triggerEventHandler('click', null);
|
|
tick(100);
|
|
fixture.detectChanges();
|
|
tick(100);
|
|
|
|
expect(component.subscriptAnimationState.params).toEqual({ 'transform': 'translateX(-82%)' });
|
|
discardPeriodicTasks();
|
|
}));
|
|
});
|
|
});
|
|
});
|