mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 13:50:43 +00:00
Vivacious Box
6a1e34b16a
## Description: Add progress bars to show construction time, loading time and health bars in the UI layer The progress bars always show at least one pixel of progression (better visuals)    ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [x] I understand that submitting code with bugs that could have been caught through manual testing blocks releases and new features for all contributors ## Please put your Discord username so you can be contacted if a bug or regression is found: Vivacious Box --------- Co-authored-by: evanpelle <evanpelle@gmail.com>
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
/**
|
|
* @jest-environment jsdom
|
|
*/
|
|
import { ProgressBar } from "../../../src/client/graphics/ProgressBar";
|
|
|
|
describe("ProgressBar", () => {
|
|
let ctx: CanvasRenderingContext2D;
|
|
let canvas: HTMLCanvasElement;
|
|
|
|
beforeEach(() => {
|
|
canvas = document.createElement("canvas");
|
|
canvas.width = 100;
|
|
canvas.height = 20;
|
|
ctx = canvas.getContext("2d")!;
|
|
});
|
|
|
|
it("should initialize and draw the background", () => {
|
|
const spyClearRect = jest.spyOn(ctx, "clearRect");
|
|
const spyFillRect = jest.spyOn(ctx, "fillRect");
|
|
const spyFillStyle = jest.spyOn(ctx, "fillStyle", "set");
|
|
const bar = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10, 0.5);
|
|
expect(spyClearRect).toHaveBeenCalledWith(0, 0, 82, 12);
|
|
expect(spyFillRect).toHaveBeenCalledWith(1, 1, 80, 10);
|
|
expect(spyFillStyle).toHaveBeenCalledWith("#00ff00");
|
|
expect(bar.getX()).toBe(2);
|
|
expect(bar.getY()).toBe(2);
|
|
});
|
|
|
|
it("should set progress and draw the progress bar", () => {
|
|
const bar = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10);
|
|
const spyFillRect = jest.spyOn(ctx, "fillRect");
|
|
bar.setProgress(0.5);
|
|
expect(bar.getProgress()).toBe(0.5);
|
|
expect(spyFillRect).toHaveBeenCalledWith(
|
|
2,
|
|
2,
|
|
Math.floor(0.5 * (80 - 2)),
|
|
8,
|
|
);
|
|
expect(ctx.fillStyle).toBe("#00ff00");
|
|
|
|
bar.setProgress(0.1);
|
|
expect(ctx.fillStyle).toBe("#ff0000");
|
|
});
|
|
|
|
it("should clamp progress between 0 and 1 on init", () => {
|
|
const bar = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10, -1);
|
|
expect(bar.getProgress()).toBe(0);
|
|
const bar2 = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10, 2);
|
|
expect(bar2.getProgress()).toBe(1);
|
|
});
|
|
|
|
it("should handle empty colors array gracefully", () => {
|
|
const bar = new ProgressBar([], ctx, 2, 2, 80, 10, 0.5);
|
|
expect(() => bar.setProgress(0.5)).not.toThrow();
|
|
expect(ctx.fillStyle).toBe("#808080");
|
|
});
|
|
});
|