Skip to content

Commit

Permalink
Add splitview functionality (#1076)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ndricimrr
ndricimrr authored Feb 26, 2020
1 parent b797f06 commit 60b3d59
Show file tree
Hide file tree
Showing 8 changed files with 297 additions and 146 deletions.
256 changes: 152 additions & 104 deletions core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,52 @@ describe('Navigation', () => {
cy.expectPathToBe('/overview');
});
});
it('Core API open and close in SplitView', done => {
cy.get('.fd-shellbar').should('be.visible');
cy.window().then(win => {
const handle = win.Luigi.navigation().openAsSplitView('/ext', {
title: 'Preserved Split View',
size: '40',
collapsed: false
});
cy.get('#splitViewContainer').should('be.visible');
cy.expect(handle.exists()).to.be.true;

// It is not totally clear why it is not working without timeout, but it seems like a race condition
// TODO: Check stackoverflow for solution
// https://stackoverflow.com/questions/60338487/cypress-executes-assertion-immediately-on-function-that-returns-a-handle
setTimeout(() => {
handle.close();
setTimeout(() => {
cy.expect(handle.exists()).to.be.false;
cy.get('#splitViewContainer').should('not.be.visible');
done();
}, 50);
}, 50);
});
});
it('Core API collapse in SplitView', () => {
cy.window().then(win => {
const handle = win.Luigi.navigation().openAsSplitView('/ext', {
title: 'Preserved Split View',
size: '40',
collapsed: false
});
handle.collapse();
cy.expect(handle.isCollapsed()).to.be.true;
});
});
it('Core API expand SplitView', () => {
cy.window().then(win => {
const handle = win.Luigi.navigation().openAsSplitView('/ext', {
title: 'Preserved Split View',
size: '40',
collapsed: false
});
handle.expand();
cy.expect(handle.isExpanded()).to.be.true;
});
});
it('Core API navigate with params', () => {
cy.window().then(win => {
win.Luigi.navigation()
Expand All @@ -34,129 +80,131 @@ describe('Navigation', () => {
});
});

it('Click around using navigation', () => {
// projects page
cy.get('.fd-shellbar')
.contains('Projects')
.click();

//projects page
cy.get('.fd-app__sidebar').should('contain', 'Project One');
cy.get('.fd-app__sidebar').should('contain', 'Project Two');
cy.get('.fd-app__sidebar')
.contains('Project One')
.click();

//project one page
cy.expectPathToBe('/projects/pr1');

cy.get('.fd-app__sidebar').should('not.contain', 'Project One');
cy.get('.fd-app__sidebar').should('contain', 'Miscellaneous2');
cy.get('.fd-app__sidebar')
.contains('Default Child node Example')
.click();

//default child node example
cy.expectPathToBe('/projects/pr1/dps/dps2');

cy.get('.fd-app__sidebar').should('contain', 'First Child');
cy.get('.fd-app__sidebar').should('contain', 'Second Child');
});

it('Find configured testid on navigation node', () => {
cy.visit('/projects/pr1/settings');
cy.get('a[data-testid="myTestId"]').should('exist');
});
describe('Normal navigating', () => {
it('Click around using navigation', () => {
// projects page
cy.get('.fd-shellbar')
.contains('Projects')
.click();

it('Set default testid on navigation node', () => {
cy.visit('/projects/pr1/developers');
cy.get('a[data-testid="developers_developers"]').should('exist');
});
//projects page
cy.get('.fd-app__sidebar').should('contain', 'Project One');
cy.get('.fd-app__sidebar').should('contain', 'Project Two');
cy.get('.fd-app__sidebar')
.contains('Project One')
.click();

it('Check if active node is selected', () => {
cy.visit('/projects');
cy.get('.fd-shellbar')
.contains('Projects')
.should('have.class', 'is-selected');

cy.visit('projects/pr1');
cy.get('.fd-side-nav__subitem')
.contains('Project Settings')
.click()
.should('have.class', 'is-selected');
});
//project one page
cy.expectPathToBe('/projects/pr1');

it('Check if active node reloads page', () => {
cy.visit('/projects/pr1/developers');
cy.getIframeBody().then($iframeBody => {
cy.wrap($iframeBody)
.should('contain', 'Developers content')
.find('[title="visitors: 1"]');
cy.get('.fd-app__sidebar').should('not.contain', 'Project One');
cy.get('.fd-app__sidebar').should('contain', 'Miscellaneous2');
cy.get('.fd-app__sidebar')
.contains('Project Settings')
.contains('Default Child node Example')
.click();

//default child node example
cy.expectPathToBe('/projects/pr1/dps/dps2');

cy.get('.fd-app__sidebar').should('contain', 'First Child');
cy.get('.fd-app__sidebar').should('contain', 'Second Child');
});

it('Find configured testid on navigation node', () => {
cy.visit('/projects/pr1/settings');
cy.get('a[data-testid="myTestId"]').should('exist');
});

it('Set default testid on navigation node', () => {
cy.visit('/projects/pr1/developers');
cy.get('a[data-testid="developers_developers"]').should('exist');
});

it('Check if active node is selected', () => {
cy.visit('/projects');
cy.get('.fd-shellbar')
.contains('Projects')
.should('have.class', 'is-selected');

cy.visit('projects/pr1');
cy.get('.fd-side-nav__subitem')
.contains('Project Settings')
.click()
.should('have.class', 'is-selected');
});

it('Check if active node reloads page', () => {
cy.visit('/projects/pr1/developers');
cy.getIframeBody().then($iframeBody => {
cy.wrap($iframeBody)
.should('contain', 'Developers content')
.find('[title="visitors: 1"]');
cy.get('.fd-app__sidebar')
.contains('Project Settings')
.click();
cy.get('.fd-app__sidebar')
.contains('Developers')
.click();
cy.wrap($iframeBody).find('[title="visitors: 2"]');
});
cy.get('.fd-app__sidebar')
.contains('Developers')
.click();
cy.wrap($iframeBody).find('[title="visitors: 2"]');
});
cy.get('.fd-app__sidebar')
.contains('Developers')
.click();
cy.getIframeBody().then($iframeBody => {
cy.wrap($iframeBody).find('[title="visitors: 1"]');
cy.getIframeBody().then($iframeBody => {
cy.wrap($iframeBody).find('[title="visitors: 1"]');
});
});
});

it('Browser back works with Default Child mechanism', () => {
cy.getIframeBody().then($iframeBody => {
cy.wrap($iframeBody)
.contains('defaultChildNode')
.click();
cy.expectPathToBe('/projects/pr1/dps/dps2');
it('Browser back works with Default Child mechanism', () => {
cy.getIframeBody().then($iframeBody => {
cy.wrap($iframeBody)
.contains('defaultChildNode')
.click();
cy.expectPathToBe('/projects/pr1/dps/dps2');

cy.window().historyBack();
cy.expectPathToBe('/overview');
cy.window().historyBack();
cy.expectPathToBe('/overview');
});
});
});

it('Icon instead of label in TopNav', () => {
cy.get('button[title="Settings"]>.fd-top-nav__icon').should('exist');
cy.get('button[title="Settings"]').should('contain', '');
});

it('Icon with label in LeftNav', () => {
cy.get('.fd-shellbar')
.contains('Projects')
.click();
cy.get('.fd-app__sidebar .fd-side-nav__item')
.contains('Project One')
.click();

cy.get('.fd-side-nav__subitem')
.contains('Project Settings')
.find('.fd-side-nav__icon')
.should('exist');
});
it('Icon instead of label in TopNav', () => {
cy.get('button[title="Settings"]>.fd-top-nav__icon').should('exist');
cy.get('button[title="Settings"]').should('contain', '');
});

it('Shows Kyma version in LeftNav', () => {
// projects page
cy.get('.fd-shellbar')
.contains('Projects')
.click();
it('Icon with label in LeftNav', () => {
cy.get('.fd-shellbar')
.contains('Projects')
.click();
cy.get('.fd-app__sidebar .fd-side-nav__item')
.contains('Project One')
.click();

cy.get('.fd-app__sidebar .lui-side-nav__footer')
.contains('Luigi Client:')
.should('be.visible');
cy.get('.fd-side-nav__subitem')
.contains('Project Settings')
.find('.fd-side-nav__icon')
.should('exist');
});

cy.window().then(win => {
const config = win.Luigi.getConfig();
config.settings.sideNavFooterText = 'Hello from tets.';
win.Luigi.configChanged('settings.footer');
it('Shows Kyma version in LeftNav', () => {
// projects page
cy.get('.fd-shellbar')
.contains('Projects')
.click();

cy.get('.fd-app__sidebar .lui-side-nav__footer')
.contains('Hello from tets.')
.contains('Luigi Client:')
.should('be.visible');

cy.window().then(win => {
const config = win.Luigi.getConfig();
config.settings.sideNavFooterText = 'Hello from tets.';
win.Luigi.configChanged('settings.footer');

cy.get('.fd-app__sidebar .lui-side-nav__footer')
.contains('Hello from tets.')
.should('be.visible');
});
});
});

Expand Down
41 changes: 35 additions & 6 deletions core/src/App.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -437,15 +437,46 @@
setContext('handleNavigation', handleNavigation);

//// SPLIT VIEW

const openSplitView = (nodepath, settings) => {
export const openSplitView = (nodepath, settings) => {
if (mfSplitView.displayed) {
console.warn('Only one splitview can be oppened at a time');
return;
}
SplitViewSvc.open(getComponentWrapper(), nodepath, settings);
};

const closeSplitView = () => {
export const closeSplitView = () => {
SplitViewSvc.close(getComponentWrapper());
};

export const collapseSplitView = () => {
SplitViewSvc.collapse(getComponentWrapper());
mfSplitView.collapsed = true;
};

export const expandSplitView = () => {
SplitViewSvc.expand(getComponentWrapper());
mfSplitView.collapsed = false;
};

export const isSplitViewCollapsed = () => {
if (mfSplitView.displayed) {
return mfSplitView.collapsed;
}
return false;
};

export const isSplitViewExpanded = () => {
if (mfSplitView.displayed) {
return !mfSplitView.collapsed;
}
return false;
};

export const existsSplitView = () => {
return mfSplitView.displayed;
};

const splitViewIframeCreated = event => {
splitViewIframe = event.detail.splitViewIframe;
splitViewIframeData = event.detail.splitViewIframeData;
Expand Down Expand Up @@ -508,9 +539,7 @@
getAlertWithId(currentAlerts, settings.id)
) {
console.error(
`The alert with id '${
settings.id
}' already exists in a queue, therefore it won't be displayed `
`The alert with id '${settings.id}' already exists in a queue, therefore it won't be displayed `
);
return Promise.reject();
}
Expand Down
Loading

0 comments on commit 60b3d59

Please sign in to comment.