Covered ScenarioHead with tests

- also implemented custom queries for icons
- also moved a test from scenario testing that is better suited for ScenarioHead

new/src/components/Scenarios/__test__/Scenario.test.tsx

@@ -17,23 +17,6 @@ const onExpansionCallback = jest.fn();
 const onCollapsionCallback = jest.fn();
 
 describe("Scenario", () => {
-    it("displays capitalized title", () => {
-        const description = "scenario description";
-        const expectedDisplayValue = "Scenario description";
-
-        const model = createScenarioModel({ description });
-        render(
-            <Scenario
-                scenario={model}
-                globalExpansionState={ExpansionState.EXPANDED}
-                onExpansionCallback={onExpansionCallback}
-                onCollapsionCallback={onCollapsionCallback}
-            />
-        );
-
-        expect(screen.getByText(expectedDisplayValue)).toBeVisible();
-    });
-
     it("displays single scenario case", () => {
         const className = "my custom class name";
         const scenarioCases = [createScenarioCaseModel()];

new/src/components/Scenarios/__test__/ScenarioHead.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import { ScenarioHead } from "../ScenarioHead";
+import { createScenarioModel } from "./scenarioTestData";
+import { screen } from "../../../testUtils/enhancedScreen";
+
+describe("Scenario Head", () => {
+    it("displays class title", () => {
+        const classTitle = "The class title";
+        const model = createScenarioModel({ classTitle });
+
+        render(<ScenarioHead scenario={model} />);
+        expect(screen.getByText(classTitle)).toBeVisible();
+    });
+
+    it("displays capitalized title", () => {
+        const description = "scenario description";
+        const expectedDisplayValue = "Scenario description";
+
+        const model = createScenarioModel({ description });
+        render(<ScenarioHead scenario={model} />);
+
+        expect(screen.getByText(expectedDisplayValue)).toBeVisible();
+    });
+
+    it("displays checkbox icon if scenario has executionStatus SUCCESS", () => {
+        const model = createScenarioModel({ executionStatus: "SUCCESS" });
+        render(<ScenarioHead scenario={model} />);
+
+        expect(screen.getAllIcons()).toHaveLength(1);
+        expect(screen.getCheckboxIcon()).toBeVisible();
+    });
+
+    it("displays error icon if scenario has executionStatus FAILED", () => {
+        const model = createScenarioModel({ executionStatus: "FAILED" });
+        render(<ScenarioHead scenario={model} />);
+
+        expect(screen.getAllIcons()).toHaveLength(1);
+        expect(screen.getErrorIcon()).toBeVisible();
+    });
+
+    it("displays pending icon if scenario has executionStatus PENDING", () => {
+        const model = createScenarioModel({ executionStatus: "PENDING" });
+        render(<ScenarioHead scenario={model} />);
+
+        expect(screen.getAllIcons()).toHaveLength(1);
+        expect(screen.getPendingIcon()).toBeVisible();
+    });
+});

new/src/testUtils/enhancedScreen.ts

@@ -0,0 +1,83 @@
+import { buildQueries, screen as classicScreen } from "@testing-library/react";
+function queryAllIcons(container: HTMLElement): HTMLElement[] {
+    const svgElements: NodeListOf<HTMLElement> =
+        container.querySelectorAll<HTMLElement>("svg.MuiSvgIcon-root");
+    return Array.from(svgElements);
+}
+
+function getMultipleIconsErrorText(iconDescription: string): string {
+    return `Found multiple ${iconDescription}`;
+}
+
+function getMissingIconsErrorText(iconDescription: string): string {
+    return `Found no ${iconDescription}`;
+}
+
+const [, getAllIcons] = buildQueries<[]>(
+    queryAllIcons,
+    () => getMultipleIconsErrorText("icons"),
+    () => getMissingIconsErrorText("icons")
+);
+
+const iconQueries = {
+    getAllIcons: () => getAllIcons(document.body)
+};
+
+function queryAllCheckboxIcons(container: HTMLElement): HTMLElement[] {
+    const svgElements: NodeListOf<HTMLElement> = container.querySelectorAll<HTMLElement>(
+        `svg.MuiSvgIcon-root[data-testid="CheckBoxIcon"]`
+    );
+    return Array.from(svgElements);
+}
+
+const [, , getCheckboxIcon] = buildQueries<[]>(
+    queryAllCheckboxIcons,
+    () => getMultipleIconsErrorText("CheckBox icons"),
+    () => getMissingIconsErrorText("CheckBox icons")
+);
+
+const checkboxIconQueries = {
+    getCheckboxIcon: () => getCheckboxIcon(document.body)
+};
+
+function queryAllErrorIcons(container: HTMLElement): HTMLElement[] {
+    const svgElements: NodeListOf<HTMLElement> = container.querySelectorAll<HTMLElement>(
+        `svg.MuiSvgIcon-root[data-testid="ErrorIcon"]`
+    );
+    return Array.from(svgElements);
+}
+
+const [, , getErrorIcon] = buildQueries<[]>(
+    queryAllErrorIcons,
+    () => getMultipleIconsErrorText("Error icons"),
+    () => getMissingIconsErrorText("Error icons")
+);
+
+const errorIconQueries = {
+    getErrorIcon: () => getErrorIcon(document.body)
+};
+
+function queryAllPendingIcons(container: HTMLElement): HTMLElement[] {
+    const svgElements: NodeListOf<HTMLElement> = container.querySelectorAll<HTMLElement>(
+        `svg.MuiSvgIcon-root[data-testid="DoNotDisturbAltIcon"]`
+    );
+    return Array.from(svgElements);
+}
+
+const [, , getPendingIcon] = buildQueries<[]>(
+    queryAllPendingIcons,
+    () => getMultipleIconsErrorText("Pending icons"),
+    () => getMissingIconsErrorText("Pending icons")
+);
+
+const pendingIconQueries = {
+    getPendingIcon: () => getPendingIcon(document.body)
+};
+
+export const screen = {
+    ...classicScreen,
+    ...iconQueries,
+    ...checkboxIconQueries,
+    ...errorIconQueries,
+    ...pendingIconQueries
+};