| 1 | //go:build browser |
| 2 | |
| 3 | package check |
| 4 | |
| 5 | import ( |
| 6 | "context" |
| 7 | "encoding/json" |
| 8 | "math" |
| 9 | "strings" |
| 10 | "testing" |
| 11 | "time" |
| 12 | |
| 13 | "github.com/chromedp/chromedp" |
| 14 | ) |
| 15 | |
| 16 | // ftokJS reads the filter chip's × against the chip's inner edges (its |
| 17 | // border box less its border) and the two corners of the ×'s hover |
| 18 | // fill on its trailing side. |
| 19 | const ftokJS = `(() => { |
| 20 | const chip = document.querySelector("[rst-ftok]"), x = chip.querySelector("a"); |
| 21 | const c = chip.getBoundingClientRect(), r = x.getBoundingClientRect(), s = getComputedStyle(chip), xs = getComputedStyle(x); |
| 22 | const rtl = getComputedStyle(chip).direction === "rtl"; |
| 23 | const inner = {top: c.top + parseFloat(s.borderTopWidth), bottom: c.bottom - parseFloat(s.borderBottomWidth), |
| 24 | left: c.left + parseFloat(s.borderLeftWidth), right: c.right - parseFloat(s.borderRightWidth)}; |
| 25 | return JSON.stringify({ |
| 26 | Trailing: rtl ? r.left - inner.left : inner.right - r.right, |
| 27 | Top: r.top - inner.top, Bottom: inner.bottom - r.bottom, W: r.width, H: r.height, |
| 28 | ChipRadius: parseFloat(s.borderTopLeftRadius) - parseFloat(s.borderTopWidth), |
| 29 | EndRadii: rtl ? [xs.borderTopLeftRadius, xs.borderBottomLeftRadius] : [xs.borderTopRightRadius, xs.borderBottomRightRadius]}); |
| 30 | })()` |
| 31 | |
| 32 | // TestTheFilterChipsRemoveFillsItsEnd: the ×'s hover fill sat inset |
| 33 | // from the chip's trailing border by the chip's own padding, so the |
| 34 | // fill read as a button floating inside the chip with a gap after it. |
| 35 | // It now fills the chip's trailing end: flush with the inner edge of |
| 36 | // the border on the trailing side, the top and the bottom, its fill's |
| 37 | // trailing corners the chip's own radius less the border, and still |
| 38 | // --rst-target square. In both directions, at 1280 with a mouse and |
| 39 | // 390 with touch. |
| 40 | func TestTheFilterChipsRemoveFillsItsEnd(t *testing.T) { |
| 41 | chip := `<div rst-page><p><span rst-ftok><span rst-ftok-k>Paid</span><a href="/orders" aria-label="Remove filter Paid">✕</a></span></p></div>` |
| 42 | pages := map[string]string{ |
| 43 | "/": sizingDoc("ftok", chip), |
| 44 | "/rtl": strings.Replace(sizingDoc("ftok", chip), `dir="ltr"`, `dir="rtl"`, 1), |
| 45 | } |
| 46 | for _, leg := range []struct { |
| 47 | name string |
| 48 | w, h int64 |
| 49 | coarse bool |
| 50 | target float64 |
| 51 | }{{"1280x900 mouse", 1280, 900, false, 32}, {"390x844 touch", 390, 844, true, 44}} { |
| 52 | t.Run(leg.name, func(t *testing.T) { |
| 53 | rig := sizingRig(t, leg.coarse, pages) |
| 54 | ctx, cancel := context.WithTimeout(rig.Context(), 60*time.Second) |
| 55 | defer cancel() |
| 56 | if err := chromedp.Run(ctx, chromedp.EmulateViewport(leg.w, leg.h)); err != nil { |
| 57 | t.Fatal(err) |
| 58 | } |
| 59 | for _, path := range []string{"/", "/rtl"} { |
| 60 | var raw string |
| 61 | if err := chromedp.Run(ctx, chromedp.Navigate(rig.Origin+path), chromedp.WaitReady("[rst-ftok] a", chromedp.ByQuery), chromedp.Evaluate(ftokJS, &raw)); err != nil { |
| 62 | t.Fatal(err) |
| 63 | } |
| 64 | var got struct { |
| 65 | Trailing, Top, Bottom, W, H, ChipRadius float64 |
| 66 | EndRadii [2]string |
| 67 | } |
| 68 | if err := json.Unmarshal([]byte(raw), &got); err != nil { |
| 69 | t.Fatal(err) |
| 70 | } |
| 71 | where := leg.name + " " + map[string]string{"/": "ltr", "/rtl": "rtl"}[path] |
| 72 | if math.Abs(got.Trailing) > 0.5 || math.Abs(got.Top) > 0.5 || math.Abs(got.Bottom) > 0.5 { |
| 73 | t.Errorf("%s: the × sits %.1fpx from the chip's trailing border, %.1f from its top and %.1f from its bottom; want it flush on all three", where, got.Trailing, got.Top, got.Bottom) |
| 74 | } |
| 75 | if math.Abs(got.W-leg.target) > 0.5 || math.Abs(got.H-leg.target) > 0.5 { |
| 76 | t.Errorf("%s: the × is %.1f×%.1f, want the %v target", where, got.W, got.H, leg.target) |
| 77 | } |
| 78 | want := fmtPx(got.ChipRadius) |
| 79 | if got.EndRadii[0] != want || got.EndRadii[1] != want { |
| 80 | t.Errorf("%s: the ×'s trailing corners are %v, want the chip's inner radius %s on both", where, got.EndRadii, want) |
| 81 | } |
| 82 | } |
| 83 | }) |
| 84 | } |
| 85 | } |
| 86 | |
| 87 | // fmtPx spells a length as getComputedStyle does: "6px", "6.5px". |
| 88 | func fmtPx(v float64) string { |
| 89 | b, _ := json.Marshal(v) |
| 90 | return string(b) + "px" |
| 91 | } |
| 92 | |
amadan