chore: add organization UI tests

internal/http/html/static/templates/partials/page_navigation.tmpl

@@ -1,10 +1,10 @@
 {{ define "page-navigation-links" }}
   <div class="flex p-4 gap-2 justify-end">
     {{ with prevPageQuery .Pagination }}
-      <a href="{{ mergeQuery $.CurrentURL . }}">Previous Page</a>
+      <a id="prev-page-link" href="{{ mergeQuery $.CurrentURL . }}">Previous Page</a>
     {{ end }}
     {{ with nextPageQuery .Pagination }}
-      <a href="{{ mergeQuery $.CurrentURL . }}">Next Page</a>
+      <a id="next-page-link" href="{{ mergeQuery $.CurrentURL . }}">Next Page</a>
     {{ end }}
   </div>
 {{ end }}

internal/integration/organization_ui_test.go

@@ -0,0 +1,68 @@
+package integration
+
+import (
+	"testing"
+
+	"github.com/chromedp/cdproto/cdp"
+	"github.com/chromedp/cdproto/input"
+	"github.com/chromedp/chromedp"
+	"github.com/stretchr/testify/assert"
+)
+
+// TestIntegration_OrganizationUI demonstrates management of organizations via the UI.
+func TestIntegration_OrganizationUI(t *testing.T) {
+	integrationTest(t)
+
+	daemon, _, ctx := setup(t, &config{skipDefaultOrganization: true})
+
+	// test creating/updating/deleting
+	browser.Run(t, ctx, chromedp.Tasks{
+		// go to the list of organizations
+		chromedp.Navigate("https://" + daemon.Hostname() + "/app/organizations"),
+		// add an org
+		chromedp.Click("#new-organization-button", chromedp.ByQuery),
+		chromedp.Focus("input#name", chromedp.NodeVisible, chromedp.ByQuery),
+		input.InsertText("acme-corp"),
+		screenshot(t, "new_org_enter_name"),
+		chromedp.Submit("input#name", chromedp.ByQuery),
+		screenshot(t, "new_org_created"),
+		matchText(t, "//div[@role='alert']", "created organization: acme-corp"),
+		// go to organization settings
+		chromedp.Click("#settings > a", chromedp.ByQuery),
+		screenshot(t),
+		// change organization name
+		chromedp.Focus("input#name", chromedp.NodeVisible, chromedp.ByQuery),
+		chromedp.Clear("input#name", chromedp.ByQuery),
+		input.InsertText("super-duper-org"),
+		screenshot(t),
+		chromedp.Click(`//button[text()='Update organization name']`),
+		screenshot(t),
+		matchText(t, "//div[@role='alert']", "updated organization"),
+		// delete the organization
+		chromedp.Click(`//button[@id='delete-organization-button']`),
+		screenshot(t),
+		matchText(t, "//div[@role='alert']", "deleted organization: super-duper-org"),
+	})
+
+	// test listing orgs...first create 101 orgs
+	for i := 0; i < 101; i++ {
+		daemon.createOrganization(t, ctx)
+	}
+	var (
+		pageOneWidgets []*cdp.Node
+		pageTwoWidgets []*cdp.Node
+	)
+	// open browser
+	browser.Run(t, ctx, chromedp.Tasks{
+		// go to the list of organizations
+		chromedp.Navigate("https://" + daemon.Hostname() + "/app/organizations"),
+		// should be 100 orgs listed on page one
+		chromedp.Nodes(`//*[@class='widget']`, &pageOneWidgets, chromedp.NodeVisible),
+		// go to page two
+		chromedp.Click(`#next-page-link`, chromedp.ByQuery),
+		// should be one org listed
+		chromedp.Nodes(`//*[@class='widget']`, &pageTwoWidgets, chromedp.NodeVisible),
+	})
+	assert.Equal(t, 100, len(pageOneWidgets))
+	assert.Equal(t, 1, len(pageTwoWidgets))
+}

internal/integration/site_admin_ui_test.go

@@ -6,20 +6,17 @@ import (
 	"github.com/chromedp/cdproto/input"
 	"github.com/chromedp/chromedp"
 	"github.com/leg100/otf/internal/daemon"
-	"github.com/stretchr/testify/assert"
 )
 
-// TestSiteAdminUI demonstrates signing into the web app as a site admin, using
-// their super powers to create and delete an organization.
+// TestSiteAdminUI demonstrates signing into the UI as a site admin
 func TestSiteAdminUI(t *testing.T) {
 	integrationTest(t)
 
 	daemon, _, _ := setup(t, &config{Config: daemon.Config{
 		SiteToken: "abc123",
 	}})
 
-	var orgLocation string
-
+	// nil ctx skips seeding browser with a session cookie
 	browser.Run(t, nil, chromedp.Tasks{
 		// login as site admin
 		chromedp.Navigate("https://" + daemon.Hostname() + "/login"),
@@ -35,34 +32,5 @@ func TestSiteAdminUI(t *testing.T) {
 		chromedp.Submit("input#token", chromedp.ByQuery),
 		screenshot(t, "site_admin_profile"),
 		matchText(t, "#content > p", "You are logged in as site-admin", chromedp.ByQuery),
-		// now go to the list of organizations
-		chromedp.Navigate("https://" + daemon.Hostname() + "/app/organizations"),
-		// add an org
-		chromedp.Click("#new-organization-button", chromedp.ByQuery),
-		screenshot(t),
-		chromedp.Focus("input#name", chromedp.NodeVisible, chromedp.ByQuery),
-		input.InsertText("my-new-org"),
-		screenshot(t, "new_org_enter_name"),
-		chromedp.Submit("input#name", chromedp.ByQuery),
-		screenshot(t, "new_org_created"),
-		chromedp.Location(&orgLocation),
-		matchText(t, "//div[@role='alert']", "created organization: my-new-org"),
-		// go to organization settings
-		chromedp.Click("#settings > a", chromedp.ByQuery),
-		screenshot(t),
-		// change organization name
-		chromedp.Focus("input#name", chromedp.NodeVisible, chromedp.ByQuery),
-		chromedp.Clear("input#name", chromedp.ByQuery),
-		input.InsertText("newly-named-org"),
-		screenshot(t),
-		chromedp.Click(`//button[text()='Update organization name']`),
-		screenshot(t),
-		matchText(t, "//div[@role='alert']", "updated organization"),
-		// delete the organization
-		chromedp.Click(`//button[@id='delete-organization-button']`),
-		screenshot(t),
-		matchText(t, "//div[@role='alert']", "deleted organization: newly-named-org"),
 	})
-
-	assert.Equal(t, organizationURL(daemon.Hostname(), "my-new-org"), orgLocation)
 }