test: test env variables in e2e

Author: swashata

e2e/cypress/integration/build/prod.spec.js

@@ -13,6 +13,9 @@ context('wpackio-scripts serve', () => {
 		it('dynamic import should work', () => {
 			cy.get('#dyn-app').should('have.text', 'I am dynamically imported');
 		});
+		it('custom env should work', () => {
+			cy.get('#env-app').should('have.text', 'Hello Tryout undefined');
+		});
 		it('SASS should work', () => {
 			cy.get('#blue').should('have.css', 'color', 'rgb(0, 0, 255)');
 		});

e2e/cypress/integration/serve/app.spec.js

@@ -47,6 +47,9 @@ context('wpackio-scripts serve', () => {
 				});
 			});
 		});
+		it('custom env should work', () => {
+			cy.get('#env-app').should('have.text', 'Hello Tryout undefined');
+		});
 		it('SASS should work', () => {
 			cy.get('#blue').then(el => {
 				expect(el).to.have.css('color', 'rgb(0, 0, 255)');

e2e/index.html

@@ -18,6 +18,7 @@
 	<h1>This is for e2e testing</h1>
 	<!-- App entry Nodes -->
 	<div id="main-app"></div>
+	<div id="env-app"></div>
 	<div id="dyn-app"></div>
 	<div id="ts-app"></div>
 	<div id="ts-dyn-app"></div>

e2e/prod.html

@@ -17,6 +17,7 @@
 	<h1>This is for e2e testing</h1>
 	<!-- App entry Nodes -->
 	<div id="main-app"></div>
+	<div id="env-app"></div>
 	<div id="dyn-app"></div>
 	<div id="ts-app"></div>
 	<div id="ts-dyn-app"></div>

e2e/src/app/main.js

@@ -13,10 +13,12 @@ const path = (__WPACKIO__.appName + __WPACKIO__.outputPath).replace(
 console.log(path);
 
 const mainNode = document.querySelector('#main-app');
+const envNode = document.querySelector('#env-app');
 const dynamicNode = document.querySelector('#dyn-app');
 const imgTag = document.querySelector('#img-tag');
 
 mainNode.textContent = 'This is main app';
+envNode.textContent = `${process.env.E2E_ENV} ${process.env.NOT_PRESENT}`;
 imgTag.innerHTML = `<img src="${img}" />`;
 
 import('./dynamic').then(({ dynamic }) => {