Skip to content

Commit

Permalink
Add container cypress tests getNodeParams et.al (#3996)
Browse files Browse the repository at this point in the history
Co-authored-by: Anna Milewska <[email protected]>
  • Loading branch information
amilewskaa and Anna Milewska authored Oct 22, 2024
1 parent c31db2c commit ba42c68
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ describe('Compound Container Tests', () => {
// the initialized webcomponent has id="defer-init-flag"
cy.get('#defer-init-flag').should('not.exist');
// click button that calls container.init()
cy.get('#init-button').click();
cy.get('#defer-init-button').click();

cy.get('#defer-init-flag').should('exist');
});
Expand Down
26 changes: 23 additions & 3 deletions container/cypress/e2e/test-app/iframe/iframe-settings.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('Iframe Settings Test', () => {
expect($body.children()).to.have.length(0);

// click button that calls container.init()
cy.get('#init-button').click();
cy.get('#defer-init-button').click();

cy.get('#defer-init-test')
.shadow()
Expand All @@ -27,7 +27,7 @@ describe('Iframe Settings Test', () => {
});

it('set sandbox rules by property', () => {
cy.get('#init-button').click();
cy.get('#defer-init-button').click();
cy.get('button[id="sandbox-rules"]').click();

cy.get('#defer-init-test')
Expand All @@ -53,7 +53,7 @@ describe('Iframe Settings Test', () => {

describe('Allow Rules Test', () => {
it('set allow rules by property', () => {
cy.get('#init-button').click();
cy.get('#defer-init-button').click();
cy.get('#set-allow-rules-button').click();
cy.get('#defer-init-test')
.find('iframe')
Expand All @@ -71,4 +71,24 @@ describe('Iframe Settings Test', () => {
.should('eq', 'fullscreen; microphone;');
});
});

describe('Luigi Client Initialization', () => {
it('should initialize Luigi Client', () => {
cy.get('iframe').then(($iframe) => {
const iframeBody = $iframe.contents().find('body');

const checkLuigiClientStatus = (expectedStatus) => {
cy.wrap(iframeBody)
.find('#luigiClientStatus')
.should('exist')
.invoke('text')
.should('eq', expectedStatus);
};

checkLuigiClientStatus('Luigi Client Initialized: Unknown');
cy.wait(2000);
checkLuigiClientStatus('Luigi Client Initialized: true');
});
});
});
});
2 changes: 1 addition & 1 deletion container/cypress/e2e/test-app/wc/wc-container.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ describe('Web Container Test', () => {
// the initialized webcomponent has id="defer-init-flag"
cy.get('#defer-init-flag').should('not.exist');
// click button that calls container.init()
cy.get('#init-button').click();
cy.get('#defer-init-button').click();

cy.get('#defer-init-flag').should('exist');
});
Expand Down
44 changes: 40 additions & 4 deletions container/test-app/compound/compoundClientAPI.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</head>
<body>
<h3>
This page is used to test Compound-Container Luigi CLient API functionalities for
This page is used to test Compound-Container Luigi Client API functionalities for
compound web component based microfrontend
</h3>
<button id="luigi-update-context" type="button">Update context</button>
Expand All @@ -42,8 +42,21 @@ <h3>
></luigi-compound-container>
</div>


<!-- luigi-client-init scenario wc container-->
<button id="luigi-client-init-button" style="margin: 25px 0 10px;">
this.LuigiClient.luigiClientInit();
</button>
<div style="border:solid 1px red; height: 100px;">
<luigi-compound-container
id="luigi-client-init-test"
webcomponent="true"
context='{"content":" -- luigi-client-init-test --"}'
defer-init="false"
></luigi-compound-container>

<!-- defer-init scenario wc container-->
<button id="init-button" style="margin: 25px 0 10px;">
<button id="defer-init-button" style="margin: 25px 0 10px;">
container.init() - click to initialize defered compound wc
</button>
<div style="border:solid 1px red; height: 100px;">
Expand Down Expand Up @@ -238,8 +251,8 @@ <h3>
});

const deferInitContainer = document.getElementById('defer-init-test');
const initButton = document.getElementById('init-button');
initButton.addEventListener('click', function() {
const deferInitButton = document.getElementById('defer-init-button');
deferInitButton.addEventListener('click', function() {
deferInitContainer.init();
});
deferInitContainer.compoundConfig = {
Expand All @@ -260,9 +273,32 @@ <h3>
]
};

const luigiClientInitContainer = document.getElementById('luigi-client-init-test');
const luigiClientInitButton = document.getElementById('luigi-client-init-button');
luigiClientInitButton.addEventListener('click', function() {
console.log('luigi-client-init');
luigiClientInitContainer.init();
});

luigiClientInitContainer.compoundConfig = {
renderer: {
use: 'grid',
config: {
columns: '1fr 1fr',
gap: '20px'
}
},
children: [
{
viewUrl: './compound/luigi-client-init-wc/luigi-client-init-wc.js'
}
]
};

document.querySelector('#luigi-update-context').addEventListener('click', () => {
compoundContainer.updateContext({ newContextData: 'some data' });
});

</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { LuigiElement } from './../luigi-element.js';
export default class extends LuigiElement {
constructor() {
super({ openShadow: 'open', deferLuigiClientWCInit: false });
const template = document.createElement('template');

//remove buttons after review/AC
template.innerHTML = `
<section style="display: flex; height: 100%; flex-direction: column">
<button id="addNodeParams">addNodeParams</button>
<button id="getNodeParams">getNodeParams</button>
<header><slot name="header">header</slot></header>
<main style="flex: auto; overflow: auto">
<slot name="content">content</slot>
<slot name="helloWorldSelfRegistered"></slot>
</main>
<footer><slot name="footer">footer</slot></footer>
</section>
`;
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$button = this._shadowRoot.querySelector('#addNodeParams');
this.$button.addEventListener('click', () => {
this.LuigiClient.addNodeParams({ Luigi: 'rocks' }, true);
});
this.$button2 = this._shadowRoot.querySelector('#getNodeParams');
this.$button2.addEventListener('click', () => {
console.log('getNodeParams', this.LuigiClient.getNodeParams());
});
}

connectedCallback() {
setTimeout(() => {
this.LuigiClient.luigiClientInit();
console.log('LuigiClient initialized for LuigiElement Compount WC');
}, 8000);
}

set context(ctx) {
console.log('context', ctx);
}
}
16 changes: 12 additions & 4 deletions container/test-app/iframe/iframe-settings.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h3>
This page is used to test Container Luigi CLient API functionalities for web
component based microfrontend
</h3>
<button id="init-button">container.init() defer-init enabled</button>
<button id="defer-init-button">container.init() defer-init enabled</button>
<button id="sandbox-rules">Set sandboxRules</button>
<button id="set-allow-rules-button">Set allowRules</button>

Expand Down Expand Up @@ -41,13 +41,21 @@ <h3>
></luigi-container>
</div>

<!-- Luigi Container to test luigi client init -->
<div style="border: solid 1px red; height: 150px">
<luigi-container
id="luigi-client-init"
viewURL="./microfrontend-luigi-client-init.html"
></luigi-container>
</div>

<script type="module">
import Events from '../bundle.js';

const deferInitContainer = document.getElementById('defer-init-test');
const initButton = document.getElementById('init-button');
const deferInitButton = document.getElementById('defer-init-button');

initButton.addEventListener('click', function() {
deferInitButton.addEventListener('click', function() {
deferInitContainer.init();
});

Expand All @@ -60,7 +68,7 @@ <h3>
const allowRulesContainer = document.getElementById('allow-rules-test');
const setAllowRulesButton = document.getElementById('set-allow-rules-button');

initButton.addEventListener('click', () => {
deferInitButton.addEventListener('click', () => {
deferInitContainer.allowRules = [
'microphone',
"camera 'none'",
Expand Down
34 changes: 34 additions & 0 deletions container/test-app/iframe/microfrontend-luigi-client-init.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!-- This microfrontend HTML file is used to test luigi-client-init functionality -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Luigi Client Init Test</title>
<script src="./luigi-client.js"></script>
<script>
setTimeout(() => testIsLuigiClientInitialized(), 2000);

function testLuigiClientInit() {
LuigiClient.luigiClientInit();
}

function testIsLuigiClientInitialized() {
const isInitialized = LuigiClient.isLuigiClientInitialized();
console.log('isInitialized: ' + isInitialized);
if (document.getElementById('luigiClientStatus')) {
document.getElementById('luigiClientStatus').innerText = `Luigi Client Initialized: ${isInitialized}`;

}
return isInitialized;
}
</script>
</head>
<body style="border: solid green 2px;">
<div>
<h1>Luigi Client Init Test for Iframes</h1>
<button id="testLuigiClientInitButton" onclick="testLuigiClientInit()">Test luigiClientInit</button>
<button id="testIsLuigiClientInitializedButton" onclick="testIsLuigiClientInitialized()">Test isLuigiClientInitialized</button>
<p id="luigiClientStatus">Luigi Client Initialized: Unknown</p>
</div>
</body>
</html>
6 changes: 3 additions & 3 deletions container/test-app/wc/clientAPI.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h3>
></luigi-container>
</div>

<button id="init-button" style="margin: 25px 0 15px">
<button id="defer-init-button" style="margin: 25px 0 15px">
container.init() to initialize defered container
</button>
<div style="border: 1px solid red">
Expand Down Expand Up @@ -67,8 +67,8 @@ <h3>
import '../bundle.js';
import MFEventID from '../bundle.js';
const deferInitContainer = document.getElementById('defer-init-test');
const initButton = document.getElementById('init-button');
initButton.addEventListener('click', function() {
const deferInitButton = document.getElementById('defer-init-button');
deferInitButton.addEventListener('click', function() {
deferInitContainer.init();
});
// document.querySelector('luigi-container');
Expand Down

0 comments on commit ba42c68

Please sign in to comment.