alm
Version:
The best IDE for TypeScript
308 lines (307 loc) • 15.3 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var ui = require("../../ui");
var csx = require("../../base/csx");
var React = require("react");
var commands = require("../../commands/commands");
var utils = require("../../../common/utils");
var types = require("../../../common/types");
var styles = require("../../styles/styles");
var clipboard_1 = require("../../components/clipboard");
var gls = require("../../base/gls");
var typestyle = require("typestyle");
var clientTestResultsCache_1 = require("../../clientTestResultsCache");
var icon_1 = require("../../components/icon");
var state = require("../../state/state");
var TestedViewStyles;
(function (TestedViewStyles) {
TestedViewStyles.headerClassName = typestyle.style({
fontWeight: 'bold',
cursor: 'pointer',
$nest: {
'&:hover': {
textDecoration: 'underline'
}
}
});
TestedViewStyles.clickable = typestyle.style({
cursor: 'pointer',
$nest: {
'&:hover': {
textDecoration: 'underline'
}
}
});
})(TestedViewStyles = exports.TestedViewStyles || (exports.TestedViewStyles = {}));
/** Utility */
var makeReactKeyOutOfPosition = function (position) {
return position.line + ':' + position.ch;
};
var formatStats = function (stats) {
return "\u03A3: " + stats.testCount + " (\u2713: " + stats.passCount + ", \u2718: " + stats.failCount + ", \u25CE: " + stats.skipCount + ") " + utils.formatMilliseconds(stats.durationMs);
};
var TestedView = /** @class */ (function (_super) {
__extends(TestedView, _super);
function TestedView(props) {
var _this = _super.call(this, props) || this;
_this.ctrls = {};
_this.openTestLogPositionInSelectedModule = function (pos) {
var filePath = _this.state.selected;
commands.doOpenOrFocusFile.emit({
filePath: filePath,
position: pos.lastPositionInFile,
});
};
_this.openFilePathPosition = function (fpPos) {
commands.doOpenOrFocusFile.emit(fpPos);
};
_this.handleNodeClick = function (node) {
commands.doOpenOrFocusFile.emit({
filePath: node.location.filePath,
position: node.location.position
});
};
_this.handleModuleSelected = function (node) {
_this.setState({ selected: node.filePath });
};
_this.handleKey = function (e) {
var unicode = e.charCode;
if (String.fromCharCode(unicode).toLowerCase() === "r") {
_this.loadData();
}
};
_this.loadData = function () {
var results = clientTestResultsCache_1.testResultsCache.getResults();
var testResultsStats = clientTestResultsCache_1.testResultsCache.getStats();
_this.setState({ tests: results, testResultsStats: testResultsStats });
};
/**
* TAB implementation
*/
_this.resize = function () {
// Not needed
};
_this.focus = function () {
_this.ctrls.root.focus();
};
_this.save = function () {
};
_this.close = function () {
};
_this.gotoPosition = function (position) {
};
_this.search = {
doSearch: function (options) {
},
hideSearch: function () {
},
findNext: function (options) {
},
findPrevious: function (options) {
},
replaceNext: function (_a) {
var newText = _a.newText;
},
replacePrevious: function (_a) {
var newText = _a.newText;
},
replaceAll: function (_a) {
var newText = _a.newText;
}
};
_this.state = {
tests: Object.create(null),
selected: null
};
return _this;
}
TestedView.prototype.componentDidMount = function () {
var _this = this;
/**
* Initial load + load on result change
*/
this.loadData();
this.disposible.add(clientTestResultsCache_1.testResultsCache.testResultsDelta.on(function () {
_this.loadData();
}));
this.disposible.add(state.subscribeSub(function (s) { return s.testedWorking; }, function (testedWorking) {
_this.setState({ testedWorking: testedWorking });
}));
// Listen to tab events
var api = this.props.api;
this.disposible.add(api.resize.on(this.resize));
this.disposible.add(api.focus.on(this.focus));
this.disposible.add(api.save.on(this.save));
this.disposible.add(api.close.on(this.close));
this.disposible.add(api.gotoPosition.on(this.gotoPosition));
// Listen to search tab events
this.disposible.add(api.search.doSearch.on(this.search.doSearch));
this.disposible.add(api.search.hideSearch.on(this.search.hideSearch));
this.disposible.add(api.search.findNext.on(this.search.findNext));
this.disposible.add(api.search.findPrevious.on(this.search.findPrevious));
this.disposible.add(api.search.replaceNext.on(this.search.replaceNext));
this.disposible.add(api.search.replacePrevious.on(this.search.replacePrevious));
this.disposible.add(api.search.replaceAll.on(this.search.replaceAll));
};
TestedView.prototype.render = function () {
var _this = this;
return (React.createElement("div", { ref: function (root) { return _this.ctrls.root = root; }, onFocus: this.props.onFocused, tabIndex: 0, style: csx.extend(csx.vertical, csx.flex, csx.newLayerParent, styles.someChildWillScroll, { color: styles.textColor }), onKeyPress: this.handleKey },
React.createElement(gls.FlexVertical, { style: { overflow: 'hidden', padding: '10px' } },
this.renderHeader(),
React.createElement(gls.SmallVerticalSpace, null),
React.createElement(gls.FlexVertical, null,
React.createElement(gls.FlexHorizontal, null,
React.createElement(gls.ContentVertical, { style: { overflow: 'auto', backgroundColor: styles.blackHighlightColor, padding: '10px', width: '200px' } }, this.renderFiles()),
React.createElement(gls.SmallHorizontalSpace, null),
React.createElement(gls.FlexVertical, { style: { overflow: 'auto', backgroundColor: styles.blackHighlightColor, padding: '10px' } }, this.state.selected
? this.renderSelectedNode()
: 'Select a module from the left to view results 🌹'))))));
};
TestedView.prototype.renderHeader = function () {
if (!this.state.testResultsStats) {
return React.createElement("div", null, "No test runs yet.");
}
var testResultsStats = clientTestResultsCache_1.testResultsCache.getStats();
var failing = !!testResultsStats.failCount;
var totalThatRan = testResultsStats.passCount + testResultsStats.failCount;
var working = this.state.testedWorking && this.state.testedWorking.working;
var summary = formatStats(testResultsStats);
var testStatsRendered = !!testResultsStats.testCount && React.createElement("span", null, failing
? React.createElement("span", { style: { color: styles.errorColor, fontWeight: 'bold' } },
React.createElement(icon_1.Icon, { name: styles.icons.tested, spin: !!working }),
" ",
testResultsStats.failCount,
"/",
totalThatRan,
" Tests Failing")
: React.createElement("span", { style: { color: styles.successColor, fontWeight: 'bold' } },
React.createElement(icon_1.Icon, { name: styles.icons.tested, spin: !!working }),
" ",
testResultsStats.passCount,
"/",
totalThatRan,
" Tests Passed"));
return (React.createElement(gls.ContentHorizontal, null,
React.createElement(gls.Content, null, testStatsRendered),
React.createElement(gls.Flex, null),
React.createElement(gls.Content, null, summary)));
};
TestedView.prototype.renderFiles = function () {
var _this = this;
return Object.keys(this.state.tests).map(function (fp, i) {
var item = _this.state.tests[fp];
var fileName = utils.getFileName(fp);
var failing = !!item.stats.failCount;
var totalThatRan = item.stats.passCount + item.stats.failCount;
return (React.createElement("div", { key: i, title: fp, className: TestedViewStyles.headerClassName, style: csx.extend({
paddingTop: '2px', paddingBottom: '2px', paddingLeft: '2px',
color: failing ? styles.errorColor : styles.successColor,
backgroundColor: _this.state.selected === fp ? styles.selectedBackgroundColor : 'transparent',
}, styles.ellipsis), onClick: function () { return _this.handleModuleSelected(item); } },
React.createElement(icon_1.Icon, { name: "file-text-o" }),
" (",
failing ? item.stats.failCount : item.stats.passCount,
"/",
totalThatRan,
") ",
fileName));
});
};
TestedView.prototype.renderSelectedNode = function () {
var _this = this;
var filePath = this.state.selected;
var test = this.state.tests[filePath];
if (!test) {
return React.createElement("div", null,
"The selected filePath: ",
filePath,
" is no longer in the test restuls");
}
var someFailing = !!test.stats.failCount;
return React.createElement(gls.ContentVerticalContentPadded, { padding: 10 },
React.createElement("div", { style: {
color: someFailing ? styles.errorColor : styles.successColor
} },
React.createElement(gls.InlineBlock, null,
" ",
formatStats(test.stats),
" ")),
React.createElement("div", { className: TestedViewStyles.clickable, style: { fontSize: '.8em', textDecoration: 'underline' } },
React.createElement("span", { onClick: function () {
commands.doOpenOrFocusFile.emit({
filePath: filePath,
});
} }, filePath)),
React.createElement(gls.Content, null, test.suites.map(function (s) { return _this.renderSuite(s); })));
};
TestedView.prototype.renderSuite = function (suite) {
var _this = this;
var color = !!suite.stats.failCount ? styles.errorColor
: !!suite.stats.passCount ? styles.successColor
: styles.highlightColor;
return React.createElement("div", { key: makeReactKeyOutOfPosition(suite.testLogPosition.lastPositionInFile), style: {
fontSize: '13px',
border: "1px solid " + color,
marginTop: '5px', padding: '5px'
} },
React.createElement(gls.InlineBlock, { style: {
color: color
} },
React.createElement(icon_1.Icon, { name: styles.icons.testedSuite }),
" ",
React.createElement("span", { className: TestedViewStyles.headerClassName, onClick: function () { return _this.openTestLogPositionInSelectedModule(suite.testLogPosition); } }, suite.description)),
React.createElement(gls.SmallVerticalSpace, { space: 10 }),
formatStats(suite.stats),
React.createElement(gls.SmallVerticalSpace, { space: 10 }),
suite.tests.map(function (s) { return _this.renderTest(s); }),
React.createElement(gls.SmallVerticalSpace, { space: 10 }),
suite.suites.map(function (s) { return _this.renderSuite(s); }));
};
TestedView.prototype.renderTest = function (test) {
var _this = this;
return React.createElement("div", { key: makeReactKeyOutOfPosition(test.testLogPosition.lastPositionInFile), style: { padding: '5px' } },
React.createElement(gls.InlineBlock, { style: {
color: test.status === types.TestStatus.Success ? styles.successColor
: test.status === types.TestStatus.Fail ? styles.errorColor
: styles.highlightColor
} },
React.createElement(icon_1.Icon, { name: styles.icons.testedTest }),
" ",
React.createElement("span", { className: TestedViewStyles.headerClassName, onClick: function () { return _this.openTestLogPositionInSelectedModule(test.testLogPosition); } }, test.description)),
"\u00A0\u00A0",
React.createElement(gls.InlineBlock, { style: { fontSize: '10px' } }, test.durationMs != undefined ? utils.formatMilliseconds(test.durationMs) : ''),
test.status === types.TestStatus.Fail && React.createElement("div", { style: {
padding: '5px',
margin: '5px',
backgroundColor: 'black'
} },
React.createElement(gls.ContentVerticalContentPadded, { padding: 10 },
React.createElement("div", null,
React.createElement(clipboard_1.Clipboard, { text: test.error.message }),
" ",
test.error.message),
!!test.error.testLogPosition.stack.length && test.error.testLogPosition.stack.map(function (s) {
return React.createElement("div", { key: makeReactKeyOutOfPosition(s.position), style: { fontSize: '11px' }, onClick: function () { return _this.openFilePathPosition(s); } },
React.createElement(icon_1.Icon, { name: "eye" }),
"\u00A0\u00A0",
React.createElement(gls.InlineBlock, { className: TestedViewStyles.clickable },
s.filePath,
":",
s.position.line + 1,
":",
s.position.ch + 1));
}))));
};
return TestedView;
}(ui.BaseComponent));
exports.TestedView = TestedView;