streamlit-component-lib
Version:
Support code for Streamlit Components
260 lines (259 loc) • 13.5 kB
JavaScript
/**
* Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { StreamlitComponentBase, withStreamlitConnection, } from "./StreamlitReact";
import * as React from "react";
import { render } from "@testing-library/react";
import { tick } from "./test_utils";
import { EXAMPLE_DF } from "./mock_data";
import { Streamlit } from "./streamlit";
var StaticComponent = /** @class */ (function (_super) {
__extends(StaticComponent, _super);
function StaticComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
StaticComponent.prototype.render = function () {
return React.createElement(React.Fragment, null, "Static component");
};
return StaticComponent;
}(StreamlitComponentBase));
describe("StreamlitReact", function () {
test("the component should be empty initially", function () {
var StreamlitComponent = withStreamlitConnection(StaticComponent);
expect(document.body.innerHTML).toEqual("");
render(React.createElement(StreamlitComponent, null));
expect(document.body.innerHTML).toEqual("<div></div>");
});
test("the component should be visible after initialization", function () { return __awaiter(void 0, void 0, void 0, function () {
var StreamlitComponent, getByText;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
StreamlitComponent = withStreamlitConnection(StaticComponent);
expect(document.body.innerHTML).toEqual("");
getByText = render(React.createElement(StreamlitComponent, null)).getByText;
window.postMessage({ type: "streamlit:render", args: {} }, "*");
return [4 /*yield*/, tick()];
case 1:
_a.sent();
expect(getByText("Static component")).toBeInTheDocument();
return [2 /*return*/];
}
});
}); });
test("the component should receive arguments from the parent frame", function () { return __awaiter(void 0, void 0, void 0, function () {
var ComponentWithArguments, Component, getByText;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
ComponentWithArguments = /** @class */ (function (_super) {
__extends(ComponentWithArguments, _super);
function ComponentWithArguments() {
return _super !== null && _super.apply(this, arguments) || this;
}
ComponentWithArguments.prototype.render = function () {
return React.createElement("p", null, this.props.args.firstArg);
};
return ComponentWithArguments;
}(StreamlitComponentBase));
Component = withStreamlitConnection(ComponentWithArguments);
getByText = render(React.createElement(Component, null)).getByText;
window.postMessage({ type: "streamlit:render", args: { firstArg: "Argument text 123" } }, "*");
return [4 /*yield*/, tick()];
case 1:
_a.sent();
expect(getByText("Argument text 123")).toBeInTheDocument();
return [2 /*return*/];
}
});
}); });
test("the component should receive dataframe from the parent frame", function () { return __awaiter(void 0, void 0, void 0, function () {
var DataframeComponent, Component, getByText;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
DataframeComponent = /** @class */ (function (_super) {
__extends(DataframeComponent, _super);
function DataframeComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
DataframeComponent.prototype.render = function () {
var firstArg = this.props.args.firstArg;
var content = firstArg.getCell(1, 1).content;
return React.createElement(React.Fragment, null, String(content));
};
return DataframeComponent;
}(StreamlitComponentBase));
Component = withStreamlitConnection(DataframeComponent);
getByText = render(React.createElement(Component, null)).getByText;
window.postMessage({
type: "streamlit:render",
args: {},
dfs: [
{
key: "firstArg",
value: {
data: {
data: EXAMPLE_DF.data,
index: EXAMPLE_DF.index,
columns: EXAMPLE_DF.columns,
},
},
},
],
}, "*");
return [4 /*yield*/, tick()];
case 1:
_a.sent();
expect(getByText("Jason")).toBeInTheDocument();
return [2 /*return*/];
}
});
}); });
test("the component error should be visible", function () { return __awaiter(void 0, void 0, void 0, function () {
var BrokenComponent, Component, getByText;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
BrokenComponent = /** @class */ (function (_super) {
__extends(BrokenComponent, _super);
function BrokenComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
BrokenComponent.prototype.render = function () {
throw new Error("Error in component");
};
return BrokenComponent;
}(StreamlitComponentBase));
jest.spyOn(console, 'error').mockImplementation(function () { });
Component = withStreamlitConnection(BrokenComponent);
getByText = render(React.createElement(Component, null)).getByText;
window.postMessage({
type: "streamlit:render",
args: {},
}, "*");
return [4 /*yield*/, tick()];
case 1:
_a.sent();
expect(getByText("Component Error")).toBeInTheDocument();
expect(getByText("Error in component")).toBeInTheDocument();
expect(jest.mocked(console.error).mock.calls).toHaveLength(2);
return [2 /*return*/];
}
});
}); });
test("the component should update the frame height intiailly", function () { return __awaiter(void 0, void 0, void 0, function () {
var Component, getByText;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
jest.spyOn(Streamlit, 'setFrameHeight');
Component = withStreamlitConnection(StaticComponent);
getByText = render(React.createElement(Component, null)).getByText;
window.postMessage({
type: "streamlit:render",
args: {},
}, "*");
return [4 /*yield*/, tick()];
case 1:
_a.sent();
expect(jest.mocked(Streamlit.setFrameHeight).mock.calls).toHaveLength(1);
expect(getByText("Static component")).toBeInTheDocument();
return [2 /*return*/];
}
});
}); });
test("the component should update the frame height after updating the arguments", function () { return __awaiter(void 0, void 0, void 0, function () {
var Component, _i, _a, value;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
jest.spyOn(Streamlit, 'setFrameHeight');
Component = withStreamlitConnection(StaticComponent);
render(React.createElement(Component, null));
_i = 0, _a = [1, 2, 3];
_b.label = 1;
case 1:
if (!(_i < _a.length)) return [3 /*break*/, 4];
value = _a[_i];
window.postMessage({
type: "streamlit:render",
args: { value: value },
}, "*");
return [4 /*yield*/, tick()];
case 2:
_b.sent();
_b.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4:
expect(jest.mocked(Streamlit.setFrameHeight).mock.calls).toHaveLength(3);
return [2 /*return*/];
}
});
}); });
});