Investigate Embedding UI as Iframe about mimic HOT 6 CLOSED

@ilyagelman @morsdyce Should work just fine, add this to any page to test (ES6 must be supported):

/**
 * Shredder API Dummy
 */

window.Shredder = {
  sayHi: (one, two) => {
    console.log('API sayHi', one, two);
  }
};

/**
 * Add an iFrame element for the Shredder UI
 */

let iframeElm = document.createElement('iframe');
iframeElm.src = '';
iframeElm.width = '100%';
iframeElm.height = '100%';

document.body.appendChild(iframeElm);

/**
 * Get the iFrame's document, body and head
 */

let iframeRoot = iframeElm.contentDocument;
let iframeBody = iframeRoot.body || iframeRoot.querySelector('body');
let iframeHead = iframeRoot.querySelector('head') || iframeBody;

/**
 * Prepare Shredder UI Styles
 */

let uiStyle = document.createElement('style');
uiStyle.textContent = `
  h1 {
    background: lightblue;
  }
`;

/**
 * Prepare Shredder UI View
 */

let uiHtml = document.createElement('div');
uiHtml.innerHTML = `
  <div>
    <h1>Bad Ass API Mocking</h1>
  </div>
`;

/**
 * Prepare Shredder UI Code
 */

let uiScript = document.createElement('script');
uiScript.type = 'text/javascript';
uiScript.text = `
  // Execute methods from the Shredder API
  window.parent.Shredder.sayHi('Foo', 'Bar')
`;

/**
 * Inject the Shredder UI
 */

iframeBody.appendChild(uiHtml);
iframeHead.appendChild(uiStyle);
iframeBody.appendChild(uiScript);

Open questions

• The code and styles must be post transpilation, that's no issue on production, we could have them as strings and just inject them, but how would it work in development?
• We would still need some CSS to position the iframe and handle showing/hiding it, this would have to be added to the original page, the iframe styles would have to be as explicit as possible to avoid external styles from affecting it.

from mimic.

@alexilyaev What about mocking xhr requests within iframe?

from mimic.

@ilyagelman You don't, you mock them outside as usual, the iFrame is just the carrier that will communicate with the Shredder API.

from mimic.

Maayan wrote:
Please keep in mind for whoever implements the iframe, you need to test it in both loading scenarios.

1. Global var via script injection
2. Common js import (no global var is created at this method currently)

from mimic.

+1 for including this here.

On Wed, Dec 2, 2015 at 7:47 PM, Alex Ilyaev [email protected]
wrote:

Maayan wrote:
Please keep in mind for whoever implements the iframe, you need to test it
in both loading scenarios.

1. Global var via script injection
2. Common js import (no global var is created at this method currently)

—
Reply to this email directly or view it on GitHub
#22 (comment).

from mimic.

@ilyagelman Does it work with the 2 points Maayan mentioned?

from mimic.