inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-08 14:51:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Recheck request

Browse Source
This commit is contained in:
deepusingh1304
2025-06-18 06:43:06 -04:00
parent 4edd377cd3
commit 7fdc76b48f
2 changed files with 79 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
lib/core/src/lib/viewer/components/viewer.component.html
View File

@@ -9,9 +9,9 @@
<ng-content select="adf-viewer-toolbar" />
<ng-container *ngIf="showToolbar && !toolbar">
<adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar">
<adf-toolbar-title>
<adf-toolbar-divider />
<adf-toolbar-title>
<ng-container *ngIf="allowLeftSidebar">
<button mat-icon-button
[attr.aria-expanded]="showLeftSidebar"
@@ -23,7 +23,6 @@
<mat-icon>info_outline</mat-icon>
</button>
</ng-container>
<button *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Left"
class="adf-viewer-close-button"
data-automation-id="adf-toolbar-left-back"
@@ -33,7 +32,6 @@
(click)="onClose()">
<mat-icon>close</mat-icon>
</button>
<button *ngIf="allowNavigate && canNavigateBefore"
data-automation-id="adf-toolbar-pref-file"
mat-icon-button
@@ -42,7 +40,6 @@
(click)="onNavigateBeforeClick($event)">
<mat-icon>navigate_before</mat-icon>
</button>
<button *ngIf="allowNavigate && canNavigateNext"
data-automation-id="adf-toolbar-next-file"
mat-icon-button
@@ -51,18 +48,6 @@
(click)="onNavigateNextClick($event)">
<mat-icon>navigate_next</mat-icon>
</button>
<div class="adf-viewer__file-title">
<img class="adf-viewer__mimeicon"
[alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
[src]="mimeTypeIconUrl"
data-automation-id="adf-file-thumbnail">
<div class="adf-viewer__display-name"
id="adf-viewer-display-name"
[title]="fileName">
<span>{{ displayName }}</span>
</div>
</div>
</adf-toolbar-title>
<ng-content select="adf-viewer-toolbar-actions" />
@@ -133,6 +118,18 @@
<mat-icon>close</mat-icon>
</button>
</ng-container>
<div class="adf-viewer__file-title">
<img class="adf-viewer__mimeicon"
[alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
[src]="mimeTypeIconUrl"
data-automation-id="adf-file-thumbnail">
<div class="adf-viewer__display-name"
id="adf-viewer-display-name"
[title]="fileName">
<span>{{ displayName }}</span>
</div>
</div>
</adf-toolbar>
</ng-container>

66
lib/core/src/lib/viewer/components/viewer.component.spec.ts
View File

@@ -18,8 +18,9 @@
import { Component, SimpleChanges } from '@angular/core';
import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { By } from '@angular/platform-browser';
import { of } from 'rxjs';
import { AppConfigService } from '../../app-config';
import { EventMock } from '../../mock';
@@ -695,4 +696,67 @@ describe('ViewerComponent', () => {
expect(component.downloadFile.emit).toHaveBeenCalled();
}));
});
describe('ViewerComponent toolbar separators', () => {
let component: ViewerComponent<any>;
let fixture: ComponentFixture<ViewerComponent<any>>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatButtonModule, MatIconModule, MatDialogModule],
declarations: [ViewerComponent]
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ViewerComponent);
component = fixture.componentInstance;
component.showViewer = true;
fixture.detectChanges();
});
const createToolbarTest = (
allowRightSidebar: boolean,
hideInfoButton: boolean,
allowFullScreen: boolean,
allowGoBack: boolean,
expectedSeparatorCount: number
) => {
it(`should have correct UI state when [R:${allowRightSidebar}, I:${hideInfoButton}, F:${allowFullScreen}, B:${allowGoBack}]`, () => {
component.allowRightSidebar = allowRightSidebar;
component.hideInfoButton = hideInfoButton;
component.allowFullScreen = allowFullScreen;
component.allowGoBack = allowGoBack;
fixture.detectChanges();
const separators = fixture.debugElement.queryAll(
// .adf-toolbar-divider is the class used for separators
// If your divider uses a different selector, update here
By.css('adf-toolbar-divider')
);
expect(separators.length).toBe(expectedSeparatorCount);
});
};
describe('Toolbar state combinations', () => {
createToolbarTest(true, false, true, true, 2);
createToolbarTest(false, false, true, true, 1);
createToolbarTest(true, true, true, true, 1);
createToolbarTest(true, false, false, true, 1);
createToolbarTest(true, false, true, false, 2);
createToolbarTest(false, true, false, true, 0);
createToolbarTest(false, true, false, false, 0);
});
it('should not show unnecessary separator when close button is disabled but other controls exist', () => {
component.allowGoBack = false;
component.allowFullScreen = true;
component.allowRightSidebar = true;
component.hideInfoButton = false;
fixture.detectChanges();
const separators = fixture.debugElement.queryAll(By.css('adf-toolbar-divider'));
expect(separators.length).toBe(2);
});
});
});