Fix tests

browser/data-browser/src/Providers.tsx

@@ -1,4 +1,3 @@
-import { Toaster } from 'react-hot-toast';
 import { StyleSheetManager, type ShouldForwardProp } from 'styled-components';
 import { DialogGlobalContextProvider } from './components/Dialog/DialogGlobalContextProvider';
 import { DropdownContainer } from './components/Dropdown/DropdownContainer';
@@ -18,6 +17,7 @@ import { ErrorBoundary } from './views/ErrorPage';
 import CrashPage from './views/CrashPage';
 import { AppSettingsContextProvider } from './helpers/AppSettings';
 import { NavStateProvider } from './components/NavState';
+import { Toaster } from './components/Toaster';
 
 // Setup bugsnag for error handling, but only if there's an API key
 const ErrBoundary = window.bugsnagApiKey

browser/data-browser/src/components/Dropdown/index.tsx

@@ -299,7 +299,7 @@ export function DropdownMenu({
                     onClick();
                   }}
                   id={id}
-                  data-test={`menu-item-${id}`}
+                  data-testid={`menu-item-${id}`}
                   disabled={disabled}
                   key={id}
                   helper={shortcut ? `${helper} (${shortcut})` : helper}

browser/data-browser/src/components/EditableTitle.tsx

@@ -67,7 +67,8 @@ export function EditableTitle({
   return isEditing ? (
     <TitleInput
       ref={ref}
-      data-test='editable-title'
+      data-testid='editable-title'
+      type='text'
       {...props}
       onFocus={handleClick}
       placeholder={placeholder}
@@ -82,7 +83,7 @@ export function EditableTitle({
       id={id}
       canEdit={!!canEdit}
       title={canEdit ? 'Click to edit title' : ''}
-      data-test='editable-title'
+      data-testid='editable-title'
       onClick={handleClick}
       subtle={!!canEdit && !text}
       subject={resource.subject}

browser/data-browser/src/components/SideBar/ResourceSideBar/SidebarItemTitle.tsx

@@ -83,6 +83,7 @@ export const SidebarItemTitle = forwardRef<
             ref={ref}
             {...(listeners ?? {})}
             {...(attributes ?? {})}
+            role='link'
           >
             <SideBarItem
               onClick={onClick}

browser/data-browser/src/components/Toaster.tsx

@@ -39,8 +39,8 @@ export function Toaster(): JSX.Element {
             border: `solid 1px ${theme.colors.bg2}`,
             position: 'relative',
             animation: t.visible
-              ? 'toast-enter .5s ease'
-              : 'toast-exit 1s ease',
+              ? 'toast-enter .2s ease-out'
+              : 'toast-exit 1s ease-in',
           }}
         >
           {({ icon, message }) => (

browser/e2e/tests/documents.spec.ts

@@ -4,7 +4,6 @@ import {
   newDrive,
   newResource,
   editTitle,
-  editableTitle,
   getCurrentSubject,
   makeDrivePublic,
   openNewSubjectWindow,

browser/e2e/tests/e2e.spec.ts

@@ -75,7 +75,7 @@ test.describe('data-browser', async () => {
     // Use invite
     await clickSidebarItem(DEMO_INVITE_NAME, page);
     await page.click('text=Accept as new user');
-    await expect(page.locator(editableTitle)).toBeVisible();
+    await expect(editableTitle(page)).toBeVisible();
     // We need the initial enter because removing the top line isn't working ATM
     await page.keyboard.press('Enter');
     const teststring = `Testline ${timestamp()}`;
@@ -86,8 +86,8 @@ test.describe('data-browser', async () => {
     await page.keyboard.press('Alt+Backspace');
     await expect(page.locator(`text=${teststring}`)).not.toBeVisible();
     const docTitle = `Document Title ${timestamp()}`;
-    await page.click(editableTitle, { delay: 200 });
-    await page.fill(editableTitle, docTitle);
+    await editableTitle(page).click();
+    await editableTitle(page).fill(docTitle);
     // Not sure if this test is needed - it fails now.
     // await expect(page.locator(documentTitle)).toBeFocused();
     // Check if we can edit our profile
@@ -260,13 +260,13 @@ test.describe('data-browser', async () => {
     await newDrive(page);
     await newResource('folder', page);
 
-    await page.locator(editableTitle).click();
+    await editableTitle(page).click();
     // loop over all letters in alphabet
 
     const alphabet = 'abcdefghijklmnopqrstuvwxyz';
 
     for (const letter of alphabet) {
-      await page.type(editableTitle, letter, { delay: Math.random() * 300 });
+      await editableTitle(page).type(letter, { delay: Math.random() * 300 });
     }
 
     // wait for commit debounce
@@ -299,7 +299,7 @@ test.describe('data-browser', async () => {
       .getByRole('button', { name: 'New Resource', exact: true })
       .click();
     await page.click('button:has-text("Document")');
-    await page.locator(editableTitle).click();
+    await editableTitle(page).click();
     await page.keyboard.type('RAM Downloading Strategies');
     await page.keyboard.press('Enter');
     await clickSidebarItem('Untitled folder', page);

browser/e2e/tests/global.setup.ts

@@ -7,6 +7,8 @@ import {
 } from './test-utils';
 
 setup('delete previous test data', async ({ page }) => {
+  setup.slow();
+
   if (!DELETE_PREVIOUS_TEST_DRIVES) {
     expect(true).toBe(true);
 

browser/e2e/tests/tables.spec.ts

@@ -5,6 +5,7 @@ import {
   newResource,
   waitForCommit,
   before,
+  currentDialog,
 } from './test-utils';
 
 type Row = {
@@ -121,11 +122,11 @@ test.describe('tables', async () => {
     await newColumn('Date');
     await expect(page.locator('text=New Date Column')).toBeVisible();
     const dateColumnName = 'Existed since';
-    await page
-      .locator('[placeholder="New Column"] >> visible = true')
+    await currentDialog(page)
+      .getByPlaceholder('New Column')
       .fill(dateColumnName);
-    await page.getByLabel('Long').click();
-    await page.locator('button:has-text("Create")').click();
+    await currentDialog(page).getByLabel('Long').click();
+    await currentDialog(page).getByRole('button', { name: 'Create' }).click();
     await waitForCommit(page);
     await expect(page.locator('text=New Date Column')).not.toBeVisible();
     await expect(
@@ -136,8 +137,8 @@ test.describe('tables', async () => {
     await newColumn('Number');
     const numberColumnName = 'Number of tracks';
     await expect(page.locator('text=New Number Column')).toBeVisible();
-    await page
-      .locator('[placeholder="New Column"] >> visible = true')
+    await currentDialog(page)
+      .getByPlaceholder('New Column')
       .fill(numberColumnName);
 
     await page.locator('button:has-text("Create")').click();
@@ -151,8 +152,8 @@ test.describe('tables', async () => {
     await newColumn('Checkbox');
     await expect(page.locator('text=New Checkbox Column')).toBeVisible();
     const checkboxColumnName = 'Approved by W3C';
-    await page
-      .locator('[placeholder="New Column"] >> visible = true')
+    await currentDialog(page)
+      .getByPlaceholder('New Column')
       .fill(checkboxColumnName);
     await page.locator('button:has-text("Create")').click();
     await waitForCommit(page);
@@ -165,8 +166,8 @@ test.describe('tables', async () => {
     await newColumn('Select');
     const selectColumnName = 'Descriptive words';
     await expect(page.locator('text=New Select Column')).toBeVisible();
-    await page
-      .locator('[placeholder="New Column"] >> visible = true')
+    await currentDialog(page)
+      .getByPlaceholder('New Column')
       .fill(selectColumnName);
 
     await createTag('😤', 'wild');

browser/e2e/tests/template.spec.ts

@@ -125,10 +125,9 @@ test.describe('Create Next.js Template', () => {
 
     await setupTemplateSite(TEMPLATE_DIR_NAME, drive.driveURL, 'nextjs-site');
 
-    const child = startServer(TEMPLATE_DIR_NAME, 'nextjs-site');
-
     try {
       //start server
+      const child = startServer(TEMPLATE_DIR_NAME, 'nextjs-site');
       const url = await waitForServer(child);
 
       // check if the server is running
@@ -157,14 +156,12 @@ test.describe('Create Next.js Template', () => {
       await expect(page.locator('body')).toContainText('Balloon');
       await expect(page.locator('body')).not.toContainText('coffee');
     } finally {
-      child.kill();
-      kill(3000)
-        .then(() => {
-          log('Next.js server shut down successfully');
-        })
-        .catch(err => {
-          console.error('Failed to shut down Next.js server:', err);
-        });
+      try {
+        await kill(3000);
+        log('Next.js server shut down successfully');
+      } catch (err) {
+        console.error('Failed to shut down Next.js server:', err);
+      }
     }
   });
 
@@ -211,9 +208,8 @@ test.describe('Create SvelteKit Template', () => {
       'sveltekit-site',
     );
 
-    const child = startServer(TEMPLATE_DIR_NAME, 'sveltekit-site');
-
     try {
+      const child = startServer(TEMPLATE_DIR_NAME, 'sveltekit-site');
       //start server
       const url = await waitForServer(child);
 
@@ -242,14 +238,14 @@ test.describe('Create SvelteKit Template', () => {
       await expect(page.locator('body')).toContainText('Balloon');
       await expect(page.locator('body')).not.toContainText('coffee');
     } finally {
-      child.kill();
-      kill(4174)
-        .then(() => {
-          log('SvelteKit server shut down successfully');
-        })
-        .catch(err => {
-          console.error('Failed to shut down SvelteKit server:', err);
-        });
+      try {
+        await kill(4174);
+        log('SvelteKit server shut down successfully');
+        // We need to wait for the process to be killed and playwright does not wait unless there is another expect coming.
+        expect(true).toBe(true);
+      } catch (err) {
+        console.error('Failed to shut down SvelteKit server:', err);
+      }
     }
   });
 

browser/e2e/tests/test-utils.ts

@@ -25,9 +25,9 @@ export const testFilePath = (filename: string) => {
 };
 
 export const timestamp = () => new Date().toLocaleTimeString();
-export const editableTitle = '[data-test="editable-title"]';
 export const sideBarDriveSwitcher = '[title="Open Drive Settings"]';
 export const sideBarNewResourceTestId = 'sidebar-new-resource';
+export const editableTitle = (page: Page) => page.getByTestId('editable-title');
 export const currentDriveTitle = (page: Page) =>
   page.getByTestId('current-drive-title');
 export const publicReadRightLocator = (page: Page) =>
@@ -65,9 +65,9 @@ export const before = async ({ page }: { page: Page }) => {
 
 export async function setTitle(page: Page, title: string) {
   const waiter = waitForCommitOnCurrentResource(page);
-  await page.locator(editableTitle).click();
-  await page.locator(`${editableTitle} > input`);
-  await page.type(editableTitle, title);
+  await editableTitle(page).click();
+  await expect(editableTitle(page)).toHaveRole('textbox');
+  await editableTitle(page).type(title);
   await page.keyboard.press('Escape');
   // await page.waitForTimeout(500);
   await waiter;
@@ -285,10 +285,10 @@ export async function changeDrive(subject: string, page: Page) {
 }
 
 export async function editTitle(title: string, page: Page) {
-  await expect(page.locator(editableTitle)).toHaveRole('heading');
-  await page.locator(editableTitle).click();
-  await expect(page.locator(editableTitle)).toHaveRole('textbox');
-  await page.fill(editableTitle, title);
+  await expect(editableTitle(page)).toHaveRole('heading');
+  await editableTitle(page).click();
+  await expect(editableTitle(page)).toHaveRole('textbox');
+  await editableTitle(page).fill(title);
   await page.keyboard.press('Enter');
   // Make sure the commit is processed
   // await page.waitForTimeout(300);
@@ -302,9 +302,7 @@ export async function clickSidebarItem(text: string, page: Page) {
 export async function contextMenuClick(text: string, page: Page) {
   await page.click(contextMenu);
   await page.waitForTimeout(100);
-  await page
-    .locator(`[data-test="menu-item-${text}"] >> visible = true`)
-    .click();
+  await page.getByTestId(`menu-item-${text}`).click();
 }
 
 export const waitForCommit = async (page: Page) =>