add ui tests for search

packages/common-components/src/SearchBar/SearchBar.tsx

@@ -194,6 +194,7 @@ export interface SearchBarProps {
   loaderType?: LOADER
   size?: "large" | "medium" | "small"
   onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  testId?: string
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
@@ -205,7 +206,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   loaderType = LOADER.PulseLoader,
   size = "large",
   name,
-  onChange
+  onChange,
+  testId
 }: SearchBarProps) => {
   const classes = useStyles()
   const spinnerSize = size === "large" ? 12 : size === "medium" ? 8 : 6
@@ -225,6 +227,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
           value={value}
           placeholder={placeholder}
           onChange={onChange}
+          data-testid={testId}
         />
         <div className={clsx(classes.standardIcon, size, "right")}>
           <Spinner

packages/files-ui/cypress/fixtures/filesTestData.ts

@@ -1,2 +1,2 @@
-export const folderName = "Testing"
+export const folderName = "Group"
 export const folderPath = `/${folderName}`

packages/files-ui/cypress/support/page-objects/basePage.ts

@@ -2,6 +2,7 @@
 
 export const basePage = {
   appHeaderLabel: () => cy.get("[data-cy=files-app-header]", { timeout: 20000 }),
+  searchInput: () => cy.get("[data-testid=input-search-bar]"),
   signOutDropdown: () => cy.get("[data-testid=menu-title-sign-out]"),
   signOutMenuOption: () => cy.get("[data-cy=menu-sign-out]"),
   // Mobile view only element

packages/files-ui/cypress/support/page-objects/binPage.ts

@@ -1,18 +1,15 @@
 import { basePage } from "./basePage"
+import { fileBrowser } from "./fileBrowser"
 
 export const binPage = {
   ...basePage,
+  ...fileBrowser,
 
-  // main file browser elements (bin view only)
+  // bin page specific file browser elements
   recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
 
-  // file browser row elements
-  fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }),
-  fileItemName: () => cy.get("[data-cy=file-item-name]"),
-  fileItemKebabButton: () => cy.get("[data-testid=menu-title-fileDropdown]"),
-
-  // menu elements (bin view only)
+  // kebab menu elements
   recoverMenuOption: () => cy.get("[data-cy=menu-recover]"),
   deleteMenuOption: () => cy.get("[data-cy=menu-delete]")
 }

packages/files-ui/cypress/support/page-objects/fileBrowser.ts

@@ -0,0 +1,8 @@
+export const fileBrowser = {
+  fileItemKebabButton: () => cy.get("[data-testid=menu-title-fileDropdown]"),
+  fileItemName: () => cy.get("[data-cy=file-item-name]"),
+  fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }),
+  fileTable: () => cy.get("[data-testid=table-home]"),
+  folderBreadcrumb: () => cy.get("[data-cy=navigation-folder-breadcrumb]"),
+  noDataStateInfo: () => cy.get("[data-cy=data-state-no-files]")
+}

packages/files-ui/cypress/support/page-objects/homePage.ts

@@ -1,26 +1,22 @@
 import { basePage } from "./basePage"
+import { fileBrowser } from "./fileBrowser"
 import { fileUploadModal } from "./modals/fileUploadModal"
 
 export const homePage = {
   ...basePage,
+  ...fileBrowser,
 
-  // main file browser elements
+  // home page specific file browser elements
   newFolderButton: () => cy.get("[data-cy=button-new-folder]"),
   uploadButton: () => cy.get("[data-cy=button-upload-file]"),
   moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
   uploadStatusToast: () => cy.get("[data-cy=upload-status-toast-message]", { timeout: 10000 }),
-
-  // file browser row elements
-  fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }),
-  fileTable: () => cy.get("[data-testid=table-home]"),
-  fileItemName: () => cy.get("[data-cy=file-item-name]"),
   fileRenameInput: () => cy.get("[data-cy=rename-form] input"),
   fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"),
   fileRenameErrorLabel: () => cy.get("[data-cy=rename-form] span.minimal.error"),
-  fileItemKebabButton: () => cy.get("[data-testid=menu-title-fileDropdown]"),
 
-  // menu elements
+  // kebab menu elements
   previewMenuOption: () => cy.get("[data-cy=menu-preview]"),
   downloadMenuOption: () => cy.get("[data-cy=menu-download]"),
   infoMenuOption: () => cy.get("[data-cy=menu-info]"),

packages/files-ui/cypress/support/page-objects/searchPage.ts

@@ -0,0 +1,10 @@
+import { basePage } from "./basePage"
+import { fileBrowser } from "./fileBrowser"
+
+export const searchPage = {
+  ...basePage,
+  ...fileBrowser,
+
+  // kebab menu elements
+  viewFolderMenuOption: () => cy.get("[data-cy=menu-view-folder]")
+}

packages/files-ui/cypress/tests/file-management-spec.ts

@@ -60,7 +60,7 @@ describe("File management", () => {
           .should("be.visible")
           .click()
         homePage.moveSelectedButton().click()
-        moveItemModal.folderList().contains("Testing").click()
+        moveItemModal.folderList().contains(folderName).click()
         moveItemModal.moveButton().safeClick()
 
         // ensure there is only the folder in the Home directory 

packages/files-ui/cypress/tests/search-spec.ts

@@ -0,0 +1,74 @@
+import { homePage } from "../support/page-objects/homePage"
+import { folderName, folderPath } from "../fixtures/filesTestData"
+import { searchPage } from "../support/page-objects/searchPage"
+import { apiTestHelper } from "../support/utils/apiTestHelper"
+
+describe("Search", () => {
+
+  const folderA = `${folderName}A`
+  const folderB = `${folderName}B`
+
+  context("desktop", () => {
+
+    it("can search for files and folders via name", () => {
+      cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
+
+      // add file and folders
+      homePage.uploadFile("../fixtures/uploadedFiles/logo.png")
+      homePage.fileItemName().invoke("text").as("fileName")
+      apiTestHelper.createFolder("/" + folderA)
+      apiTestHelper.createFolder("/" + folderB)
+
+      // search for a specific folder, ensure 1 result is found
+      homePage.searchInput().type(`${folderA}{enter}`)
+      searchPage.fileItemRow()
+        .should("be.visible")
+        .should("have.length", 1)
+      searchPage.fileItemName().should("contain.text", folderA)
+      cy.go("back")
+
+      // perform a loose search for folders, ensure that 2 results are found
+      homePage.searchInput().type(`{selectall}{del}${folderName}{enter}`)
+      searchPage.fileItemRow()
+        .should("be.visible")
+        .should("have.length", 2)
+      searchPage.fileItemName().should("contain.text", folderA)
+      searchPage.fileItemName().should("contain.text", folderB)
+      cy.go("back")
+
+      // search for a specific file, ensure only 1 result is found
+      cy.get("@fileName").then(($fileName) => {
+        homePage.searchInput().type(`{selectall}{del}${$fileName}{enter}`)
+        searchPage.fileItemRow()
+          .should("be.visible")
+          .should("have.length", 1)
+        searchPage.fileItemName().should("contain.text", $fileName)
+      })
+    })
+
+    it("can see no data state when no search results are found", () => {
+      cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
+      homePage.searchInput().type(`{selectall}{del}${folderName}{enter}`)
+      searchPage.appHeaderLabel().should("have.text", "Search results")
+      searchPage.noDataStateInfo()
+        .should("be.visible")
+        .should("exist")
+    })
+
+    it("can view folder content from search result", () => {
+      cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
+      apiTestHelper.createFolder(folderPath)
+      homePage.searchInput().type(`${folderName}{enter}`)
+
+      // view contents via menu option
+      searchPage.fileItemKebabButton().click()
+      searchPage.viewFolderMenuOption().click()
+      searchPage.folderBreadcrumb().should("have.text", folderName)
+      cy.go("back")
+
+      // view contents via double click
+      searchPage.fileItemRow().contains(folderName).dblclick()
+      searchPage.folderBreadcrumb().should("have.text", folderName)
+    })
+  })
+})

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -282,7 +282,7 @@ const FileSystemItem = ({
       contents: (
         <>
           <EyeSvg className={classes.menuIcon} />
-          <span data-cy="view-folder">
+          <span data-cy="menu-view-folder">
             <Trans>View folder</Trans>
           </span>
         </>

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -659,7 +659,10 @@ const FilesList = ({ isShared = false }: Props) => {
         items={sourceFiles}
         previewType={browserView}
       />
-      <div className={classes.breadCrumbContainer}>
+      <div
+        className={classes.breadCrumbContainer}
+        data-cy="navigation-folder-breadcrumb"
+      >
         {crumbs && moduleRootPath && (
           <Breadcrumb
             crumbs={crumbs}
@@ -827,6 +830,7 @@ const FilesList = ({ isShared = false }: Props) => {
               classes.noFiles,
               loadingCurrentPath && classes.fadeOutLoading
             )}
+            data-cy="data-state-no-files"
           >
             <EmptySvg />
             <Typography variant="h4"

packages/files-ui/src/Components/Modules/SearchModule.tsx

@@ -264,6 +264,7 @@ const SearchModule: React.FC<ISearchModule> = ({
             onSearchChange(e.target.value)
           }
           placeholder={t`Search…`}
+          testId = "input-search-bar"
         />
       </form>
       {searchQuery && searchResults?.query ? (

packages/files-ui/src/locales/fr/messages.po

@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-04-23 11:05+0200\n"
 "PO-Revision-Date: 2021-08-26 18:33+0000\n"
 "Last-Translator: J. Lavoie <j.lavoie@net-c.ca>\n"
-"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/fr/>\n"
+"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/>\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"