Merge pull request #78 from cisagov/timeline-tests

Timeline tests

Author: sang2925

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

@@ -48,7 +48,7 @@ export const Command = observer<CommandProps>(
 						{command?.info.time.format(`${dateShortFormat} ${timeFormat}`)}
 					</Txt>
 					<Spacer />
-					<Txt cy-test="operator-info">{command?.info.operator}</Txt>
+					<Txt cy-test="command-operator">{command?.info.operator}</Txt>
 					{isCollapsed && showPath && (
 						<>
 							<Spacer>{' • '}</Spacer>

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

@@ -399,7 +399,7 @@ export const CommentBox = observer<CommentBoxProps>(
 					<span>
 						<CarbonIcon cy-test="comment-icon" icon={Chat16} />
 						<Spacer />
-						<Txt>
+						<Txt cy-test="user-that-commented">
 							{annotation?.user !== undefined ? (
 								annotation?.user
 							) : (

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

@@ -24,36 +24,42 @@ export const BarLabelDate = observer<BarLabelsProps>(({ bar, dateFormatter }) =>
 			{dateStart}
 		</Txt>
 	) : sameDate && dateFormatter === dateTimeFormat ? (
-		<Txt block bold small>{`${dateStart} - ${dateEnd.split(' ')[1]}`}</Txt>
+		<Txt cy-test="timeline-tooltip-date-time" block bold small>{`${dateStart} - ${dateEnd.split(' ')[1]}`}</Txt>
 	) : (
 		<Txt block bold small>{`${dateStart} - ${dateEnd}`}</Txt>
 	);
 });
 
 export const BarLabelOnHover = observer<BarLabelsProps>(({ bar, dateFormatter }) => (
-	<div css={barPopoverStyles}>
+	<div cy-test="timeline-tooltip-static" css={barPopoverStyles}>
 		<BarLabelDate bar={bar} dateFormatter={dateFormatter} />
 		<FlexSplitter />
 		<Flex css={{ paddingTop: '0.2rem' }}>
-			<Txt muted small css={marginStyles(1)}>
+			<Txt cy-test="timeline-beacons" muted small css={marginStyles(1)}>
 				Beacons
 			</Txt>
 			<FlexSplitter />
-			<Txt small>{bar?.beaconNumbers}</Txt>
+			<Txt cy-test="timeline-beacon-count" small>
+				{bar?.beaconNumbers}
+			</Txt>
 		</Flex>
 		<Flex>
-			<Txt muted small css={marginStyles(1)}>
+			<Txt cy-test="timeline-total-commands" muted small css={marginStyles(1)}>
 				Total commands
 			</Txt>
 			<FlexSplitter />
-			<Txt small>{bar?.beaconCount}</Txt>
+			<Txt cy-test="timeline-total-command-count" small>
+				{bar?.beaconCount}
+			</Txt>
 		</Flex>
 		<Flex>
-			<Txt muted small css={marginStyles(1)}>
+			<Txt cy-test="timeline-active-beacons" muted small css={marginStyles(1)}>
 				Active Beacon commands
 			</Txt>
 			<FlexSplitter />
-			<Txt small>{bar?.activeBeaconCount}</Txt>
+			<Txt cy-test="timeline-active-beacon-count" small>
+				{bar?.activeBeaconCount}
+			</Txt>
 		</Flex>
 	</div>
 ));
@@ -74,15 +80,15 @@ export const BarLabelBeaconList = observer<BarLabelsProps>(({ bar, dateFormatter
 		});
 	};
 	return (
-		<div css={barPopoverStyles}>
+		<div cy-test="timeline-tooltip-clickable" css={barPopoverStyles}>
 			<BarLabelDate bar={bar} dateFormatter={dateFormatter} />
 			<FlexSplitter />
 			<Flex css={{ padding: '0.2rem 0' }}>
-				<Txt small bold>
+				<Txt cy-test="timeline-beacon-header" small bold>
 					Beacons
 				</Txt>
 				<FlexSplitter />
-				<Txt small bold>
+				<Txt cy-test="timeline-command-header" small bold>
 					Commands
 				</Txt>
 			</Flex>
@@ -92,14 +98,16 @@ export const BarLabelBeaconList = observer<BarLabelsProps>(({ bar, dateFormatter
 					css={barPopoverRowStyles}
 					onClick={() => routeToBeacon(beaconCommand.beaconId as string)}
 				>
-					<Txt small css={marginStyles(0.5)}>
+					<Txt cy-test="timeline-beacon-name" small css={marginStyles(0.5)}>
 						{store.graphqlStore.beacons.get(beaconCommand.beaconId as string)?.displayName}
 					</Txt>
-					<Txt muted small css={marginStyles(4)}>
-						{store.graphqlStore.beacons.get(beaconCommand.beaconId as string)?.meta[0]?.maybeCurrent?.username}
+					<Txt cy-test="timeline-beacon-operator" muted small css={marginStyles(4)}>
+						{store.graphqlStore.beacons.get(beaconCommand.beaconId as string)?.meta[0].maybeCurrent?.username}
 					</Txt>
 					<FlexSplitter />
-					<Txt small>{beaconCommand.commandCount}</Txt>
+					<Txt cy-test="timeline-beacon-command-count" small>
+						{beaconCommand.commandCount}
+					</Txt>
 				</Flex>
 			))}
 		</div>

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

@@ -60,6 +60,7 @@ export const Bars = observer<BarsProps>(({ xScale, bars, start, end, dimensions,
 						}}
 						renderTarget={({ isOpen, ref, ...targetProps }) => (
 							<g
+								cy-test="timeline-bar"
 								ref={ref}
 								{...targetProps}
 								onMouseDown={(e) => {

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

@@ -110,7 +110,7 @@ export const Timeline = observer<TimelineProps>(({ ...props }) => {
 					<Header small cy-test="timeline-header" css={headerStyle}>
 						Timeline
 					</Header>
-					<ButtonGroup>
+					<ButtonGroup cy-test="timeline-edit-dates">
 						{state.showDateRangeInput && state.dateRange.length === 2 ? (
 							<DateRangeInput2
 								disabled={disableControls}
@@ -149,9 +149,9 @@ export const Timeline = observer<TimelineProps>(({ ...props }) => {
 								css={{ marginRight: `-6px !important` }}
 							>
 								<Txt small monospace>
-									<Txt>{startDateMoment.isValid() ? startDateMoment.format(dateFormat) : datePlaceholder}</Txt>
+									<Txt cy-test="timeline-start-date">{startDateMoment.isValid() ? startDateMoment.format(dateFormat) : datePlaceholder}</Txt>
 									<Spacer>&mdash;</Spacer>
-									<Txt>{endDateMoment.isValid() ? endDateMoment.format(dateFormat) : datePlaceholder}</Txt>
+									<Txt cy-test="timeline-end-date">{endDateMoment.isValid() ? endDateMoment.format(dateFormat) : datePlaceholder}</Txt>
 								</Txt>
 							</Button>
 						)}

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

@@ -84,7 +84,7 @@ describe('Beacon counts', () => {
 					});
 			});
 		// Go back to Hosts and log beacon count for second host
-		cy.clickExporerMode();
+		cy.clickExplorerMode();
 		cy
 			.get('[cy-test=row-beacon-count]')
 			.eq(1)

applications/redeye-e2e/src/integration/e2e/redteam/command-to-beacon.cy.js

@@ -19,14 +19,12 @@ describe('Navigate to beacon through command details', () => {
 		cy
 			.get('[cy-test=hostBeaconInfo]')
 			.eq(0)
+			.children()
+			.eq(2)
 			.invoke('text')
 			.then((text) => {
-				let commandText = text.split('COMPUTER02')[1];
-				// cy.log(commandText);
-				// FIND A BETTER WAY OF DOING THIS SO WE'RE NOT DEPENDENT ON TEXT TO SPLIT THE PIECES OF INFO
-
 				// Click on the beacon name
-				cy.get('[cy-test=hostBeaconInfo]').contains(commandText).click();
+				cy.get('[cy-test=hostBeaconInfo]').contains(text).click();
 
 				// Verify that the page directed to the appropriate beacon
 				cy
@@ -40,7 +38,7 @@ describe('Navigate to beacon through command details', () => {
 							.invoke('text')
 							.then((userName) => {
 								// cy.log(userName);
-								expect(beaconName + ' ' + userName).to.eq(commandText);
+								expect(beaconName + ' ' + userName).to.eq(text);
 							});
 					});
 			});

applications/redeye-e2e/src/integration/e2e/redteam/graphql/globalOperators.cy.js

@@ -15,9 +15,10 @@ describe('Query Global Operators', () => {
       }
     }`;
 		const variables = `{"password": "937038570"}`;
-		graphqlRequest(query, variables).then((res) => {
-			expect(res.body.data.globalOperators[0].id).to.eq('analyst');
-			expect(res.body.data.globalOperators[0].name).to.eq('analyst');
+		graphqlRequest(query, variables).then((response) => {
+			const res = response.body.data.globalOperators;
+			const match = Cypress._.find(res, { id: 'cypress' });
+			cy.wrap(match).its('name').should('eq', 'cypress');
 		});
 
 		cy.returnToCampaignCard();