refactor(build/ui): move screenshot definitions into isolated js scripts

build/testing/ui.go

@@ -5,9 +5,11 @@ import (
 	"crypto/sha256"
 	"fmt"
 	"os"
+	"path"
 	"time"
 
 	"dagger.io/dagger"
+	"golang.org/x/sync/errgroup"
 )
 
 func UI(ctx context.Context, client *dagger.Client, ui, flipt *dagger.Container) error {
@@ -31,6 +33,7 @@ func Screenshots(ctx context.Context, client *dagger.Client, flipt *dagger.Conta
 			"./package.json",
 			"./package-lock.json",
 			"./playwright.config.ts",
+			"/screenshots/",
 		},
 	})
 
@@ -39,13 +42,13 @@ func Screenshots(ctx context.Context, client *dagger.Client, flipt *dagger.Conta
 		return err
 	}
 
-	cache := client.CacheVolume(fmt.Sprintf("node-modules-new-%x", sha256.Sum256([]byte(contents))))
+	cache := client.CacheVolume(fmt.Sprintf("node-modules-screenshot-%x", sha256.Sum256([]byte(contents))))
 
 	ui, err := client.Container().From("node:18-bullseye").
 		WithMountedDirectory("/src", src).WithWorkdir("/src").
 		WithMountedCache("/src/node_modules", cache).
 		WithExec([]string{"npm", "install"}).
-		WithExec([]string{"npx", "playwright", "install", "chromium", "--with-deps"}).
+		WithExec([]string{"npx", "playwright@1.36.0", "install", "chromium", "--with-deps"}).
 		Sync(ctx)
 	if err != nil {
 		return err
@@ -67,17 +70,53 @@ func Screenshots(ctx context.Context, client *dagger.Client, flipt *dagger.Conta
 		return err
 	}
 
-	test, err := buildUI(ctx, ui, flipt)
+	entries, err := ui.Directory("screenshot").Entries(ctx)
 	if err != nil {
 		return err
 	}
 
-	_, err = test.
-		WithExec([]string{"node", "screenshot.js"}).
-		Directory("screenshots").
-		Export(ctx, "screenshots")
+	var (
+		g          errgroup.Group
+		containers = make(chan *dagger.Container, 0)
+	)
+
+	go func() {
+		g.Wait()
+		close(containers)
+	}()
+
+	for _, entry := range entries {
+		entry := entry
+		g.Go(func() error {
+			test, err := buildUI(ctx, ui, flipt)
+			if err != nil {
+				return err
+			}
+
+			if ext := path.Ext(entry); ext != ".js" {
+				return nil
+			}
+
+			c, err := test.WithExec([]string{"node", path.Join("screenshot", entry)}).Sync(ctx)
+			if err != nil {
+				return err
+			}
+
+			containers <- c
+
+			return err
+		})
+	}
 
-	return err
+	for c := range containers {
+		fmt.Println("exporting")
+		if _, err := c.Directory("screenshots").
+			Export(ctx, "screenshots"); err != nil {
+			return err
+		}
+	}
+
+	return g.Wait()
 }
 
 func buildUI(ctx context.Context, ui, flipt *dagger.Container) (_ *dagger.Container, err error) {
@@ -97,5 +136,6 @@ func buildUI(ctx context.Context, ui, flipt *dagger.Container) (_ *dagger.Contai
 			WithEnvVariable("FLIPT_AUTHENTICATION_METHODS_TOKEN_ENABLED", "true").
 			WithEnvVariable("UNIQUE", time.Now().String()).
 			WithExec(nil)).
+		WithFile("/usr/bin/flipt", flipt.File("/flipt")).
 		WithEnvVariable("FLIPT_ADDRESS", "http://flipt:8080"), nil
 }

ui/screenshot.js

@@ -1,59 +1,51 @@
 const { chromium } = require('playwright');
+const { exec } = require('child_process');
+const fs = require('fs');
 
 const fliptAddr = process.env.FLIPT_ADDRESS ?? 'http://localhost:8080';
 
-const go = async (page, path) => {
-  await page.goto(fliptAddr+path);
-};
-
 const screenshot = async (page, name) => {
   await page.screenshot({ path: 'screenshots/'+name });
 };
 
 const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
 
-(async () => {
+const capture = async function(name, fn) {
+  try {
+    const path = `${__dirname}/screenshot/fixtures/${name}.yml`;
+    if (fs.existsSync(path)) {
+      exec(`flipt import --address=${fliptAddr} ${path}`, (error, stdout, stderr) => {
+        if (error) {
+          console.error(`error: ${error.message}`);
+          return;
+        }
+
+        if (stderr) {
+          console.error(`stderr: ${stderr}`);
+          return;
+        }
+
+        console.log(`stdout:\n${stdout}`);
+      })
+    }
+  } catch (err) {
+    // ignore and we will just skip seeding
+    console.debug(err);
+  }
+
   const browser = await chromium.launch({ headless: true });
   const context = await browser.newContext({
     viewport: { width: 1280, height: 720 },
   });
   const page = await context.newPage();
 
-  // Create Flag
-  await go(page, '/');
-  await page.getByRole('button', { name: 'New Flag' }).click();
-  await page.getByLabel('Name').fill('New Login');
-  await page.getByLabel('Key').fill('new-login');
-  await page.getByLabel('Description').fill('Enables the new login page for users');
-  await screenshot(page, 'create_flag.png');
-
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  // Create Variant
-  await page.getByRole('button', { name: 'New Variant' }).click();
-  await page
-        .getByRole('dialog', { name: 'New Variant' })
-        .locator('#key')
-        .fill('big-blue-login-button');
-  await page
-        .getByRole('dialog', { name: 'New Variant' })
-        .locator('#name')
-        .fill('Big Blue Login Button');
-
+  await page.goto(fliptAddr);
+  await fn(page);
   await sleep(2000);
-
-  await screenshot(page, 'create_variant.png');
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  await page.getByRole('link', { name: 'Segments' }).click();
-  await page.getByRole('button', { name: 'New Segment' }).click();
-  await page.getByLabel('Name').fill('All Users');
-  await page.getByLabel('Key').fill('all-users');
-
-  await sleep(2000);
-
-  await screenshot(page, 'create_segment.png');
+  await screenshot(page, `${name}.png`);
 
   await context.close();
   await browser.close();
-})();
+};
+
+module.exports = { capture };

ui/screenshot/create-contraint.js

@@ -0,0 +1,16 @@
+const { capture } = require('../screenshot.js');
+
+(async() => {
+    await capture('create_constraint', async (page) => {
+      await page.getByRole('link', { name: 'Segments' }).click();
+      await page.getByRole('link', { name: 'all-users' }).click();
+      await page.getByRole('button', { name: 'New Constraint' }).click();
+      await page.getByLabel('Property').fill('admin');
+      await page
+        .getByRole('combobox', { name: 'Type' })
+        .selectOption('BOOLEAN_COMPARISON_TYPE');
+      await page
+        .getByRole('combobox', { name: 'Operator' })
+        .selectOption('notpresent');
+    });
+})();

ui/screenshot/create-flag.js

@@ -0,0 +1,10 @@
+const { capture } = require('../screenshot.js');
+
+(async() => {
+    await capture('create_flag', async (page) => {
+      await page.getByRole('button', { name: 'New Flag' }).click();
+      await page.getByLabel('Name').fill('New Login');
+      await page.getByLabel('Key').fill('new-login');
+      await page.getByLabel('Description').fill('Enables the new login page for users');
+    });
+})();

ui/screenshot/create-segment.js

@@ -0,0 +1,10 @@
+const { capture } = require('../screenshot.js');
+
+(async() => {
+    await capture('create_segment', async (page) => {
+      await page.getByRole('link', { name: 'Segments' }).click();
+      await page.getByRole('button', { name: 'New Segment' }).click();
+      await page.getByLabel('Name').fill('All Users');
+      await page.getByLabel('Key').fill('all-users');
+    });
+})();

ui/screenshot/create-variant.js

@@ -0,0 +1,16 @@
+const { capture } = require('../screenshot.js');
+
+(async() => {
+    await capture('create_variant', async (page) => {
+      await page.getByRole('link', { name: 'new-login' }).click();
+      await page.getByRole('button', { name: 'New Variant' }).click();
+      await page
+            .getByRole('dialog', { name: 'New Variant' })
+            .locator('#key')
+            .fill('big-blue-login-button');
+      await page
+            .getByRole('dialog', { name: 'New Variant' })
+            .locator('#name')
+            .fill('Big Blue Login Button');
+    });
+})();

ui/screenshot/fixtures/create_constraint.yml

@@ -0,0 +1,4 @@
+namespace: default
+segments:
+  - key: all-users
+    name: All Users

ui/screenshot/fixtures/create_variant.yml

@@ -0,0 +1,5 @@
+namespace: default
+flags:
+  - key: new-login
+    name: New Login
+    description: Enables the new login page for users