129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
import { toString, flow } from 'lodash';
|
|
import { configure, shallow, mount } from 'enzyme';
|
|
import Adapter16 from 'enzyme-adapter-react-16';
|
|
import { setConfig } from 'react-hot-loader';
|
|
|
|
import { isJSEnabledSelector } from '../redux';
|
|
|
|
// we use two different frames to make them all essentially pure functions
|
|
// main iframe is responsible rendering the preview and is where we proxy the
|
|
// console.log
|
|
const mainId = 'fcc-main-frame';
|
|
// the test frame is responsible for running the assert tests
|
|
const testId = 'fcc-test-frame';
|
|
|
|
// base tag here will force relative links
|
|
// within iframe to point to '' instead of
|
|
// append to the current challenge url
|
|
// this also allows in-page anchors to work properly
|
|
// rather than load another instance of the learn
|
|
//
|
|
// if an error occurs during initialization
|
|
// the __err prop will be set
|
|
// This is then picked up in client/frame-runner.js during
|
|
// runTestsInTestFrame below
|
|
const createHeader = (id = mainId) => `
|
|
<base href='' />
|
|
<script>
|
|
window.__frameId = '${id}';
|
|
window.onerror = function(msg, url, ln, col, err) {
|
|
window.__err = err;
|
|
return true;
|
|
};
|
|
</script>
|
|
`;
|
|
|
|
export const runTestInTestFrame = async function(document, tests) {
|
|
const { contentDocument: frame } = document.getElementById(testId);
|
|
// Enable Stateless Functional Component. Otherwise, enzyme-adapter-react-16
|
|
// does not work correctly.
|
|
setConfig({ pureSFC: true });
|
|
const result = await frame.__runTest(tests);
|
|
setConfig({ pureSFC: false });
|
|
return result;
|
|
};
|
|
|
|
const createFrame = (document, state, id) => ctx => {
|
|
const isJSEnabled = isJSEnabledSelector(state);
|
|
const frame = document.createElement('iframe');
|
|
frame.id = id;
|
|
if (!isJSEnabled) {
|
|
frame.sandbox = 'allow-same-origin';
|
|
}
|
|
return {
|
|
...ctx,
|
|
element: frame
|
|
};
|
|
};
|
|
|
|
const hiddenFrameClassName = 'hide-test-frame';
|
|
const mountFrame = document => ({ element, ...rest }) => {
|
|
const oldFrame = document.getElementById(element.id);
|
|
if (oldFrame) {
|
|
element.className = oldFrame.className || hiddenFrameClassName;
|
|
oldFrame.parentNode.replaceChild(element, oldFrame);
|
|
} else {
|
|
element.className = hiddenFrameClassName;
|
|
document.body.appendChild(element);
|
|
}
|
|
return {
|
|
...rest,
|
|
element,
|
|
document: element.contentDocument,
|
|
window: element.contentWindow
|
|
};
|
|
};
|
|
|
|
const buildProxyConsole = proxyLogger => ctx => {
|
|
const oldLog = ctx.window.console.log.bind(ctx.window.console);
|
|
ctx.window.console.log = function proxyConsole(...args) {
|
|
proxyLogger.put(args);
|
|
return oldLog(...args);
|
|
};
|
|
return ctx;
|
|
};
|
|
|
|
const writeTestDepsToDocument = frameReady => ctx => {
|
|
const { sources } = ctx;
|
|
// add enzyme
|
|
// TODO: do programatically
|
|
// TODO: webpack lazyload this
|
|
configure({ adapter: new Adapter16() });
|
|
ctx.document.Enzyme = { shallow, mount };
|
|
// default for classic challenges
|
|
// should not be used for modern
|
|
ctx.document.__source = sources && 'index' in sources ? sources['index'] : '';
|
|
// provide the file name and get the original source
|
|
ctx.document.__getUserInput = fileName => toString(sources[fileName]);
|
|
ctx.document.__frameReady = frameReady;
|
|
return ctx;
|
|
};
|
|
|
|
function writeToFrame(content, frame) {
|
|
frame.open();
|
|
frame.write(content);
|
|
frame.close();
|
|
return frame;
|
|
}
|
|
|
|
const writeContentToFrame = ctx => {
|
|
writeToFrame(createHeader(ctx.element.id) + ctx.build, ctx.document);
|
|
return ctx;
|
|
};
|
|
|
|
export const createMainFramer = (document, state) =>
|
|
flow(
|
|
createFrame(document, state, mainId),
|
|
mountFrame(document),
|
|
writeContentToFrame
|
|
);
|
|
|
|
export const createTestFramer = (document, state, frameReady, proxyConsole) =>
|
|
flow(
|
|
createFrame(document, state, testId),
|
|
mountFrame(document),
|
|
writeTestDepsToDocument(frameReady),
|
|
buildProxyConsole(proxyConsole),
|
|
writeContentToFrame
|
|
);
|