add tests

graph/client-e2e/src/integration/app.spec.ts

@@ -12,12 +12,13 @@ import {
   getSelectProjectsMessage,
   getTextFilterInput,
   getTextFilterReset,
+  getToggleAllButtonForFolder,
   getUncheckedProjectItems,
   getUnfocusProjectButton,
 } from '../support/app.po';
 
-import * as nxExamplesJson from '../fixtures/nx-examples.json';
 import * as affectedJson from '../fixtures/affected.json';
+import * as nxExamplesJson from '../fixtures/nx-examples.json';
 
 describe('graph-client', () => {
   before(() => {
@@ -229,6 +230,21 @@ describe('graph-client', () => {
     });
   });
 
+  describe('toggle all projects in folder button', () => {
+    it('should uncheck all projects in folder if at least one project checked', () => {
+      cy.contains('shared-product-state').scrollIntoView().should('be.visible');
+      cy.get('[data-project="shared-product-state"]').should('be.visible');
+      cy.get('[data-project="shared-product-state"]').click({ force: true });
+      getToggleAllButtonForFolder('shared/product').click({ force: true });
+      getCheckedProjectItems().should('have.length', 0);
+    });
+
+    it('should check all projects in folder if no projects checked yet', () => {
+      getToggleAllButtonForFolder('shared').click({ force: true });
+      getCheckedProjectItems().should('have.length', 5);
+    });
+  });
+
   describe('image download button', () => {
     it('should be hidden initally', () => {
       getImageDownloadButton().should('have.class', 'opacity-0');

graph/client-e2e/src/support/app.po.ts

@@ -32,3 +32,6 @@ export const getImageDownloadButton = () =>
 
 export const getFocusButtonForProject = (projectName: string) =>
   cy.get(`[data-cy="focus-button-${projectName}"]`);
+
+export const getToggleAllButtonForFolder = (folderName: string) =>
+  cy.get(`[data-cy="toggle-folder-visibility-button-${folderName}"]`);

graph/client/src/app/sidebar/project-list.tsx

@@ -216,6 +216,7 @@ function SubProjectList({
                 : `Show all ${headerText} projects`
             }
             className="absolute inset-y-0 right-0 flex cursor-pointer items-center text-sm font-semibold uppercase tracking-wide lg:text-xs"
+            data-cy={`toggle-folder-visibility-button-${headerText}`}
             onClick={() => toggleAllProjects(someProjectsSelected)}
           >
             <EyeIcon className="h-5 w-5"></EyeIcon>