|
| 1 | +// @vitest-environment node |
| 2 | +import { describe, expect, it, vi } from "vitest"; |
| 3 | +import { |
| 4 | + drawnSquare, |
| 5 | + morphFromRect, |
| 6 | + type UtilityMapRect, |
| 7 | +} from "~/composables/useUtilityMapHandoff"; |
| 8 | + |
| 9 | +const board: UtilityMapRect = { left: 500, top: 100, width: 800, height: 800 }; |
| 10 | + |
| 11 | +// A two-row index on desktop: the cell is taller than it is wide, the radar's |
| 12 | +// box is capped at 90% of its width, and the square radar is drawn centred in |
| 13 | +// it. |
| 14 | +const tallTile: UtilityMapRect = { |
| 15 | + left: 100, |
| 16 | + top: 200, |
| 17 | + width: 232, |
| 18 | + height: 330, |
| 19 | +}; |
| 20 | + |
| 21 | +function element(box: UtilityMapRect) { |
| 22 | + const animate = vi.fn(); |
| 23 | + return { |
| 24 | + animate, |
| 25 | + getBoundingClientRect: () => box, |
| 26 | + } as unknown as Element & { animate: ReturnType<typeof vi.fn> }; |
| 27 | +} |
| 28 | + |
| 29 | +// Where the element's own point (x, y) sits on screen in a keyframe. |
| 30 | +function placed( |
| 31 | + frame: { transformOrigin: string; transform: string }, |
| 32 | + box: UtilityMapRect, |
| 33 | +) { |
| 34 | + const [originX, originY] = frame.transformOrigin.split(" ").map(parseFloat); |
| 35 | + const [, x, y, scale] = frame.transform |
| 36 | + .match(/translate\((-?[\d.]+)px, (-?[\d.]+)px\) scale\(([\d.]+)\)/)! |
| 37 | + .map(Number); |
| 38 | + return (pointX: number, pointY: number) => ({ |
| 39 | + left: box.left + originX + x + scale * (pointX - originX), |
| 40 | + top: box.top + originY + y + scale * (pointY - originY), |
| 41 | + }); |
| 42 | +} |
| 43 | + |
| 44 | +function expectAt( |
| 45 | + point: { left: number; top: number }, |
| 46 | + expected: { left: number; top: number }, |
| 47 | +) { |
| 48 | + expect(point.left).toBeCloseTo(expected.left, 6); |
| 49 | + expect(point.top).toBeCloseTo(expected.top, 6); |
| 50 | +} |
| 51 | + |
| 52 | +describe("drawnSquare", () => { |
| 53 | + it("is the box itself when the box is square", () => { |
| 54 | + expect(drawnSquare(board)).toEqual(board); |
| 55 | + }); |
| 56 | + |
| 57 | + it("is the square centred in a box taller than it is wide", () => { |
| 58 | + expect(drawnSquare(tallTile)).toEqual({ |
| 59 | + left: 100, |
| 60 | + top: 249, |
| 61 | + width: 232, |
| 62 | + height: 232, |
| 63 | + }); |
| 64 | + }); |
| 65 | + |
| 66 | + it("is the square centred in a box wider than it is tall", () => { |
| 67 | + const wide = { left: 0, top: 0, width: 300, height: 200 }; |
| 68 | + |
| 69 | + expect(drawnSquare(wide)).toEqual({ |
| 70 | + left: 50, |
| 71 | + top: 0, |
| 72 | + width: 200, |
| 73 | + height: 200, |
| 74 | + }); |
| 75 | + }); |
| 76 | +}); |
| 77 | + |
| 78 | +describe("morphFromRect", () => { |
| 79 | + it("starts a tile's drawn radar exactly on the board it shrinks out of", () => { |
| 80 | + const tile = element(tallTile); |
| 81 | + |
| 82 | + morphFromRect(tile, board); |
| 83 | + |
| 84 | + const [start, end] = tile.animate.mock.calls[0][0]; |
| 85 | + const at = placed(start, tallTile); |
| 86 | + expectAt(at(0, 49), { left: board.left, top: board.top }); |
| 87 | + expectAt(at(232, 281), { |
| 88 | + left: board.left + board.width, |
| 89 | + top: board.top + board.height, |
| 90 | + }); |
| 91 | + expect(end.transform).toBe("none"); |
| 92 | + }); |
| 93 | + |
| 94 | + it("grows a square board out of a square tile corner to corner", () => { |
| 95 | + const viewport = element(board); |
| 96 | + const from = drawnSquare(tallTile); |
| 97 | + |
| 98 | + morphFromRect(viewport, from); |
| 99 | + |
| 100 | + const at = placed(viewport.animate.mock.calls[0][0][0], board); |
| 101 | + expectAt(at(0, 0), { left: from.left, top: from.top }); |
| 102 | + expectAt(at(800, 800), { |
| 103 | + left: from.left + from.width, |
| 104 | + top: from.top + from.height, |
| 105 | + }); |
| 106 | + }); |
| 107 | +}); |
0 commit comments