713 system role error message (#755)

ScottLogic · Jan 15, 2024 · 264e6c2 · 264e6c2
1 parent 2a24c9e
commit 264e6c2
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 43 deletions.
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -17,6 +17,7 @@
 	--main-text-colour-inverted: #000;
 	--main-text-accent-colour: #73d1d6;
 	--error-colour: #c41565;
+	--error-background-colour: #faebf2;
 
 	/* scrollbar */
 	--main-scrollbar-colour: #444;
@@ -88,8 +89,8 @@
 	--chat-bot-text-colour: var(--main-text-colour-inverted);
 	--chat-user-background-colour: #008484;
 	--chat-user-border-colour: #198b92;
-	--chat-blocked-background-colour: #faebf2;
-	--chat-blocked-border-colour: #c41565;
+	--chat-blocked-background-colour: var(--error-background-colour);
+	--chat-blocked-border-colour: var(--error-colour);
 	--chat-transformed-background-colour: #fff;
 	--chat-transformed-border-colour: #999;
 	--chat-transformed-text-colour: var(--chat-info-text-colour);

diff --git a/frontend/src/components/HandbookOverlay/HandbookPage.css b/frontend/src/components/HandbookOverlay/HandbookPage.css
@@ -24,7 +24,7 @@
 	margin: 0;
 }
 
-.role-locked {
+.handbook-terms .role-locked {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -34,3 +34,10 @@
 	background: var(--handbook-locked-section-colour);
 	text-align: center;
 }
+
+.handbook-terms .system-role-error-message {
+	border: 0.125rem dashed var(--error-colour);
+	background-color: var(--error-background-colour);
+	padding: 0.625rem;
+	border-radius: 0.625rem;
+}
diff --git a/frontend/src/components/HandbookOverlay/HandbookSystemRole.test.tsx b/frontend/src/components/HandbookOverlay/HandbookSystemRole.test.tsx
@@ -9,17 +9,20 @@ describe('HandbookSystemRole component tests', () => {
 	const level1SystemRole = 'System Role for level 1';
 	const level2SystemRole = 'System Role for level 2';
 	const level3SystemRole = 'System Role for level 3';
+	const errorMessage =
+		'Unable to fetch system role information. Try again in a few minutes.';
 
 	const systemRoles: LevelSystemRole[] = [
 		{ level: LEVEL_NAMES.LEVEL_1, systemRole: level1SystemRole },
 		{ level: LEVEL_NAMES.LEVEL_2, systemRole: level2SystemRole },
 		{ level: LEVEL_NAMES.LEVEL_3, systemRole: level3SystemRole },
 	];
+	const emptySystemRoles: LevelSystemRole[] = [];
 
 	test('renders no system roles and instead renders locked boxes when no levels complete', () => {
 		const numLevelsCompleted = 0;
 
-		const { container } = render(
+		render(
 			<HandbookSystemRole
 				numCompletedLevels={numLevelsCompleted}
 				systemRoles={systemRoles}
@@ -29,25 +32,26 @@ describe('HandbookSystemRole component tests', () => {
 		expect(screen.getByText('System Roles')).toBeInTheDocument();
 
 		// make sure no system roles are displayed on the page
-		expect(screen.queryAllByText(level1SystemRole)).toHaveLength(0);
-		expect(screen.queryAllByText(level2SystemRole)).toHaveLength(0);
-		expect(screen.queryAllByText(level3SystemRole)).toHaveLength(0);
+		expect(screen.queryByText(level1SystemRole)).not.toBeInTheDocument();
+		expect(screen.queryByText(level2SystemRole)).not.toBeInTheDocument();
+		expect(screen.queryByText(level3SystemRole)).not.toBeInTheDocument();
 
 		// check aria roles for term headers
 		const systemRoleScreen = screen
 			.getAllByRole('term')
 			.map((element) => element.textContent);
 		expect(systemRoleScreen).toHaveLength(systemRoles.length);
 
-		// make sure all system roles are locked
-		const lockedBox = container.getElementsByClassName('role-locked');
-		expect(lockedBox).toHaveLength(systemRoles.length);
+		// checks for an instance of the system role locked text for all roles
+		expect(
+			screen.queryAllByText(/to unlock the system role description/)
+		).toHaveLength(3);
 	});
 
 	test('renders level 1 system role only and keeps level 2 and 3 system roles locked boxes when 1 levels complete', () => {
 		const numLevelsCompleted = 1;
 
-		const { container } = render(
+		render(
 			<HandbookSystemRole
 				numCompletedLevels={numLevelsCompleted}
 				systemRoles={systemRoles}
@@ -57,25 +61,26 @@ describe('HandbookSystemRole component tests', () => {
 		expect(screen.getByText('System Roles')).toBeInTheDocument();
 
 		// check level 1 is shown but level 2 and 3 are not
-		expect(screen.queryAllByText(level1SystemRole)).toHaveLength(1);
-		expect(screen.queryAllByText(level2SystemRole)).toHaveLength(0);
-		expect(screen.queryAllByText(level3SystemRole)).toHaveLength(0);
+		expect(screen.queryByText(level1SystemRole)).toBeInTheDocument();
+		expect(screen.queryByText(level2SystemRole)).not.toBeInTheDocument();
+		expect(screen.queryByText(level3SystemRole)).not.toBeInTheDocument();
 
 		// check aria roles
 		const systemRoleScreen = screen
 			.getAllByRole('term')
 			.map((element) => element.textContent);
 		expect(systemRoleScreen).toHaveLength(systemRoles.length);
 
-		// make sure 2 system roles are locked
-		const lockedBox = container.getElementsByClassName('role-locked');
-		expect(lockedBox).toHaveLength(2);
+		// checks for an instance of the system role locked text for 2 roles
+		expect(
+			screen.queryAllByText(/to unlock the system role description/)
+		).toHaveLength(2);
 	});
 
 	test('renders level 1 & 2 system roles and keeps level 3 system roles locked boxe when 2 levels complete', () => {
 		const numLevelsCompleted = 2;
 
-		const { container } = render(
+		render(
 			<HandbookSystemRole
 				numCompletedLevels={numLevelsCompleted}
 				systemRoles={systemRoles}
@@ -85,19 +90,20 @@ describe('HandbookSystemRole component tests', () => {
 		expect(screen.getByText('System Roles')).toBeInTheDocument();
 
 		// check level 1 and 3 are shown and 3 is not
-		expect(screen.queryAllByText(level1SystemRole)).toHaveLength(1);
-		expect(screen.queryAllByText(level2SystemRole)).toHaveLength(1);
-		expect(screen.queryAllByText(level3SystemRole)).toHaveLength(0);
-
-		// make sure 1 system role are locked
-		const lockedBox = container.getElementsByClassName('role-locked');
-		expect(lockedBox).toHaveLength(1);
+		expect(screen.queryByText(level1SystemRole)).toBeInTheDocument();
+		expect(screen.queryByText(level2SystemRole)).toBeInTheDocument();
+		expect(screen.queryByText(level3SystemRole)).not.toBeInTheDocument();
+
+		// checks for an instance of the system role locked text for 1 roles
+		expect(
+			screen.queryAllByText(/to unlock the system role description/)
+		).toHaveLength(1);
 	});
 
 	test('renders all system roles when 3 levels complete', () => {
 		const numLevelsCompleted = 3;
 
-		const { container } = render(
+		render(
 			<HandbookSystemRole
 				numCompletedLevels={numLevelsCompleted}
 				systemRoles={systemRoles}
@@ -107,18 +113,54 @@ describe('HandbookSystemRole component tests', () => {
 		expect(screen.getByText('System Roles')).toBeInTheDocument();
 
 		// check all levels system roles are shown
-		expect(screen.queryAllByText(level1SystemRole)).toHaveLength(1);
-		expect(screen.queryAllByText(level2SystemRole)).toHaveLength(1);
-		expect(screen.queryAllByText(level3SystemRole)).toHaveLength(1);
+		expect(screen.queryByText(level1SystemRole)).toBeInTheDocument();
+		expect(screen.queryByText(level2SystemRole)).toBeInTheDocument();
+		expect(screen.queryByText(level3SystemRole)).toBeInTheDocument();
 
 		// check aria roles
 		const systemRoleScreen = screen
 			.getAllByRole('term')
 			.map((element) => element.textContent);
 		expect(systemRoleScreen).toHaveLength(systemRoles.length);
 
-		// check no locked boxes
-		const lockedBox = container.getElementsByClassName('role-locked');
-		expect(lockedBox).toHaveLength(0);
+		// checks for that none of the roles are locked
+		expect(
+			screen.queryAllByText(/to unlock the system role description/)
+		).toHaveLength(0);
+	});
+
+	test('renders an error message when no system roles are passed to it', () => {
+		const numLevelsCompleted = 0;
+
+		render(
+			<HandbookSystemRole
+				numCompletedLevels={numLevelsCompleted}
+				systemRoles={emptySystemRoles}
+			/>
+		);
+
+		expect(screen.getByText('System Roles')).toBeInTheDocument();
+
+		// make sure no system roles are displayed on the page
+		expect(screen.queryByText(level1SystemRole)).not.toBeInTheDocument();
+		expect(screen.queryByText(level2SystemRole)).not.toBeInTheDocument();
+		expect(screen.queryByText(level3SystemRole)).not.toBeInTheDocument();
+
+		// check that the error message is displayed
+		expect(screen.queryByText(errorMessage)).toBeInTheDocument();
+	});
+
+	test('renders no error message when system roles are passed to it', () => {
+		const numLevelsCompleted = 0;
+
+		render(
+			<HandbookSystemRole
+				numCompletedLevels={numLevelsCompleted}
+				systemRoles={systemRoles}
+			/>
+		);
+
+		// check that the error message is not being displayed
+		expect(screen.queryByText(errorMessage)).not.toBeInTheDocument();
 	});
 });
diff --git a/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx b/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx
@@ -20,19 +20,27 @@ function HandbookSystemRole({
 			</header>
 
 			<dl className="handbook-terms">
-				{systemRoles.map(({ level, systemRole }) => (
-					<div className="term" key={level}>
-						<dt>{`Level ${level + 1} System Role`}</dt>
-						{level >= numCompletedLevels ? (
-							<dd className="role-locked">
-								{`You must complete level ${level + 1} to unlock the system role
+				{systemRoles.length !== 0 ? (
+					systemRoles.map(({ level, systemRole }) => (
+						<div className="term" key={level}>
+							<dt>{`Level ${level + 1} System Role`}</dt>
+							{level >= numCompletedLevels ? (
+								<dd className="role-locked">
+									{`You must complete level ${
+										level + 1
+									} to unlock the system role
                   description`}
-							</dd>
-						) : (
-							<dd> {systemRole} </dd>
-						)}
+								</dd>
+							) : (
+								<dd> {systemRole} </dd>
+							)}
+						</div>
+					))
+				) : (
+					<div className="system-role-error-message">
+						Unable to fetch system role information. Try again in a few minutes.
 					</div>
-				))}
+				)}
 			</dl>
 		</article>
 	);