Skip to content

Commit

Permalink
fix: add e2e tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@ScriptedAlchemy
ScriptedAlchemy committed Dec 4, 2024
1 parent 3321fa6 commit 2b31308
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 71 deletions.
252 changes: 183 additions & 69 deletions runtime-plugins/single-runtime/e2e/checkAutomaticVendorApps.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,188 @@ import { CssAttr } from '../../../cypress-e2e/types/cssAttr';

const basePage: BaseMethods = new BaseMethods();

const appButtonPosition: number = 0;

const appsData = [
{
headerSelector: baseSelectors.tags.headers.h1,
subHeaderSelector: baseSelectors.tags.headers.h2,
buttonSelector: baseSelectors.tags.coreElements.button,
headerText: 'Single Runtime',
appNameText: Constants.commonConstantsData.commonCountAppNames.app1,
buttonColor: Constants.color.red,
host: 3001,
},
];

appsData.forEach(
(property: {
headerSelector: string;
subHeaderSelector: string;
buttonSelector: string;
headerText: string;
appNameText: string;
buttonColor: string;
host: number;
}) => {
const host = property.host === 3002 ? appsData[1].host : appsData[0].host;
const appName = property.host === 3002 ? appsData[1].appNameText : appsData[0].appNameText;
const color = property.host === 3002 ? appsData[1].buttonColor : appsData[0].buttonColor;

describe(`Endpoint Based Remotes`, () => {
context(`Check ${appName}:${host}`, () => {
beforeEach(() => {
basePage.openLocalhost({
number: host,
});
});

it(`Check ${appName} header and subheader exist on the page`, () => {
basePage.checkElementWithTextPresence({
selector: property.headerSelector,
text: property.headerText,
});
// basePage.checkElementWithTextPresence({
// selector: property.subHeaderSelector,
// text: `${appName}`,
// });
});

it(`Check buttons in ${appName} exist`, () => {
basePage.checkElementWithTextPresence({
selector: property.buttonSelector,
text: `${appName} ${Constants.commonConstantsData.button}`,
});
});

it(`Check button property in ${appName}`, () => {
basePage.checkElementContainText({
selector: property.buttonSelector,
text: `${appName} ${Constants.commonConstantsData.button}`,
index: appButtonPosition,
});
basePage.checkElementHaveProperty({
selector: property.buttonSelector,
text: `${appName} ${Constants.commonConstantsData.button}`,
prop: CssAttr.background,
value: color,
});
});
// Helper function to convert hex to RGB for browser comparison
const hexToRgb = (hex: string): string => {
// Remove # if present
const cleanHex = hex.replace('#', '');
const r = parseInt(cleanHex.slice(0, 2), 16);
const g = parseInt(cleanHex.slice(2, 4), 16);
const b = parseInt(cleanHex.slice(4, 6), 16);
return `rgb(${r}, ${g}, ${b})`;
};

describe('Single Runtime Plugin Example', () => {
describe('App 1 (port 3001)', () => {
beforeEach(() => {
basePage.openLocalhost({
number: 3001,
});
});

it('should have correct title', () => {
basePage.checkElementWithTextPresence({
selector: 'h1',
text: 'App 1 - Single Runtime Demo',
});
});

it('should have explanation section', () => {
cy.get('h3').contains("What's Happening Here?").should('be.visible');
cy.get('div').contains('This is').should('be.visible');
});

it('should have working counter', () => {
cy.contains('Shared State Counter: 0').should('be.visible');
cy.contains('button', 'Increment Counter').click();
cy.contains('Shared State Counter: 1').should('be.visible');
});

it('should have local and remote buttons with correct styling', () => {
// Check local button
cy.get('button')
.contains('App 1 Button')
.should('be.visible')
.should('have.css', 'background-color')
.and('eq', hexToRgb('#4a90e2'));

// Check remote button
cy.get('button')
.contains('App 2 Button')
.should('be.visible')
.should('have.css', 'background-color')
.and('eq', hexToRgb('#e24a90'));
});

it('should have working click counters on buttons', () => {
// Check local button counter
cy.get('button').contains('App 1 Button').as('localButton');
cy.get('@localButton').click();
cy.get('@localButton').should('contain', 'Clicks: 1');

// Check remote button counter
cy.get('button').contains('App 2 Button').as('remoteButton');
cy.get('@remoteButton').click();
cy.get('@remoteButton').should('contain', 'Clicks: 1');
});

it('should show correct runtime information', () => {
cy.contains('Runtime Information:').should('be.visible');

// Check module names are present
cy.contains('Module: app1').should('be.visible');
cy.contains('Module: app2').should('be.visible');

// Check remote entry URLs
cy.contains('div', 'Module: app1')
.parent()
.contains('Remote Entries:')
.parent()
.contains('app2:')
.parent()
.find('code')
.should('contain', 'http://localhost:3002/remoteEntry.js');

cy.contains('div', 'Module: app2')
.parent()
.contains('Remote Entries:')
.parent()
.contains('app1:')
.parent()
.find('code')
.should('contain', 'http://localhost:3001/app1_partial.js');
});

it('should have working navigation between apps', () => {
cy.get('a').contains('Go to App 2')
.should('have.attr', 'href')
.and('include', '3002');
});
});

describe('App 2 (port 3002)', () => {
beforeEach(() => {
basePage.openLocalhost({
number: 3002,
});
});

it('should have correct title', () => {
basePage.checkElementWithTextPresence({
selector: 'h1',
text: 'App 2 - Single Runtime Demo',
});
});
},
);

it('should have explanation section', () => {
cy.get('h3').contains("What's Happening Here?").should('be.visible');
cy.get('div').contains('This is').should('be.visible');
});

it('should have working counter', () => {
cy.contains('Shared State Counter: 0').should('be.visible');
cy.contains('button', 'Increment Counter').click();
cy.contains('Shared State Counter: 1').should('be.visible');
});

it('should have local and remote buttons with correct styling', () => {
// Check local button
cy.get('button')
.contains('App 2 Button')
.should('be.visible')
.should('have.css', 'background-color')
.and('eq', hexToRgb('#e24a90'));

// Check remote button
cy.get('button')
.contains('App 1 Button')
.should('be.visible')
.should('have.css', 'background-color')
.and('eq', hexToRgb('#4a90e2'));
});

it('should have working click counters on buttons', () => {
// Check local button counter
cy.get('button').contains('App 2 Button').as('localButton');
cy.get('@localButton').click();
cy.get('@localButton').should('contain', 'Clicks: 1');

// Check remote button counter
cy.get('button').contains('App 1 Button').as('remoteButton');
cy.get('@remoteButton').click();
cy.get('@remoteButton').should('contain', 'Clicks: 1');
});

it('should show correct runtime information', () => {
cy.contains('Runtime Information:').should('be.visible');

// Check module names are present
cy.contains('Module: app1').should('be.visible');
cy.contains('Module: app2').should('be.visible');

// Check remote entry URLs
cy.contains('div', 'Module: app2')
.parent()
.contains('Remote Entries:')
.parent()
.contains('app1:')
.parent()
.find('code')
.should('contain', 'http://localhost:3001/remoteEntry.js');

cy.contains('div', 'Module: app1')
.parent()
.contains('Remote Entries:')
.parent()
.contains('app2:')
.parent()
.find('code')
.should('contain', 'http://localhost:3002/remoteEntry.js');
});

it('should have working navigation between apps', () => {
cy.get('a').contains('Go to App 1')
.should('have.attr', 'href')
.and('include', '3001');
});
});
});
4 changes: 2 additions & 2 deletions runtime-plugins/single-runtime/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"clean": "pnpm --filter single-runtime_app* --parallel clean",
"legacy:start": "pnpm --filter single-runtime_app* --parallel legacy:start",
"legacy:build": "pnpm --filter single-runtime_app* --parallel legacy:build",
"e2e:ci": "pnpm start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
"legacy:e2e:ci": "pnpm legacy:start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
"e2e:ci": "pnpm start > /dev/null 2>&1 & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
"legacy:e2e:ci": "pnpm legacy:start > /dev/null 2>&1 & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
},
"devDependencies": {
"wait-on": "7.2.0"
Expand Down

0 comments on commit 2b31308

Please sign in to comment.