-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
File Explorer: Add e2e tests (#4827)
* Better HTML semantics and accessibility * Add a couple e2e tests * Try new locator * Try hovering before clicking * Try `waitForSelector` * Try waiting for API response * Remove `waitForSelector` * Try asserting `GetFiles` response * Parallelise click and request check * Add debug * Fix file watcher for linux * More logs * Add renamed directories to watcher * Cleanup logs * Tweak checks for performance * Additional debugging * Add dir handling in flush * Cleanup * Use `keyboard.type` rather than `fill` * Don't use autosave * Remove devcontainer * PR comments --------- Co-authored-by: Aditya Hegde <[email protected]>
- Loading branch information
1 parent
02515c3
commit c43d62d
Showing
4 changed files
with
158 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { expect } from "playwright/test"; | ||
| import { test } from "./utils/test"; | ||
|
|
||
| test.describe("File Explorer", () => { | ||
| test.describe("File CRUD Operations", () => { | ||
| test("should create, rename, edit, and delete a file", async ({ page }) => { | ||
| // Create a new file | ||
| await page.getByLabel("Add Asset").click(); | ||
| await page.getByRole("menuitem", { name: "More" }).hover(); | ||
| await page.getByRole("menuitem", { name: "Blank file" }).click(); | ||
| await expect( | ||
| page.getByRole("link", { name: "untitled_file" }), | ||
| ).toBeVisible(); | ||
| await expect( | ||
| page.getByLabel("untitled_file", { exact: true }), | ||
| ).toBeVisible(); | ||
|
|
||
| // Rename the file | ||
| await page.getByLabel("/untitled_file actions menu").click(); | ||
| await page.getByRole("menuitem", { name: "Rename..." }).click(); | ||
| await page.getByLabel("File name").click(); | ||
| await page.getByLabel("File name").press("Meta+a"); | ||
| await page.getByLabel("File name").fill("README.md"); | ||
| await page.getByLabel("File name").press("Enter"); | ||
| await expect(page.getByRole("link", { name: "README.md" })).toBeVisible(); | ||
|
|
||
| // Edit the file | ||
| await page.getByLabel("Auto-save").click(); // Turn off auto-save | ||
| await page.getByRole("textbox").nth(1).click(); | ||
| await page.keyboard.type("Here's a README.md file for the e2e test!"); | ||
| await page.getByRole("button", { name: "Save" }).click(); | ||
| // Wait half a second for the changes to be saved | ||
| await page.waitForTimeout(500); | ||
| // Navigate away from the file and back to it to verify the changes | ||
| await page.getByRole("link", { name: "rill.yaml" }).click(); | ||
| await page.getByRole("link", { name: "README.md" }).click(); | ||
| await expect( | ||
| page.getByText("Here's a README.md file for the e2e test!"), | ||
| ).toBeVisible(); | ||
|
|
||
| // Delete the file | ||
| await page.getByLabel("/README.md actions menu").click(); | ||
| await page.getByRole("menuitem", { name: "Delete" }).click(); | ||
| await expect( | ||
| page.getByRole("link", { name: "README.md" }), | ||
| ).not.toBeVisible(); | ||
| }); | ||
| }); | ||
|
|
||
| test.describe("Folder CRUD Operations", () => { | ||
| test("should create, rename, add sub-folder, and delete the folder", async ({ | ||
| page, | ||
| }) => { | ||
| // Create a new folder | ||
| await page.getByLabel("Add Asset").click(); | ||
| await page.getByRole("menuitem", { name: "More" }).hover(); | ||
| await page.getByRole("menuitem", { name: "Folder" }).click(); | ||
| await expect( | ||
| page.getByRole("directory", { name: "untitled_folder" }), | ||
| ).toBeVisible(); | ||
|
|
||
| // Rename the folder | ||
| await page.getByRole("directory", { name: "untitled_folder" }).hover(); | ||
| await page.getByLabel("untitled_folder actions menu").click(); | ||
| await page.getByRole("menuitem", { name: "Rename..." }).click(); | ||
| await page.getByLabel("Folder name").click(); | ||
| await page.getByLabel("Folder name").press("Meta+a"); | ||
| await page.getByLabel("Folder name").fill("my-directory"); | ||
| await page.getByLabel("Folder name").press("Enter"); | ||
|
|
||
| // Add something to the folder | ||
| await page.getByRole("directory", { name: "my-directory" }).hover(); | ||
| await page.getByLabel("my-directory actions menu").click(); | ||
| await page.getByRole("menuitem", { name: "New folder" }).hover(); | ||
| const [createDirectoryResponse, getFilesResponse] = await Promise.all([ | ||
| page.waitForResponse("**/v1/instances/default/files/dir"), | ||
| page.waitForResponse("**/v1/instances/default/files"), | ||
| page.getByRole("menuitem", { name: "New folder" }).click(), | ||
| ]); | ||
|
|
||
| expect(createDirectoryResponse.status()).toBe(200); | ||
| expect(getFilesResponse.status()).toBe(200); | ||
| const resp = await getFilesResponse.json(); | ||
| expect(resp.files.length).toBe(4); | ||
| await expect( | ||
| page.getByRole("directory", { | ||
| name: "my-directory/untitled_folder", | ||
| }), | ||
| ).toBeVisible(); | ||
|
|
||
| // Delete the folder | ||
| await page.getByLabel("my-directory actions menu").click(); | ||
| await page.getByRole("menuitem", { name: "Delete" }).click(); | ||
| await page.getByRole("button", { name: "Delete" }).click(); | ||
| }); | ||
| }); | ||
| }); |
c43d62dThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://ui.rilldata.in as production
🚀 Deployed on https://663cdf35bca4c5067b93b7ef--rill-ui-dev.netlify.app