Add UI test for the mobile layout

packages/application-extension/src/index.ts

@@ -527,11 +527,16 @@ const topVisibility: JupyterFrontEndPlugin<void> = {
       menu.viewMenu.addGroup([{ command: CommandIDs.toggleTop }], 2);
     }
 
+    let settingsOverride = false;
+
     if (settingRegistry) {
       const loadSettings = settingRegistry.load(pluginId);
       const updateSettings = (settings: ISettingRegistry.ISettings): void => {
-        const visible = settings.get('visible').composite as boolean;
-        top.setHidden(!visible);
+        const visible = settings.get('visible').composite;
+        if (settings.user.visible !== undefined) {
+          settingsOverride = true;
+          top.setHidden(!visible);
+        }
       };
 
       Promise.all([loadSettings, app.restored])
@@ -547,6 +552,9 @@ const topVisibility: JupyterFrontEndPlugin<void> = {
     }
 
     const onChanged = (): void => {
+      if (settingsOverride) {
+        return;
+      }
       if (app.format === 'desktop') {
         retroShell.expandTop();
       } else {
@@ -556,7 +564,6 @@ const topVisibility: JupyterFrontEndPlugin<void> = {
 
     // listen on format change (mobile and desktop) to make the view more compact
     app.formatChanged.connect(onChanged);
-    onChanged();
   },
   autoStart: true
 };

packages/application/src/app.ts

@@ -37,7 +37,7 @@ export class RetroApp extends JupyterFrontEnd<IRetroShell> {
         this.registerPlugin(plugin);
       }
     }
-    void this._formatter.invoke();
+    this.restored.then(() => this._formatter.invoke());
   }
 
   /**

packages/notebook-extension/src/index.ts

@@ -158,8 +158,13 @@ const kernelLogo: JupyterFrontEndPlugin<void> = {
 const kernelStatus: JupyterFrontEndPlugin<void> = {
   id: '@retrolab/notebook-extension:kernel-status',
   autoStart: true,
-  requires: [IRetroShell],
-  activate: (app: JupyterFrontEnd, shell: IRetroShell) => {
+  requires: [IRetroShell, ITranslator],
+  activate: (
+    app: JupyterFrontEnd,
+    shell: IRetroShell,
+    translator: ITranslator
+  ) => {
+    const trans = translator.load('retrolab');
     const widget = new Widget();
     widget.addClass('jp-RetroKernelStatus');
     app.shell.add(widget, 'menu', { rank: 10_010 });
@@ -193,7 +198,7 @@ const kernelStatus: JupyterFrontEndPlugin<void> = {
           widget.addClass(KERNEL_STATUS_FADE_OUT_CLASS);
           break;
       }
-      widget.node.textContent = text;
+      widget.node.textContent = trans.__(text);
     };
 
     const onChange = async () => {

ui-tests/test/jupyter_server_config.py

@@ -1,6 +1,11 @@
+from tempfile import mkdtemp
+
 c.ServerApp.port = 8888
+c.ServerApp.port_retries = 0
+c.ServerApp.open_browser = False
+
+c.ServerApp.root_dir = mkdtemp(prefix="galata-test-")
 c.ServerApp.token = ""
 c.ServerApp.password = ""
 c.ServerApp.disable_check_xsrf = True
-c.ServerApp.open_browser = False
 c.RetroApp.expose_app_in_browser = True

ui-tests/test/mobile.spec.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import path from 'path';
+
+import { expect } from '@playwright/test';
+
+import { test } from './fixtures';
+
+test.use({ autoGoto: false, viewport: { width: 512, height: 768 } });
+
+test.describe('Mobile', () => {
+  test('The layout should be more compact on the file browser page', async ({
+    page,
+    tmpPath
+  }) => {
+    await page.goto(`tree/${tmpPath}`);
+    await page.waitForSelector('#top-panel-wrapper', { state: 'hidden' });
+    expect(await page.screenshot()).toMatchSnapshot('tree.png');
+  });
+
+  test('The layout should be more compact on the notebook page', async ({
+    page,
+    tmpPath
+  }) => {
+    const notebook = 'empty.ipynb';
+    await page.contents.uploadFile(
+      path.resolve(__dirname, `./notebooks/${notebook}`),
+      `${tmpPath}/${notebook}`
+    );
+    await page.goto(`notebooks/${tmpPath}/${notebook}`);
+    // TODO: investigate why this does not run the cells in RetroLab
+    // await page.notebook.run();
+
+    // wait for the kernel status animations to be finished
+    await page.waitForSelector('.jp-RetroKernelStatus-fade');
+    await page.waitForFunction(() => {
+      const status = window.document.getElementsByClassName(
+        'jp-RetroKernelStatus'
+      )[0];
+
+      if (!status) {
+        return false;
+      }
+
+      const finished = status?.getAnimations().reduce((prev, curr) => {
+        return prev && curr.playState === 'finished';
+      }, true);
+      return finished;
+    });
+
+    expect(await page.screenshot()).toMatchSnapshot('notebook.png');
+  });
+});

ui-tests/test/settings.spec.ts

@@ -16,15 +16,17 @@ test.describe('Settings', () => {
 
     await page.goto(`tree/${tmpPath}`);
 
+    await page.waitForSelector('#top-panel', { state: 'visible' });
     await page.menu.clickMenuItem(showHeaderPath);
+    await page.waitForSelector('#top-panel', { state: 'hidden' });
     await page.reload({ waitUntil: 'networkidle' });
-
     await page.menu.getMenuItem(showHeaderPath);
     expect(await page.screenshot()).toMatchSnapshot('top-hidden.png');
 
+    await page.waitForSelector('#top-panel', { state: 'hidden' });
     await page.menu.clickMenuItem(showHeaderPath);
+    await page.waitForSelector('#top-panel', { state: 'visible' });
     await page.reload({ waitUntil: 'networkidle' });
-
     await page.menu.getMenuItem(showHeaderPath);
     expect(await page.screenshot()).toMatchSnapshot('top-visible.png');
   });