fix: e2e tests on dashboard page

taskany-inc · Sep 12, 2024 · a15dddd · a15dddd
1 parent ebe0b3a
commit a15dddd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/cypress/e2e/dashboard.cy.ts b/cypress/e2e/dashboard.cy.ts
@@ -7,6 +7,9 @@ import {
     participants,
     projectListItem,
     watch,
+    sortPanel,
+    sortPanelDropdownTrigger,
+    sortPanelEmptyProjectsCheckbox,
 } from '../../src/utils/domObjects';
 import { keyPredictor } from '../../src/utils/keyPredictor';
 import { getTranslation } from '../support/lang';
@@ -33,16 +36,10 @@ describe('Dashboard', () => {
         cy.signInViaEmail();
     });
 
-    it('filters are active by default', () => {
-        cy.get('body')
-            .should('exist')
-            .then(($body) => {
-                if ($body.find(projectListItem.query).length > 0) {
-                    cy.get(projectListItem.query).filter(`:contains(${projectOne})`).should('not.exist');
-                    return;
-                }
-                cy.get(projectListItem.query).should('not.exist');
-            });
+    it.only('filters are active by default', () => {
+        cy.get('body').should('exist');
+
+        cy.get(projectListItem.query).filter(`:contains(${projectOne})`).should('exist');
 
         cy.get(filtersPanelResetButton.query).should('exist').click().should('not.exist');
 
@@ -89,23 +86,32 @@ describe('User dashboard', () => {
             }).then((res) => Cypress.env('testUserProject', res));
         });
 
-        it('user dont see own project without goals with applied filters', () => {
-            cy.get(projectListItem.query).should('not.exist');
+        it('user see own project without goals with applied filters', () => {
+            cy.get(projectListItem.query).should('exist').and('include.text', userProjectTitle);
         });
 
-        it('user see own project without goals with clear filters', () => {
+        it("user don't see own project without goals with empty projects filters", () => {
+            cy.get(projectListItem.query).should('exist');
+
+            cy.get(sortPanel.query).should('not.exist');
+            cy.get(sortPanelDropdownTrigger.query).should('exist').click();
+            cy.get(sortPanel.query).should('exist');
+            cy.get(sortPanelEmptyProjectsCheckbox.query)
+                .should('exist')
+                .and('be.checked')
+                .click()
+                .should('not.checked');
+
             cy.get(projectListItem.query).should('not.exist');
+        });
 
+        it('user see own project without goals with clear filters', () => {
             cy.get(filtersPanelResetButton.query).should('exist').click().should('not.exist');
 
             cy.get(projectListItem.query).should('exist').and('include.text', userProjectTitle);
         });
 
         it("user can create goal from projects's list", () => {
-            cy.get(projectListItem.query).should('not.exist');
-
-            cy.get(filtersPanelResetButton.query).should('exist').click().should('not.exist');
-
             cy.get(projectListItem.query).find(createGoalInlineControl.query).and('not.include.text');
         });
 

diff --git a/src/components/FiltersBar/FiltersBar.tsx b/src/components/FiltersBar/FiltersBar.tsx
@@ -5,6 +5,7 @@ import { nullable } from '@taskany/bricks';
 
 import { PageView } from '../../hooks/useUrlFilterParams';
 import { Dropdown, DropdownPanel, DropdownTrigger } from '../Dropdown/Dropdown';
+import { sortPanel, sortPanelDropdownTrigger } from '../../utils/domObjects';
 
 import s from './FiltersBar.module.css';
 import { tr } from './FiltersBar.i18n';
@@ -37,14 +38,16 @@ export const FiltersBarLayoutSwitch: FC<FiltersBarLayoutSwitchProps> = ({ value
 export const FiltersBarViewDropdown: FC<{ children?: ReactNode }> = ({ children }) => {
     return (
         <Dropdown>
-            <DropdownTrigger className={s.FiltersBarViewDropdownDrigger} view="fill">
+            <DropdownTrigger className={s.FiltersBarViewDropdownDrigger} view="fill" {...sortPanelDropdownTrigger.attr}>
                 <div className={s.FiltersBarViewDropdownDrigger}>
                     <IconAdjustHorizontalSolid size="xxs" />
                     <Text size="s">{tr('View')}</Text>
                 </div>
             </DropdownTrigger>
             <DropdownPanel width={335} placement="bottom-start" className={s.FiltersBarDropdownPanel}>
-                <div className={s.FiltersBarDropdownPanelContainer}>{children}</div>
+                <div className={s.FiltersBarDropdownPanelContainer} {...sortPanel.attr}>
+                    {children}
+                </div>
             </DropdownPanel>
         </Dropdown>
     );

diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx
@@ -19,6 +19,7 @@ import {
     appliedFiltersPanel,
     appliedFiltersPanelEstimate,
     appliedFiltersPanelState,
+    sortPanelEmptyProjectsCheckbox,
 } from '../../utils/domObjects';
 import {
     FiltersBarViewDropdown,
@@ -276,6 +277,7 @@ export const FiltersPanel: FC<{
                             {nullable(enableHideProjectToggle, () => (
                                 <FiltersBarDropdownContent>
                                     <Checkbox
+                                        {...sortPanelEmptyProjectsCheckbox.attr}
                                         label={tr('Empty Projects')}
                                         checked={!hideEmptyProjects}
                                         onChange={() => setHideEmptyProjects(!hideEmptyProjects)}

diff --git a/src/utils/domObjects.ts b/src/utils/domObjects.ts
@@ -16,6 +16,10 @@ export const filtersPanel = DO('filtersPanel');
 export const filtersPanelTitle = filtersPanel.add('title');
 export const filtersPanelResetButton = filtersPanel.add('resetButton');
 
+export const sortPanel = DO('sortPanel');
+export const sortPanelDropdownTrigger = DO('sortPanelDropdownTrigger');
+export const sortPanelEmptyProjectsCheckbox = sortPanel.add('emptyProjectsCheckbox');
+
 export const appliedFiltersPanel = DO('appliedFiltersPanel');
 export const appliedFiltersPanelEstimate = appliedFiltersPanel.add('estimate');
 export const appliedFiltersPanelState = appliedFiltersPanel.add('state');