add some tests

Author: jtpio

src/widget.ts

@@ -131,6 +131,7 @@ export abstract class BaseDiffWidget extends Widget {
   private _createButtons(footer: any): void {
     this._toggleButton = new ToolbarButton({
       label: this._trans.__('Compare changes'),
+      tooltip: this._trans.__('Compare changes'),
       enabled: true,
       className: 'jp-DiffView-toggle',
       onClick: () => {

ui-tests/tests/split-cell-diff.spec.ts

@@ -1,20 +1,117 @@
-import { expect, test } from '@jupyterlab/galata';
+import { expect, IJupyterLabPageFixture, test } from '@jupyterlab/galata';
+import { NotebookPanel } from '@jupyterlab/notebook';
 
 /**
- * Don't load JupyterLab webpage before running the tests.
- * This is required to ensure we capture all log messages.
+ * The command to open the cell split diff view.
  */
-test.use({ autoGoto: false });
+const SPLIT_CELL_DIFF_COMMAND = 'jupyterlab-cell-diff:show-codemirror';
 
-test('should emit an activation console message', async ({ page }) => {
-  const logs: string[] = [];
+/**
+ * Setup a notebook cell with diff view.
+ */
+async function setupCellWithDiff(
+  page: IJupyterLabPageFixture,
+  originalSource: string,
+  newSource: string
+) {
+  await page.notebook.createNew();
+  await page.notebook.setCell(0, 'code', originalSource);
+
+  await page.evaluate(
+    async ({ originalSource, newSource, command }) => {
+      await window.jupyterapp.commands.execute(command, {
+        originalSource,
+        newSource,
+        showActionButtons: true,
+        openDiff: true
+      });
+    },
+    { originalSource, newSource, command: SPLIT_CELL_DIFF_COMMAND }
+  );
+
+  return page.locator('.cm-mergeView');
+}
+
+/**
+ * Get the content of the first cell in the active notebook.
+ */
+async function getCellContent(page: IJupyterLabPageFixture): Promise<string> {
+  return await page.evaluate(() => {
+    const nbPanel = window.jupyterapp.shell.currentWidget as NotebookPanel;
+    return nbPanel.content.widgets[0].model.sharedModel.getSource();
+  });
+}
 
-  page.on('console', message => {
-    logs.push(message.text());
+test.describe('Cell Diff Extension', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.sidebar.close();
   });
 
-  await page.goto();
+  test('should show diff with action buttons', async ({ page }) => {
+    const originalSource = 'print("Hello, World!")';
+    const newSource = 'print("Hello, JupyterLab!")\nprint("Testing diffs")';
+
+    const diffWidget = await setupCellWithDiff(page, originalSource, newSource);
+    await expect(diffWidget).toBeVisible();
+
+    const toggleButton = page.getByRole('button', { name: 'Compare changes' });
+    await expect(toggleButton).toBeVisible();
+
+    const acceptButton = page.getByRole('button', { name: 'Accept Changes' });
+    await expect(acceptButton).toBeVisible();
+
+    const rejectButton = page.getByRole('button', { name: 'Reject Changes' });
+    await expect(rejectButton).toBeVisible();
+  });
+
+  test('should accept changes when accept button is clicked', async ({
+    page
+  }) => {
+    const originalSource = 'x = 1';
+    const newSource = 'x = 2';
+
+    const diffWidget = await setupCellWithDiff(page, originalSource, newSource);
+    await expect(diffWidget).toBeVisible();
 
-  // placeholder for now
-  expect(true).toBe(true);
+    const acceptButton = page.getByRole('button', { name: 'Accept Changes' });
+    await acceptButton.click();
+
+    const cellContent = await getCellContent(page);
+    expect(cellContent).toBe(newSource);
+  });
+
+  test('should reject changes when reject button is clicked', async ({
+    page
+  }) => {
+    const originalSource = 'y = 10';
+    const newSource = 'y = 20';
+
+    const diffWidget = await setupCellWithDiff(page, originalSource, newSource);
+    await expect(diffWidget).toBeVisible();
+
+    const rejectButton = page.getByRole('button', { name: 'Reject Changes' });
+    await rejectButton.click();
+
+    const cellContent = await getCellContent(page);
+    expect(cellContent).toBe(originalSource);
+  });
+
+  test('should toggle diff visibility', async ({ page }) => {
+    const originalSource = 'z = 100';
+    const newSource = 'z = 200';
+
+    const diffWidget = await setupCellWithDiff(page, originalSource, newSource);
+    await expect(diffWidget).toBeVisible();
+
+    const toggleButton = page
+      .getByRole('button', { name: 'Compare changes' })
+      .first();
+    await toggleButton.click({ force: true });
+
+    await expect(diffWidget).toBeHidden();
+
+    await toggleButton.click({ force: true });
+
+    await expect(diffWidget).toBeVisible();
+  });
 });

ui-tests/yarn.lock

@@ -3438,9 +3438,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jupyterlite-ai-ui-tests@workspace:.":
+"jupyterlab-diff-ui-tests@workspace:.":
   version: 0.0.0-use.local
-  resolution: "jupyterlite-ai-ui-tests@workspace:."
+  resolution: "jupyterlab-diff-ui-tests@workspace:."
   dependencies:
     "@jupyterlab/galata": ^5.4.0
     "@playwright/test": ^1.55.1