Recheck request

lib/core/src/lib/viewer/components/viewer.component.html

@@ -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-divider />
-
                 <adf-toolbar-title>
+                    <adf-toolbar-divider />
+
                     <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>
 

lib/core/src/lib/viewer/components/viewer.component.spec.ts

@@ -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);
+        });
+    });
 });