Skip to content

Commit

Permalink
fix(workbench/view): open views moved via drag & drop after the activ…
Browse files Browse the repository at this point in the history 
…e view

Views moved via drag & drop now open after the active view, similar to the behavior of opening new views via the workbench router. Previously, they opened as the last view.
  • Loading branch information
@danielwiehl @Marcarrian
danielwiehl authored and Marcarrian committed Feb 29, 2024
1 parent 7d8d041 commit 78dc249
Show file tree
Hide file tree
Showing 10 changed files with 424 additions and 88 deletions.
4 changes: 2 additions & 2 deletions projects/scion/e2e-testing/src/matcher/to-equal-workbench-layout.matcher.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ async function assertWorkbenchLayout(expected: ExpectedWorkbenchLayout, locator:
* @see assertPartGridElement
*/
async function assertGridElement(expectedGridElement: MTreeNode | MPart, gridElementLocator: Locator, expectedWorkbenchLayout: ExpectedWorkbenchLayout): Promise<void> {
await throwIfAbsent(gridElementLocator, () => Error(`[DOMAssertError] Expected grid element to be present, but is not'. [${expectedGridElement.type}=${JSON.stringify(expectedGridElement)}, locator=${gridElementLocator}]`));
await throwIfAbsent(gridElementLocator, () => Error(`[DOMAssertError] Expected grid element to be present, but is not. [${expectedGridElement.type}=${JSON.stringify(expectedGridElement)}, locator=${gridElementLocator}]`));

if (expectedGridElement instanceof MTreeNode) {
await assertNodeGridElement(expectedGridElement, gridElementLocator, expectedWorkbenchLayout);
Expand Down Expand Up @@ -154,7 +154,7 @@ async function assertPartGridElement(expectedPart: MPart, gridElementLocator: Lo
if (expectedPart.views) {
const expectedViewIds = expectedPart.views.map(view => view.id);
const actualViewIds = new Array<string>();
for (const viewTabLocator of await partLocator.locator('wb-part-bar wb-view-tab').all()) {
for (const viewTabLocator of await partLocator.locator('wb-part-bar wb-view-tab:not(.drag-source)').all()) {
actualViewIds.push((await viewTabLocator.getAttribute('data-viewid'))!);
}
if (!isEqualArray(actualViewIds, expectedViewIds)) {
Expand Down
258 changes: 229 additions & 29 deletions projects/scion/e2e-testing/src/workbench/view-tab-bar.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {StartPagePO} from '../start-page.po';
import {RouterPagePO} from './page-object/router-page.po';
import {ViewPagePO} from './page-object/view-page.po';
import {expectView} from '../matcher/view-matcher';
import {PerspectivePagePO} from './page-object/perspective-page.po';
import {MPart, MTreeNode} from '../matcher/to-equal-workbench-layout.matcher';
import {LayoutPagePO} from './page-object/layout-page.po';

test.describe('View Tabbar', () => {

Expand Down Expand Up @@ -98,50 +101,247 @@ test.describe('View Tabbar', () => {
await expectView(testee3ViewPage).not.toBeAttached();
});

test('should insert a new view tab into the tabbar after the active view tab by default', async ({appPO, workbenchNavigator}) => {
test('should open new view to the right of the active view', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});
const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO);

// open view.2
// Register Angular routes.
const layoutPage = await workbenchNavigator.openInNewTab(LayoutPagePO);
await layoutPage.registerRoute({path: '', component: 'router-page', outlet: 'router'});

const perspectivePage = await workbenchNavigator.openInNewTab(PerspectivePagePO);
await perspectivePage.registerPerspective({
id: 'perspective',
parts: [
{id: 'left'},
{id: 'right', align: 'right', activate: true},
],
views: [
// Add views to the left part.
{id: 'view.1', partId: 'left'},
{id: 'router', partId: 'left', activateView: true}, // TODO [WB-LAYOUT] Change to view.2 and navigate to router page
{id: 'view.3', partId: 'left'},
{id: 'view.4', partId: 'left'},
// Add views to the right part.
{id: 'view.5', partId: 'right', activateView: true},
{id: 'view.6', partId: 'right'},
],
});
await appPO.switchPerspective('perspective');

// Open view in the active part (left part).
const routerPage = new RouterPagePO(appPO, {viewId: 'router'});
await routerPage.enterPath('test-view');
await routerPage.enterTarget('blank');
await routerPage.clickNavigate();

const testee2ViewPage = new ViewPagePO(appPO, {viewId: 'view.2'});

await expectView(routerPage).toBeInactive();
await expectView(testee2ViewPage).toBeActive();
await expect.poll(() => appPO.activePart({inMainArea: true}).getViewIds()).toEqual(['view.1', 'view.2']);

// open view.3
// Expect view.2 to be opened to the right of the active view.
await expect(appPO.workbench).toEqualWorkbenchLayout({
workbenchGrid: {
root: new MTreeNode({
child1: new MPart({
id: 'left',
views: [{id: 'view.1'}, {id: 'router'}, {id: 'view.2'}, {id: 'view.3'}, {id: 'view.4'}],
activeViewId: 'view.2',
}),
child2: new MPart({
id: 'right',
views: [{id: 'view.5'}, {id: 'view.6'}],
activeViewId: 'view.5',
}),
direction: 'row',
ratio: .5,
}),
activePartId: 'left',
},
});

// Open view in the right part.
await routerPage.view.tab.click();
await routerPage.enterPath('test-view');
await routerPage.enterTarget('blank');
await routerPage.enterBlankPartId('right');
await routerPage.clickNavigate();

const testee3ViewPage = new ViewPagePO(appPO, {viewId: 'view.3'});
// Expect view.7 to be opened to the right of the active view.
await expect(appPO.workbench).toEqualWorkbenchLayout({
workbenchGrid: {
root: new MTreeNode({
child1: new MPart({
id: 'left',
views: [{id: 'view.1'}, {id: 'router'}, {id: 'view.2'}, {id: 'view.3'}, {id: 'view.4'}],
activeViewId: 'router',
}),
child2: new MPart({
id: 'right',
views: [{id: 'view.5'}, {id: 'view.7'}, {id: 'view.6'}],
activeViewId: 'view.7',
}),
direction: 'row',
ratio: .5,
}),
activePartId: 'left',
},
});
});

await expectView(routerPage).toBeInactive();
await expectView(testee2ViewPage).toBeInactive();
await expectView(testee3ViewPage).toBeActive();
await expect.poll(() => appPO.activePart({inMainArea: true}).getViewIds()).toEqual(['view.1', 'view.3', 'view.2']);
test('should open view moved via drag & drop after the active view', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});

// open view.4
await routerPage.view.tab.click();
await routerPage.enterPath('test-view');
await routerPage.enterTarget('blank');
await routerPage.clickNavigate();
const perspectivePage = await workbenchNavigator.openInNewTab(PerspectivePagePO);
await perspectivePage.registerPerspective({
id: 'perspective',
parts: [
{id: 'left'},
{id: 'right', align: 'right', activate: true},
],
views: [
// Add views to the left part.
{id: 'view.1', partId: 'left'},
{id: 'view.2', partId: 'left'},
{id: 'view.3', partId: 'left', activateView: true},
{id: 'view.4', partId: 'left'},
// Add views to the right part.
{id: 'view.5', partId: 'right', activateView: true},
{id: 'view.6', partId: 'right'},
],
});
await appPO.switchPerspective('perspective');

// Move view.5 to the left part
const view5 = appPO.view({viewId: 'view.5'});
await view5.tab.dragTo({partId: 'left', region: 'center'});

// Expect view.5 to be opened to the right of the active view.
await expect(appPO.workbench).toEqualWorkbenchLayout({
workbenchGrid: {
root: new MTreeNode({
child1: new MPart({
id: 'left',
views: [{id: 'view.1'}, {id: 'view.2'}, {id: 'view.3'}, {id: 'view.5'}, {id: 'view.4'}],
activeViewId: 'view.5',
}),
child2: new MPart({
id: 'right',
views: [{id: 'view.6'}],
activeViewId: 'view.6',
}),
direction: 'row',
ratio: .5,
}),
activePartId: 'left',
},
});
});

const testee4ViewPage = new ViewPagePO(appPO, {viewId: 'view.4'});
test('should activate the view to the left of the view that is dragged out of the tab bar', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});

await expectView(routerPage).toBeInactive();
await expectView(testee2ViewPage).toBeInactive();
await expectView(testee3ViewPage).toBeInactive();
await expectView(testee4ViewPage).toBeActive();
await expect.poll(() => appPO.activePart({inMainArea: true}).getViewIds()).toEqual(['view.1', 'view.4', 'view.3', 'view.2']);
const perspectivePage = await workbenchNavigator.openInNewTab(PerspectivePagePO);
await perspectivePage.registerPerspective({
id: 'perspective',
parts: [
{id: 'part'},
],
views: [
{id: 'view.1', partId: 'part'},
{id: 'view.2', partId: 'part'},
{id: 'view.3', partId: 'part', activateView: true},
{id: 'view.4', partId: 'part'},
],
});
await appPO.switchPerspective('perspective');

// Drag view.3 out of the tabbar.
const view3 = appPO.view({viewId: 'view.3'});
await view3.tab.dragTo({partId: 'part', region: 'center'}, {steps: 100, performDrop: false});

// Expect view.2 to be activated.
await expect(appPO.workbench).toEqualWorkbenchLayout({
workbenchGrid: {
root: new MPart({
id: 'part',
views: [{id: 'view.1'}, {id: 'view.2'}, {id: 'view.4'}],
activeViewId: 'view.2',
}),
activePartId: 'part',
},
});
});

test('should not change the view order when dragging a view to its own part (noop)', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});

const perspectivePage = await workbenchNavigator.openInNewTab(PerspectivePagePO);
await perspectivePage.registerPerspective({
id: 'perspective',
parts: [
{id: 'part'},
],
views: [
{id: 'view.1', partId: 'part'},
{id: 'view.2', partId: 'part'},
{id: 'view.3', partId: 'part', activateView: true},
{id: 'view.4', partId: 'part'},
],
});
await appPO.switchPerspective('perspective');

// Drag view.3 to its own part.
const view3 = appPO.view({viewId: 'view.3'});
await view3.tab.dragTo({partId: 'part', region: 'center'}, {steps: 100});

// Expect tab order not to be changed.
await expect(appPO.workbench).toEqualWorkbenchLayout({
workbenchGrid: {
root: new MPart({
id: 'part',
views: [{id: 'view.1'}, {id: 'view.2'}, {id: 'view.3'}, {id: 'view.4'}],
activeViewId: 'view.3',
}),
activePartId: 'part',
},
});
});

test('should cancel drag operation if pressing escape', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});

const perspectivePage = await workbenchNavigator.openInNewTab(PerspectivePagePO);
await perspectivePage.registerPerspective({
id: 'perspective',
parts: [
{id: 'part'},
],
views: [
{id: 'view.1', partId: 'part'},
{id: 'view.2', partId: 'part'},
{id: 'view.3', partId: 'part', activateView: true},
{id: 'view.4', partId: 'part'},
],
});
await appPO.switchPerspective('perspective');

// Drag view.3 out of the tabbar.
const view3 = appPO.view({viewId: 'view.3'});
await view3.tab.dragTo({partId: 'part', region: 'center'}, {steps: 100, performDrop: false});

// Cancel drag operation.
await appPO.workbench.press('Escape');

// Expect views not to be changed.
await expect(appPO.workbench).toEqualWorkbenchLayout({
workbenchGrid: {
root: new MPart({
id: 'part',
views: [{id: 'view.1'}, {id: 'view.2'}, {id: 'view.3'}, {id: 'view.4'}],
activeViewId: 'view.3',
}),
activePartId: 'part',
},
});
});

test('should insert a new view tab into the tabbar at the end', async ({appPO, workbenchNavigator}) => {
test('should allow opening view at the end', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});
const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO);

Expand Down Expand Up @@ -187,7 +387,7 @@ test.describe('View Tabbar', () => {
await expect.poll(() => appPO.activePart({inMainArea: true}).getViewIds()).toEqual(['view.1', 'view.2', 'view.3', 'view.4']);
});

test('should insert a new view tab into the tabbar at the start', async ({appPO, workbenchNavigator}) => {
test('should allow opening view at the start', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});
const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO);

Expand Down Expand Up @@ -233,7 +433,7 @@ test.describe('View Tabbar', () => {
await expect.poll(() => appPO.activePart({inMainArea: true}).getViewIds()).toEqual(['view.4', 'view.3', 'view.2', 'view.1']);
});

test('should insert a new view tab into the tabbar at a custom position', async ({appPO, workbenchNavigator}) => {
test('should allow opening view at a specific position', async ({appPO, workbenchNavigator}) => {
await appPO.navigateTo({microfrontendSupport: false});
const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO);

Expand Down
10 changes: 5 additions & 5 deletions projects/scion/workbench/src/lib/layout/workbench-layout.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ describe('WorkbenchLayout', () => {
target: {
workbenchId: TestBed.inject(WORKBENCH_ID),
elementId: 'main',
insertionIndex: 0,
position: 'start',
},
});
await waitUntilStable();
Expand All @@ -191,7 +191,7 @@ describe('WorkbenchLayout', () => {
target: {
workbenchId: TestBed.inject(WORKBENCH_ID),
elementId: 'main',
insertionIndex: 1,
position: 1,
},
});
await waitUntilStable();
Expand All @@ -211,7 +211,7 @@ describe('WorkbenchLayout', () => {
target: {
workbenchId: TestBed.inject(WORKBENCH_ID),
elementId: 'main',
insertionIndex: 2,
position: 2,
},
});
await waitUntilStable();
Expand All @@ -231,7 +231,7 @@ describe('WorkbenchLayout', () => {
target: {
workbenchId: TestBed.inject(WORKBENCH_ID),
elementId: 'main',
insertionIndex: 3,
position: 3,
},
});
await waitUntilStable();
Expand All @@ -251,7 +251,7 @@ describe('WorkbenchLayout', () => {
target: {
workbenchId: TestBed.inject(WORKBENCH_ID),
elementId: 'main',
insertionIndex: undefined,
position: 'end',
},
});
await waitUntilStable();
Expand Down
Loading

0 comments on commit 78dc249

Please sign in to comment.