Merge pull request #57 from yacchin1205/fix/duplicated-tabs

Fixed an issue that could cause multiple tabs to be displayed for a cell

.github/workflows/build.yml

@@ -23,23 +23,45 @@ jobs:
       run: |
         set -eux
         jlpm
-        jlpm lint:check
+        jlpm run eslint:check
         python -m pip install .
 
         jupyter labextension list 2>&1 | grep -ie "lc_multi_outputs.*OK"
         python -m jupyterlab.browser_check
 
+        jlpm install
+        cd ./ui-tests
+        jlpm install
+        jlpm playwright install
+        jlpm playwright test
+        cd ..
+
         pip install build
         python -m build --sdist
         cp dist/*.tar.gz myextension.tar.gz
         pip uninstall -y "lc_multi_outputs" jupyterlab
         rm -rf myextension
 
-    - uses: actions/upload-artifact@v2
+        npm pack
+        mv lc_multi_outputs-*.tgz myextension-nodejs.tgz
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: ui-tests/playwright-report/
+        retention-days: 30
+
+    - uses: actions/upload-artifact@v4
       with:
         name: myextension-sdist
         path: myextension.tar.gz
 
+    - uses: actions/upload-artifact@v4
+      with:
+        name: myextension-nodejs
+        path: myextension-nodejs.tgz
+
   test_isolated:
     needs: build
     runs-on: ubuntu-latest
@@ -52,7 +74,7 @@ jobs:
       with:
         python-version: '3.9'
         architecture: 'x64'
-    - uses: actions/download-artifact@v2
+    - uses: actions/download-artifact@v4
       with:
         name: myextension-sdist
     - name: Install and Test

.github/workflows/release.yml

@@ -71,12 +71,19 @@ jobs:
         npm pack
         mv lc_multi_outputs-*.tgz myextension-nodejs.tgz
 
-    - uses: actions/upload-artifact@v2
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: ui-tests/playwright-report/
+        retention-days: 30
+
+    - uses: actions/upload-artifact@v4
       with:
         name: myextension-sdist
         path: myextension.tar.gz
 
-    - uses: actions/upload-artifact@v2
+    - uses: actions/upload-artifact@v4
       with:
         name: myextension-nodejs
         path: myextension-nodejs.tgz
@@ -88,10 +95,10 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@v2
-    - uses: actions/download-artifact@v2
+    - uses: actions/download-artifact@v4
       with:
         name: myextension-sdist
-    - uses: actions/download-artifact@v2
+    - uses: actions/download-artifact@v4
       with:
         name: myextension-nodejs
     - name: release

src/OutputTabExtension.ts

@@ -58,6 +58,11 @@ function initCell(trans: TranslationBundle, cell: CodeCell) {
 }
 
 function initOutputTabs(trans: TranslationBundle, cell: CodeCell) {
+  // Remove the old widget if the cell already has the widget
+  const oldWidget = cell.node.querySelector('.multi-output-widget');
+  if (oldWidget) {
+    oldWidget.remove();
+  }
   Widget.attach(new OutputTabsWidget(trans, cell), cell.node);
 }
 

ui-tests/package.json

@@ -8,7 +8,7 @@
     "test": "jlpm playwright test"
   },
   "devDependencies": {
-    "@jupyterlab/galata": "^5.0.5",
-    "@playwright/test": "^1.37.0"
+    "@jupyterlab/galata": "^5.3.0",
+    "@playwright/test": "^1.48.2"
   }
 }

ui-tests/tests/lc_multi_outputs.spec.ts

@@ -6,25 +6,11 @@ function delay(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-// https://github.com/jupyterlab/jupyterlab/blob/9844a6fdb680aeae28a4d6238433f751ce5a6204/galata/src/fixtures.ts#L319-L336
-async function myWaitForApplication({ baseURL }, use) {
-  const waitIsReady = async (
-    page: Page,
-    helpers: IJupyterLabPage
-  ): Promise<void> => {
-    await page.waitForSelector('#jupyterlab-splash', {
-      state: 'detached'
-    });
-    //! not wait for launcher tab.
-  };
-  await use(waitIsReady);
-}
-
 /**
  * Don't load JupyterLab webpage before running the tests.
  * This is required to ensure we capture all log messages.
  */
-test.use({ autoGoto: false, waitForApplication: myWaitForApplication });
+test.use({ autoGoto: false });
 test('should emit an activation console message', async ({ page }) => {
   const logs: string[] = [];
 
@@ -41,12 +27,15 @@ test('should emit an activation console message', async ({ page }) => {
   ).toHaveLength(1);
 });
 
-test.use({ autoGoto: true, waitForApplication: myWaitForApplication });
+test.use({ autoGoto: true });
 test('should save current outputs on clicking the pin button', async ({
   page
 }) => {
   // create new notebook
-  await page.notebook.createNew();
+  const fileName = "multi_outputs_test.ipynb";
+  await page.notebook.createNew(fileName);
+  await page.waitForSelector(`[role="main"] >> text=${fileName}`);
+
   // edit
   await page.notebook.setCell(0, 'code', 'print("test")');
   // run