Add tests, fix some bugs

app/common/src/detect.ts

@@ -166,17 +166,21 @@ export function isOnUnknownBrowser() {
 
 let detectedArchitecture: string | null = null
 // Only implemented by Chromium.
-// @ts-expect-error This API exists, but no typings exist for it yet.
-navigator.userAgentData?.getHighEntropyValues(['architecture']).then((values: unknown) => {
-  if (
-    typeof values === 'object' &&
-    values != null &&
-    'architecture' in values &&
-    typeof values.architecture === 'string'
-  ) {
-    detectedArchitecture = String(values.architecture)
-  }
-})
+// navigator is undefined in Node.js, e.g. in integration tests(mock server).
+// So we need to check if it is defined before using it.
+if (typeof navigator !== 'undefined' && 'userAgentData' in navigator) {
+  // @ts-expect-error This API exists, but no typings exist for it yet.
+  navigator.userAgentData.getHighEntropyValues(['architecture']).then((values: unknown) => {
+    if (
+      typeof values === 'object' &&
+      values != null &&
+      'architecture' in values &&
+      typeof values.architecture === 'string'
+    ) {
+      detectedArchitecture = String(values.architecture)
+    }
+  })
+}
 
 /** Possible processor architectures. */
 export enum Architecture {

app/gui/integration-test/dashboard/actions/DrivePageActions.ts

@@ -131,6 +131,27 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
     )
   }
 
+  /**
+   * Expect the category to be selected.
+   */
+  expectCategory(category: string) {
+    return this.step(`Expect category '${category}'`, (page) =>
+      expect(page.getByRole('button', { name: category })).toHaveAttribute('data-selected', 'true'),
+    )
+  }
+
+  /**
+   * Expect the category to be not selected.
+   */
+  expectCategoryNotSelected(category: string) {
+    return this.step(`Expect category '${category}' not selected`, (page) =>
+      expect(page.getByRole('button', { name: category })).toHaveAttribute(
+        'data-selected',
+        'false',
+      ),
+    )
+  }
+
   /** Actions specific to the Drive table. */
   get driveTable() {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -145,6 +166,11 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
         .getByLabel(TEXT.sortByModificationDate)
         .or(page.getByLabel(TEXT.sortByModificationDateDescending))
         .or(page.getByLabel(TEXT.stopSortingByModificationDate))
+
+    const locatePathColumnHeading = (page: Page) => page.getByTestId('path-column-heading')
+    const locatePathColumnCell = (page: Page, title: string) =>
+      page.getByTestId(`path-column-cell-${title.toLowerCase().replace(/\s+/g, '-')}`)
+
     return {
       /** Click the column heading for the "name" column to change its sort order. */
       clickNameColumnHeading() {
@@ -158,6 +184,16 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
           callback(locateNameColumnHeading(page), context),
         )
       },
+      withPathColumnHeading(callback: LocatorCallback<Context>) {
+        return self.step('Interact with "path" column heading', (page, context) =>
+          callback(locatePathColumnHeading(page), context),
+        )
+      },
+      withPathColumnCell(title: string, callback: LocatorCallback<Context>) {
+        return self.step(`Interact with "path" column cell '${title}'`, (page, context) =>
+          callback(locatePathColumnCell(page, title), context),
+        )
+      },
       /** Click the column heading for the "modified" column to change its sort order. */
       clickModifiedColumnHeading() {
         return self.step('Click "modified" column heading', (page) =>
@@ -206,6 +242,11 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
           await callback(locateAssetRows(page), locateNonAssetRows(page), self.context, page)
         })
       },
+      withSelectedRows(callback: LocatorCallback<Context>) {
+        return self.step('Interact with selected drive table rows', async (page, context) => {
+          await callback(locateAssetRows(page).and(page.locator('[data-selected="true"]')), context)
+        })
+      },
       /** Drag a row onto another row. */
       dragRowToRow(from: number, to: number) {
         return self.step(`Drag drive table row #${from} to row #${to}`, async (page) => {
@@ -227,6 +268,28 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
             }),
         )
       },
+      expandDirectory(index: number) {
+        return self.step(`Expand drive table row #${index}`, async (page) => {
+          const expandButton = locateAssetRows(page)
+            .nth(index)
+            .getByTestId('directory-row-expand-button')
+
+          await expect(expandButton).toHaveAttribute('aria-label', TEXT.expand)
+
+          return expandButton.click()
+        })
+      },
+      collapseDirectory(index: number) {
+        return self.step(`Collapse drive table row #${index}`, async (page) => {
+          const collapseButton = locateAssetRows(page)
+            .nth(index)
+            .getByTestId('directory-row-expand-button')
+
+          await expect(collapseButton).toHaveAttribute('aria-label', TEXT.collapse)
+
+          return collapseButton.click()
+        })
+      },
       /**
        * A test assertion to confirm that there is only one row visible, and that row is the
        * placeholder row displayed when there are no assets to show.