hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed duplicate search-navbar-container id & renabled accessibility tests for header

Browse Source 
(cherry picked from commit cc71d60ebb)
This commit is contained in:
Alexandre Vryghem
2023-11-26 02:16:56 +01:00
committed by github-actions[bot]
parent 9f468c2c11
commit 1c4be7d1fe
3 changed files with 8 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
cypress/e2e/header.cy.ts
View File

@@ -8,11 +8,6 @@ describe('Header', () => {
cy.get('ds-header').should('be.visible'); cy.get('ds-header').should('be.visible');
// Analyze <ds-header> for accessibility // Analyze <ds-header> for accessibility
testA11y({ testA11y('ds-header');
include: ['ds-header'],
exclude: [
['#search-navbar-container'] // search in navbar has duplicative ID. Will be fixed in #1174
],
});
}); });
}); });

2
src/app/search-navbar/search-navbar.component.html
View File

@@ -1,4 +1,4 @@
<div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()"> <div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
<div class="d-inline-block position-relative"> <div class="d-inline-block position-relative">
<form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex"> <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
<input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query" <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"

21
src/app/search-navbar/search-navbar.component.spec.ts
View File

@@ -8,7 +8,6 @@ import { SearchService } from '../core/shared/search/search.service';
import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock'; import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
import { SearchNavbarComponent } from './search-navbar.component'; import { SearchNavbarComponent } from './search-navbar.component';
import { PaginationServiceStub } from '../shared/testing/pagination-service.stub';
import { RouterTestingModule } from '@angular/router/testing'; import { RouterTestingModule } from '@angular/router/testing';
import { BrowserOnlyMockPipe } from '../shared/testing/browser-only-mock.pipe'; import { BrowserOnlyMockPipe } from '../shared/testing/browser-only-mock.pipe';
@@ -17,8 +16,6 @@ describe('SearchNavbarComponent', () => {
let fixture: ComponentFixture<SearchNavbarComponent>; let fixture: ComponentFixture<SearchNavbarComponent>;
let mockSearchService: any; let mockSearchService: any;
let router: Router; let router: Router;
let routerStub;
let paginationService;
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
mockSearchService = { mockSearchService = {
@@ -27,12 +24,6 @@ describe('SearchNavbarComponent', () => {
} }
}; };
routerStub = {
navigate: (commands) => commands
};
paginationService = new PaginationServiceStub();
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ imports: [
FormsModule, FormsModule,
@@ -72,7 +63,7 @@ describe('SearchNavbarComponent', () => {
spyOn(component, 'expand').and.callThrough(); spyOn(component, 'expand').and.callThrough();
spyOn(component, 'onSubmit').and.callThrough(); spyOn(component, 'onSubmit').and.callThrough();
spyOn(router, 'navigate'); spyOn(router, 'navigate');
const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon')); const searchIcon = fixture.debugElement.query(By.css('form .submit-icon'));
searchIcon.triggerEventHandler('click', { searchIcon.triggerEventHandler('click', {
preventDefault: () => {/**/ preventDefault: () => {/**/
} }
@@ -88,7 +79,7 @@ describe('SearchNavbarComponent', () => {
describe('empty query', () => { describe('empty query', () => {
describe('press submit button', () => { describe('press submit button', () => {
beforeEach(fakeAsync(() => { beforeEach(fakeAsync(() => {
const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon')); const searchIcon = fixture.debugElement.query(By.css('form .submit-icon'));
searchIcon.triggerEventHandler('click', { searchIcon.triggerEventHandler('click', {
preventDefault: () => {/**/ preventDefault: () => {/**/
} }
@@ -97,7 +88,7 @@ describe('SearchNavbarComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
})); }));
it('to search page with empty query', () => { it('to search page with empty query', () => {
const extras: NavigationExtras = {queryParams: { query: '' }, queryParamsHandling: 'merge'}; const extras: NavigationExtras = { queryParams: { query: '' }, queryParamsHandling: 'merge' };
expect(component.onSubmit).toHaveBeenCalledWith({ query: '' }); expect(component.onSubmit).toHaveBeenCalledWith({ query: '' });
expect(router.navigate).toHaveBeenCalledWith(['search'], extras); expect(router.navigate).toHaveBeenCalledWith(['search'], extras);
}); });
@@ -109,20 +100,20 @@ describe('SearchNavbarComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await fixture.whenStable(); await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
searchInput = fixture.debugElement.query(By.css('#search-navbar-container form input')); searchInput = fixture.debugElement.query(By.css('form input'));
searchInput.nativeElement.value = 'test'; searchInput.nativeElement.value = 'test';
searchInput.nativeElement.dispatchEvent(new Event('input')); searchInput.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges(); fixture.detectChanges();
}); });
describe('press submit button', () => { describe('press submit button', () => {
beforeEach(fakeAsync(() => { beforeEach(fakeAsync(() => {
const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon')); const searchIcon = fixture.debugElement.query(By.css('form .submit-icon'));
searchIcon.triggerEventHandler('click', null); searchIcon.triggerEventHandler('click', null);
tick(); tick();
fixture.detectChanges(); fixture.detectChanges();
})); }));
it('to search page with query', async () => { it('to search page with query', async () => {
const extras: NavigationExtras = { queryParams: { query: 'test' }, queryParamsHandling: 'merge'}; const extras: NavigationExtras = { queryParams: { query: 'test' }, queryParamsHandling: 'merge' };
expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' }); expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' });
expect(router.navigate).toHaveBeenCalledWith(['search'], extras); expect(router.navigate).toHaveBeenCalledWith(['search'], extras);