Skip to content

Commit

Permalink
Overhauled scenario tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Robert Schüler committed Jun 14, 2024
1 parent 10afcae commit b6cfc1a
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 98 deletions.
4 changes: 3 additions & 1 deletion new/src/components/Scenarios/ScenarioHead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ export function ScenarioHead({ scenario }: ScenarioHeadProps) {
</Grid>
<Grid>
<ScenarioCaption>
{addRuntimeInMilliseconds(scenario.scenarioCases[0].durationInNanos)}
{scenario.scenarioCases.length > 0
? addRuntimeInMilliseconds(scenario.scenarioCases[0].durationInNanos)
: ""}
</ScenarioCaption>
</Grid>
</Grid>
Expand Down
187 changes: 91 additions & 96 deletions new/src/components/Scenarios/__test__/Scenario.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Scenario } from "../Scenario";
import { ExpansionState } from "../ScenarioOverview";
import { processWords } from "../../../wordProcessor";
import { ScenarioModel } from "../../../reportModel";
import {
createScenarioCaseModel,
createScenarioModel,
createStepModel,
createWord
} from "./scenarioTestData";

afterEach(() => {
jest.resetAllMocks();
Expand All @@ -12,21 +16,12 @@ afterEach(() => {
const onExpansionCallback = jest.fn();
const onCollapsionCallback = jest.fn();

describe("Scenario accordion behavior", () => {
test("accordion details are not visible when globalExpansionState is COLLAPSED", async () => {
render(
<Scenario
scenario={model}
globalExpansionState={ExpansionState.COLLAPSED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const accordion = await screen.findByLabelText("Scenario Overview");
expect(accordion.attributes.getNamedItem("aria-expanded")?.value).toBe("false");
});
describe("Scenario", () => {
it("displays capitalized title", () => {
const description = "scenario description";
const expectedDisplayValue = "Scenario description";

test("accordion details are visible when globalExpansionState is EXPANDED", async () => {
const model = createScenarioModel({ description });
render(
<Scenario
scenario={model}
Expand All @@ -35,25 +30,15 @@ describe("Scenario accordion behavior", () => {
onCollapsionCallback={onCollapsionCallback}
/>
);
const accordion = await screen.findByLabelText("Scenario Overview");
expect(accordion.attributes.getNamedItem("aria-expanded")?.value).toBe("true");
});

test("onExpansionCallback is invoked when clicking on the header of a collapsed scenario", async () => {
render(
<Scenario
scenario={model}
globalExpansionState={ExpansionState.COLLAPSED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const scenarioOverview = await screen.findByLabelText("Scenario Overview");
userEvent.click(scenarioOverview);
expect(onExpansionCallback).toHaveBeenCalled();
expect(screen.getByText(expectedDisplayValue)).toBeVisible();
});

test("onCollapsionCallback is invoked when clicking on the header of an expanded scenario", async () => {
it("displays single scenario case", () => {
const className = "my custom class name";
const scenarioCases = [createScenarioCaseModel()];
const model = createScenarioModel({ className, scenarioCases });

render(
<Scenario
scenario={model}
Expand All @@ -62,71 +47,81 @@ describe("Scenario accordion behavior", () => {
onCollapsionCallback={onCollapsionCallback}
/>
);
const scenarioOverview = await screen.findByLabelText("Scenario Overview");
userEvent.click(scenarioOverview);
expect(onCollapsionCallback).toHaveBeenCalled();

expect(screen.getByText(className)).toBeVisible();
});
});

test("Scenario displays steps", async () => {
render(
<Scenario
scenario={model}
globalExpansionState={ExpansionState.EXPANDED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const textElement = await screen.findByText(
model.scenarioCases[0].steps[0].words.flatMap(word => word.value).join(" ")
);
expect(textElement).toBeInTheDocument();
});
describe("Scenario accordion behavior", () => {
it("accordion details are not visible when globalExpansionState is COLLAPSED", async () => {
const details = "some details";
const model = createScenarioModel({
scenarioCases: [
createScenarioCaseModel({
steps: [createStepModel({ words: [createWord({ value: details })] })]
})
]
});
render(
<Scenario
scenario={model}
globalExpansionState={ExpansionState.COLLAPSED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const accordion = screen.getByLabelText("Scenario Overview");
expect(accordion.attributes.getNamedItem("aria-expanded")?.value).toBe("false");
expect(screen.queryByText(details)).not.toBeVisible();
});

test("Scenario capitalizes title", async () => {
render(
<Scenario
scenario={model}
globalExpansionState={ExpansionState.EXPANDED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const textElement = await screen.findByText(processWords(model.description));
expect(textElement).toBeInTheDocument();
});
it("accordion details are visible when globalExpansionState is EXPANDED", async () => {
const details = "some details";
const model = createScenarioModel({
scenarioCases: [
createScenarioCaseModel({
steps: [createStepModel({ words: [createWord({ value: details })] })]
})
]
});
render(
<Scenario
scenario={model}
globalExpansionState={ExpansionState.EXPANDED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const accordion = screen.getByLabelText("Scenario Overview");
expect(accordion.attributes.getNamedItem("aria-expanded")?.value).toBe("true");
expect(screen.queryByText(details)).toBeVisible();
});

const model: ScenarioModel = {
classTitle: "classTitle",
executionStatus: "SUCCESS",
tags: [],
className: "testClass",
testMethodName: "testMethod",
description: "this is a description",
extendedDescription: "this is an extended description",
tagIds: ["tag1", "tag2"],
explicitParameters: [],
derivedParameters: [],
scenarioCases: [
{
caseNr: 1,
description: "case1",
derivedArguments: [],
explicitArguments: [],
durationInNanos: 2001000,
status: "SUCCESS",
steps: [
{
status: "PASSED",
durationInNanos: 2000000,
name: "Step1",
words: [{ value: "Step1", isIntroWord: true }],
depth: 0,
parentFailed: false
}
]
}
],
casesAsTable: false,
durationInNanos: 0
};
it("onExpansionCallback is invoked when clicking on the header of a collapsed scenario", async () => {
render(
<Scenario
scenario={createScenarioModel()}
globalExpansionState={ExpansionState.COLLAPSED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const scenarioOverview = await screen.findByLabelText("Scenario Overview");
userEvent.click(scenarioOverview);
expect(onExpansionCallback).toHaveBeenCalled();
});

it("onCollapsionCallback is invoked when clicking on the header of an expanded scenario", async () => {
render(
<Scenario
scenario={createScenarioModel()}
globalExpansionState={ExpansionState.EXPANDED}
onExpansionCallback={onExpansionCallback}
onCollapsionCallback={onCollapsionCallback}
/>
);
const scenarioOverview = await screen.findByLabelText("Scenario Overview");
userEvent.click(scenarioOverview);
expect(onCollapsionCallback).toHaveBeenCalled();
});
});
});
20 changes: 19 additions & 1 deletion new/src/components/Scenarios/__test__/scenarioTestData.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ScenarioCaseModel, StepModel, Word } from "../../../reportModel";
import { ScenarioCaseModel, ScenarioModel, StepModel, Word } from "../../../reportModel";

export function createWord(props?: Partial<Word>): Word {
return {
Expand Down Expand Up @@ -37,3 +37,21 @@ export function createScenarioCaseModel(props?: Partial<ScenarioCaseModel>): Sce
description: props?.description
};
}

export function createScenarioModel(props?: Partial<ScenarioModel>): ScenarioModel {
return {
className: props?.className ?? "class name",
classTitle: props?.classTitle ?? "class title",
testMethodName: props?.testMethodName ?? "test method name",
description: props?.description ?? "scenario description",
extendedDescription: props?.extendedDescription,
tagIds: props?.tagIds ?? [],
explicitParameters: props?.explicitParameters ?? [],
derivedParameters: props?.derivedParameters ?? [],
scenarioCases: props?.scenarioCases ?? [],
casesAsTable: props?.casesAsTable ?? false,
durationInNanos: props?.durationInNanos ?? 0,
executionStatus: props?.executionStatus ?? "SUCCESS",
tags: props?.tags ?? []
};
}

0 comments on commit b6cfc1a

Please sign in to comment.