Set up UI test on labextensions

Author: Nicolas Brichet

.gitignore

@@ -120,3 +120,8 @@ package-lock.json
 .goutputstream*
 .idea
 .mypy_cache
+
+
+# playwright output tests directory
+playwright-report
+test-results

conftest.py

@@ -0,0 +1,8 @@
+import pytest
+
+pytest_plugins = ["jupyter_server.pytest_plugin"]
+
+
+@pytest.fixture
+def jp_server_config(jp_server_config):
+    return {"ServerApp": {"jpserver_extensions": {"nbgrader": True}}}

nbgrader/tests/labextension_ui-tests/jupyter_server_test_config.py

@@ -0,0 +1,19 @@
+"""Server configuration for integration tests.
+!! Never use this configuration in production because it
+opens the server to the world and provide access to JupyterLab
+JavaScript objects through the global window variable.
+"""
+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.LabApp.expose_app_in_browser = True
+
+# Uncomment to set server log level to debug level
+# c.ServerApp.log_level = "DEBUG"

nbgrader/tests/labextension_ui-tests/tests/test_assignment_list.spec.ts

@@ -0,0 +1,20 @@
+import { test, galata } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+test('Assignment list command', async ({
+    page
+  }) => {
+
+    await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab")).toHaveCount(1);
+
+    await page.keyboard.press('Control+Shift+c');
+    await page.locator('#modal-command-palette li[data-command="nbgrader:assignment-list"]').click();
+
+    await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab")).toHaveCount(2);
+
+    var tabs = page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab");
+    var newTab_label = tabs.last().locator(".lm-TabBar-tabLabel.p-TabBar-tabLabel");
+    await expect(newTab_label).toHaveText("Assignments");
+
+  }
+);

nbgrader/tests/labextension_ui-tests/tests/test_course_list.spec.ts

@@ -0,0 +1,20 @@
+import { test, galata } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+test('Course list command', async ({
+    page
+  }) => {
+
+    await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab")).toHaveCount(1);
+
+    await page.keyboard.press('Control+Shift+c');
+    await page.locator('#modal-command-palette li[data-command="nbgrader:course-list"]').click();
+
+    await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab")).toHaveCount(2);
+
+    var tabs = page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab");
+    var newTab_label = tabs.last().locator(".lm-TabBar-tabLabel.p-TabBar-tabLabel");
+    await expect(newTab_label).toHaveText("Courses");
+
+  }
+);

nbgrader/tests/labextension_ui-tests/tests/test_formgrader.spec.ts

@@ -0,0 +1,20 @@
+import { test, galata } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+test('Formgrader command', async ({
+    page
+  }) => {
+
+    await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab")).toHaveCount(1);
+
+    await page.keyboard.press('Control+Shift+c');
+    await page.locator('#modal-command-palette li[data-command="nbgrader:formgrader"]').click();
+
+    await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab")).toHaveCount(2);
+
+    var tabs = page.locator("#jp-main-dock-panel .lm-TabBar-tab.p-TabBar-tab");
+    var newTab_label = tabs.last().locator(".lm-TabBar-tabLabel.p-TabBar-tabLabel");
+    await expect(newTab_label).toHaveText("Formgrader");
+
+  }
+);