Fix UI tests (jupyterlab#277)

* Upgrade galata to lab 4.1

Fix lockfile

* Use `jp-button` instead of button

* Be more explicit with test checking for "user menu with 2 items"

(it is not!); because in lab 4.1 the DOM hierarchy changed (toolbar
is now using shadow DOM), instead select the things which are of
interest using precise selectors

* Update snapshots

* Update two more snapshots, switch serial assertions to soft

* Fix `Create a notebook` test

Author: krassowski

ui-tests/package.json

@@ -9,8 +9,8 @@
     "test:update": "npx playwright test --update-snapshots"
   },
   "devDependencies": {
-    "@jupyterlab/galata": "^5.0.5",
-    "@jupyterlab/services": "^7.0.5",
+    "@jupyterlab/galata": "^5.1.5",
+    "@jupyterlab/services": "^7.1.5",
     "@playwright/test": "^1.35.0"
   },
   "resolutions": {

ui-tests/tests/collaborationpanel.spec.ts-snapshots/collaborationPanelCollapsed-linux.png

@@ -109,7 +109,7 @@ test.describe('Initialization', () => {
     await guestPage.notebook.open(pathUntitled);
 
     const nbPanel = await page.notebook.getNotebookInPanel();
-    expect(await nbPanel?.screenshot()).toMatchSnapshot(
+    expect.soft(await nbPanel?.screenshot()).toMatchSnapshot(
       'initialization-create-notebook-host.png'
     );
 
@@ -131,9 +131,10 @@ test.describe('Initialization', () => {
 
     await guestPage.filebrowser.refresh();
     await guestPage.notebook.open(exampleNotebook);
+    await guestPage.notebook.activate(exampleNotebook);
 
     const nbPanel = await page.notebook.getNotebookInPanel();
-    expect(await nbPanel?.screenshot()).toMatchSnapshot(
+    expect.soft(await nbPanel?.screenshot()).toMatchSnapshot(
       'initialization-open-notebook-host.png'
     );
 

ui-tests/tests/collaborationpanel.spec.ts-snapshots/three-client-with-document-linux.png

@@ -11,19 +11,21 @@ test.use( {
 });
 
 const openDialog = async (page: IJupyterLabPageFixture): Promise<Locator> => {
-  const sharedLinkButton = page.locator('button[data-command="collaboration:shared-link"]');
+  const sharedLinkButton = page.locator('jp-button[data-command="collaboration:shared-link"]');
   await sharedLinkButton.click();
   await expect(page.locator('.jp-Dialog')).toBeVisible();
   return page.locator('.jp-Dialog').first();
 };
 
-test('the top bar should contain the user menu with 2 items', async ({ page }) => {
-  const topBarItems = page.locator('#jp-top-bar > :not(.jp-Toolbar-spacer)');
-  await expect(topBarItems).toHaveCount(2);
+test('the top bar should contain one user menu and one share button', async ({ page }) => {
+  const shareButton = page.locator('#jp-top-bar jp-button[data-command="collaboration:shared-link"]');
+  await expect(shareButton).toHaveCount(1);
+  const userMenu = page.locator('#jp-top-bar .jp-MenuBar-anonymousIcon');
+  await expect(userMenu).toHaveCount(1);
 });
 
 test('should open dialog when clicking on the shared link button', async ({ page }) => {
-  const sharedLinkButton = page.locator('button[data-command="collaboration:shared-link"]');
+  const sharedLinkButton = page.locator('jp-button[data-command="collaboration:shared-link"]');
 
   expect(await sharedLinkButton.screenshot()).toMatchSnapshot(
     'shared-link-icon.png'