mirror of
https://github.com/pyscript/pyscript.git
synced 2026-03-05 05:17:34 -05:00
Simplify pyrepl.ts and kill base.ts (#884)
Major highlights: 1. Merge&simplify base.ts and pyrepl.ts; kill base.ts 2. improve and extente the py-repl integration tests 3. Reorder the code in pyrepl.ts. This part of the PR doesn't change much of the concrete logic: it's just a sequence of renaming variables, moving code around, group code into functions, killing code which is no longer needed. But the end result is much better and nicer to read, IMHO. Minor highlights: 1. py-repl now uses the new logic in pyexec.ts to run the code 2. after PR Add display impl, rm outputManage, print and console.log default to browser console #749 py-repl no longer displayed the result of the last evaluated expression (e.g. if you typed 42 and run it, it displayed nothing). This PR re-introduces this behavior, which is what you would expect by a REPL. 3. improve the pytest --dev option: now it implies --no-fake-server so that sourcemaps works automatically 4. improve the names of the CSS classes to be more consistent 5. kill pyrepl.test.ts: the old tests didn't check anything useful, this style of unit test doesn't really add much value if you have good integration tests (which now we have) and trying to revive them was not worth the hassle
This commit is contained in:
Antonio Cuni
@@ -1,116 +0,0 @@
|
||||
// XXX this should be eventually killed.
|
||||
// The only remaining class which inherit from BaseEvalElement is PyRepl: we
|
||||
// should merge the two classes together, do a refactoing of how PyRepl to use
|
||||
// the new pyExec and in general clean up the unnecessary code.
|
||||
|
||||
import { ensureUniqueId, addClasses, removeClasses, getAttribute } from '../utils';
|
||||
import type { Runtime } from '../runtime';
|
||||
import { getLogger } from '../logger';
|
||||
import { pyExecDontHandleErrors } from '../pyexec';
|
||||
|
||||
const logger = getLogger('pyscript/base');
|
||||
|
||||
let Element;
|
||||
|
||||
export class BaseEvalElement extends HTMLElement {
|
||||
shadow: ShadowRoot;
|
||||
wrapper: HTMLElement;
|
||||
code: string;
|
||||
source: string;
|
||||
btnConfig: HTMLElement;
|
||||
btnRun: HTMLElement;
|
||||
outputElement: HTMLElement;
|
||||
errorElement: HTMLElement;
|
||||
theme: string;
|
||||
appendOutput: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// attach shadow so we can preserve the element original innerHtml content
|
||||
this.shadow = this.attachShadow({ mode: 'open' });
|
||||
this.wrapper = document.createElement('slot');
|
||||
this.shadow.appendChild(this.wrapper);
|
||||
this.setOutputMode("append");
|
||||
}
|
||||
|
||||
setOutputMode(defaultMode = "append") {
|
||||
const mode = getAttribute(this,'output-mode') || defaultMode;
|
||||
|
||||
switch (mode) {
|
||||
case "append":
|
||||
this.appendOutput = true;
|
||||
break;
|
||||
case "replace":
|
||||
this.appendOutput = false;
|
||||
break;
|
||||
default:
|
||||
logger.warn(`${this.id}: custom output-modes are currently not implemented`);
|
||||
}
|
||||
}
|
||||
|
||||
// subclasses should overwrite this method to define custom logic
|
||||
// before code gets evaluated
|
||||
preEvaluate(): void {
|
||||
return null;
|
||||
}
|
||||
|
||||
// subclasses should overwrite this method to define custom logic
|
||||
// after code has been evaluated
|
||||
postEvaluate(): void {
|
||||
return null;
|
||||
}
|
||||
|
||||
checkId() {
|
||||
ensureUniqueId(this);
|
||||
}
|
||||
|
||||
getSourceFromElement(): string {
|
||||
return '';
|
||||
}
|
||||
|
||||
async getSourceFromFile(s: string): Promise<string> {
|
||||
const response = await fetch(s);
|
||||
this.code = await response.text();
|
||||
return this.code;
|
||||
}
|
||||
|
||||
async evaluate(runtime: Runtime): Promise<void> {
|
||||
this.preEvaluate();
|
||||
|
||||
let source: string;
|
||||
try {
|
||||
source = this.source ? await this.getSourceFromFile(this.source)
|
||||
: this.getSourceFromElement();
|
||||
|
||||
// XXX we should use pyExec and let it display the errors
|
||||
await pyExecDontHandleErrors(runtime, source, this);
|
||||
|
||||
removeClasses(this.errorElement, ['py-error']);
|
||||
this.postEvaluate();
|
||||
} catch (err) {
|
||||
logger.error(err);
|
||||
try{
|
||||
if (Element === undefined) {
|
||||
Element = <Element>runtime.globals.get('Element');
|
||||
}
|
||||
const out = Element(this.errorElement.id);
|
||||
|
||||
addClasses(this.errorElement, ['py-error']);
|
||||
out.write.callKwargs(err.toString(), { append: this.appendOutput });
|
||||
if (this.errorElement.children.length === 0){
|
||||
this.errorElement.setAttribute('error', '');
|
||||
}else{
|
||||
this.errorElement.children[this.errorElement.children.length - 1].setAttribute('error', '');
|
||||
}
|
||||
|
||||
this.errorElement.hidden = false;
|
||||
this.errorElement.style.display = 'block';
|
||||
this.errorElement.style.visibility = 'visible';
|
||||
} catch (internalErr){
|
||||
logger.error("Unnable to write error to error element in page.")
|
||||
}
|
||||
|
||||
}
|
||||
} // end evaluate
|
||||
}
|
||||
@@ -5,161 +5,201 @@ import { Compartment, StateCommand } from '@codemirror/state';
|
||||
import { keymap } from '@codemirror/view';
|
||||
import { defaultKeymap } from '@codemirror/commands';
|
||||
import { oneDarkTheme } from '@codemirror/theme-one-dark';
|
||||
import { getAttribute, addClasses, htmlDecode } from '../utils';
|
||||
import { BaseEvalElement } from './base';
|
||||
|
||||
import { getAttribute, ensureUniqueId, htmlDecode } from '../utils';
|
||||
import type { Runtime } from '../runtime';
|
||||
import { pyExec, pyDisplay } from '../pyexec';
|
||||
import { getLogger } from '../logger';
|
||||
|
||||
const logger = getLogger('py-repl');
|
||||
|
||||
export function make_PyRepl(runtime: Runtime) {
|
||||
|
||||
function createCmdHandler(el: PyRepl): StateCommand {
|
||||
// Creates a codemirror cmd handler that calls the el.evaluate when an event
|
||||
// triggers that specific cmd
|
||||
return () => {
|
||||
void el.evaluate(runtime);
|
||||
return true;
|
||||
};
|
||||
}
|
||||
/* High level structure of py-repl DOM, and the corresponding JS names.
|
||||
|
||||
let initialTheme: string;
|
||||
function getEditorTheme(el: BaseEvalElement): string {
|
||||
const theme = getAttribute(el, 'theme');
|
||||
if( !initialTheme && theme){
|
||||
initialTheme = theme;
|
||||
}
|
||||
return initialTheme;
|
||||
}
|
||||
|
||||
class PyRepl extends BaseEvalElement {
|
||||
this <py-repl>
|
||||
shadow #shadow-root
|
||||
<slot></slot>
|
||||
boxDiv <div class='py-repl-box'>
|
||||
editorLabel <label>...</label>
|
||||
editorDiv <div class="py-repl-editor"></div>
|
||||
outDiv <div class="py-repl-output"></div>
|
||||
</div>
|
||||
</py-repl>
|
||||
*/
|
||||
class PyRepl extends HTMLElement {
|
||||
shadow: ShadowRoot;
|
||||
outDiv: HTMLElement;
|
||||
editor: EditorView;
|
||||
editorNode: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// add an extra div where we can attach the codemirror editor
|
||||
this.editorNode = document.createElement('div');
|
||||
addClasses(this.editorNode, ['editor-box']);
|
||||
this.shadow.appendChild(this.wrapper);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.checkId();
|
||||
this.code = htmlDecode(this.innerHTML);
|
||||
this.innerHTML = '';
|
||||
const languageConf = new Compartment();
|
||||
ensureUniqueId(this);
|
||||
this.shadow = this.attachShadow({ mode: 'open' });
|
||||
const slot = document.createElement('slot');
|
||||
this.shadow.appendChild(slot);
|
||||
|
||||
if (!this.hasAttribute('exec-id')) {
|
||||
this.setAttribute('exec-id', '1');
|
||||
}
|
||||
if (!this.hasAttribute('root')) {
|
||||
this.setAttribute('root', this.id);
|
||||
}
|
||||
|
||||
const pySrc = htmlDecode(this.innerHTML).trim();
|
||||
this.innerHTML = '';
|
||||
this.editor = this.makeEditor(pySrc);
|
||||
const boxDiv = this.makeBoxDiv();
|
||||
this.appendChild(boxDiv);
|
||||
this.editor.focus();
|
||||
logger.debug(`element ${this.id} successfully connected`);
|
||||
}
|
||||
|
||||
/** Create and configure the codemirror editor
|
||||
*/
|
||||
makeEditor(pySrc: string): EditorView {
|
||||
const languageConf = new Compartment();
|
||||
const extensions = [
|
||||
indentUnit.of(" "),
|
||||
basicSetup,
|
||||
languageConf.of(python()),
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
{ key: 'Ctrl-Enter', run: createCmdHandler(this) },
|
||||
{ key: 'Shift-Enter', run: createCmdHandler(this) },
|
||||
{ key: 'Ctrl-Enter', run: this.execute.bind(this) },
|
||||
{ key: 'Shift-Enter', run: this.execute.bind(this) },
|
||||
]),
|
||||
];
|
||||
|
||||
if (getEditorTheme(this) === 'dark') {
|
||||
if (getAttribute(this, 'theme') === 'dark') {
|
||||
extensions.push(oneDarkTheme);
|
||||
}
|
||||
|
||||
this.editor = new EditorView({
|
||||
doc: this.code.trim(),
|
||||
return new EditorView({
|
||||
doc: pySrc,
|
||||
extensions,
|
||||
parent: this.editorNode,
|
||||
});
|
||||
}
|
||||
|
||||
const mainDiv = document.createElement('div');
|
||||
addClasses(mainDiv, ['py-repl-box']);
|
||||
// ******** main entry point for py-repl DOM building **********
|
||||
//
|
||||
// The following functions are written in a top-down, depth-first
|
||||
// order (so that the order of code roughly matches the order of
|
||||
// execution)
|
||||
makeBoxDiv(): HTMLElement {
|
||||
const boxDiv = document.createElement('div');
|
||||
boxDiv.className = 'py-repl-box';
|
||||
|
||||
const editorDiv = this.makeEditorDiv();
|
||||
const editorLabel = this.makeLabel('Python Script Area', editorDiv);
|
||||
this.outDiv = this.makeOutDiv();
|
||||
|
||||
boxDiv.append(editorLabel);
|
||||
boxDiv.appendChild(editorDiv);
|
||||
boxDiv.appendChild(this.outDiv);
|
||||
|
||||
return boxDiv;
|
||||
}
|
||||
|
||||
makeEditorDiv(): HTMLElement {
|
||||
const editorDiv = document.createElement('div');
|
||||
editorDiv.id = 'code-editor';
|
||||
editorDiv.className = 'py-repl-editor';
|
||||
editorDiv.appendChild(this.editor.dom);
|
||||
|
||||
const runButton = this.makeRunButton();
|
||||
const runLabel = this.makeLabel('Python Script Run Button', runButton);
|
||||
editorDiv.appendChild(runLabel);
|
||||
editorDiv.appendChild(runButton);
|
||||
|
||||
return editorDiv;
|
||||
}
|
||||
|
||||
makeLabel(text: string, elementFor: HTMLElement): HTMLElement {
|
||||
ensureUniqueId(elementFor);
|
||||
const lbl = document.createElement('label');
|
||||
lbl.innerHTML = text;
|
||||
lbl.htmlFor = elementFor.id;
|
||||
// XXX this should be a CSS class
|
||||
// Styles that we use to hide the labels whilst also keeping it accessible for screen readers
|
||||
const labelStyle = 'overflow:hidden; display:block; width:1px; height:1px';
|
||||
lbl.setAttribute('style', labelStyle);
|
||||
return lbl;
|
||||
}
|
||||
|
||||
// Code editor Label
|
||||
this.editorNode.id = 'code-editor';
|
||||
const editorLabel = document.createElement('label');
|
||||
editorLabel.innerHTML = 'Python Script Area';
|
||||
editorLabel.setAttribute('style', labelStyle);
|
||||
editorLabel.htmlFor = 'code-editor';
|
||||
|
||||
mainDiv.append(editorLabel);
|
||||
|
||||
// add Editor to main PyScript div
|
||||
mainDiv.appendChild(this.editorNode);
|
||||
|
||||
// Play Button
|
||||
this.btnRun = document.createElement('button');
|
||||
this.btnRun.id = 'btnRun';
|
||||
this.btnRun.innerHTML =
|
||||
makeRunButton(): HTMLElement {
|
||||
const runButton = document.createElement('button');
|
||||
runButton.id = 'runButton';
|
||||
runButton.className = 'absolute py-repl-run-button';
|
||||
// XXX I'm sure there is a better way to embed svn into typescript
|
||||
runButton.innerHTML =
|
||||
'<svg id="" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
|
||||
addClasses(this.btnRun, ['absolute', 'repl-play-button']);
|
||||
runButton.addEventListener('click', this.execute.bind(this));
|
||||
return runButton;
|
||||
}
|
||||
|
||||
// Play Button Label
|
||||
const btnLabel = document.createElement('label');
|
||||
btnLabel.innerHTML = 'Python Script Run Button';
|
||||
btnLabel.setAttribute('style', labelStyle);
|
||||
btnLabel.htmlFor = 'btnRun';
|
||||
makeOutDiv(): HTMLElement {
|
||||
const outDiv = document.createElement('div');
|
||||
outDiv.className = 'py-repl-output';
|
||||
outDiv.id = this.id + '-' + this.getAttribute('exec-id');
|
||||
return outDiv;
|
||||
}
|
||||
|
||||
this.editorNode.appendChild(btnLabel);
|
||||
this.editorNode.appendChild(this.btnRun);
|
||||
// ********************* execution logic *********************
|
||||
|
||||
this.btnRun.addEventListener('click', () => {
|
||||
void this.evaluate(runtime);
|
||||
});
|
||||
/** Execute the python code written in the editor, and automatically
|
||||
* display() the last evaluated expression
|
||||
*/
|
||||
async execute(): Promise<void> {
|
||||
const pySrc = this.getPySrc();
|
||||
|
||||
if (!this.id) {
|
||||
logger.warn(
|
||||
"WARNING: <py-repl> defined without an id. <py-repl> should always have an id, otherwise multiple <py-repl> in the same page will not work!"
|
||||
);
|
||||
// determine the output element
|
||||
const outEl = this.getOutputElement();
|
||||
if (outEl === undefined) {
|
||||
// this happens if we specified output="..." but we couldn't
|
||||
// find the ID. We already displayed an error message inside
|
||||
// getOutputElement, stop the execution.
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.hasAttribute('exec-id')) {
|
||||
this.setAttribute('exec-id', '1');
|
||||
}
|
||||
// clear the old output before executing the new code
|
||||
outEl.innerHTML = '';
|
||||
|
||||
if (!this.hasAttribute('root')) {
|
||||
this.setAttribute('root', this.id);
|
||||
}
|
||||
// execute the python code
|
||||
const pyResult = await pyExec(runtime, pySrc, outEl);
|
||||
|
||||
const output = getAttribute(this, "output")
|
||||
if (output) {
|
||||
const el = document.getElementById(output);
|
||||
if(el){
|
||||
this.errorElement = el;
|
||||
this.outputElement = el
|
||||
// display the value of the last evaluated expression (REPL-style)
|
||||
if (pyResult !== undefined) {
|
||||
pyDisplay(runtime, pyResult, { target: outEl.id });
|
||||
}
|
||||
}
|
||||
|
||||
getPySrc(): string {
|
||||
return this.editor.state.doc.toString();
|
||||
}
|
||||
|
||||
getOutputElement(): HTMLElement {
|
||||
const outputID = getAttribute(this, "output");
|
||||
if (outputID !== null) {
|
||||
const el = document.getElementById(outputID);
|
||||
if (el === null) {
|
||||
const err = `py-repl ERROR: cannot find the output element #${outputID} in the DOM`
|
||||
this.outDiv.innerText = err;
|
||||
return undefined;
|
||||
}
|
||||
} else {
|
||||
// to create a new output div to output to
|
||||
this.outputElement = document.createElement('div');
|
||||
this.outputElement.classList.add('output');
|
||||
this.outputElement.hidden = true;
|
||||
this.outputElement.id = this.id + '-' + this.getAttribute('exec-id');
|
||||
|
||||
// add the output div id if there's not output pre-defined
|
||||
mainDiv.appendChild(this.outputElement);
|
||||
|
||||
this.errorElement = this.outputElement;
|
||||
return el;
|
||||
}
|
||||
|
||||
this.appendChild(mainDiv);
|
||||
this.editor.focus();
|
||||
logger.debug(`element ${this.id} successfully connected`);
|
||||
}
|
||||
|
||||
preEvaluate(): void {
|
||||
this.setOutputMode("replace");
|
||||
if(!this.appendOutput) {
|
||||
this.outputElement.innerHTML = '';
|
||||
else {
|
||||
return this.outDiv;
|
||||
}
|
||||
}
|
||||
|
||||
postEvaluate(): void {
|
||||
this.outputElement.hidden = false;
|
||||
this.outputElement.style.display = 'block';
|
||||
|
||||
// XXX the autogenerate logic is very messy. We should redo it, and it
|
||||
// should be the default.
|
||||
autogenerateMaybe(): void {
|
||||
if (this.hasAttribute('auto-generate')) {
|
||||
const allPyRepls = document.querySelectorAll(`py-repl[root='${this.getAttribute('root')}'][exec-id]`);
|
||||
const lastRepl = allPyRepls[allPyRepls.length - 1];
|
||||
@@ -196,9 +236,6 @@ export function make_PyRepl(runtime: Runtime) {
|
||||
}
|
||||
}
|
||||
|
||||
getSourceFromElement(): string {
|
||||
return this.editor.state.doc.toString();
|
||||
}
|
||||
}
|
||||
|
||||
return PyRepl
|
||||
|
||||
@@ -12,7 +12,7 @@ export async function pyExec(runtime: Runtime, pysrc: string, outElem: HTMLEleme
|
||||
set_current_display_target(outElem.id);
|
||||
try {
|
||||
try {
|
||||
await runtime.run(pysrc);
|
||||
return await runtime.run(pysrc);
|
||||
}
|
||||
catch (err) {
|
||||
// XXX: currently we display exceptions in the same position as
|
||||
@@ -27,6 +27,21 @@ export async function pyExec(runtime: Runtime, pysrc: string, outElem: HTMLEleme
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Javascript API to call the python display() function
|
||||
*
|
||||
* Expected usage:
|
||||
* pyDisplay(runtime, obj);
|
||||
* pyDisplay(runtime, obj, { target: targetID });
|
||||
*/
|
||||
export function pyDisplay(runtime: Runtime, obj: any, kwargs: object) {
|
||||
const display = runtime.globals.get('display');
|
||||
if (kwargs === undefined)
|
||||
display(obj);
|
||||
else {
|
||||
display.callKwargs(obj, kwargs);
|
||||
}
|
||||
}
|
||||
|
||||
function displayPyException(err: any, errElem: HTMLElement) {
|
||||
//addClasses(errElem, ['py-error'])
|
||||
@@ -47,19 +62,3 @@ function displayPyException(err: any, errElem: HTMLElement) {
|
||||
}
|
||||
errElem.appendChild(pre);
|
||||
}
|
||||
|
||||
|
||||
// XXX this is used by base.ts but should be removed once we complete the refactoring
|
||||
export async function pyExecDontHandleErrors(runtime: Runtime, pysrc: string, out: HTMLElement)
|
||||
{
|
||||
// this is the python function defined in pyscript.py
|
||||
const set_current_display_target = runtime.globals.get('set_current_display_target');
|
||||
ensureUniqueId(out);
|
||||
set_current_display_target(out.id);
|
||||
try {
|
||||
await runtime.run(pysrc);
|
||||
}
|
||||
finally {
|
||||
set_current_display_target(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,7 +131,7 @@ color: #0f172a;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-box {
|
||||
.py-repl-editor {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
@@ -158,7 +158,7 @@ color: #0f172a;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repl-play-button {
|
||||
.py-repl-run-button {
|
||||
opacity: 0;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
@@ -192,7 +192,7 @@ color: #0f172a;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.repl-play-button:hover {
|
||||
.py-repl-run-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -55,10 +55,16 @@ def pytest_addoption(parser):
|
||||
parser.addoption(
|
||||
"--dev",
|
||||
action="store_true",
|
||||
help="Automatically open a devtools panel. Implies --headed",
|
||||
help="Automatically open a devtools panel. Implies --headed and --no-fake-server",
|
||||
)
|
||||
|
||||
|
||||
def pytest_configure(config):
|
||||
if config.option.dev:
|
||||
config.option.headed = True
|
||||
config.option.no_fake_server = True
|
||||
|
||||
|
||||
@pytest.fixture(scope="session")
|
||||
def browser_type_launch_args(request):
|
||||
"""
|
||||
@@ -68,8 +74,6 @@ def browser_type_launch_args(request):
|
||||
NOTE: this has been tested with pytest-playwright==0.3.0. It might break
|
||||
with newer versions of it.
|
||||
"""
|
||||
if request.config.option.dev:
|
||||
request.config.option.headed = True
|
||||
# this calls the "original" fixture defined by pytest_playwright.py
|
||||
launch_options = request.getfixturevalue("browser_type_launch_args")
|
||||
if request.config.option.dev:
|
||||
|
||||
@@ -1,115 +1,231 @@
|
||||
import pytest
|
||||
from playwright.sync_api import expect
|
||||
|
||||
from .support import PyScriptTest
|
||||
|
||||
|
||||
class TestPyRepl(PyScriptTest):
|
||||
def _replace(self, py_repl, newcode):
|
||||
"""
|
||||
Clear the editor and write new code in it.
|
||||
WARNING: this assumes that the textbox has already the focus
|
||||
"""
|
||||
# clear the editor, write new code
|
||||
self.page.keyboard.press("Control+A")
|
||||
self.page.keyboard.press("Backspace")
|
||||
self.page.keyboard.type(newcode)
|
||||
|
||||
def test_repl_loads(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl></py-repl>
|
||||
"""
|
||||
)
|
||||
|
||||
py_repl = self.page.query_selector("py-repl")
|
||||
assert py_repl
|
||||
assert "Python" in py_repl.inner_text()
|
||||
|
||||
def test_repl_runs_on_button_press(self):
|
||||
def test_execute_preloaded_source(self):
|
||||
"""
|
||||
Unfortunately it tests two things at once, but it's impossible to write a
|
||||
smaller test. I think this is the most basic test that we can write.
|
||||
|
||||
We test that:
|
||||
1. the source code that we put in the tag is loaded inside the editor
|
||||
2. clicking the button executes it
|
||||
"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl>
|
||||
print('hello from py-repl')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
py_repl = self.page.locator("py-repl")
|
||||
src = py_repl.inner_text()
|
||||
assert "print('hello from py-repl')" in src
|
||||
py_repl.locator("button").click()
|
||||
assert self.console.log.lines[-1] == "hello from py-repl"
|
||||
|
||||
self.page.locator("py-repl").type('display("hello")')
|
||||
|
||||
# We only have one button in the page
|
||||
self.page.locator("button").click()
|
||||
|
||||
# The result gets the id of the repl + n
|
||||
repl_result = self.page.wait_for_selector("#my-repl-2", state="attached")
|
||||
|
||||
assert repl_result.inner_text() == "hello"
|
||||
|
||||
def test_repl_runs_with_shift_enter(self):
|
||||
def test_execute_code_typed_by_the_user(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl></py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.locator("py-repl").type('display("hello")')
|
||||
py_repl = self.page.locator("py-repl")
|
||||
py_repl.type('print("hello")')
|
||||
py_repl.locator("button").click()
|
||||
assert self.console.log.lines[-1] == "hello"
|
||||
|
||||
# Confirm that we get a result by using the keys shortcut
|
||||
def test_execute_on_shift_enter(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl>
|
||||
print("hello world")
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
py_repl = self.page.query_selector("#my-repl-2")
|
||||
assert "hello" in py_repl.inner_text()
|
||||
|
||||
def test_repl_console_ouput(self):
|
||||
# when we use locator('button').click() the message appears
|
||||
# immediately, with keyboard.press we need to wait for it. I don't
|
||||
# really know why it has a different behavior, I didn't investigate
|
||||
# further.
|
||||
self.wait_for_console("hello world")
|
||||
|
||||
def test_display(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl>
|
||||
display('hello world')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.locator("py-repl").type("print('apple')")
|
||||
self.page.keyboard.press("Enter")
|
||||
self.page.locator("py-repl").type("console.log('banana')")
|
||||
self.page.locator("button").click()
|
||||
py_repl = self.page.locator("py-repl")
|
||||
py_repl.locator("button").click()
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
assert out_div.inner_text() == "hello world"
|
||||
|
||||
# The result gets the id of the repl + n
|
||||
repl_result = self.page.wait_for_selector("#my-repl-1", state="attached")
|
||||
|
||||
assert repl_result.inner_text() == ""
|
||||
|
||||
def test_repl_error_ouput(self):
|
||||
def test_show_last_expression(self):
|
||||
"""
|
||||
Test that we display() the value of the last expression, as you would
|
||||
expect by a REPL
|
||||
"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl>
|
||||
42
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.locator("py-repl").type("this is an error")
|
||||
self.page.locator("button").click()
|
||||
expect(self.page.locator(".py-error")).to_be_visible()
|
||||
py_repl = self.page.locator("py-repl")
|
||||
py_repl.locator("button").click()
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
assert out_div.inner_text() == "42"
|
||||
|
||||
# console errors are observable on the headed instance
|
||||
# but is just not possible to access them using the self object
|
||||
@pytest.mark.xfail(reason="Cannot access console errors")
|
||||
def test_repl_error_ouput_console(self):
|
||||
def test_run_clears_previous_output(self):
|
||||
"""
|
||||
Check that we clear the previous output of the cell before executing it
|
||||
again
|
||||
"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl>
|
||||
display('hello world')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.locator("py-repl").type("this is an error")
|
||||
self.page.locator("button").click()
|
||||
|
||||
def test_repl_error_and_fail_moving_forward_ouput(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.locator("py-repl").type("this is an error")
|
||||
self.page.locator("button").click()
|
||||
expect(self.page.locator(".py-error")).to_be_visible()
|
||||
py_repl = self.page.locator("py-repl")
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
expect(self.page.locator(".py-error")).to_be_visible()
|
||||
assert out_div.inner_text() == "hello world"
|
||||
#
|
||||
# clear the editor, write new code, execute
|
||||
self._replace(py_repl, "display('another output')")
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
assert out_div.inner_text() == "another output"
|
||||
|
||||
# this tests the fact that a new error div should be created once there's
|
||||
# an error but also that it should disappear automatically once the error
|
||||
# is fixed
|
||||
def test_repl_show_error_fix_error_check_for_ouput(self):
|
||||
def test_python_exception(self):
|
||||
"""
|
||||
See also test01_basic::test_python_exception, since it's very similar
|
||||
"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
<py-repl>
|
||||
raise Exception('this is an error')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
self.page.locator("py-repl").type("d")
|
||||
py_repl = self.page.locator("py-repl")
|
||||
py_repl.locator("button").click()
|
||||
#
|
||||
# check that we sent the traceback to the console
|
||||
tb_lines = self.console.error.lines[-1].splitlines()
|
||||
assert tb_lines[0] == "[pyexec] Python exception:"
|
||||
assert tb_lines[1] == "Traceback (most recent call last):"
|
||||
assert tb_lines[-1] == "Exception: this is an error"
|
||||
#
|
||||
# check that we show the traceback in the page
|
||||
err_pre = py_repl.locator("div.py-repl-output > pre.py-error")
|
||||
tb_lines = err_pre.inner_text().splitlines()
|
||||
assert tb_lines[0] == "Traceback (most recent call last):"
|
||||
assert tb_lines[-1] == "Exception: this is an error"
|
||||
|
||||
def test_python_exception_after_previous_output(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl>
|
||||
display('hello world')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
py_repl = self.page.locator("py-repl")
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
expect(self.page.locator(".py-error")).to_be_visible()
|
||||
self.page.keyboard.press("Backspace")
|
||||
self.page.locator("py-repl").type("display('ok')")
|
||||
assert out_div.inner_text() == "hello world"
|
||||
#
|
||||
# clear the editor, write new code, execute
|
||||
self._replace(py_repl, "0/0")
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
repl_result = self.page.wait_for_selector("#my-repl-2", state="attached")
|
||||
assert repl_result.inner_text() == "ok"
|
||||
assert "hello world" not in out_div.inner_text()
|
||||
assert "ZeroDivisionError" in out_div.inner_text()
|
||||
|
||||
def test_hide_previous_error_after_successful_run(self):
|
||||
"""
|
||||
this tests the fact that a new error div should be created once there's an
|
||||
error but also that it should disappear automatically once the error
|
||||
is fixed
|
||||
"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl>
|
||||
raise Exception('this is an error')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
py_repl = self.page.locator("py-repl")
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
assert "this is an error" in out_div.inner_text()
|
||||
#
|
||||
self._replace(py_repl, "display('hello')")
|
||||
self.page.keyboard.press("Shift+Enter")
|
||||
assert out_div.inner_text() == "hello"
|
||||
|
||||
def test_output_attribute(self):
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl output="mydiv">
|
||||
display('hello world')
|
||||
</py-repl>
|
||||
<hr>
|
||||
<div id="mydiv"></div>
|
||||
"""
|
||||
)
|
||||
py_repl = self.page.locator("py-repl")
|
||||
py_repl.locator("button").click()
|
||||
#
|
||||
# check that we did NOT write to py-repl-output
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
assert out_div.inner_text() == ""
|
||||
# check that we are using mydiv instead
|
||||
mydiv = self.page.locator("#mydiv")
|
||||
assert mydiv.inner_text() == "hello world"
|
||||
|
||||
def test_output_attribute_does_not_exist(self):
|
||||
"""
|
||||
If we try to use an attribute which doesn't exist, we display an error
|
||||
instead
|
||||
"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-repl output="I-dont-exist">
|
||||
print('I will not be executed')
|
||||
</py-repl>
|
||||
"""
|
||||
)
|
||||
py_repl = self.page.locator("py-repl")
|
||||
py_repl.locator("button").click()
|
||||
#
|
||||
out_div = py_repl.locator("div.py-repl-output")
|
||||
msg = "py-repl ERROR: cannot find the output element #I-dont-exist in the DOM"
|
||||
assert out_div.inner_text() == msg
|
||||
assert "I will not be executed" not in self.console.log.text
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
import { jest } from '@jest/globals';
|
||||
|
||||
import { BaseEvalElement } from '../../src/components/base';
|
||||
|
||||
customElements.define('py-base', BaseEvalElement);
|
||||
|
||||
describe('BaseEvalElement', () => {
|
||||
let instance: BaseEvalElement;
|
||||
|
||||
beforeEach(() => {
|
||||
instance = new BaseEvalElement();
|
||||
});
|
||||
|
||||
it('BaseEvalElement instantiates correctly', async () => {
|
||||
expect(instance).toBeInstanceOf(BaseEvalElement);
|
||||
});
|
||||
|
||||
it('setOutputMode updates appendOutput property correctly', async () => {
|
||||
// Confirm that the default mode is 'append'
|
||||
expect(instance.appendOutput).toBe(true);
|
||||
|
||||
instance.setAttribute('output-mode', 'replace');
|
||||
instance.setOutputMode();
|
||||
|
||||
expect(instance.appendOutput).toBe(false);
|
||||
|
||||
// Using a custom output-mode shouldn't update mode
|
||||
instance.setAttribute('output-mode', 'custom');
|
||||
instance.setOutputMode();
|
||||
expect(instance.appendOutput).toBe(false);
|
||||
});
|
||||
|
||||
it('preEvaluate returns null since subclasses should overwrite it', async () => {
|
||||
const preEvaluateResult = instance.preEvaluate();
|
||||
expect(preEvaluateResult).toBeNull();
|
||||
});
|
||||
|
||||
it('postEvaluate returns null since subclasses should overwrite it', async () => {
|
||||
const preEvaluateResult = instance.postEvaluate();
|
||||
expect(preEvaluateResult).toBeNull();
|
||||
});
|
||||
|
||||
it('checkId generates id if none exists', async () => {
|
||||
// Test default value
|
||||
expect(instance.id).toBe('');
|
||||
|
||||
instance.checkId();
|
||||
|
||||
// expect id is similar to py-78c3e696-a74f-df40-f82c-535f12c484ae
|
||||
expect(instance.id).toMatch(/py-(\w+-){1,4}\w+/);
|
||||
});
|
||||
|
||||
it('getSourceFromElement returns empty string', async () => {
|
||||
const returnedGetSourceFromElement = instance.getSourceFromElement();
|
||||
expect(returnedGetSourceFromElement).toBe('');
|
||||
});
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
import 'jest';
|
||||
import type { Runtime } from "../../src/runtime"
|
||||
import { FakeRuntime } from "./fakeruntime"
|
||||
import { make_PyRepl } from '../../src/components/pyrepl';
|
||||
|
||||
const runtime: Runtime = new FakeRuntime();
|
||||
const PyRepl = make_PyRepl(runtime);
|
||||
customElements.define('py-repl', PyRepl);
|
||||
|
||||
describe('PyRepl', () => {
|
||||
let instance;
|
||||
beforeEach(() => {
|
||||
instance = new PyRepl();
|
||||
});
|
||||
|
||||
it('should get the current Repl to just instantiate', async () => {
|
||||
expect(instance).toBeInstanceOf(PyRepl);
|
||||
});
|
||||
|
||||
it('confirm that codemirror editor is available', async () => {
|
||||
// We are assuming that if editorNode has the 'editor-box' class
|
||||
// then the div was created properly.
|
||||
expect(instance.editorNode.getAttribute('class')).toBe("editor-box")
|
||||
})
|
||||
|
||||
it("connectedCallback gets or sets new id", async () => {
|
||||
expect(instance.id).toBe("")
|
||||
|
||||
instance.connectedCallback()
|
||||
|
||||
const instanceId = instance.id;
|
||||
// id should be similar to py-4850c8c3-d70d-d9e0-03c1-3cfeb0bcec0d
|
||||
expect(instanceId).toMatch(/py-(\w+-){1,4}\w+/);
|
||||
|
||||
// calling checkId directly should return the same id
|
||||
instance.checkId();
|
||||
expect(instance.id).toEqual(instanceId);
|
||||
})
|
||||
|
||||
it('confirm that calling connectedCallback renders the expected elements', async () => {
|
||||
expect(instance.innerHTML).toBe("")
|
||||
instance.innerHTML = "<p>Hello</p>"
|
||||
instance.connectedCallback()
|
||||
|
||||
expect(instance.code).toBe("<p>Hello</p>")
|
||||
expect(instance.editorNode.id).toBe("code-editor")
|
||||
|
||||
// Just check that the button was created
|
||||
expect(instance.btnRun.getAttribute("class")).toBe("absolute repl-play-button")
|
||||
const editorNode = instance.editorNode.innerHTML
|
||||
expect(editorNode).toContain("Python Script Run Button")
|
||||
// Confirm that our innerHTML is set as well
|
||||
expect(editorNode).toContain("Hello")
|
||||
})
|
||||
});
|
||||
Reference in New Issue
Block a user