fix: text-editor font-size not work

jupyterlab · Apr 27, 2024 · cfe3081 · cfe3081
1 parent 52442fb
commit cfe3081
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/galata/test/jupyterlab/texteditor.test.ts b/galata/test/jupyterlab/texteditor.test.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { expect, test } from '@jupyterlab/galata';
+import { expect, IJupyterLabPageFixture, test } from '@jupyterlab/galata';
 
 const DEFAULT_NAME = 'untitled.txt';
 
@@ -103,4 +103,42 @@ ut elit.`
     const tabHandle = await page.activity.getPanelLocator(DEFAULT_NAME);
     expect(await tabHandle?.screenshot()).toMatchSnapshot(imageName);
   });
+
+  test.describe('Changing a text editor font-size', () => {
+    const getFontSize = async (page: IJupyterLabPageFixture) => {
+      const wrapperElement = page.locator(
+        '.jp-MainAreaWidget .jp-FileEditor .cm-content.cm-lineWrapping'
+      );
+      const computedStyle = await wrapperElement.evaluate(el =>
+        getComputedStyle(el)
+      );
+      return parseInt(computedStyle.fontSize);
+    };
+    const createNewTextEditor = async (page: IJupyterLabPageFixture) => {
+      await page.menu.clickMenuItem('File>New>Text File');
+
+      await page.locator(`[role="main"] >> text=${DEFAULT_NAME}`).waitFor();
+      await page.type('.cm-content', 'text editor');
+    };
+    const changeFontSize = async (page: IJupyterLabPageFixture, menuOption) => {
+      await page.click('text=Settings');
+      await page.click(`.lm-Menu ul[role="menu"] >> text="${menuOption}"`);
+    };
+
+    test('Should increase a text editor font-size', async ({ page }) => {
+      await createNewTextEditor(page);
+      let fontSize = await getFontSize(page);
+      await changeFontSize(page, 'Increase Text Editor Font Size');
+
+      expect(await getFontSize(page)).toEqual(fontSize + 1);
+    });
+
+    test('Should decrease a text editor font-size', async ({ page }) => {
+      await createNewTextEditor(page);
+      let fontSize = await getFontSize(page);
+      await changeFontSize(page, 'Decrease Text Editor Font Size');
+
+      expect(await getFontSize(page)).toEqual(fontSize - 1);
+    });
+  });
 });
diff --git a/packages/fileeditor-extension/src/commands.ts b/packages/fileeditor-extension/src/commands.ts
@@ -258,11 +258,14 @@ export namespace Commands {
           style.getPropertyValue('--jp-code-font-size'),
           10
         );
+        if (!config.customStyles) {
+          config.customStyles = {};
+        }
         const currentSize =
           (config['customStyles']['fontSize'] ??
             extensions.baseConfiguration['customStyles']['fontSize']) ||
           cssSize;
-        config.fontSize = currentSize + delta;
+        config.customStyles.fontSize = currentSize + delta;
         return settingRegistry
           .set(id, 'editorConfig', config)
           .catch((reason: Error) => {