You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h2class="anchored" data-anchor-id="widget-javascript-modification-and-bundling">Widget JavaScript modification and bundling</h2>
309
316
<p>Each time the widget JavaScript or CSS code is modified in the <code>js/</code> or <code>css/</code> directories, it must be bundled with one of the following commands in <code>pyobsplot</code>:</p>
310
-
<divclass="sourceCode" id="cb3"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb3-1"><ahref="#cb3-1" aria-hidden="true" tabindex="-1"></a><spanclass="co"># Bundle only once</span></span>
317
+
<divclass="code-copy-outer-scaffold"><divclass="sourceCode" id="cb3"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb3-1"><ahref="#cb3-1" aria-hidden="true" tabindex="-1"></a><spanclass="co"># Bundle only once</span></span>
311
318
<spanid="cb3-2"><ahref="#cb3-2" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run bundle</span>
312
319
<spanid="cb3-3"><ahref="#cb3-3" aria-hidden="true" tabindex="-1"></a><spanclass="co"># Bundle and watch for code change</span></span>
313
-
<spanid="cb3-4"><ahref="#cb3-4" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run watch</span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
320
+
<spanid="cb3-4"><ahref="#cb3-4" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run watch</span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
314
321
<p>The result is put into <code>src/pyobsplot/static</code>.</p>
<p><code>pyobsplot</code> comes with three types of tests : Python test, JavaScript tests and Visual regression tests.</p>
319
326
<p>To run Python tests, use:</p>
320
-
<divclass="sourceCode" id="cb4"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb4-1"><ahref="#cb4-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run test</span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
327
+
<divclass="code-copy-outer-scaffold"><divclass="sourceCode" id="cb4"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb4-1"><ahref="#cb4-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run test</span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
321
328
<p>To run JavaScript tests, use:</p>
322
-
<divclass="sourceCode" id="cb5"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb5-1"><ahref="#cb5-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run test <spanclass="at">--workspaces</span></span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
329
+
<divclass="code-copy-outer-scaffold"><divclass="sourceCode" id="cb5"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb5-1"><ahref="#cb5-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run test <spanclass="at">--workspaces</span></span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
323
330
<p>Visual regression tests allow to test if generated plots stay the same. They use the <ahref="https://github.com/jupyterlab/jupyterlab/tree/master/galata">galata</a> framework. To run them you first have to start a specific Jupyter instance with:</p>
324
-
<divclass="sourceCode" id="cb6"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb6-1"><ahref="#cb6-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run uistart</span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
331
+
<divclass="code-copy-outer-scaffold"><divclass="sourceCode" id="cb6"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb6-1"><ahref="#cb6-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run uistart</span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
325
332
<p>If you use visual regression tests for the first time, you have to generate reference images with:</p>
<spanid="cb7-2"><ahref="#cb7-2" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run uitest:update</span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
<spanid="cb7-2"><ahref="#cb7-2" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run uitest:update</span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
328
335
<p>After that, you can test that currently generated images are the same as the reference one with:</p>
329
-
<divclass="sourceCode" id="cb8"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb8-1"><ahref="#cb8-1" aria-hidden="true" tabindex="-1"></a><spanclass="co"># Compare with reference images</span></span>
330
-
<spanid="cb8-2"><ahref="#cb8-2" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run uitest</span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
336
+
<divclass="code-copy-outer-scaffold"><divclass="sourceCode" id="cb8"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb8-1"><ahref="#cb8-1" aria-hidden="true" tabindex="-1"></a><spanclass="co"># Compare with reference images</span></span>
337
+
<spanid="cb8-2"><ahref="#cb8-2" aria-hidden="true" tabindex="-1"></a><spanclass="ex">npm</span> run uitest</span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
<p>If using the <code>widget</code> renderer, debug output will be displayed in JavaScript console. With the <code>jsdom</code> renderer, it will be displayed directly in the notebook.</p>
<divclass="sourceCode" id="cb10"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb10-1"><ahref="#cb10-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">uv</span> run quarto render doc/</span></code><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></pre></div>
351
+
<divclass="code-copy-outer-scaffold"><divclass="sourceCode" id="cb10"><preclass="sourceCode sh code-with-copy"><codeclass="sourceCode bash"><spanid="cb10-1"><ahref="#cb10-1" aria-hidden="true" tabindex="-1"></a><spanclass="ex">uv</span> run quarto render doc/</span></code></pre></div><buttontitle="Copy to Clipboard" class="code-copy-button"><iclass="bi"></i></button></div>
0 commit comments