#288 Add folder test

Author: Polleps

data-browser/src/components/EditableTitle.tsx

@@ -57,15 +57,13 @@ export function EditableTitle({
       onChange={e => setText(e.target.value)}
       value={text || ''}
       onBlur={() => setIsEditing(false)}
-      style={{ visibility: isEditing ? 'visible' : 'hidden' }}
     />
   ) : (
     <Title
       canEdit={!!canEdit}
       title={canEdit ? 'Edit title' : 'View title'}
       data-test='editable-title'
       onClick={handleClick}
-      style={{ display: isEditing ? 'hidden' : 'visible' }}
       subtle={!!canEdit && !text}
     >
       <>

data-browser/src/components/NewInstanceButton/useDefaultNewInstanceHandler.tsx

@@ -34,6 +34,7 @@ export function useDefaultNewInstanceHandler(klass: string, parent?: string) {
       case classes.document: {
         createResourceAndNavigate('documents', {
           [properties.isA]: [classes.document],
+          [properties.name]: 'Untitled Document',
         });
         break;
       }

data-browser/src/views/BookmarkPage/BookmarkPage.tsx

@@ -32,10 +32,7 @@ export function BookmarkPage({ resource }: ResourcePageProps): JSX.Element {
     <>
       <Wrapper>
         <ContainerFull>
-          <EditableTitle
-            resource={resource}
-            propertyURL={urls.properties.name}
-          />
+          <EditableTitle resource={resource} />
         </ContainerFull>
         <ControlWrapper>
           <ContainerFull>

data-browser/src/views/FolderPage/ListView.tsx

@@ -21,7 +21,7 @@ export function ListView({
 }: ViewProps): JSX.Element {
   return (
     <Wrapper>
-      <StyledTable>
+      <StyledTable data-test='folder-list'>
         <>
           <thead>
             <tr>

data-browser/tests/e2e.spec.ts

@@ -327,11 +327,39 @@ test.describe('data-browser', async () => {
     const input = page.locator('[placeholder="https\\:\\/\\/example\\.com"]');
     await input.click();
     await input.fill('https://example.com');
-    await page.locator('footer >> text=Ok').click();
+    await page.locator('dialog[open] >> footer >> text=Ok').click();
 
     await expect(page.locator('text=This domain is ')).toBeVisible();
   });
 
+  test('folder', async ({ page }) => {
+    await signIn(page);
+    await newDrive(page);
+
+    // Create a new folder
+    await newResource('folder', page);
+
+    // Fetch `example.com
+    const input = page.locator('[placeholder="New Folder"]');
+    await input.click();
+    await input.fill('RAM Downloads');
+    await page.locator('dialog[open] >> footer >> text=Ok').click();
+
+    await expect(page.locator('h1:text("Ram Downloads")')).toBeVisible();
+
+    await page.click('text=New Resource');
+    await page.click('button:has-text("Document")');
+    await page.locator(editableTitle).click();
+    await page.keyboard.type('RAM Downloading Strategies');
+    await page.keyboard.press('Enter');
+    await page.click('[data-test="sidebar"] >> text=RAM Downloads');
+    await expect(
+      page.locator(
+        '[data-test="folder-list"] >> text=RAM Downloading Strategies',
+      ),
+    ).toBeVisible();
+  });
+
   test('drive switcher', async ({ page }) => {
     await signIn(page);
     await page.locator(`${currentDriveTitle} > text=localhost`);

lib/src/value.ts

@@ -63,7 +63,7 @@ export function valToNumber(val?: JSONValue): number {
 /** Returns a default string representation of the value. */
 export function valToString(val: JSONValue): string {
   // val && val.toString();
-  return val?.toString() || 'undefined';
+  return val?.toString() ?? 'undefined';
 }
 
 /** Returns either the URL of the resource, or the NestedResource itself. */

package.json

@@ -51,7 +51,7 @@
       "data-browser"
     ]
   },
-  "packageManager": "pnpm@7.11.0",
+  "packageManager": "pnpm@7.13.3",
   "dependencies": {
     "eslint-plugin-import": "^2.26.0"
   }

react/src/hooks.ts

@@ -275,7 +275,7 @@ export function useValue(
       async function setAsync() {
         try {
           await resource.set(propertyURL, newVal, store, validate);
-          handleValidationError && handleValidationError(undefined);
+          handleValidationError?.(undefined);
           // Clone resource to force hooks to re-evaluate due to shallow comparison.
           store.notify(resource.clone());
         } catch (e) {
@@ -330,7 +330,11 @@ export function useString(
 ): [string | undefined, (string: string | undefined) => Promise<void>] {
   const [val, setVal] = useValue(resource, propertyURL, opts);
 
-  if (!val) {
+  if (typeof val === 'string') {
+    return [val, setVal];
+  }
+
+  if (val === undefined) {
     return [undefined, setVal];
   }