chromogen
Version:
simple, interaction-driven Jest test generator for Recoil and React Hooks apps
68 lines (67 loc) • 4.88 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.Panel = void 0;
const react_1 = __importStar(require("react"));
const store_1 = require("../utils/store");
const component_utils_1 = require("./component-utils");
const selector = (state) => ({
recording: state.recording,
toggleRecording: state.toggleRecording,
});
const Panel = () => {
const [file, setFile] = (0, react_1.useState)(undefined);
const [storeMap] = (0, react_1.useState)(new Map());
const { recording, toggleRecording } = (0, store_1.useStore)(selector);
(0, react_1.useEffect)(() => document.getElementById('chromogen-download').click(), [file]);
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,
react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: component_utils_1.styles.divStyle },
react_1.default.createElement("h1", null, "Testing!"),
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: () => {
toggleRecording();
}, 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.Panel = Panel;