Merge pull request #74 from cisagov/redeye-cypress-tests-2

Cypress test updates

applications/client/src/components/Dialogs/UserSettingsOverlay.tsx

@@ -20,8 +20,8 @@ export const UserSettingsOverlay = observer<UserSettingsOverlayProps>(({ onSubmi
 				`}
 			>
 				<p>Change Username</p>
-				<LoginForm submitText="Update" onSubmit={onSubmit} />
-				<Button minimal text="Log out" onClick={() => store.auth.logOut()} />
+				<LoginForm submitText="Update" cy-test="update" onSubmit={onSubmit} />
+				<Button minimal text="Log out" cy-test="logout" onClick={() => store.auth.logOut()} />
 			</div>
 		</Dialog>
 	);

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

@@ -74,7 +74,7 @@ export const LoginForm = observer<LoginFormProps>(({ onSubmit, submitText = 'Log
 	);
 
 	return (
-		<form {...props} onSubmit={state.handleSubmit} autoComplete="on">
+		<form cy-test="login-form" {...props} onSubmit={state.handleSubmit} autoComplete="on">
 			{!store.appMeta.blueTeam && (
 				<>
 					<InputGroup

applications/client/src/views/Campaign/Campaign.tsx

@@ -253,6 +253,7 @@ type CollapsedContentProps = ComponentProps<'div'> & ButtonProps & {};
 export const CollapsedContent: FC<CollapsedContentProps> = ({ children, icon, ...props }) => (
 	<div {...props} css={collapsedContentWrapperStyle}>
 		<Button
+			cy-test="expand-panel"
 			icon={icon}
 			// onClick={onClick}
 			minimal

applications/client/src/views/Campaign/Explore/Panels/Command/Command.tsx

@@ -43,10 +43,12 @@ export const Command = observer<CommandProps>(
 				/>
 			)}
 			<div className={skeletonClass} css={rowTextStyle}>
-				<Txt ellipsize small muted block running title={command?.info.contextTooltipText}>
-					<Txt monospace>{command?.info.time.format(`${dateShortFormat} ${timeFormat}`)}</Txt>
+				<Txt cy-test="command-header" ellipsize small muted block running title={command?.info.contextTooltipText}>
+					<Txt cy-test="command-date-time" monospace>
+						{command?.info.time.format(`${dateShortFormat} ${timeFormat}`)}
+					</Txt>
 					<Spacer />
-					<Txt>{command?.info.operator}</Txt>
+					<Txt cy-test="operator-info">{command?.info.operator}</Txt>
 					{isCollapsed && showPath && (
 						<>
 							<Spacer>{' • '}</Spacer>
@@ -55,7 +57,7 @@ export const Command = observer<CommandProps>(
 					)}
 				</Txt>
 				{!isCollapsed && showPath && <NavBreadcrumbs cy-test="hostBeaconInfo" command={command} hideRoot muted />}
-				<Txt title={command?.info.commandTooltip} block ellipsize>
+				<Txt cy-test="command-info" title={command?.info.commandTooltip} block ellipsize>
 					<Txt emphasis bold cy-test="command-type">
 						{command?.info.commandType}
 					</Txt>{' '}

applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx

@@ -397,14 +397,16 @@ export const CommentBox = observer<CommentBoxProps>(
 			<div {...props}>
 				<div css={headerWrapperStyle}>
 					<span>
-						<CarbonIcon icon={Chat16} />
+						<CarbonIcon cy-test="comment-icon" icon={Chat16} />
 						<Spacer />
 						<Txt>
 							{annotation?.user !== undefined ? (
 								annotation?.user
 							) : (
 								<span>
-									<Txt bold>New Comment</Txt>
+									<Txt cy-test="new-comment-header" bold>
+										New Comment
+									</Txt>
 									{state.commandIds.length > 1 && <Txt muted> on {state.commandIds.length} Commands</Txt>}
 								</span>
 							)}
@@ -627,7 +629,7 @@ export const CommentBox = observer<CommentBoxProps>(
 												text="Edit"
 											/>
 										)}
-										{allowReply && <Button minimal small onClick={() => reply?.()} text="Reply" />}
+										{allowReply && <Button cy-test="reply" minimal small onClick={() => reply?.()} text="Reply" />}
 										{allowEdit && (
 											<>
 												<Button

applications/client/src/views/Campaign/Explore/components/ControlBar.tsx

@@ -77,6 +77,7 @@ export const ControlBar = observer<ControlBarProps>(
         */}
 				{isCollapsible && (
 					<Button
+						cy-test="collapse-all"
 						icon={<CarbonIcon icon={CollapseCategories16} />}
 						title="Collapse All"
 						onClick={() => {

applications/client/src/views/Campaign/Search/Rows/SearchRow.tsx

@@ -82,11 +82,17 @@ export const SearchRow = observer<SearchRowProps>(
 				)}
 				{children && <div css={childrenStyles}>{children}</div>}
 				<div css={iconsStyle}>
-					{hostsCount !== undefined && <IconLabel value={hostsCount} title="Hosts" icon={icons.host} />}
-					{tagsCount !== undefined && <IconLabel value={tagsCount} title="Tags" icon={icons.tags} />}
-					{commandsCount !== undefined && <IconLabel value={commandsCount} title="Commands" icon={icons.commands} />}
-					{beaconsCount !== undefined && <IconLabel value={beaconsCount} title="Beacons" icon={icons.beacon} />}
-					{commentsCount !== undefined && <IconLabel value={commentsCount} title="Comments" icon={icons.comment} />}
+					{hostsCount !== undefined && <IconLabel value={hostsCount} title="Hosts" cy-test="host-count" icon={icons.host} />}
+					{tagsCount !== undefined && <IconLabel value={tagsCount} title="Tags" cy-test="tag-count" icon={icons.tags} />}
+					{commandsCount !== undefined && (
+						<IconLabel value={commandsCount} title="Commands" cy-test="command-count" icon={icons.commands} />
+					)}
+					{beaconsCount !== undefined && (
+						<IconLabel value={beaconsCount} title="Beacons" cy-test="beacon-count" icon={icons.beacon} />
+					)}
+					{commentsCount !== undefined && (
+						<IconLabel value={commentsCount} title="Comments" cy-test="comment-count" icon={icons.comment} />
+					)}
 				</div>
 			</div>
 		);

applications/client/src/views/Campaigns/CampaignCard.tsx

@@ -161,10 +161,12 @@ export const CampaignCard = observer<CampaignCardProps>(({ isCurrent, campaign }
 								`}
 							>
 								<Txt>Last opened by:</Txt>
-								<Txt bold>{campaign.lastOpenedBy?.id ?? 'None'}</Txt>
+								<Txt cy-test="last-opened-by" bold>
+									{campaign.lastOpenedBy?.id ?? 'None'}
+								</Txt>
 							</Txt>
 							<Txt meta muted small block>
-								<Txt bold skeleton={campaign.isParsing}>
+								<Txt cy-test="campaign-dates" bold skeleton={campaign.isParsing}>
 									{state.startTime}&mdash;{state.endTime}
 								</Txt>
 								<Spacer>•</Spacer>

applications/redeye-e2e/cypress.config.js

@@ -1,5 +1,8 @@
 const { defineConfig } = require('cypress');
 
+const fs = require('fs');
+const path = require('path');
+
 module.exports = defineConfig({
 	fixturesFolder: './src/fixtures',
 	modifyObstructiveCode: false,
@@ -17,7 +20,34 @@ module.exports = defineConfig({
 		runMode: 1,
 	},
 	e2e: {
-		setupNodeEvents(on, config) {},
+
+		setupNodeEvents(on, config) {
+			on('task', {
+				// ===== task to use node 'fs' (filesystem) to read directory=====
+				readdir({ dirPath }) {
+					return new Promise((resolve, reject) => {
+						try {
+							const dirData = fs.readdirSync(dirPath);
+							resolve(dirData);
+						} catch (e) {
+							reject(e);
+						}
+					});
+				},
+				// ===== task to use node 'fs' (filesystem) to delete downloaded files from cypress/downloads
+				deleteDownloads({ dirPath }) {
+					fs.readdir(dirPath, (err, files) => {
+						for (const file of files) {
+							fs.unlink(path.join(dirPath, file), (err) => {
+								console.log('Removed ' + file);
+							});
+						}
+					});
+					return null;
+				},
+			});
+		},
+		experimentalSessionAndOrigin: true,
 		specPattern: '../../**/*.cy.js',
 		supportFile: './src/support/index.js',
 		excludeSpecPattern: '*.skip.js',

applications/redeye-e2e/src/integration/e2e/blueteam/cant-add-comments.cy.js

@@ -9,7 +9,7 @@ describe('Verify Adding Comments are disabled, but able to view exisiting commen
 
 		cy.selectCampaign(camp);
 
-		cy.selectHostName('COMPUTER02');
+		cy.selectHostByName('COMPUTER02');
 
 		//Click on first visible add comment button
 		cy.get('[cy-test=add-comment]').should('be.visible').first().click();

applications/redeye-e2e/src/integration/e2e/redteam/beacon-count.skip.js

@@ -68,7 +68,7 @@ describe('Beacon counts', () => {
 			.eq(0)
 			.invoke('text')
 			.then((countHost1) => {
-				cy.log(countHost1);
+				// cy.log(countHost1);
 
 				// Click host to open details
 				cy.get('[cy-test=info-row]').eq(1).click();
@@ -84,13 +84,13 @@ describe('Beacon counts', () => {
 					});
 			});
 		// Go back to Hosts and log beacon count for second host
-		cy.get('[cy-test=explorer-mode]').click();
+		cy.clickExporerMode();
 		cy
 			.get('[cy-test=row-beacon-count]')
 			.eq(1)
 			.invoke('text')
 			.then((countHost2) => {
-				cy.log(countHost2);
+				// cy.log(countHost2);
 
 				// Click host to open deatails
 				cy.get('[cy-test=info-row]').eq(2).click();
@@ -111,28 +111,55 @@ describe('Beacon counts', () => {
 		cy.selectCampaign(camp);
 
 		// Open campaign and go to Operator tab; log beacon count
-		cy.get('[cy-test=operators]').click();
+		cy.clickOperatorsTab();
 		cy
 			.get('[cy-test=row-beacon-count]')
 			.invoke('text')
 			.then((countRow) => {
-				cy.log(countRow);
+				// cy.log(countRow);
 
 				// Open operator and go to Beacons tab
 				cy.get('[cy-test=operator-row]').click();
-				cy.get('[cy-test=beacons]').click();
-
+				cy.clickBeaconsTab();
 				// Log number of beacons showing - should match number from Operator tab count
 				cy
 					.get('[cy-test=info-row]')
 					.its('length')
 					.then((countOperatorBeacons) => {
-						cy.log(countOperatorBeacons);
+						// cy.log(countOperatorBeacons);
 						expect(+countOperatorBeacons).to.eq(+countRow);
 					});
 			});
 	});
 
+	it('Verify beacon counts from Search modal', () => {
+		// Open campaign and go to Search modal
+		cy.selectCampaign(camp);
+		cy.clickSearch();
+
+		// Enter search term
+		cy.searchCampaignFor('analyst');
+
+		// Log the number of commands showing for the Operator result
+		cy
+			.get('[cy-test=beacon-count]')
+			.invoke('text')
+			.then((beaconCount1) => {
+				// cy.log(beaconCount1);
+
+				// Click the Operator, go to list of beacons; verify count matches number in search
+				cy.get('[cy-test=search-result-item]').contains('Operator').click();
+				cy.clickBeaconsTab();
+				cy
+					.get('[cy-test=info-row]')
+					.its('length')
+					.then((beaconCount2) => {
+						// cy.log(beaconCount2);
+						expect(+beaconCount2).to.eq(+beaconCount1);
+					});
+			});
+	});
+
 	after(() => {
 		cy.deleteCampaignGraphQL(camp);
 	});