TESTING enabled with Ionic React

[nkgardose]

We are currently using Ionic + React tech stack for our frontend development. Initially, we were getting an undefined iframe error when using the Connection.

Upon further investigation with the help of @guillemcordoba, we were able to track it down using breakpoints to see the current value of each relevant variables at certain phases of the code.

Basically, the TESTING variable found in web-sdk's code returns true which I presume is something that is only used for internal testing?

web-sdk/src/index.js

Line 1 in 84f2482

const TESTING = global.COMB !== undefined;

As a result, since the TESTING is true, it skips the initialization of the iframe when connecting hence the error we're receiving.

web-sdk/src/index.js

Lines 49 to 96 in 84f2482

	async connect() {
	try {
	this.child = await COMB.connect(this.chaperone_url.href, 5000, this.signalCb);
	} catch (err) {
	if (err.name === "TimeoutError")
	console.log("Chaperone did not load properly. Is it running?");
	throw err;
	}
	let f;
	while (f = this.waiting.shift()) {
	f();
	}
	if (TESTING)
	return;
	// Alerts:
	// signin - emitted when the user completes a successful sign-in
	// signup - emitted when the user completes a successful sign-up
	// signout - emitted when the user competes a successful sign-out
	// canceled - emitted when the user purposefully exits sign-in/up
	// connected - emitted when the connection is opened
	// disconnected - emitted when the connection is closed
	this.child.msg_bus.on("alert", (event, ...args) => {
	this.emit(event);
	});
	this.iframe = document.getElementsByClassName("comb-frame-0")[0];
	this.iframe.setAttribute('allowtransparency', 'true');
	const style = this.iframe.style;
	style.zIndex = "99999999";
	style.width = "100%";
	style.height = "100%";
	style.position = "absolute";
	style.top = "0";
	style.left = "0";
	style.display = "none";
	window.addEventListener('popstate', (event) => {
	if (event.state === "_web_sdk_shown") {
	history.back()
	} else {
	this.iframe.style.display = "none"
	}
	})
	}

For now, we've come up with a temporary solution of doing this to overcome the problem.

global.COMB = undefined;
const { Connection } = require("@holo-host/web-sdk");
window.COMB = require("@holo-host/comb").COMB;

But, this could also be a problem with different dev teams that use web-sdk in their application. Thanks.