cmd/gogio: add clicks to the e2e tests

The test app now responds to mouse clicks; clicking on one of the four
sections of the app flips it to red color until clicked again.

Add a Click method to the TestDriver interface, and implement it in both
of the current drivers. Unfortunately, I failed at implementing it in
X11 with the xdg library, after a few wasted hours. Instead, start
relying on more external tools which are simple to use and not heavy to
install.

Signed-off-by: Daniel Martí <mvdan@mvdan.cc>

cmd/gogio/e2e_test.go

@@ -5,6 +5,7 @@ package main_test
 import (
 	"flag"
 	"image"
+	"image/color"
 	"testing"
 )
 
@@ -29,64 +30,74 @@ type TestDriver interface {
 
 	// Screenshot takes a screenshot of the Gio app on the platform.
 	Screenshot() image.Image
+
+	// Click performs a pointer click at the specified coordinates,
+	// including both press and release.
+	Click(x, y int)
 }
 
 func runEndToEndTest(t *testing.T, driver TestDriver) {
 	width, height := 800, 600
 	cleanups := driver.Start(t, "testdata/red.go", width, height)
 
-	// We expect to receive a 800x600px screenshot.
-	img := driver.Screenshot()
-	size := img.Bounds().Size()
-	if size.X != width || size.Y != height {
-		t.Fatalf("expected dimensions to be %d*%d, got %d*%d",
-			width, height, size.X, size.Y)
-	}
-
 	// The colors are split in four rectangular sections. Check the corners
 	// of each of the sections. We check the corners left to right, top to
 	// bottom, like when reading left-to-right text.
-
+	wantColors := func(topLeft, topRight, botLeft, botRight color.RGBA) {
-	// The top left should be 0xdeadbe.
+		img := driver.Screenshot()
-	{
+		size := img.Bounds().Size()
-		minX, minY := 5, 5
+		// We expect to receive a width*height screenshot.
-		maxX, maxY := (width/2)-5, (height/2)-5
+		if size.X != width || size.Y != height {
-		wantColor(t, img, minX, minY, 0xdede, 0xadad, 0xbebe)
+			t.Fatalf("expected dimensions to be %d*%d, got %d*%d",
-		wantColor(t, img, maxX, minY, 0xdede, 0xadad, 0xbebe)
+				width, height, size.X, size.Y)
-		wantColor(t, img, minX, maxY, 0xdede, 0xadad, 0xbebe)
+		}
-		wantColor(t, img, maxX, maxY, 0xdede, 0xadad, 0xbebe)
+		{
+			minX, minY := 5, 5
+			maxX, maxY := (width/2)-5, (height/2)-5
+			wantColor(t, img, minX, minY, topLeft)
+			wantColor(t, img, maxX, minY, topLeft)
+			wantColor(t, img, minX, maxY, topLeft)
+			wantColor(t, img, maxX, maxY, topLeft)
+		}
+		{
+			minX, minY := (width/2)+5, 5
+			maxX, maxY := width-5, (height/2)-5
+			wantColor(t, img, minX, minY, topRight)
+			wantColor(t, img, maxX, minY, topRight)
+			wantColor(t, img, minX, maxY, topRight)
+			wantColor(t, img, maxX, maxY, topRight)
+		}
+		{
+			minX, minY := 5, (height/2)+5
+			maxX, maxY := (width/2)-5, height-5
+			wantColor(t, img, minX, minY, botLeft)
+			wantColor(t, img, maxX, minY, botLeft)
+			wantColor(t, img, minX, maxY, botLeft)
+			wantColor(t, img, maxX, maxY, botLeft)
+		}
+		{
+			minX, minY := (width/2)+5, (height/2)+5
+			maxX, maxY := width-5, height-5
+			wantColor(t, img, minX, minY, botRight)
+			wantColor(t, img, maxX, minY, botRight)
+			wantColor(t, img, minX, maxY, botRight)
+			wantColor(t, img, maxX, maxY, botRight)
+		}
 	}
 
-	// The top right should be 0xffffff.
+	beef := color.RGBA{R: 0xde, G: 0xad, B: 0xbe}
-	{
+	white := color.RGBA{R: 0xff, G: 0xff, B: 0xff}
-		minX, minY := (width/2)+5, 5
+	black := color.RGBA{R: 0x00, G: 0x00, B: 0x00}
-		maxX, maxY := width-5, (height/2)-5
+	gray := color.RGBA{R: 0xbb, G: 0xbb, B: 0xbb}
-		wantColor(t, img, minX, minY, 0xffff, 0xffff, 0xffff)
+	red := color.RGBA{R: 0xff, G: 0x00, B: 0x00}
-		wantColor(t, img, maxX, minY, 0xffff, 0xffff, 0xffff)
-		wantColor(t, img, minX, maxY, 0xffff, 0xffff, 0xffff)
-		wantColor(t, img, maxX, maxY, 0xffff, 0xffff, 0xffff)
-	}
 
-	// The bottom left should be 0x000000.
+	// These are the four colors at the beginning.
-	{
+	wantColors(beef, white, black, gray)
-		minX, minY := 5, (height/2)+5
-		maxX, maxY := (width/2)-5, height-5
-		wantColor(t, img, minX, minY, 0x0000, 0x0000, 0x0000)
-		wantColor(t, img, maxX, minY, 0x0000, 0x0000, 0x0000)
-		wantColor(t, img, minX, maxY, 0x0000, 0x0000, 0x0000)
-		wantColor(t, img, maxX, maxY, 0x0000, 0x0000, 0x0000)
-	}
 
-	// The bottom right is black (0x000000) with 0x80 alpha, so we should
+	// Click the first and last sections to turn them red.
-	// see gray (0xbbbbbb).
+	driver.Click(1*(width/4), 1*(height/4))
-	{
+	driver.Click(3*(width/4), 3*(height/4))
-		minX, minY := (width/2)+5, (height/2)+5
+	wantColors(red, white, black, red)
-		maxX, maxY := width-5, height-5
-		wantColor(t, img, minX, minY, 0xbbbb, 0xbbbb, 0xbbbb)
-		wantColor(t, img, maxX, minY, 0xbbbb, 0xbbbb, 0xbbbb)
-		wantColor(t, img, minX, maxY, 0xbbbb, 0xbbbb, 0xbbbb)
-		wantColor(t, img, maxX, maxY, 0xbbbb, 0xbbbb, 0xbbbb)
-	}
 
 	// Run the cleanup funcs from last to first, as if they were defers.
 	for i := len(cleanups) - 1; i >= 0; i-- {
@@ -94,9 +105,10 @@ func runEndToEndTest(t *testing.T, driver TestDriver) {
 	}
 }
 
-func wantColor(t *testing.T, img image.Image, x, y int, r, g, b uint32) {
+func wantColor(t *testing.T, img image.Image, x, y int, want color.Color) {
-	color := img.At(x, y)
+	r, g, b, _ := want.RGBA()
-	r_, g_, b_, _ := color.RGBA()
+	got := img.At(x, y)
+	r_, g_, b_, _ := got.RGBA()
 	if r_ != r || g_ != g || b_ != b {
 		t.Errorf("got 0x%04x%04x%04x at (%d,%d), want 0x%04x%04x%04x",
 			r_, g_, b_, x, y, r, g, b)

cmd/gogio/js_test.go

@@ -15,6 +15,7 @@ import (
 	"os/exec"
 	"strings"
 	"testing"
+	"time"
 
 	"github.com/chromedp/cdproto/runtime"
 	"github.com/chromedp/chromedp"
@@ -118,6 +119,8 @@ func (d *JSTestDriver) Start(t_ *testing.T, path string, width, height int) (cle
 	); err != nil {
 		d.t.Fatal(err)
 	}
+	// TODO(mvdan): synchronize with the app instead
+	time.Sleep(200 * time.Millisecond)
 
 	return cleanups
 }
@@ -136,6 +139,16 @@ func (d *JSTestDriver) Screenshot() image.Image {
 	return img
 }
 
+func (d *JSTestDriver) Click(x, y int) {
+	if err := chromedp.Run(d.ctx,
+		chromedp.MouseClickXY(float64(x), float64(y)),
+	); err != nil {
+		d.t.Fatal(err)
+	}
+	// TODO(mvdan): synchronize with the app instead
+	time.Sleep(200 * time.Millisecond)
+}
+
 func TestJS(t *testing.T) {
 	t.Parallel()
 

cmd/gogio/testdata/red.go

@@ -1,14 +1,16 @@
 // SPDX-License-Identifier: Unlicense OR MIT
 
-// A dead simple app that just paints the background red.
+// A simple app used for gogio's end-to-end tests.
 package main
 
 import (
+	"image"
 	"image/color"
 	"log"
 
 	"gioui.org/app"
 	"gioui.org/f32"
+	"gioui.org/io/pointer"
 	"gioui.org/io/system"
 	"gioui.org/layout"
 	"gioui.org/op/paint"
@@ -25,10 +27,18 @@ func main() {
 }
 
 func loop(w *app.Window) error {
-	topLeft := color.RGBA{R: 0xde, G: 0xad, B: 0xbe, A: 0xff}
+	topLeft := quarterWidget{
-	topRight := color.RGBA{R: 0xff, G: 0xff, B: 0xff, A: 0xff}
+		color: color.RGBA{R: 0xde, G: 0xad, B: 0xbe, A: 0xff},
-	botLeft := color.RGBA{R: 0x00, G: 0x00, B: 0x00, A: 0xff}
+	}
-	botRight := color.RGBA{R: 0x00, G: 0x00, B: 0x00, A: 0x80}
+	topRight := quarterWidget{
+		color: color.RGBA{R: 0xff, G: 0xff, B: 0xff, A: 0xff},
+	}
+	botLeft := quarterWidget{
+		color: color.RGBA{R: 0x00, G: 0x00, B: 0x00, A: 0xff},
+	}
+	botRight := quarterWidget{
+		color: color.RGBA{R: 0x00, G: 0x00, B: 0x00, A: 0x80},
+	}
 
 	gtx := &layout.Context{
 		Queue: w.Queue(),
@@ -39,32 +49,57 @@ func loop(w *app.Window) error {
 		case system.DestroyEvent:
 			return e.Err
 		case system.FrameEvent:
+
 			gtx.Reset(e.Config, e.Size)
 			rows := layout.Flex{Axis: layout.Vertical}
 			r1 := rows.Flex(gtx, 0.5, func() {
 				columns := layout.Flex{Axis: layout.Horizontal}
-				r1c1 := columns.Flex(gtx, 0.5, quarterWidget(gtx, topLeft))
+				r1c1 := columns.Flex(gtx, 0.5, func() { topLeft.Layout(gtx) })
-				r1c2 := columns.Flex(gtx, 0.5, quarterWidget(gtx, topRight))
+				r1c2 := columns.Flex(gtx, 0.5, func() { topRight.Layout(gtx) })
 				columns.Layout(gtx, r1c1, r1c2)
 			})
 			r2 := rows.Flex(gtx, 0.5, func() {
 				columns := layout.Flex{Axis: layout.Horizontal}
-				r2c1 := columns.Flex(gtx, 0.5, quarterWidget(gtx, botLeft))
+				r2c1 := columns.Flex(gtx, 0.5, func() { botLeft.Layout(gtx) })
-				r2c2 := columns.Flex(gtx, 0.5, quarterWidget(gtx, botRight))
+				r2c2 := columns.Flex(gtx, 0.5, func() { botRight.Layout(gtx) })
 				columns.Layout(gtx, r2c1, r2c2)
 			})
 			rows.Layout(gtx, r1, r2)
+
 			e.Frame(gtx.Ops)
 		}
 	}
 }
 
-func quarterWidget(gtx *layout.Context, clr color.RGBA) func() {
+// quarterWidget paints a quarter of the screen with one color. When clicked, it
-	return func() {
+// turns red, going back to its normal color when clicked again.
-		paint.ColorOp{Color: clr}.Add(gtx.Ops)
+type quarterWidget struct {
-		paint.PaintOp{Rect: f32.Rectangle{Max: f32.Point{
+	color color.RGBA
-			X: float32(gtx.Constraints.Width.Max),
+
-			Y: float32(gtx.Constraints.Height.Max),
+	clicked bool
-		}}}.Add(gtx.Ops)
+}
+
+var red = color.RGBA{R: 0xff, G: 0x00, B: 0x00, A: 0xff}
+
+func (w *quarterWidget) Layout(gtx *layout.Context) {
+	if w.clicked {
+		paint.ColorOp{Color: red}.Add(gtx.Ops)
+	} else {
+		paint.ColorOp{Color: w.color}.Add(gtx.Ops)
+	}
+	paint.PaintOp{Rect: f32.Rectangle{Max: f32.Point{
+		X: float32(gtx.Constraints.Width.Max),
+		Y: float32(gtx.Constraints.Height.Max),
+	}}}.Add(gtx.Ops)
+
+	pointer.RectAreaOp{Rect: image.Rectangle{
+		Max: image.Pt(gtx.Constraints.Width.Max, gtx.Constraints.Height.Max),
+	}}.Add(gtx.Ops)
+	pointer.InputOp{Key: w}.Add(gtx.Ops)
+
+	for _, e := range gtx.Events(w) {
+		if e, ok := e.(pointer.Event); ok && e.Type == pointer.Press {
+			w.clicked = !w.clicked
+		}
 	}
 }

cmd/gogio/x11_test.go

@@ -30,6 +30,8 @@ import (
 type X11TestDriver struct {
 	t *testing.T
 
+	display string
+
 	// conn holds the connection to X.
 	conn *xgbutil.XUtil
 }
@@ -41,7 +43,7 @@ func (d *X11TestDriver) Start(t_ *testing.T, path string, width, height int) (cl
 	// will only be using :0, so there's only a 0.001% chance of two
 	// concurrent test runs to run into a conflict.
 	rnd := rand.New(rand.NewSource(time.Now().UnixNano()))
-	display := fmt.Sprintf(":%d", rnd.Intn(100000)+1)
+	d.display = fmt.Sprintf(":%d", rnd.Intn(100000)+1)
 
 	var xprog string
 	xflags := []string{
@@ -54,7 +56,7 @@ func (d *X11TestDriver) Start(t_ *testing.T, path string, width, height int) (cl
 		xprog = "Xephyr" // nested X server as a window
 		xflags = append(xflags, "-screen", fmt.Sprintf("%dx%d", width, height))
 	}
-	xflags = append(xflags, display)
+	xflags = append(xflags, d.display)
 	if _, err := exec.LookPath(xprog); err != nil {
 		d.t.Skipf("%s needed to run with -headless=%t", xprog, *headless)
 	}
@@ -100,7 +102,7 @@ func (d *X11TestDriver) Start(t_ *testing.T, path string, width, height int) (cl
 			// This socket path isn't terribly portable, but the xgb
 			// library we use does the same, and we only really care
 			// about Linux here.
-			socket := fmt.Sprintf("/tmp/.X11-unix/X%s", display[1:])
+			socket := fmt.Sprintf("/tmp/.X11-unix/X%s", d.display[1:])
 			if _, err := os.Stat(socket); err == nil {
 				break
 			}
@@ -125,7 +127,7 @@ func (d *X11TestDriver) Start(t_ *testing.T, path string, width, height int) (cl
 		ctx, cancel := context.WithCancel(context.Background())
 		cmd := exec.CommandContext(ctx, bin)
 		out := &bytes.Buffer{}
-		cmd.Env = append(os.Environ(), "DISPLAY="+display)
+		cmd.Env = append(os.Environ(), "DISPLAY="+d.display)
 		cmd.Stdout = out
 		cmd.Stderr = out
 		if err := cmd.Start(); err != nil {
@@ -146,7 +148,7 @@ func (d *X11TestDriver) Start(t_ *testing.T, path string, width, height int) (cl
 	// Finally, connect to the X server.
 	xgb.Logger.SetOutput(testLogWriter{d.t})
 	xgbutil.Logger.SetOutput(testLogWriter{d.t})
-	conn, err := xgbutil.NewConnDisplay(display)
+	conn, err := xgbutil.NewConnDisplay(d.display)
 	if err != nil {
 		d.t.Fatal(err)
 	}
@@ -162,8 +164,7 @@ func (d *X11TestDriver) Start(t_ *testing.T, path string, width, height int) (cl
 	})
 
 	// Wait for the gio app to render.
-	// TODO(mvdan): do this properly, e.g. via waiting for log lines
+	// TODO(mvdan): synchronize with the app instead
-	// from the gio program.
 	time.Sleep(400 * time.Millisecond)
 
 	return cleanups
@@ -177,6 +178,27 @@ func (d *X11TestDriver) Screenshot() image.Image {
 	return img
 }
 
+func (d *X11TestDriver) xdotool(args ...interface{}) {
+	strs := make([]string, len(args))
+	for i, arg := range args {
+		strs[i] = fmt.Sprint(arg)
+	}
+	cmd := exec.Command("xdotool", strs...)
+	cmd.Env = append(os.Environ(), "DISPLAY="+d.display)
+	if out, err := cmd.CombinedOutput(); err != nil {
+		d.t.Errorf("%s", out)
+		d.t.Fatal(err)
+	}
+}
+
+func (d *X11TestDriver) Click(x, y int) {
+	d.xdotool("mousemove", x, y)
+	d.xdotool("click", "1")
+
+	// TODO(mvdan): synchronize with the app instead
+	time.Sleep(200 * time.Millisecond)
+}
+
 func TestX11(t *testing.T) {
 	t.Parallel()