diff --git a/src/components/onboarding/OnboardingBanner.render.test.tsx b/src/components/onboarding/OnboardingBanner.render.test.tsx index ece4e51..a369166 100644 --- a/src/components/onboarding/OnboardingBanner.render.test.tsx +++ b/src/components/onboarding/OnboardingBanner.render.test.tsx @@ -96,6 +96,13 @@ const buttonNamed = (node: ReactNode, key: string) => { return button; }; +/** The dot between the counter and the next step: a decorative `h-1 w-1` span. */ +const isDot = (e: AnyElement) => { + const classes = String(e.props.className).split(/\s+/); + return e.type === "span" && classes.includes("h-1") && classes.includes("w-1"); +}; +const dots = (props: OnboardingBannerProps) => find(tree(props), isDot); + describe("OnboardingBanner — banner mode (#397)", () => { it("is a region named for the path, with the counter, the next step and its link", () => { const html = markup(bannerProps()); @@ -119,15 +126,35 @@ describe("OnboardingBanner — banner mode (#397)", () => { }); it("the counter waits for the Budget entitlement, the next step does not", () => { - const html = markup(bannerProps({ budgetReady: false })); + const props = bannerProps({ budgetReady: false }); + const html = markup(props); expect(html).not.toContain("onboarding.banner.progress"); expect(html).toMatch(/href="\/import"/); + // The dot waits with the counter it follows (#446). + expect(dots(props)).toHaveLength(0); }); it("the counter waits for the visit steps' initialization too, the next step does not (#425)", () => { - const html = markup(bannerProps({ visitStepsInitialized: false })); + const props = bannerProps({ visitStepsInitialized: false }); + const html = markup(props); expect(html).not.toContain("onboarding.banner.progress"); expect(html).toMatch(/href="\/import"/); + // No dot either: it would stand alone before the next step (#446). + expect(dots(props)).toHaveLength(0); + }); + + it("once the total is known, a decorative dot separates the counter from the next step (#446)", () => { + const props = bannerProps(); + const [dot] = dots(props); + expect(dots(props)).toHaveLength(1); + expect(dot.props["aria-hidden"]).toBe("true"); + const html = markup(props); + const counter = html.indexOf("t(onboarding.banner.progress"); + const dotAt = html.search(/