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

Feature/filter functionality #685

Merged
merged 5 commits into from
Mar 8, 2022
Merged

Feature/filter functionality #685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bdb5487
Add filter function for submission's Name
hannyle Feb 24, 2022
3e4e9c9
Handle rendering data table when filtering and deleting submissions
hannyle Mar 1, 2022
d6f4061
Add debounce function for filtering name
hannyle Mar 1, 2022
b84bb0e
Update e2e test for filtering submissions and pagination
hannyle Mar 3, 2022
24a00f2
Update Changelog
hannyle Mar 3, 2022
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- Option to filter by submission's name in Home page #685
- New navigation bar and new home page #669

#### Added
Expand Down
22 changes: 15 additions & 7 deletions cypress/integration/home.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ describe("Home e2e", function () {
cy.login()
})

it("show Overview submissions in Home page, create a draft folder, navigate to see folder details, delete object inside folder, navigate back to Overview submissions", () => {
it("show draft submission data table in Home page, be able to edit and delete a draft submission inside the table", () => {
cy.intercept("/folders*").as("fetchFolders")
// Create a new Unpublished folder
cy.get("button").contains("Create submission").click()

Expand Down Expand Up @@ -35,29 +36,36 @@ describe("Home e2e", function () {
// Save folder and navigate to Home page
cy.get("button[type=button]").contains("Save and Exit").click()
cy.get('button[aria-label="Save a new folder and move to frontpage"]').contains("Return to homepage").click()
cy.wait("@fetchFolders", { timeout: 10000 })

cy.contains("My submissions").should("be.visible")
cy.get("[data-field='name']").eq(1).should("have.text", "Test unpublished folder")
cy.get("[data-testid='edit-draft-submission']").click()

cy.get("[data-testid='folderName']", { timeout: 1000 }).clear().type("Edited unpublished folder")
cy.get("[data-testid='edit-draft-submission']").scrollIntoView().should("be.visible")
cy.contains("Edit").click({ force: true })

cy.get("[data-testid='folderName']", { timeout: 10000 }).clear().type("Edited unpublished folder")
cy.get("button[type=button]").contains("Next").click()
cy.get("[data-testid='wizard-objects']", { timeout: 10000 }).should("be.visible")
cy.get("button[type=button]").contains("Save and Exit").click()
cy.get('button[aria-label="Save a new folder and move to frontpage"]').contains("Return to homepage").click()
cy.wait("@fetchFolders", { timeout: 10000 })

// Check that submission's name has been edited
cy.contains("My submissions", { timeout: 1000 }).should("be.visible")
cy.contains("My submissions").should("be.visible").click()
cy.contains("Edited unpublished folder").should("be.visible")

// Delete the submission and it shouldn't be there anymore
cy.get("[data-testid='delete-draft-submission']").click()
cy.get("[data-testid='delete-draft-submission']").scrollIntoView().should("be.visible")
cy.contains("Delete").click({ force: true })

cy.contains(".MuiAlert-message", "The submission has been deleted successfully!", {
timeout: 1000,
})
cy.contains("Currently there are no draft submissions").should("be.visible")
cy.contains("Currently there are no submissions").should("be.visible")
})

it("create a published folder, navigate to see folder details, delete object inside folder, navigate back to Overview submissions", () => {
it("create a published submission, not be able to edit or delete that submission inside the data table", () => {
// Create a new Published folder
cy.get("button").contains("Create submission").click()

Expand Down
284 changes: 268 additions & 16 deletions cypress/integration/pagination.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ describe("unpublished folders, published folders, and user's draft templates pag
url: "/folders?page=2&per_page=5&published=false",
},
unpublishedFoldersResponsePage2
)
).as("unpublishedPage2")

// Mock response for Published Folders
const publishedFoldersResponse5 = {
Expand All @@ -197,24 +197,35 @@ describe("unpublished folders, published folders, and user's draft templates pag
publishedFoldersResponse5
)
cy.login()
cy.get("[data-testid='table-pagination']", { timeout: 10000 }).should("be.visible")

cy.get("[data-testid='page info']").contains("1 of 20 pages").should("be.visible")

cy.get("[data-testid='page info']", { timeout: 10000 }).contains("1 of 20 pages").should("be.visible")
// Click Next page button
cy.get("[data-testid='NavigateNextIcon']").click()
cy.wait(500)
cy.get("p").contains("6-10 of 100", { timeout: 10000 }).should("be.visible")
cy.get("[data-testid='page info']", { timeout: 10000 }).contains("2 of 20 pages").should("be.visible")
cy.get("[data-testid='NavigateNextIcon']")
.parent()
.should("be.visible")
.then($el => $el.click())

cy.wait("@unpublishedPage2")

cy.get("div[aria-haspopup='listbox']").contains(5, { timeout: 10000 }).as("button")
cy.contains("6-10 of 100", { timeout: 10000 }).should("be.visible")
cy.get("[data-testid='page info']").contains("2 of 20 pages", { timeout: 10000 }).should("be.visible")
// Check "Items per page" options
cy.get("div[aria-haspopup='listbox']", { timeout: 10000 }).contains(5).click()
cy.get("li[data-value='5']").should("be.visible")
cy.wait(0)
cy.get("@button")
.then($el => {
expect(Cypress.dom.isAttached($el).valueOf()).to.be.true
})
.click()

cy.get("li[data-value='5']", { timeout: 10000 }).should("be.visible")
cy.get("li[data-value='15']").should("be.visible")
cy.get("li[data-value='25']").should("be.visible")
cy.get("li[data-value='50']").should("be.visible")

// Select 15 items
cy.get("li[data-value='15']").click()
cy.get("li[data-value='15']").click({ force: true })
cy.get("p", { timeout: 10000 }).contains("1-15 of 100").should("be.visible")
cy.get("[data-testid='page info']").contains("1 of 7 pages").should("be.visible")

Expand All @@ -231,7 +242,7 @@ describe("unpublished folders, published folders, and user's draft templates pag
cy.get("[data-testid='page info']").contains("1 of 2 pages").should("be.visible")
})

it("should renders pagination for unpublished folders list correctly", () => {
it("should render pagination for unpublished folders list correctly", () => {
// Mock responses for Published Folders
const publishedFoldersResponse5 = {
folders: [
Expand Down Expand Up @@ -354,7 +365,7 @@ describe("unpublished folders, published folders, and user's draft templates pag
url: "/folders?page=2&per_page=5&published=true",
},
publishedFoldersResponsePage2
)
).as("publishedPage2")

cy.intercept(
{
Expand All @@ -371,11 +382,15 @@ describe("unpublished folders, published folders, and user's draft templates pag
cy.get("[data-testid='page info']").should("be.visible")
cy.get("[data-testid='page info']").contains("1 of 30 pages").should("be.visible")
// Click Next page button
cy.get("[data-testid='NavigateNextIcon']").click()
cy.get("p", { timeout: 10000 }).contains("6-10 of 150").should("be.visible")
cy.get("[data-testid='NavigateNextIcon']")
.parent()
.should("be.visible")
.then($el => $el.click())
cy.contains("6-10 of 150", { timeout: 10000 }).should("be.visible")
cy.get("[data-testid='page info']").contains("2 of 30 pages").should("be.visible")

cy.wait("@publishedPage2")
cy.get("button[aria-label='Go to page 3']").click()

cy.get("[data-testid='page info']").contains("3 of 30 pages").should("be.visible")

// Check "Items per page" options
Expand All @@ -389,7 +404,244 @@ describe("unpublished folders, published folders, and user's draft templates pag
cy.get("li[data-value='50']").click()
cy.get("p", { timeout: 10000 }).contains("1-50 of 150").should("be.visible")
cy.get("[data-testid='page info']").contains("1 of 3 pages").should("be.visible")
})
}),
it("should render pagination correctly when filtering the submission name", () => {
const unpublishedPage1 = {
folders: [
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB1",
metadataObjects: [],
name: "draft-folder1",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB2", metadataObjects: [], name: "test", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB3", metadataObjects: [], name: "Biology", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB4", metadataObjects: [], name: "test2", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB5", metadataObjects: [], name: "Unpub5", published: false },
],
page: { page: 1, size: 5, totalPages: 6, totalFolders: 30 },
}

const unpublishedPage2 = {
folders: [
{ descriptioni: "d", drafts: [], folderId: "UNPUB6", metadataObjects: [], name: "Unpub6", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB7", metadataObjects: [], name: "Unpub7", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB8", metadataObjects: [], name: "Unpub8", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB9", metadataObjects: [], name: "Unpub9", published: false },
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB10",
metadataObjects: [],
name: "Unpub10",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB1", metadataObjects: [], name: "Unpub1", published: false },
],
page: { page: 2, size: 5, totalPages: 6, totalFolders: 30 },
}

const unpublished15 = {
folders: [
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB1",
metadataObjects: [],
name: "draft-folder1",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB2", metadataObjects: [], name: "test", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB3", metadataObjects: [], name: "Biology", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB4", metadataObjects: [], name: "test2", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB5", metadataObjects: [], name: "Unpub5", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB6", metadataObjects: [], name: "Unpub6", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB7", metadataObjects: [], name: "Unpub7", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB8", metadataObjects: [], name: "Unpub8", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB9", metadataObjects: [], name: "Unpub9", published: false },
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB10",
metadataObjects: [],
name: "Unpub10",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB1", metadataObjects: [], name: "Unpub1", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB2", metadataObjects: [], name: "Unpub2", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB3", metadataObjects: [], name: "Unpub3", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB4", metadataObjects: [], name: "Unpub4", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB5", metadataObjects: [], name: "Unpub5", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB6", metadataObjects: [], name: "test3", published: false },
],
page: { page: 1, size: 15, totalPages: 2, totalFolders: 30 },
}

const allUnpublished = {
folders: [
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB1",
metadataObjects: [],
name: "draft-folder1",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB2", metadataObjects: [], name: "test", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB3", metadataObjects: [], name: "Biology", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB4", metadataObjects: [], name: "test2", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB5", metadataObjects: [], name: "Unpub5", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB6", metadataObjects: [], name: "Unpub6", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB7", metadataObjects: [], name: "Unpub7", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB8", metadataObjects: [], name: "Unpub8", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB9", metadataObjects: [], name: "Unpub9", published: false },
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB10",
metadataObjects: [],
name: "Unpub10",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB1", metadataObjects: [], name: "Unpub1", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB2", metadataObjects: [], name: "Unpub2", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB3", metadataObjects: [], name: "Unpub3", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB4", metadataObjects: [], name: "Unpub4", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB5", metadataObjects: [], name: "Unpub5", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB6", metadataObjects: [], name: "test3", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB7", metadataObjects: [], name: "test4", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB8", metadataObjects: [], name: "test5", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB9", metadataObjects: [], name: "test6", published: false },
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB10",
metadataObjects: [],
name: "Unpub10",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB1", metadataObjects: [], name: "test7", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB2", metadataObjects: [], name: "test8", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB3", metadataObjects: [], name: "test9", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB4", metadataObjects: [], name: "test10", published: false },
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB5",
metadataObjects: [],
name: "this-draft",
published: false,
},
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB6",
metadataObjects: [],
name: "draft-folder2",
published: false,
},
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB7",
metadataObjects: [],
name: "draft-folder3",
published: false,
},
{ descriptioni: "d", drafts: [], folderId: "UNPUB8", metadataObjects: [], name: "abc", published: false },
{ descriptioni: "d", drafts: [], folderId: "UNPUB9", metadataObjects: [], name: "Unpub9", published: false },
{
descriptioni: "d",
drafts: [],
folderId: "UNPUB10",
metadataObjects: [],
name: "Unpub10",
published: false,
},
],
page: { page: 1, size: 30, totalPages: 1, totalFolders: 30 },
}

cy.intercept(
{
method: "GET",
url: "/folders?page=1&per_page=5&published=false",
},
unpublishedPage1
)

cy.intercept(
{
method: "GET",
url: "/folders?page=2&per_page=5&published=false",
},
unpublishedPage2
)

cy.intercept(
{
method: "GET",
url: "/folders?page=1&per_page=30&published=false",
},
allUnpublished
)

cy.intercept("DELETE", "/folders/UNPUB9", {
statusCode: 200,
}).as("deleteSubmission")

cy.intercept(
{
method: "GET",
url: "/folders?page=1&per_page=15&published=false",
},
unpublished15
).as("unpublished15")

cy.login()
cy.get("[data-testid='page info']").contains("1 of 6 pages").should("be.visible")

// Type a filtering text and check if the filtered list renders correctly with pagination
cy.get("input[data-testid='wizard-search-box']").type("test")
cy.contains("1-5 of 10", { timeout: 10000 }).should("be.visible")
cy.get("[data-testid='page info']").contains("1 of 2 pages").should("be.visible")
cy.get("button[aria-label='Go to page 2']").click()
cy.contains("test6", { timeout: 10000 }).should("be.visible")

// Delete a submission and check that it is deleted from filtered list and the current page stays the same as page 2
cy.get("[data-testid='delete-draft-submission']").eq(0).click()
cy.wait("@deleteSubmission", { timeout: 6000 })
cy.contains("test6", { timeout: 10000 }).should("not.exist")
cy.get("button[aria-label='page 2']", { timeout: 10000 }).should("be.visible")

// Select "Items per page" to check all filtered items exist
cy.wait(0)
cy.get("div[role='button']")
.contains(5, { timeout: 10000 })
.then($el => {
expect(Cypress.dom.isAttached($el).valueOf()).to.be.true
})
.click()

cy.get("li[data-value='15']").click()
cy.wait("@unpublished15")
cy.contains("1-9 of 9").should("be.visible")

// Clear the filter and check that the pagination is back to normal to render all submissions
cy.get("div[role='button']", { timeout: 10000 }).contains(15).click()
cy.get("li[data-value='5']").click()
cy.get("svg[data-testid='ClearIcon']").click()
cy.get("input[data-testid='wizard-search-box']").should("have.value", "")

cy.contains("1-5 of 30", { timeout: 10000 }).should("be.visible")
cy.get("[data-testid='page info']").contains("1 of 6 pages").should("be.visible")

// If the filtering text is not found, the table renders no pagination
cy.get("input[data-testid='wizard-search-box']").type("123456")
cy.get("[data-testid='table-pagination']").should("not.exist")
})
})

export {}
Loading