Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add test coverage for storage summary adjustments #1536

Merged
merged 8 commits into from
Sep 20, 2021
Merged

Add test coverage for storage summary adjustments #1536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
042bb9d
Add identifiers for file delete toasts
Sep 16, 2021
c097b10
Add checks to ensure the storage summary updates on upload and deletion
Sep 16, 2021
7d73ef9
Merge branch 'dev' into mnt/add-test-for-storage-summary-1530
asnaith Sep 16, 2021
1909dc8
lingui extract
actions-user Sep 16, 2021
024b0fe
Merge branch 'dev' into mnt/add-test-for-storage-summary-1530
asnaith Sep 17, 2021
9125263
Merge branch 'dev' into mnt/add-test-for-storage-summary-1530
Tbaut Sep 20, 2021
d797caf
Add ui tests for deleting and recovering multiple files (#1539)
asnaith Sep 20, 2021
b77ec6b
Merge branch 'dev' into mnt/add-test-for-storage-summary-1530
asnaith Sep 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/common-components/src/CheckboxInput/CheckboxInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,14 @@ const useStyles = makeStyles(
})
)

interface ICheckboxProps
extends Omit<React.HTMLProps<HTMLInputElement>, "value" | "label"> {
interface ICheckboxProps extends Omit<React.HTMLProps<HTMLInputElement>, "value" | "label"> {
className?: string
label?: string | ReactNode
error?: string
value: boolean
indeterminate?: boolean
onChange(event: FormEvent<HTMLInputElement>): void
onChange: (event: FormEvent<HTMLInputElement>) => void
testId?: string
}

const CheckboxInput: React.FC<ICheckboxProps> = ({
Expand All @@ -117,6 +117,7 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
indeterminate = false,
value,
error,
testId,
...props
}) => {
const classes = useStyles(props)
Expand All @@ -126,7 +127,10 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
}

return (
<label className={clsx(classes.root, className)}>
<label
className={clsx(classes.root, className)}
data-testid={`checkbox-${testId}`}
>
<input
type="checkbox"
{...props}
Expand Down
2 changes: 2 additions & 0 deletions packages/files-ui/cypress/support/page-objects/binPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export const binPage = {
// bin page specific file browser elements
recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
permanentDeleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),

// kebab menu elements
recoverMenuOption: () => cy.get("[data-cy=menu-recover]"),
Expand Down
2 changes: 2 additions & 0 deletions packages/files-ui/cypress/support/page-objects/homePage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ export const homePage = {
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]"),
selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
uploadStatusToast: () => cy.get("[data-testId=toast-upload-status]", { timeout: 10000 }),
deleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
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"),
Expand Down
2 changes: 1 addition & 1 deletion packages/files-ui/cypress/support/page-objects/navigationMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const navigationMenu = {
homeNavButton: () => cy.get("[data-cy=home-nav]"),
binNavButton: () => cy.get("[data-cy=bin-nav]"),
settingsNavButton: () => cy.get("[data-cy=settings-nav]"),
spaceUsedLabel: () => cy.get("[data-cy=label-space-used]"),
spaceUsedLabel: () => cy.get("[data-cy=label-space-used]", { timeout: 10000 }),
spaceUsedProgressBar: () => cy.get("[data-cy=progress-bar-space-used]"),
sendFeedbackNavButton: () => cy.get("[data-cy=send-feedback-nav]"),
// mobile view only
Expand Down
68 changes: 66 additions & 2 deletions packages/files-ui/cypress/tests/file-management-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ describe("File management", () => {
binPage.recoverMenuOption().click()
recoverItemModal.folderList().should("exist")
recoverItemModal.folderList().contains("Home").click()
recoverItemModal.recoverButton().click()
recoverItemModal.recoverButton().safeClick()
binPage.fileItemRow().should("not.exist")

// ensure recovered file is correct
Expand Down Expand Up @@ -300,7 +300,7 @@ describe("File management", () => {
binPage.recoverMenuOption().click()
recoverItemModal.folderList().should("exist")
recoverItemModal.folderList().contains("Home").click()
recoverItemModal.recoverButton().click()
recoverItemModal.recoverButton().safeClick()
binPage.fileItemRow().should("not.exist")

// ensure recovered folder is correct
Expand Down Expand Up @@ -350,5 +350,69 @@ describe("File management", () => {
createFolderModal.errorLabel().should("be.visible")
createFolderModal.body().should("contain.text", "Name too long")
})

it("can see storage space summary updated accordingly", () => {
cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })

// Make sure elements exist and that we are starting with 0
navigationMenu.spaceUsedProgressBar().should("be.visible")
navigationMenu.spaceUsedLabel().should("contain.text", "0 Bytes")

// upload a file and ensure the storage space label adjusts
homePage.uploadFile("../fixtures/uploadedFiles/logo.png")
navigationMenu.spaceUsedLabel().should("not.contain.text", "0 Bytes")

// delete the file from the bin and ensure the storage space label adjusts
homePage.fileItemKebabButton().click()
homePage.deleteMenuOption().click()
deleteFileModal.confirmButton().safeClick()
homePage.deleteSuccessToast().should("not.exist")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we have the ability to close the toasts, I think it'd be cool do it, this would speed up tests a bit rather than waiting 4 sec every time.

Copy link
Contributor Author

@asnaith asnaith Sep 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tbaut Yeah, it will definitely speed up the tests but waiting for them to disappear adds a lot of reliability as we know for certain we are not doing anything else before the upload / delete is fully complete.

Without waiting for the toast to disappear I have seen that sometimes the UI does not update quick enough before performing the next actions / assertions and as we don't want to add hardcoded waits this was the best thing I could think of.

I'm not sure if dismissing the toast will give us the same level of reliability but definitely something we can try (is it all good if we look into that separately out of the context of this PR?).

Copy link
Collaborator

@Tbaut Tbaut Sep 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we know for certain we are not doing anything else before the upload / delete is fully complete.

Hmm the moment the toast for success appears, we should 100% have the UI re-render, and actually see the results of our action. Cypress has a default 4s timeout, which should really suffice IMHO

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tbaut Ah ok I think it's because all of the uploading status toasts have the same identifier at the moment then, maybe I need to specifically put one on the "upload complete" status and then dismiss.

We can address this separately in this issue : #1544

navigationMenu.binNavButton().click()
binPage.fileItemKebabButton().click()
binPage.deleteMenuOption().click()
deleteFileModal.confirmButton().safeClick()
binPage.permanentDeleteSuccessToast().should("not.exist")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

navigationMenu.spaceUsedLabel().should("contain.text", "0 Bytes")
})

it("can delete and recover multiple files", () => {
cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })

// upload 2 files
homePage.uploadFile("../fixtures/uploadedFiles/logo.png")
homePage.uploadFile("../fixtures/uploadedFiles/text-file.txt")
homePage.fileItemRow().should("have.length", 2)

// store their file names as cypress aliases for later comparison
homePage.fileItemName().eq(0).invoke("text").as("fileNameA")
homePage.fileItemName().eq(1).invoke("text").as("fileNameB")

// delete both of the files in the same action
homePage.selectAllCheckbox().click()
homePage.deleteSelectedButton().click()
deleteFileModal.confirmButton().safeClick()
homePage.deleteSuccessToast().should("not.exist")
homePage.fileItemRow().should("have.length", 0)

// recover both of the files in the same action
navigationMenu.binNavButton().click()
binPage.selectAllCheckbox().click()
binPage.recoverSelectedButton().click()
recoverItemModal.folderList().should("exist")
recoverItemModal.folderList().contains("Home").click()
recoverItemModal.recoverButton().safeClick()
binPage.fileItemRow().should("not.exist")

// return home and ensure both of the files were recovered
navigationMenu.homeNavButton().click()

cy.get("@fileNameA").then(($fileNameA) => {
homePage.fileItemName().should("contain.text", $fileNameA)
})

cy.get("@fileNameB").then(($fileNameB) => {
homePage.fileItemName().should("contain.text", $fileNameB)
})
})
})
})
5 changes: 0 additions & 5 deletions packages/files-ui/cypress/tests/main-navigation-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,6 @@ describe("Main Navigation", () => {
cy.url().should("include", "/settings")
})

// it("can see data storage summary info", () => {
// navigationMenu.spaceUsedLabel().should("contain.text", "of 20 GB used")
// navigationMenu.spaceUsedProgressBar().should("be.visible")
// })

it.skip("can navigate to block survey via send feedback button", () => {
// TODO: Andrew - find a way to check the button link, cypress doesn't support tabs #1084
})
Expand Down
3 changes: 2 additions & 1 deletion packages/files-ui/src/Components/Modules/FileBrowsers/BinFileBrowser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ const BinFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false }:
} ${t`deleted successfully`}`
addToast({
title: message,
type: "success"
type: "success",
testId: "permanent-deletion-success"
})
return Promise.resolve()
} catch (error) {
Expand Down
3 changes: 2 additions & 1 deletion packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
} ${t`deleted successfully`}`
const id = addToast({
title: message,
type: "success"
type: "success",
testId: "deletion-success"
})
console.log(id)
}
Expand Down
1 change: 1 addition & 0 deletions packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,6 +870,7 @@ const FilesList = ({ isShared = false }: Props) => {
<CheckboxInput
value={selectedItems.length === items.length}
onChange={() => toggleAll()}
testId="select-all"
Copy link
Contributor Author

@asnaith asnaith Sep 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this update to the way we add identifiers to checkbox's @Tbaut 👍

/>
</TableHeadCell>
<TableHeadCell>
Expand Down