chromogen
Version:
simple, interaction-driven Jest test generator for Recoil and React Hooks apps
138 lines (137 loc) • 8.51 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChromogenObserver = void 0;
const react_1 = __importStar(require("react"));
const recoil_1 = require("recoil");
const utils_1 = require("../utils/utils");
const store_1 = require("../utils/store");
const ledger_1 = require("../utils/ledger");
const component_utils_1 = require("./component-utils");
const ChromogenObserver = ({ store }) => {
const [file, setFile] = (0, react_1.useState)(undefined);
const [storeMap, setStoreMap] = (0, react_1.useState)(new Map());
const [recording, setRecording] = (0, recoil_1.useRecoilState)(store_1.recordingState);
const [devtool, setDevtool] = (0, react_1.useState)(false);
const [, setEditFile] = (0, react_1.useState)(undefined);
const receiveMessage = (message) => {
switch (message.data.action) {
case 'connectChromogen':
setDevtool(true);
window.postMessage({ action: 'moduleConnected' }, '*');
break;
case 'downloadFile':
(0, component_utils_1.generateFile)(setFile, storeMap);
break;
case 'editFile':
const array = (0, component_utils_1.generateFile)(setEditFile, storeMap);
window.postMessage({ action: 'editFileReceived', data: array }, '*');
break;
case 'toggleRecord':
setRecording(!recording);
window.postMessage({ action: 'setStatus' }, '*');
break;
default:
}
};
(0, react_1.useEffect)(() => {
window.addEventListener('message', receiveMessage);
return () => window.removeEventListener('message', receiveMessage);
});
(0, react_1.useEffect)(() => document.getElementById('chromogen-download').click(), [file]);
(0, react_1.useEffect)(() => {
if (store !== undefined) {
const storeArr = Array.isArray(store) ? store : [store];
const newStore = new Map();
storeArr.forEach((storeModule) => {
Object.entries(storeModule).forEach(([variable, imported]) => {
let key;
if (typeof imported === 'function') {
const extendedKey = imported(utils_1.dummyParam).key;
key = extendedKey.includes('selectorFamily')
? extendedKey.substring(0, extendedKey.indexOf('selectorFamily') - 2)
: extendedKey.substring(0, extendedKey.indexOf(`"${utils_1.dummyParam}"`) - 2);
}
else {
key = imported.key;
}
newStore.set(key, variable);
});
});
setStoreMap(newStore);
}
}, []);
(0, recoil_1.useRecoilTransactionObserver_UNSTABLE)(({ previousSnapshot, snapshot }) => {
if (snapshot.getLoadable(store_1.recordingState).contents) {
const { transactions, setTransactions, atoms, atomFamilies } = ledger_1.ledger;
const state = atoms.map((item) => {
const { key } = item;
const value = snapshot.getLoadable(item).contents;
const previous = previousSnapshot.getLoadable(item).contents;
const updated = value !== previous;
return { key, value, previous, updated };
});
const atomFamilyState = [];
for (const family in atomFamilies) {
const familyMembers = atomFamilies[family];
for (const member in familyMembers) {
const memberRecoilState = familyMembers[member];
let { key } = memberRecoilState;
key = key.substring(0, key.length - 14);
const value = snapshot.getLoadable(memberRecoilState).contents;
const previous = previousSnapshot.getLoadable(memberRecoilState).contents;
const updated = value !== previous;
if (!key.includes(utils_1.dummyParam))
atomFamilyState.push({ family, key, value, updated });
}
}
transactions.push({ state, updates: [], atomFamilyState, familyUpdates: [] });
setTransactions.push({ state, setter: null });
}
});
const [pauseColor, setPauseColor] = (0, react_1.useState)('#90d1f0');
const pauseBorderStyle = {
borderColor: `${pauseColor}`,
};
const [playColor, setPlayColor] = (0, react_1.useState)('transparent transparent transparent #90d1f0');
const playBorderStyle = {
borderColor: `${playColor}`,
};
return (react_1.default.createElement(react_1.default.Fragment, null,
!devtool && (react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: component_utils_1.styles.divStyle },
react_1.default.createElement("button", { "aria-label": recording ? 'pause' : 'record', id: "chromogen-toggle-record", style: Object.assign(Object.assign({}, component_utils_1.styles.buttonStyle), { backgroundColor: '#7f7f7f' }), type: "button", onClick: () => {
setRecording(!recording);
}, onMouseEnter: () => recording ? setPauseColor('#f6f071') : setPlayColor('transparent transparent transparent #f6f071'), onMouseLeave: () => recording ? setPauseColor('#90d1f0') : setPlayColor('transparent transparent transparent #90d1f0') },
react_1.default.createElement("a", null, recording ?
react_1.default.createElement("div", { style: Object.assign(Object.assign({}, component_utils_1.styles.pauseStyle), pauseBorderStyle) })
: react_1.default.createElement("div", { style: Object.assign(Object.assign({}, component_utils_1.styles.playStyle), playBorderStyle) }))),
react_1.default.createElement("button", { "aria-label": "capture test", id: "chromogen-generate-file", style: Object.assign(Object.assign({}, component_utils_1.styles.buttonStyle), { backgroundColor: '#7f7f7f', marginLeft: '-2px', marginRight: '13px' }), type: "button", onClick: () => (0, component_utils_1.generateFile)(setFile, storeMap), onMouseEnter: () => document.getElementById("chromogen-generate-file").style.color = '#f6f071', onMouseLeave: () => document.getElementById("chromogen-generate-file").style.color = '#90d1f0' },
react_1.default.createElement("a", null, 'Download')),
react_1.default.createElement("button", { "aria-label": "copy test", id: "chromogen-copy-test", style: Object.assign(Object.assign({}, component_utils_1.styles.buttonStyle), { backgroundColor: '#7f7f7f', marginLeft: '-2px', marginRight: '13px' }), type: "button", onClick: () => { navigator.clipboard.writeText((0, component_utils_1.generateTests)(storeMap)[0]); }, onMouseEnter: () => document.getElementById("chromogen-copy-test").style.color = '#f6f071', onMouseLeave: () => document.getElementById("chromogen-copy-test").style.color = '#90d1f0' },
react_1.default.createElement("a", null, 'Copy To Clipboard'))))),
react_1.default.createElement("a", { download: "chromogen.test.js", href: file, id: "chromogen-download", style: { display: 'none' } }, "Download Test")));
};
exports.ChromogenObserver = ChromogenObserver;