Merge pull request stakwork#568 from stakwork/fix/persist_filters

Added Bounties Filters Persistence

.github/workflows/prjob_cypress_tests.yml

@@ -69,6 +69,13 @@ jobs:
         run: |
           sleep 20
           yarn run cypress:run
+
+      - name: Upload Cypress logs
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-logs
+          path: cypress/screenshots
 
       - name: Stop Stack
         working-directory: ./stack

cypress.config.ts

@@ -1,8 +1,8 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  viewportWidth: 1600,
-  viewportHeight: 1000,
+  viewportWidth: 1800,
+  viewportHeight: 1200,
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here

cypress/e2e/31_editBountyBySearch.cy.ts

@@ -101,7 +101,6 @@ describe('Edit Bounty By Searching, Change Workspace And Assignee', () => {
     cy.wait(600);
 
     cy.contains('Open').click();
-    cy.contains('Assigned').click();
     cy.get('body').click(0, 0);
     cy.wait(1000);
 

cypress/e2e/33_workspaceBountyStatusFilter.cy.ts

@@ -191,15 +191,18 @@ describe('filter by status for org bounty', () => {
     cy.contains(bounty6.title);
     cy.wait(1000);
 
-    cy.contains('label', 'Assigned').click();
-    cy.wait(1000);
-
     cy.create_workspace_bounty(bounty7);
     cy.wait(1000);
 
     cy.create_workspace_bounty(bounty8);
     cy.wait(1000);
 
+    cy.contains('Status').first().click();
+    cy.wait(1000);
+
+    cy.contains('label', 'Assigned').click();
+    cy.wait(1000);
+
     cy.contains(bounty7.title).click();
     cy.wait(1000);
 

cypress/e2e/37_bountyFilters.cy.ts

@@ -1,22 +1,18 @@
-describe('Alice tries to create 8 bounties and then assert filtered bounties', () => {
-  it('Create 8 bounties and assert filtered bounties', () => {
-    let activeUser = 'alice';
+describe('Alice tries to create 6 bounties and then assert filtered bounties', () => {
+  it('Create 6 bounties and assert filtered bounties', () => {
+    let activeUser = 'bob';
     cy.login(activeUser);
-    cy.wait(1000);
+    cy.wait(2000);
+
+    const assignees = ['carol', 'carol', 'carol', 'carol', '', ''];
+    const languages = ['Typescript', 'Lightning', 'PHP', 'Typescript', 'PHP', 'Typescript'];
 
-    const assignees = ['carol', 'carol', 'carol', '', '', '', 'carol', 'carol'];
-    const languages = [
-      'Typescript',
-      'Lightning',
-      'PHP',
-      'Typescript',
-      'PHP',
-      'Typescript',
-      'Lightning',
-      'Typescript'
-    ];
-
-    for (let i = 0; i < 8; i++) {
+    cy.intercept({
+      method: 'GET',
+      url: 'http://localhost:13000/gobounties/all*'
+    }).as('bountyFilter');
+
+    for (let i = 0; i < 6; i++) {
       cy.create_bounty({
         title: `Filter Bounty Title ${i}`,
         category: 'Web development',
@@ -31,76 +27,72 @@ describe('Alice tries to create 8 bounties and then assert filtered bounties', (
       });
       cy.wait(1000);
 
-      if (i > 5) {
-        if (i === 6) {
+      if (i > 2) {
+        if (i === 3) {
           // Unchecked the Open Filter and Checked the Assigned Filter
           cy.contains('Filter').click();
-          cy.contains('Open').click();
-          cy.contains('Assigned').click();
+          cy.contains('label', 'Open').click();
+          cy.contains('label', 'Assigned').click();
           cy.wait(1000);
-        }
 
-        cy.contains(`Filter Bounty Title ${i}`).click();
-        cy.wait(1000);
+          cy.contains(`Filter Bounty Title ${i}`).click();
+          cy.wait(1000);
 
-        cy.contains('Mark as Paid').click();
-        cy.wait(1000);
+          cy.contains('Mark as Paid').click();
+          cy.wait(1000);
 
-        cy.contains('Next').click();
-        cy.wait(1000);
+          cy.contains('Next').click();
+          cy.wait(1000);
 
-        cy.contains('Skip and Mark Paid').click();
-        cy.wait(1000);
+          cy.contains('Skip and Mark Paid').click();
+          cy.wait(1000);
 
-        cy.get('body').click(0, 0);
-        cy.wait(1000);
+          cy.get('body').click(0, 0);
+        }
       }
     }
 
     cy.logout(activeUser);
     cy.wait(1000);
 
-    // Unchecked the Open Filter and Checked the Assigned Filter
-    cy.contains('Filter').click();
-    cy.contains('Open').click();
-    cy.contains('Assigned').click();
+    // check open filter
     cy.contains('Filter').click();
+    cy.contains('label', 'Assigned').click();
+    cy.contains('label', 'Open').click();
     cy.wait(1000);
+    // close filter
+    cy.get('body').click(0, 0);
+
+    cy.wait('@bountyFilter');
+
+    // assigned bounties should not exists
+    cy.contains(`Filter Bounty Title 0`).should('not.exist');
+    cy.contains(`Filter Bounty Title 1`).should('not.exist');
 
-    for (let i = 0; i < 8; i++) {
-      if (i < 3) {
-        cy.contains(`Filter Bounty Title ${i}`).should('exist');
-      } else {
-        cy.contains(`Filter Bounty Title ${i}`).should('not.exist');
-      }
-    }
     cy.wait(1000);
 
     cy.contains('Filter').click();
     cy.contains('label', 'Typescript').click();
     cy.contains('Filter').click();
-    cy.wait(1000);
 
-    for (let i = 0; i < 8; i++) {
-      if (i == 0) {
-        cy.contains(`Filter Bounty Title ${i}`).should('exist');
-      } else {
-        cy.contains(`Filter Bounty Title ${i}`).should('not.exist');
-      }
-    }
+    // close filter
+    cy.get('body').click(0, 0);
+    cy.wait('@bountyFilter');
+
+    cy.contains(`Filter Bounty Title 5`).should('exist');
     cy.wait(1000);
 
     cy.contains('Filter').click();
-    cy.contains('label', 'Lightning').click();
-    cy.contains('Filter').click();
+    // uncheck
+    cy.contains('label', 'Open').click();
+    cy.contains('label', 'Typescript').click();
     cy.wait(1000);
 
-    for (let i = 0; i < 8; i++) {
-      if (i < 2) {
-        cy.contains(`Filter Bounty Title ${i}`).should('exist');
-      } else {
-        cy.contains(`Filter Bounty Title ${i}`).should('not.exist');
-      }
-    }
+    // check
+    cy.contains('label', 'Assigned').click();
+    cy.contains('label', 'Lightning').click();
+    cy.wait('@bountyFilter');
+
+    cy.contains(`Filter Bounty Title 1`).should('exist');
   });
 });

cypress/support/commands.ts

@@ -160,15 +160,15 @@ Cypress.Commands.add('logout', (userAlias: string) => {
 
 Cypress.Commands.add('create_bounty', (bounty, clickMethod = 'contains') => {
   if (clickMethod === 'contains') {
-    cy.contains('Bounties').click();
+    cy.contains('Bounties').click({ force: true });
   } else if (clickMethod === 'testId') {
-    cy.get('[data-testid="Bounties-tab"]').click();
+    cy.get('[data-testid="Bounties-tab"]').click({ force: true });
   } else {
     throw new Error('Invalid click method specified');
   }
   cy.wait(5000);
-  cy.contains('Post a Bounty').click();
-  cy.contains('Start').click();
+  cy.contains('Post a Bounty').click({ force: true });
+  cy.contains('Start').click({ force: true });
 
   if (bounty.workspace) {
     cy.get('[data-testid="Workspace"]').click({ force: true });
@@ -181,16 +181,18 @@ Cypress.Commands.add('create_bounty', (bounty, clickMethod = 'contains') => {
   if (bounty.github_issue_url) {
     cy.get('[data-testid="Github"]').type(bounty.github_issue_url);
   }
-
   cy.wait(1000);
 
   if (bounty.coding_language && bounty.coding_language.length > 0) {
-    cy.contains('Coding Language').click();
+    cy.contains('Coding Language').click({ force: true });
 
     for (let i = 0; i < bounty.coding_language.length; i++) {
-      cy.get('.CheckboxOuter').contains(bounty.coding_language[i]).scrollIntoView().click();
+      cy.get('.CheckboxOuter')
+        .contains(bounty.coding_language[i])
+        .scrollIntoView()
+        .click({ force: true });
     }
-    cy.contains('Coding Language').click();
+    cy.contains('Coding Language').click({ force: true });
   }
 
   cy.get('[data-testid="Category *"]').click();
@@ -228,10 +230,10 @@ Cypress.Commands.add('create_bounty', (bounty, clickMethod = 'contains') => {
 
   if (bounty.assign) {
     cy.get('.SearchInput').type(bounty.assign);
-    cy.wait(1000);
-    cy.get('.People').contains('Assign').click();
+    cy.wait(2000);
+    cy.get('.People').contains('Assign').click({ force: true });
   } else {
-    cy.contains('Decide Later').click();
+    cy.contains('Decide Later').click({ force: true });
   }
 
   cy.contains('Finish').click();

src/pages/tickets/Tickets.tsx

@@ -24,7 +24,7 @@ function BodyComponent() {
   const [showDropdown, setShowDropdown] = useState(false);
   const selectedWidget = 'bounties';
   const [scrollValue, setScrollValue] = useState<boolean>(false);
-  const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState(defaultBountyStatus);
+  const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState(main.bountiesStatus);
   const [checkboxIdToSelectedMapLanguage, setCheckboxIdToSelectedMapLanguage] = useState({});
   const [languageString, setLanguageString] = useState('');
   const [page, setPage] = useState<number>(1);
@@ -41,24 +41,32 @@ function BodyComponent() {
   useEffect(() => {
     const status = searchParams.get('status');
     if (status === 'completed') {
-      setCheckboxIdToSelectedMap({
+      const status = {
         ...defaultBountyStatus,
         Open: false,
         Completed: true
-      });
+      };
+      setCheckboxIdToSelectedMap(status);
+      main.setBountiesStatus(status);
     } else if (status === 'assigned') {
-      setCheckboxIdToSelectedMap({
+      const status = {
         ...defaultBountyStatus,
         Open: false,
         Assigned: true
-      });
+      };
+      setCheckboxIdToSelectedMap(status);
+      main.setBountiesStatus(status);
     } else if (status === 'open') {
-      setCheckboxIdToSelectedMap({
+      const status = {
         ...defaultBountyStatus,
         Open: true
-      });
+      };
+      setCheckboxIdToSelectedMap(status);
+      main.setBountiesStatus(status);
+    } else {
+      setCheckboxIdToSelectedMap(main.bountiesStatus);
     }
-  }, [searchParams, loading]);
+  }, [searchParams, loading, main.bountiesStatus]);
 
   useEffect(() => {
     (async () => {
@@ -104,9 +112,9 @@ function BodyComponent() {
         [optionId]: !checkboxIdToSelectedMap[optionId]
       }
     };
-    setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
     // set the store status, to enable the accurate navigation modal call
     main.setBountiesStatus(newCheckboxIdToSelectedMap);
+    setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
     getTotalBounties(newCheckboxIdToSelectedMap);
     // set data to default
     setCurrentItems(queryLimit);

src/pages/tickets/__tests__/Tickets.spec.tsx

@@ -5,6 +5,7 @@ import { mainStore } from 'store/main';
 import { uiStore } from 'store/ui';
 import { user } from '__test__/__mockData__/user';
 import Tickets from '../Tickets';
+import { BountyStatus, defaultBountyStatus } from 'store/interface';
 
 let fetchStub: sinon.SinonStub;
 
@@ -35,6 +36,8 @@ jest.mock('remark-gfm', () => {});
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 jest.mock('rehype-raw', () => {});
 
+jest.setTimeout(10000);
+
 const mockPush = jest.fn();
 const mockGoBack = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -60,7 +63,8 @@ jest.mock('../../../store', () => ({
       getTotalBountyCount: jest.fn(),
       setBountiesStatus: jest.fn(),
       setBountyLanguages: jest.fn(),
-      getTribesByOwner: jest.fn()
+      getTribesByOwner: jest.fn(),
+      bountiesStatus: defaultBountyStatus
     },
     ui: {
       meInfo: {},