Skip to content

Commit

Permalink
Experiment: Reduce waits and avoidable API calls in Cypress (#3603)
Browse files Browse the repository at this point in the history 
* Reduce waits and avoidable API calls

* Remove redundant call to root path

* Simplify access to shadow DOM

* Clean up commented code

---------

Co-authored-by: Ndricim <[email protected]>
  • Loading branch information
@camelCaseChris @ndricimrr
camelCaseChris and ndricimrr authored Jan 18, 2024
1 parent d869c87 commit 4ca4208
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 150 deletions.
8 changes: 2 additions & 6 deletions test/e2e-test-application/cypress/e2e/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,11 @@ Cypress.Commands.add('goToLinkManagerMethods', iframe => {
});

Cypress.Commands.add('goToOverviewPage', () => {
cy.get('[data-testid="overview_overview"]')
.should('exist')
.click();
cy.get('[data-testid="overview_overview"]').click();
});

Cypress.Commands.add('goToProjectsPage', () => {
cy.get('[data-testid="projects_projects"]')
.should('exist')
.click();
cy.get('[data-testid="projects_projects"]').click();
});

Cypress.Commands.add('selectContextSwitcherItem', (item, currentLabel) => {
Expand Down
160 changes: 36 additions & 124 deletions ...e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-4.cy.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
describe('Luigi Client linkManager Webcomponent, Drawer', () => {
beforeEach(() => {
cy.visitLoggedIn('/');
});

describe('Drawer', () => {
let $iframeBody;

beforeEach(() => {
cy.visitLoggedIn('/projects/pr2');
cy.getIframeBody().then(result => {
$iframeBody = result;
cy.goToLinkManagerMethods($iframeBody);
cy.expectPathToBe('/projects/pr2');
cy.get('.drawer').should('not.exist');
});
});
Expand All @@ -23,9 +19,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
cy.get('.drawer').should('exist');
cy.expectPathToBe('/projects/pr2');

cy.get('.drawer-dialog button[aria-label="close"]')
.should('exist')
.click();
cy.get('.drawer-dialog button[aria-label="close"]').click();
cy.get('.drawer-dialog button[aria-label="close"]').should('not.exist');
cy.get('.drawer').should('not.exist');
});
Expand All @@ -49,9 +43,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
cy.get('.drawer').should('exist');
cy.expectPathToBe('/projects/pr2');

cy.get('.drawer-dialog button[aria-label="close"]')
.should('exist')
.click();
cy.get('.drawer-dialog button[aria-label="close"]').click();
cy.get('.drawer').should('not.exist');
});
});
Expand All @@ -71,8 +63,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
.contains('Open drawer with no overlap')
.click();

cy.wait(500);

cy.get('.drawer-dialog')
.invoke('width')
.should('eq', pageWidth * 0.25);
Expand All @@ -81,14 +71,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
.invoke('width')
.should('eq', containerWidth - pageWidth * 0.25);
cy.expectPathToBe('/projects/pr2');

// cy.get('.drawer-dialog button[aria-label="close"]')
// .should('exist')
// .click();

// cy.get('.iframeContainer iframe')
// .invoke('width')
// .should('eq', containerWidth);
});
});
});
Expand All @@ -107,8 +89,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {

win.Luigi.navigation().openAsDrawer('/projects/pr1/webcomponent', { overlap: false });

cy.wait(300);

cy.get('.drawer-dialog')
.invoke('width')
.should('eq', pageWidth * 0.25);
Expand All @@ -118,11 +98,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
.should('eq', containerWidth - pageWidth * 0.25);
cy.expectPathToBe('/projects/pr2');

cy.get('.drawer-dialog button[aria-label="close"]')
.should('exist')
.click();

cy.wait(300);
cy.get('.drawer-dialog button[aria-label="close"]').click();

cy.get('.iframeContainer iframe')
.invoke('width')
Expand All @@ -135,12 +111,12 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {

describe('Split View', () => {
let $iframeBody;

beforeEach(() => {
cy.visitLoggedIn('/projects/pr2');
cy.getIframeBody().then(result => {
$iframeBody = result;
cy.goToLinkManagerMethods($iframeBody);
cy.expectPathToBe('/projects/pr2');
cy.get('.lui-split-view').should('not.exist');
});
});
Expand All @@ -167,8 +143,6 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
.contains('open view in split view with params')
.click();

cy.wait(500);

cy.get('.splitViewContainer').then($splitViewContainer => {
const splitViewHeight = parseFloat(win.getComputedStyle($splitViewContainer[0]).height);

Expand Down Expand Up @@ -200,22 +174,13 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
.contains('open view in split view with params')
.click();

cy.wait(500);

cy.get('.splitViewContainer').then($splitViewContainer => {
cy.get('.lui-collapse-btn').click();

cy.wait(500);

cy.get('.lui-collapse-btn').click();
cy.get('.splitViewContainer').should($splitViewContainer => {
const splitViewHeight = parseFloat(win.getComputedStyle($splitViewContainer[0]).height);

if (`${splitViewHeight}px` === win.getComputedStyle($iframe[0]).marginBottom) {
cy.log('Positive');
} else {
cy.error('Negative');
}
cy.expectPathToBe('/projects/pr2');
expect(`${splitViewHeight}px`).to.equal(win.getComputedStyle($iframe[0]).marginBottom);
});
cy.expectPathToBe('/projects/pr2');
});
});
});
Expand All @@ -227,110 +192,56 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {
});

it('open webcomponent with visibleForFeatureToggles', () => {
cy.window().then(win => {
cy.wait(500);
cy.get('.wcContainer>div>div>*').then(container => {
const root = container.children().prevObject[0].shadowRoot;
const wcContent = root.querySelector('p').innerText;
expect(wcContent).to.equal('Some input text !ft');
});
});
cy.get('.wcContainer>div>div>[nodeid="input1"]')
.shadow()
.contains('p', 'Some input text !ft')
.should('exist');
});
});

describe('Webcomponent compound view test', () => {
beforeEach(() => {
cy.visitLoggedIn('/projects/pr1/wc_grid_compound');
cy.get('.wcContainer>div>div>[nodeid="btn"]')
.shadow()
.find('button')
.as('btn');
cy.get('.wcContainer>div>div>[nodeid="timer"]')
.shadow()
.find('p')
.as('timer');
});

it('open webcomponent btn', () => {
cy.window().then(win => {
cy.wait(700);
cy.get('.wcContainer>div>div>*').then(container => {
cy.wait(500);
const root = container.children().prevObject[0].shadowRoot;
const wcContent = root.querySelector('button').innerText;

expect(wcContent).to.equal('Start');
});
});
cy.get('@btn').should('have.text', 'Start');
});

it('open webcomponent timer', () => {
cy.window().then(win => {
cy.wait(500);
cy.get('.wcContainer>div>div>*').then(container => {
const root = container.children().prevObject[1].shadowRoot;
const wcContent = root.querySelector('p').innerText;

expect(wcContent).to.equal('0');
});
});
cy.get('@timer').should('have.text', '0');
});

it('click on webcomponent btn', () => {
cy.window().then(win => {
cy.wait(500);
cy.get('.wcContainer>div>div>*').then(container => {
const root = container.children().prevObject[0].shadowRoot;
root.querySelector('button').click();
const wcContent = root.querySelector('button').innerText;

expect(wcContent).to.equal('Stop');
});
});
cy.get('@btn').click();
cy.get('@btn').should('have.text', 'Stop');
});

it('listener on webcomponent timer', () => {
cy.window().then(win => {
cy.wait(500);
cy.get('.wcContainer>div>div>*').then(container => {
const rootBtn = container.children().prevObject[0].shadowRoot;
rootBtn.querySelector('button').click();
const root = container.children().prevObject[1].shadowRoot;
const wcContent = root.querySelector('p').innerText;

expect(wcContent).to.equal('1');
});
});
cy.get('@btn').click();
cy.get('@timer').should('have.text', '1');
});

it('click start timer on webcomponent btn and reaction in webcomponent timer', () => {
cy.window().then(win => {
cy.wait(500);
cy.get('.wcContainer>div>div>*').then(container => {
const rootBtn = container.children().prevObject[0].shadowRoot;
const wcContentStart = container.children().prevObject[1].shadowRoot.querySelector('p').innerText;
rootBtn.querySelector('button').click();
const wcContent = rootBtn.querySelector('button').innerText;
expect(wcContent).to.equal('Stop');

cy.wait(500);
const wcContentStop = container.children().prevObject[1].shadowRoot.querySelector('p').innerText;
expect(wcContentStart).to.not.equal(wcContentStop);
});
});
cy.get('@timer').should('have.text', '0');
cy.get('@btn').click();
cy.get('@timer').should('have.text', '1');
});

it('click start and stop timer on webcomponent btn and reaction in webcomponent timer', () => {
cy.window().then(win => {
cy.wait(500);
cy.get('.wcContainer>div>div>*').then(container => {
const rootBtn = container.children().prevObject[0].shadowRoot;
rootBtn.querySelector('button').click();
cy.wait(500);

const wcContentStart = container.children().prevObject[1].shadowRoot.querySelector('p').innerText;

rootBtn.querySelector('button').click();
const wcContent = rootBtn.querySelector('button').innerText;
expect(wcContent).to.equal('Start');

cy.wait(500);
const wcContentStop = container.children().prevObject[1].shadowRoot.querySelector('p').innerText;
expect(wcContentStart).to.not.equal(wcContentStop);
});
});
cy.get('@btn').click();
cy.get('@timer').should('have.text', '1');
cy.get('@btn').click();
cy.get('@btn').should('have.text', 'Start');
cy.get('@timer').should('have.text', '2');
});
});

Expand All @@ -347,6 +258,7 @@ describe('Luigi Client linkManager Webcomponent, Drawer', () => {

describe('getCurrentRoute', () => {
let $iframeBody;

beforeEach(() => {
// "clear" variables to make sure they are not reused and throw error in case something goes wrong
$iframeBody = undefined;
Expand Down
43 changes: 23 additions & 20 deletions ...e2e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ describe('Luigi client linkManager', () => {
}
};

beforeEach(() => {
cy.visitLoggedIn('/');
});

describe('linkManager navigation calls', () => {
let $iframeBody;
beforeEach(() => {
Expand Down Expand Up @@ -92,6 +88,7 @@ describe('Luigi client linkManager', () => {

describe('linkManager - intent navigation', () => {
let $iframeBody;

beforeEach(() => {
// "clear" variables to make sure they are not reused and throw error in case something goes wrong
$iframeBody = undefined;
Expand All @@ -108,14 +105,17 @@ describe('Luigi client linkManager', () => {
cy.wrap($iframeBody)
.contains('Open webcomponent in splitView')
.click();
cy.get('.iframeSplitViewCnt>').then(container => {
const root = container.children().prevObject[0].shadowRoot;
const wcContent = root.querySelector('p').innerText;
expect(wcContent).to.equal('Hello WebComponent!');
root.querySelector('button').click();
cy.get('[data-testid=luigi-alert]').should('have.class', 'fd-message-strip--information');
cy.get('[data-testid=luigi-alert]').should('contain', 'Hello from uxManager in Web Component, Language:en');
});
cy.get('.iframeSplitViewCnt>')
.shadow()
.as('shw')
.find('p')
.should('contain', 'Hello WebComponent!');
cy.get('@shw')
.find('button')
.eq(0)
.click();
cy.get('[data-testid=luigi-alert]').should('have.class', 'fd-message-strip--information');
cy.get('[data-testid=luigi-alert]').should('contain', 'Hello from uxManager in Web Component, Language:en');
});

it('should be able to list active featureToggles from WC "API"', localRetries, () => {
Expand All @@ -125,14 +125,17 @@ describe('Luigi client linkManager', () => {
cy.wrap($iframeBody)
.contains('Open webcomponent in splitView')
.click();
cy.get('.iframeSplitViewCnt>').then(container => {
const root = container.children().prevObject[0].shadowRoot;
const wcContent = root.querySelector('p').innerText;
expect(wcContent).to.equal('Hello WebComponent!');
root.querySelector('button').click();
cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles list: ft1');
cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles: ft1');
});
cy.get('.iframeSplitViewCnt>')
.shadow()
.as('shw')
.find('p')
.should('contain', 'Hello WebComponent!');
cy.get('@shw')
.find('button')
.eq(0)
.click();
cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles list: ft1');
cy.get('[data-testid=luigi-alert]').should('contain', 'Active feature toggles: ft1');
});

it('navigate with intent', localRetries, () => {
Expand Down

0 comments on commit 4ca4208

Please sign in to comment.