From 34fb8612f8871e2c88376d0f4db681b768cb93ab Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Tue, 5 Nov 2019 16:34:53 +0100 Subject: [PATCH 1/3] Expandable search form in header with tests (& e2e tests) Squashed: 66021: Expandable search form in header 66021: Adjustment small screens 66021: search icon now pressable and css partially moved to bootstrap classes 66021: start testing of header search box; TODO fix e2e 66021: E2E Tests 66021: Header search box now with angular animation and bootstrap > css; e2e fix 66021: feedback 2019-12-19 style changes 66021: Fix navbar search tests Patch: add opacity to header search animation Change the input style 66021: expandable search navbar - tests 66021: Expandable search form in header Small fix after rebasing upstream/master --- e2e/search-navbar/search-navbar.e2e-spec.ts | 46 +++++++ e2e/search-navbar/search-navbar.po.ts | 40 ++++++ src/app/app.module.ts | 34 ++--- .../community-list-adapter.ts | 0 src/app/header/header.component.html | 34 ++--- .../search-navbar.component.html | 12 ++ .../search-navbar.component.scss | 25 ++++ .../search-navbar.component.spec.ts | 121 ++++++++++++++++++ .../search-navbar/search-navbar.component.ts | 71 ++++++++++ src/app/shared/animations/slide.ts | 38 ++++-- 10 files changed, 378 insertions(+), 43 deletions(-) create mode 100644 e2e/search-navbar/search-navbar.e2e-spec.ts create mode 100644 e2e/search-navbar/search-navbar.po.ts delete mode 100644 src/app/community-list-page/community-list-adapter.ts create mode 100644 src/app/search-navbar/search-navbar.component.html create mode 100644 src/app/search-navbar/search-navbar.component.scss create mode 100644 src/app/search-navbar/search-navbar.component.spec.ts create mode 100644 src/app/search-navbar/search-navbar.component.ts diff --git a/e2e/search-navbar/search-navbar.e2e-spec.ts b/e2e/search-navbar/search-navbar.e2e-spec.ts new file mode 100644 index 0000000000..b60f71919d --- /dev/null +++ b/e2e/search-navbar/search-navbar.e2e-spec.ts @@ -0,0 +1,46 @@ +import { ProtractorPage } from './search-navbar.po'; +import { browser } from 'protractor'; + +describe('protractor SearchNavbar', () => { + let page: ProtractorPage; + let queryString: string; + + beforeEach(() => { + page = new ProtractorPage(); + queryString = 'the test query'; + }); + + it('should go to search page with correct query if submitted (from home)', () => { + page.navigateToHome(); + return checkIfSearchWorks(); + }); + + it('should go to search page with correct query if submitted (from search)', () => { + page.navigateToSearch(); + return checkIfSearchWorks(); + }); + + it('check if can submit search box with pressing button', () => { + page.navigateToHome(); + page.expandAndFocusSearchBox(); + page.setCurrentQuery(queryString); + page.submitNavbarSearchForm(); + browser.wait(() => { + return browser.getCurrentUrl().then((url: string) => { + return url.indexOf('query=' + encodeURI(queryString)) !== -1; + }); + }); + }); + + function checkIfSearchWorks(): boolean { + page.setCurrentQuery(queryString); + page.submitByPressingEnter(); + browser.wait(() => { + return browser.getCurrentUrl().then((url: string) => { + return url.indexOf('query=' + encodeURI(queryString)) !== -1; + }); + }); + return false; + } + +}); diff --git a/e2e/search-navbar/search-navbar.po.ts b/e2e/search-navbar/search-navbar.po.ts new file mode 100644 index 0000000000..17112ab468 --- /dev/null +++ b/e2e/search-navbar/search-navbar.po.ts @@ -0,0 +1,40 @@ +import { browser, element, by, protractor } from 'protractor'; +import { promise } from 'selenium-webdriver'; + +export class ProtractorPage { + HOME = '/home'; + SEARCH = '/search'; + + navigateToHome() { + return browser.get(this.HOME); + } + + navigateToSearch() { + return browser.get(this.SEARCH); + } + + getCurrentQuery(): promise.Promise { + return element(by.css('#search-navbar-container form input')).getAttribute('value'); + } + + expandAndFocusSearchBox() { + element(by.css('#search-navbar-container form a')).click(); + } + + setCurrentQuery(query: string) { + element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(query); + } + + submitNavbarSearchForm() { + element(by.css('#search-navbar-container form .submit-icon')).click(); + } + + submitByPressingEnter() { + element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER); + } + + submitByPressingEnter() { + element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER); + } + +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 926575d711..4b803608f3 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,10 +10,14 @@ import { META_REDUCERS, MetaReducer, StoreModule } from '@ngrx/store'; import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import { TranslateModule } from '@ngx-translate/core'; +import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; import { storeFreeze } from 'ngrx-store-freeze'; import { ENV_CONFIG, GLOBAL_CONFIG, GlobalConfig } from '../config'; +import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component'; +import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component'; +import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -23,23 +27,20 @@ import { appMetaReducers, debugMetaReducers } from './app.metareducers'; import { appReducers, AppState } from './app.reducer'; import { CoreModule } from './core/core.module'; -import { FooterComponent } from './footer/footer.component'; -import { HeaderComponent } from './header/header.component'; -import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component'; - -import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer'; -import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component'; -import { NotificationComponent } from './shared/notifications/notification/notification.component'; -import { SharedModule } from './shared/shared.module'; -import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; -import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component'; -import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component'; -import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component'; -import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component'; -import { NavbarModule } from './navbar/navbar.module'; import { ClientCookieService } from './core/services/client-cookie.service'; import { JournalEntitiesModule } from './entity-groups/journal-entities/journal-entities.module'; import { ResearchEntitiesModule } from './entity-groups/research-entities/research-entities.module'; +import { FooterComponent } from './footer/footer.component'; +import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component'; +import { HeaderComponent } from './header/header.component'; +import { NavbarModule } from './navbar/navbar.module'; +import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component'; +import { SearchNavbarComponent } from './search-navbar/search-navbar.component'; + +import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer'; +import { NotificationComponent } from './shared/notifications/notification/notification.component'; +import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component'; +import { SharedModule } from './shared/shared.module'; export function getConfig() { return ENV_CONFIG; @@ -112,7 +113,8 @@ const DECLARATIONS = [ FooterComponent, PageNotFoundComponent, NotificationComponent, - NotificationsBoardComponent + NotificationsBoardComponent, + SearchNavbarComponent, ]; const EXPORTS = [ @@ -128,7 +130,7 @@ const EXPORTS = [ ...PROVIDERS ], declarations: [ - ...DECLARATIONS + ...DECLARATIONS, ], exports: [ ...EXPORTS diff --git a/src/app/community-list-page/community-list-adapter.ts b/src/app/community-list-page/community-list-adapter.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index a03fd01c53..58f7cb1ecf 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,20 +1,20 @@
-
- - - +
+ + + - -
+ +
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html new file mode 100644 index 0000000000..13d792c80f --- /dev/null +++ b/src/app/search-navbar/search-navbar.component.html @@ -0,0 +1,12 @@ +
+
+
+ + + + +
+
+
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss new file mode 100644 index 0000000000..3606c47afc --- /dev/null +++ b/src/app/search-navbar/search-navbar.component.scss @@ -0,0 +1,25 @@ +input[type="text"] { + margin-top: -0.5 * $font-size-base; + + &:focus { + background-color: rgba(255, 255, 255, 0.5) !important; + } + + &.collapsed { + opacity: 0; + } +} + +a.submit-icon { + cursor: pointer; +} + + + +@media screen and (max-width: map-get($grid-breakpoints, sm)) { + #query:focus { + max-width: 250px !important; + width: 40vw !important; + } +} + diff --git a/src/app/search-navbar/search-navbar.component.spec.ts b/src/app/search-navbar/search-navbar.component.spec.ts new file mode 100644 index 0000000000..2a03acd2a2 --- /dev/null +++ b/src/app/search-navbar/search-navbar.component.spec.ts @@ -0,0 +1,121 @@ +import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { By } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { Router } from '@angular/router'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { SearchService } from '../core/shared/search/search.service'; +import { MockTranslateLoader } from '../shared/mocks/mock-translate-loader'; + +import { SearchNavbarComponent } from './search-navbar.component'; + +describe('SearchNavbarComponent', () => { + let component: SearchNavbarComponent; + let fixture: ComponentFixture; + let mockSearchService: any; + let router: Router; + let routerStub; + + beforeEach(async(() => { + mockSearchService = { + getSearchLink() { + return '/search'; + } + }; + + routerStub = { + navigate: (commands) => commands + }; + TestBed.configureTestingModule({ + imports: [ + FormsModule, + ReactiveFormsModule, + BrowserAnimationsModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: MockTranslateLoader + } + })], + declarations: [SearchNavbarComponent], + providers: [ + { provide: SearchService, useValue: mockSearchService }, + { provide: Router, useValue: routerStub } + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchNavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + router = (component as any).router; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('when you click on search icon', () => { + beforeEach(fakeAsync(() => { + spyOn(component, 'expand').and.callThrough(); + spyOn(component, 'onSubmit').and.callThrough(); + spyOn(router, 'navigate').and.callThrough(); + const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon')); + searchIcon.triggerEventHandler('click', { + preventDefault: () => {/**/ + } + }); + tick(); + fixture.detectChanges(); + })); + + it('input expands', () => { + expect(component.expand).toHaveBeenCalled(); + }); + + describe('empty query', () => { + describe('press submit button', () => { + beforeEach(fakeAsync(() => { + const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon')); + searchIcon.triggerEventHandler('click', { + preventDefault: () => {/**/ + } + }); + tick(); + fixture.detectChanges(); + })); + it('to search page with empty query', () => { + expect(component.onSubmit).toHaveBeenCalledWith({ query: '' }); + expect(router.navigate).toHaveBeenCalled(); + }); + }); + }); + + describe('fill in some query', () => { + let searchInput; + beforeEach(async () => { + await fixture.whenStable(); + fixture.detectChanges(); + searchInput = fixture.debugElement.query(By.css('#search-navbar-container form input')); + searchInput.nativeElement.value = 'test'; + searchInput.nativeElement.dispatchEvent(new Event('input')); + fixture.detectChanges(); + }); + describe('press submit button', () => { + beforeEach(fakeAsync(() => { + const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon')); + searchIcon.triggerEventHandler('click', null); + tick(); + fixture.detectChanges(); + })); + it('to search page with query', async () => { + expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' }); + expect(router.navigate).toHaveBeenCalled(); + }); + }); + }) + + }); +}); diff --git a/src/app/search-navbar/search-navbar.component.ts b/src/app/search-navbar/search-navbar.component.ts new file mode 100644 index 0000000000..1bedfb73ef --- /dev/null +++ b/src/app/search-navbar/search-navbar.component.ts @@ -0,0 +1,71 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { Router } from '@angular/router'; +import { SearchService } from '../core/shared/search/search.service'; +import { expandSearchInput } from '../shared/animations/slide'; + +/** + * The search box in the header that expands on focus and collapses on focus out + */ +@Component({ + selector: 'ds-search-navbar', + templateUrl: './search-navbar.component.html', + styleUrls: ['./search-navbar.component.scss'], + animations: [expandSearchInput] +}) +export class SearchNavbarComponent { + + // The search form + searchForm; + // Whether or not the search bar is expanded, boolean for html ngIf, string fo AngularAnimation state change + searchExpanded = false; + isExpanded = 'collapsed'; + + // Search input field + @ViewChild('searchInput') searchField: ElementRef; + + constructor(private formBuilder: FormBuilder, private router: Router, private searchService: SearchService) { + this.searchForm = this.formBuilder.group(({ + query: '', + })); + } + + /** + * Expands search bar by angular animation, see expandSearchInput + */ + expand() { + this.searchExpanded = true; + this.isExpanded = 'expanded'; + this.editSearch(); + } + + /** + * Collapses & blurs search bar by angular animation, see expandSearchInput + */ + collapse() { + this.searchField.nativeElement.blur(); + this.searchExpanded = false; + this.isExpanded = 'collapsed'; + } + + /** + * Focuses on input search bar so search can be edited + */ + editSearch(): void { + this.searchField.nativeElement.focus(); + } + + /** + * Submits the search (on enter or on search icon click) + * @param data Data for the searchForm, containing the search query + */ + onSubmit(data: any) { + this.collapse(); + const linkToNavigateTo = this.searchService.getSearchLink().split('/'); + this.searchForm.reset(); + this.router.navigate(linkToNavigateTo, { + queryParams: Object.assign({}, { page: 1 }, data), + queryParamsHandling: 'merge' + }); + } +} diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts index 38bfaaddca..7928a25659 100644 --- a/src/app/shared/animations/slide.ts +++ b/src/app/shared/animations/slide.ts @@ -1,13 +1,4 @@ -import { - animate, - animateChild, - group, - query, - state, - style, - transition, - trigger -} from '@angular/animations'; +import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations'; export const slide = trigger('slide', [ state('expanded', style({ height: '*' })), @@ -70,3 +61,30 @@ export const slideSidebarPadding = trigger('slideSidebarPadding', [ transition('hidden <=> expanded', [animate('200ms')]), transition('shown <=> expanded', [animate('200ms')]), ]); + +export const expandSearchInput = trigger('toggleAnimation', [ + state('collapsed', style({ + width: '30px', + opacity: '0' + })), + state('expanded', style({ + width: '250px', + opacity: '1' + })), + transition('* => collapsed', group([ + animate('300ms ease-in-out', style({ + width: '30px' + })), + animate('300ms ease-in', style({ + opacity: '0' + })) + ])), + transition('* => expanded', group([ + animate('300ms ease-out', style({ + opacity: '1' + })), + animate('300ms ease-in-out', style({ + width: '250px' + })) + ])) +]); From c57810f00d2d3cfd7aa880c6a2473d38850bf823 Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Fri, 10 Jan 2020 15:04:52 +0100 Subject: [PATCH 2/3] Timeout time for e2e tests --- protractor.conf.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/protractor.conf.js b/protractor.conf.js index 2949702a0a..6570c9f7c3 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -5,7 +5,7 @@ var SpecReporter = require('jasmine-spec-reporter').SpecReporter; exports.config = { - allScriptsTimeout: 11000, + allScriptsTimeout: 600000, // ----------------------------------------------------------------- // Uncomment to run tests using a remote Selenium server //seleniumAddress: 'http://selenium.address:4444/wd/hub', @@ -73,7 +73,7 @@ exports.config = { framework: 'jasmine', jasmineNodeOpts: { showColors: true, - defaultTimeoutInterval: 30000, + defaultTimeoutInterval: 600000, print: function () {} }, useAllAngular2AppRoots: true, From d3d2bb20d44af727c6a606f9cc4d684f8b00330e Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Fri, 10 Jan 2020 15:28:57 +0100 Subject: [PATCH 3/3] id css selector added to remove ambiguity in search-page e2e tests --- e2e/search-page/search-page.po.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/e2e/search-page/search-page.po.ts b/e2e/search-page/search-page.po.ts index fde3e68bf8..51bf86453b 100644 --- a/e2e/search-page/search-page.po.ts +++ b/e2e/search-page/search-page.po.ts @@ -1,4 +1,4 @@ -import { browser, element, by, protractor } from 'protractor'; +import { browser, by, element, protractor } from 'protractor'; import { promise } from 'selenium-webdriver'; export class ProtractorPage { @@ -27,15 +27,15 @@ export class ProtractorPage { } setCurrentScope(scope: string) { - element(by.css('option[value="' + scope + '"]')).click(); + element(by.css('#search-form option[value="' + scope + '"]')).click(); } setCurrentQuery(query: string) { - element(by.css('input[name="query"]')).sendKeys(query); + element(by.css('#search-form input[name="query"]')).sendKeys(query); } submitSearchForm() { - element(by.css('button.search-button')).click(); + element(by.css('#search-form button.search-button')).click(); } getRandomScopeOption(): promise.Promise {