Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3961 add container cypress tests get node params et al #3996

Merged
merged 2 commits into from
Oct 22, 2024
Merged

3961 add container cypress tests get node params et al #3996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7d3138
Add container cypress tests getNodeParams et.al
Oct 21, 2024
863f5a1
Merge branch 'main' into 3961-add-container-cypress-tests-getNodePara…
Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion container/cypress/e2e/test-app/compound/wc-compound-container.cy.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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>
41 changes: 41 additions & 0 deletions container/test-app/compound/luigi-client-init-wc/luigi-client-init-wc.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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