Fix running tests and lints in notebook for new pytest-html

.gitignore

@@ -176,3 +176,6 @@ junit.xml
 examples/_*
 *_test.py
 *_test.html
+
+nbcelltests/labextension/*.tgz
+nbcelltests/labextension

README.md

@@ -3,7 +3,7 @@
 
 Cell-by-cell testing for production Jupyter notebooks in JupyterLab
 
-[![Build Status](https://github.com/jpmorganchase/nbcelltests/workflows/Build%20Status/badge.svg?branch=main)](https://github.com/jpmorganchase/nbcelltests/actions?query=workflow%3A%22Build+Status%22)
+[![Build Status](https://github.com/jpmorganchase/nbcelltests/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/jpmorganchase/nbcelltests/actions?query=workflow%3A%22Build+Status%22)
 [![codecov](https://codecov.io/gh/jpmorganchase/nbcelltests/branch/main/graph/badge.svg)](https://codecov.io/gh/jpmorganchase/nbcelltests)
 [![PyPI](https://img.shields.io/pypi/l/nbcelltests.svg)](https://pypi.python.org/pypi/nbcelltests)
 [![PyPI](https://img.shields.io/pypi/v/nbcelltests.svg)](https://pypi.python.org/pypi/nbcelltests)

examples/Example.ipynb

@@ -2,13 +2,7 @@
  "cells": [
   {
    "cell_type": "markdown",
-   "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
-   },
+   "metadata": {},
    "source": [
     "# Test1"
    ]
@@ -17,32 +11,29 @@
    "cell_type": "code",
    "execution_count": 1,
    "metadata": {
-    "celltests": [
-     "# Use %cell to mark where the cell should be inserted, or add a line comment \"# no %cell\" to deliberately skip the cell\n",
-     "%cell\n",
+    "tests": [
+     "from mock import patch\n",
+     "import pandas as pd\n",
+     "with patch('superstore.getTimeSeries') as mock:\n",
+     "    mock.return_value = pd.DataFrame([{'1': 1, '2': 2}])\n",
+     "    %cell\n",
      "\n"
-    ],
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
+    ]
    },
    "outputs": [],
    "source": [
-    "import cufflinks as cf\n",
-    "df = cf.datagen.lines()"
+    "from superstore import getTimeSeries\n",
+    "df = getTimeSeries()"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": 2,
    "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
+    "tests": [
+     "%cell\n",
+     "assert df.equals(pd.DataFrame([{'1': 1, '2': 2}]))\n"
+    ]
    },
    "outputs": [
     {
@@ -139,13 +130,7 @@
   {
    "cell_type": "code",
    "execution_count": 3,
-   "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
-   },
+   "metadata": {},
    "outputs": [],
    "source": [
     "df['date'] = df.index"
@@ -155,11 +140,10 @@
    "cell_type": "code",
    "execution_count": 4,
    "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
+    "tests": [
+     "with patch('pandas.DataFrame.head') as mock:\n",
+     "    %cell\n"
+    ]
    },
    "outputs": [
     {
@@ -269,29 +253,16 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
-   },
+   "metadata": {},
    "outputs": [],
    "source": [
-    "\n",
     "test3"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": 2,
-   "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
-    },
-    "tags": []
-   },
+   "metadata": {},
    "outputs": [
     {
      "ename": "KeyboardInterrupt",

js/src/run.js

@@ -28,21 +28,27 @@ export async function runCellTests(app, docManager) {
   }
 
   const settings = ServerConnection.makeSettings();
-  const res = await ServerConnection.makeRequest(`${settings.baseUrl}celltests/test/run`, {method: "post", body: {path, model}}, settings);
+  const res = await ServerConnection.makeRequest(`${settings.baseUrl}celltests/test/run`, {method: "post", body: JSON.stringify({path, model})}, settings);
 
   if (res.ok) {
-    const div = document.createElement("div");
-    div.innerHTML = (await res.json()).test;
-    const body = new Widget({node: div});
+    const iframe = document.createElement("iframe");
+    const html_data = (await res.json()).test;
+    iframe.onload = () => {
+      // write iframe content
+      iframe.contentWindow.document.write(html_data);
+    };
+    const body = new Widget({node: iframe});
 
     const dialog = new Dialog({
       body,
       buttons: [Dialog.okButton({label: "Ok"})],
       title: "Tests run!",
     });
-    dialog.node.lastChild.style.maxHeight = "750px";
-    dialog.node.lastChild.style.maxWidth = "800px";
-    dialog.node.lastChild.style.width = "800px";
+
+    dialog.node.lastChild.style.maxHeight = "1600px";
+    dialog.node.lastChild.style.maxWidth = "2000px";
+    dialog.node.lastChild.style.width = "900px";
+    dialog.node.lastChild.style.height = "900px";
 
     await dialog.launch();
   } else {
@@ -72,7 +78,7 @@ export async function runCellLints(app, docManager) {
   }
 
   const settings = ServerConnection.makeSettings();
-  const res = await ServerConnection.makeRequest(`${settings.baseUrl}celltests/lint/run`, {method: "post", body: {path, model}}, settings);
+  const res = await ServerConnection.makeRequest(`${settings.baseUrl}celltests/lint/run`, {method: "post", body: JSON.stringify({path, model})}, settings);
 
   if (res.ok) {
     const div = document.createElement("div");
@@ -85,9 +91,10 @@ export async function runCellLints(app, docManager) {
       title: "Lints run!",
     });
 
-    dialog.node.lastChild.style.maxHeight = "750px";
-    dialog.node.lastChild.style.maxWidth = "500px";
-    dialog.node.lastChild.style.width = "500px";
+    dialog.node.lastChild.style.maxHeight = "1600px";
+    dialog.node.lastChild.style.maxWidth = "2000px";
+    dialog.node.lastChild.style.width = "600px";
+    dialog.node.lastChild.style.height = "800px";
 
     await dialog.launch();
   } else {

js/src/widget.js

@@ -41,7 +41,6 @@ class ControlsWidget extends BoxPanel {
 
     this.svg = document.createElement("svg");
     this.svg.innerHTML = circleSvg;
-    console.log("check this");
     this.svg = this.svg.firstChild;
 
     const div1 = document.createElement("div");

js/style/index.css

@@ -51,8 +51,9 @@ div.CelltestsControls > div > div {
 div.CelltestsControls > div > button {
     width: 50%;
 }
+
 div.CelltestsControls > div > button:hover {
-    background: var(--jp-layout-color2);
+    background: var(--jp-layout-color3);
 }
 
 div.CelltestsRules > div {