Merge pull request #85 from cisagov/cypress/light-theme-test

upgrade cypress, toggle theme test, changed cypress config

.github/workflows/test.yml

@@ -71,7 +71,7 @@ jobs:
       path: dist
 
    - name: 'Red Team Tests - Chrome'
-     uses: cypress-io/github-action@v5.0.0
+     uses: cypress-io/github-action@v5.1.0
      with:
       start: yarn start
       wait-on: 'http://localhost:4000/api/graphql, http://localhost:3500'
@@ -153,7 +153,7 @@ jobs:
       path: dist
 
    - name: 'Blue Team Tests - Chrome'
-     uses: cypress-io/github-action@v5.0.0
+     uses: cypress-io/github-action@v5.1.0
      with:
       start: yarn start:blue
       wait-on: 'http://localhost:4000/api/graphql, http://localhost:3500'

applications/client/src/components/Forms/SettingsForm.tsx

@@ -76,6 +76,7 @@ export const SettingsForm = observer<SettingsFormProps>(({ ...props }) => {
 				label="Show Hidden Beacons, Hosts, and Servers"
 			/>
 			<Switch // Uncomment to test light theme
+				cy-test="toggle-theme"
 				checked={store.settings.theme === 'light'}
 				onChange={(event) => store.settings.setTheme(event.currentTarget.checked ? 'light' : 'dark')}
 				label="Light Theme (beta)"

applications/redeye-e2e/cypress.config.js

@@ -16,7 +16,6 @@ module.exports = defineConfig({
 	reporterOptions: {
 		configFile: './reporter-config.json',
 	},
-
 	e2e: {
 		setupNodeEvents(on, config) {
 			on('task', {
@@ -44,8 +43,8 @@ module.exports = defineConfig({
 				},
 			});
 		},
-		specPattern: '../../**/*.cy.js',
-		supportFile: './src/support/index.js',
+		specPattern: '**/**/e2e/**/*.cy.js',
+		supportFile: '**/**/src/support/e2e.js',
 		excludeSpecPattern: '*.skip.js',
 		defaultCommandTimeout: 15000,
 	},

applications/redeye-e2e/src/integration/e2e/blueteam/campaign-card-tests.cy.js

@@ -17,7 +17,7 @@ describe('Search and filter campaigns and verify beacon counts', () => {
 		cy.get('[cy-test=search]').click().type(cmd).type('{enter}');
 		cy.wait('@searchCommands');
 		cy.get('[cy-test=search-result-item]').should('have.length.gt', 0).and('contain', cmd);
-		cy.get('[cy-test=close-search]').click();
+		cy.closeSearch();
 	});
 
 	it('Verify campaign card beacon number matches actual campaign', () => {

applications/redeye-e2e/src/integration/e2e/blueteam/toggle-themes.cy.js

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+describe('Light Theme Test', () => {
+	const camp = 'togglethemes';
+	const fileName = 'gt.redeye';
+
+	it('Toggle Themes From Campaign', () => {
+		cy.uploadCampaignBlue(camp, fileName);
+
+		cy.selectCampaign(camp);
+
+		cy.toggleLightTheme();
+
+		cy.get('[cy-test=graph]').should('have.css', 'color-scheme', 'light');
+
+		cy.toggleDarkTheme();
+
+		cy.get('[cy-test=graph]').should('have.css', 'color-scheme', 'dark');
+	});
+
+	it('Toggle Themes From Explorer Card', () => {
+		cy.toggleLightTheme();
+
+		cy.get('#root').should('have.css', 'color-scheme', 'light');
+
+		cy.toggleDarkTheme();
+
+		cy.get('#root').should('have.css', 'color-scheme', 'dark');
+	});
+
+	after(() => {
+		cy.deleteCampaignGraphQL(camp);
+	});
+});

applications/redeye-e2e/src/integration/e2e/redteam/campaign-card-tests.cy.js

@@ -17,7 +17,7 @@ describe('Search and filter campaigns and verify beacon counts', () => {
 		cy.get('[cy-test=search]').click().type(cmd).type('{enter}');
 		cy.wait('@searchCommands');
 		cy.get('[cy-test=search-result-item]').should('have.length.gt', 0).and('contain', cmd);
-		cy.get('[cy-test=close-search]').click();
+		cy.closeSearch();
 	});
 
 	it('Verify campaign card beacon number matches actual campaign', () => {

applications/redeye-e2e/src/integration/e2e/redteam/search-go-to-result.cy.js

@@ -1,4 +1,5 @@
-// <reference types="cypress" />
+/// <reference types="cypress" />
+let first;
 
 describe('Search campaign and open one of the results', () => {
 	const camp = 'searchcampaign';
@@ -23,22 +24,24 @@ describe('Search campaign and open one of the results', () => {
 			.get('@list')
 			.its('length')
 			.then((resultSearch1) => {
-				// cy.log(resultSearch1);
+				first = resultSearch1;
+			});
 
-				// Close search box
-				cy.get('[cy-test=close-search]').click();
+		// Close search box
+		cy.closeSearch();
 
-				// Re-open search box; verify same results are showing
-				cy.clickSearch();
-				cy.get('[cy-test=search]').invoke('attr', 'value').should('include', searchTerm1);
-				cy.get('@list').should('contain', searchTerm1);
-				cy
-					.get('@list')
-					.its('length')
-					.then((resultSearch2) => {
-						// cy.log(resultSearch2);
-						expect(resultSearch2).to.equal(resultSearch1);
-					});
+		// Re-open search box; verify same results are showing
+		cy.clickSearch();
+
+		cy.get('[cy-test=search]').invoke('attr', 'value').should('include', searchTerm1);
+
+		cy.get('@list').should('contain', searchTerm1);
+
+		cy
+			.get('@list')
+			.its('length')
+			.then((resultSearch2) => {
+				expect(resultSearch2).to.equal(first);
 			});
 	});
 
@@ -55,6 +58,7 @@ describe('Search campaign and open one of the results', () => {
 
 		// Filter on Commands only
 		cy.get('[cy-test=filter-search]').click();
+
 		cy.get('[cy-test=Commands]').click();
 
 		// Log text showing in the first result

applications/redeye-e2e/src/integration/e2e/redteam/timeline.cy.js

@@ -5,19 +5,13 @@ dayjs().format();
 
 describe('Timeline tests', () => {
 	const camp = 'timelinetests';
+	const fileName = 'smalldata.redeye';
 
 	it('Verify timeline navigation features', () => {
 		// Upload campaign and open
-		cy.get('[cy-test=add-campaign-btn]').click();
-		cy.uploadLogs('cypress', camp);
-		cy.wait(500);
-		cy.get('[cy-test=close-log]').click();
-		cy.reload();
-		cy.wait('@campaign');
-		cy.reload();
-
-		cy.get('[cy-test=campaign-name]').contains(camp).scrollIntoView().click();
-		cy.reload();
+		cy.uploadCampaign(camp, fileName);
+
+		cy.selectCampaign(camp);
 
 		// Log the starting position of the timeline bar
 		cy

applications/redeye-e2e/src/integration/e2e/redteam/toggle-themes.cy.js

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+describe('Light Theme Test', () => {
+	const camp = 'togglethemes';
+	const fileName = 'gt.redeye';
+
+	it('Toggle Themes From Campaign', () => {
+		cy.uploadCampaign(camp, fileName);
+
+		cy.selectCampaign(camp);
+
+		cy.toggleLightTheme();
+
+		cy.get('[cy-test=graph]').should('have.css', 'color-scheme', 'light');
+
+		cy.toggleDarkTheme();
+
+		cy.get('[cy-test=graph]').should('have.css', 'color-scheme', 'dark');
+	});
+
+	it('Toggle Themes From Explorer Card', () => {
+		cy.toggleLightTheme();
+
+		cy.get('#root').should('have.css', 'color-scheme', 'light');
+
+		cy.toggleDarkTheme();
+
+		cy.get('#root').should('have.css', 'color-scheme', 'dark');
+	});
+
+	after(() => {
+		cy.deleteCampaignGraphQL(camp);
+	});
+});

applications/redeye-e2e/src/support/command.d.ts

@@ -282,5 +282,23 @@ declare namespace Cypress {
 		 * cy.verifyTotalCommands(expectedCount)
 		 */
 		verifyTotalCommands();
+
+		/**Toggle on Light Theme
+		 * @example
+		 * cy.toggleLightTheme()
+		 */
+		toggleLightTheme();
+
+		/**Toggle on Dark Theme
+		 * @example
+		 * cy.toggleDarkTheme()
+		 */
+		toggleDarkTheme();
+
+		/**Closes the search modal in explorer
+		 * @example
+		 * cy.toggleDarkTheme()
+		 */
+		closeSearch();
 	}
 }

applications/redeye-e2e/src/support/commands.js

@@ -23,7 +23,10 @@ Cypress.Commands.add('loginAPI', (user = 'cypress') => {
 			body: formData,
 		});
 	}),
-		cy.visit('http://localhost:3500/#/campaigns/all');
+		{
+			cacheAcrossSpecs: true,
+		};
+	cy.visit('http://localhost:3500/#/campaigns/all');
 });
 
 Cypress.Commands.add('loginBlue', (user) => {
@@ -263,3 +266,15 @@ Cypress.Commands.add('doNotShowHiddenItems', () => {
 	// cy.wait('@servers');
 	cy.get('[cy-test=close-log]').click();
 });
+
+Cypress.Commands.add('toggleLightTheme', () => {
+	cy.get('[cy-test=settings]').click();
+	cy.get('[cy-test=toggle-theme]').check({ force: true });
+	cy.get('[cy-test=close-log]').click();
+});
+
+Cypress.Commands.add('toggleDarkTheme', () => {
+	cy.get('[cy-test=settings]').click();
+	cy.get('[cy-test=toggle-theme]').uncheck({ force: true });
+	cy.get('[cy-test=close-log]').click();
+});

applications/redeye-e2e/src/support/index.js → applications/redeye-e2e/src/support/e2e.js

@@ -7,9 +7,8 @@ import './computer';
 import './campaignCard';
 import './utils';
 
-const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/;
-Cypress.on('uncaught:exception', (err, runnable) => {
-	if (resizeObserverLoopErrRe.test(err.message)) {
+Cypress.on('uncaught:exception', (err, runnable, promise) => {
+	if (promise) {
 		return false;
 	}
 });
@@ -18,7 +17,6 @@ export const hasOperationName = (req, operationName) => {
 	const { body } = req;
 	const d = body.query.split(' ');
 	const [name] = d[1].split('(', 1);
-	// console.log([name]);
 	return name && name === operationName;
 };
 

applications/redeye-e2e/src/support/explore.js

@@ -22,6 +22,10 @@ Cypress.Commands.add('clickSearch', () => {
 	cy.get('[cy-test=search-mode]').click();
 });
 
+Cypress.Commands.add('closeSearch', () => {
+	cy.get('[cy-test=close-search]').click();
+});
+
 //CLICK PRESENTATION MODE ON EXPLORER PANEL
 Cypress.Commands.add('clickPresentationMode', () => {
 	cy.get('[cy-test=presentation-mode').click();

package.json

@@ -157,7 +157,7 @@
 		"barrelsby": "^2.3.0",
 		"builder-util": "^23.0.2",
 		"cross-env": "^7.0.3",
-		"cypress": "^12.5.1",
+		"cypress": "^12.7.0",
 		"cypress-multi-reporters": "^1.6.1",
 		"dotenv": "^8.2.0",
 		"eslint": "^8.22.0",

yarn.lock

@@ -8325,9 +8325,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:^12.5.1":
-  version: 12.5.1
-  resolution: "cypress@npm:12.5.1"
+"cypress@npm:^12.7.0":
+  version: 12.7.0
+  resolution: "cypress@npm:12.7.0"
   dependencies:
     "@cypress/request": ^2.88.10
     "@cypress/xvfb": ^1.2.4
@@ -8346,7 +8346,7 @@ __metadata:
     commander: ^5.1.0
     common-tags: ^1.8.0
     dayjs: ^1.10.4
-    debug: ^4.3.2
+    debug: ^4.3.4
     enquirer: ^2.3.6
     eventemitter2: 6.4.7
     execa: 4.1.0
@@ -8373,7 +8373,7 @@ __metadata:
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: acea08c933084bbdffe8e0d8f24ecdc3be52731824f09cf2e720c974a153d808f5af1c665d977e46f171e275c590065aeadf729022d1338a6a424e5ec8b119af
+  checksum: a9489f7f254dcee1b8a374d14d175c8f8681a3388e4c02181e0486f064f4de59bfc79dec1f401605332d3a5869bf2ba06b3a1653a5c287e447810d756d470078
   languageName: node
   linkType: hard
 
@@ -17056,7 +17056,7 @@ __metadata:
     cors: ^2.8.5
     cross-env: ^7.0.3
     crypto-js: ^4.0.0
-    cypress: ^12.5.1
+    cypress: ^12.7.0
     cypress-multi-reporters: ^1.6.1
     d3: ^6.7.0
     dayjs: ^1.11.7