testsuite/ui/satellite: test for new project dashboard

Implemented initial go-rod test for new project dashboard.

Change-Id: If3b0f936b5af791f8500d0911c6559fa367f8be5

testsuite/ui/satellite/billing_coupon_test.go

@@ -42,7 +42,7 @@ func navigateToBilling(t *testing.T, ctx *testcontext.Context, planet *testplane
 	waitVueTick(page)
 
 	// skip onboarding process
-	page.MustElement("[href=\"/project-dashboard\"]").MustClick()
+	page.MustElement("[href=\"/new-project-dashboard\"]").MustClick()
 	dashboardTitle := page.MustElement("[aria-roledescription=title]").MustText()
 	require.Contains(t, dashboardTitle, "Dashboard")
 

testsuite/ui/satellite/navigation_test.go

@@ -44,7 +44,7 @@ func TestNavigation(t *testing.T) {
 		waitVueTick(page)
 
 		// skip onboarding process
-		page.MustElement("[href=\"/project-dashboard\"]").MustClick()
+		page.MustElement("[href=\"/new-project-dashboard\"]").MustClick()
 		dashboardTitle := page.MustElement("[aria-roledescription=title]").MustText()
 		require.Contains(t, dashboardTitle, "Dashboard")
 

testsuite/ui/satellite/project_dashboard_test.go

@@ -0,0 +1,111 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+package satellite_test
+
+import (
+	"testing"
+	"time"
+
+	"github.com/go-rod/rod"
+	"github.com/go-rod/rod/lib/input"
+	"github.com/stretchr/testify/require"
+
+	"storj.io/common/memory"
+	"storj.io/common/testcontext"
+	"storj.io/common/testrand"
+	"storj.io/storj/private/testplanet"
+	"storj.io/storj/testsuite/ui/uitest"
+)
+
+func TestProjectDashboard(t *testing.T) {
+	uitest.Run(t, func(t *testing.T, ctx *testcontext.Context, planet *testplanet.Planet, browser *rod.Browser) {
+		var (
+			satelliteSys = planet.Satellites[0]
+			planetUplink = planet.Uplinks[0]
+		)
+
+		const (
+			bucketName = "testbucket"
+			firstPath  = "path"
+			secondPath = "another_path"
+		)
+
+		user := planetUplink.User[planet.Satellites[0].ID()]
+
+		loginPageURL := planet.Satellites[0].ConsoleURL() + "/login"
+
+		page := openPage(browser, loginPageURL)
+
+		// first time user log in
+		page.MustElement("[aria-roledescription=email] input").MustInput(user.Email)
+		// we use fullName as a password
+		page.MustElement("[aria-roledescription=password] input").MustInput(user.Password)
+		page.Keyboard.MustPress(input.Enter)
+		waitVueTick(page)
+
+		dashboardTitle := page.MustElement("[aria-roledescription=title]").MustText()
+		require.Contains(t, dashboardTitle, "Dashboard")
+
+		emptyProjectSubtitle := page.MustElement("[aria-roledescription=empty-title]").MustText()
+		require.Contains(t, emptyProjectSubtitle, "Welcome to Storj :)\nYou’re ready to experience the future of cloud storage")
+
+		page.MustElementX("(//span[text()=\"Upload\"])").MustClick()
+		waitVueTick(page)
+		bucketsTitle := page.MustElement("[aria-roledescription=title]").MustText()
+		require.Contains(t, bucketsTitle, "Buckets")
+
+		planet.Satellites[0].Orders.Chore.Loop.Pause()
+		satelliteSys.Accounting.Tally.Loop.Pause()
+
+		firstSegment := testrand.Bytes(5 * memory.KiB)
+		secondSegment := testrand.Bytes(10 * memory.KiB)
+
+		err := planetUplink.Upload(ctx, satelliteSys, bucketName, firstPath, firstSegment)
+		require.NoError(t, err)
+		err = planetUplink.Upload(ctx, satelliteSys, bucketName, secondPath, secondSegment)
+		require.NoError(t, err)
+
+		_, err = planetUplink.Download(ctx, satelliteSys, bucketName, secondPath)
+		require.NoError(t, err)
+
+		require.NoError(t, planet.WaitForStorageNodeEndpoints(ctx))
+		tomorrow := time.Now().Add(24 * time.Hour)
+		planet.StorageNodes[0].Storage2.Orders.SendOrders(ctx, tomorrow)
+
+		planet.Satellites[0].Orders.Chore.Loop.TriggerWait()
+		satelliteSys.Accounting.Tally.Loop.TriggerWait()
+
+		page.MustElement("[href=\"/new-project-dashboard\"]").MustClick()
+		waitVueTick(page)
+
+		withUsageProjectSubtitle := page.MustElement("[aria-roledescription=with-usage-title]").MustText()
+		require.Contains(t, withUsageProjectSubtitle, "Your 2 objects are stored in 2 segments around the world")
+
+		graphs := page.MustElements("canvas")
+		require.Equal(t, 2, len(graphs))
+
+		page.MustElement("[aria-roledescription=datepicker-toggle]").MustClick()
+		page.MustElement("[aria-roledescription=datepicker]")
+		page.MustElement("[aria-roledescription=datepicker-toggle]").MustClick()
+
+		page.MustElementX("(//span[text()=\"Upgrade Plan\"])").MustClick()
+
+		// Upgrade to pro account modal
+		addPMModalTitle := page.MustElement("[aria-roledescription=modal-title]").MustText()
+		require.Contains(t, addPMModalTitle, "Upgrade to Pro Account")
+		page.MustElement(".close-cross-container").MustClick()
+
+		infoValues := page.MustElements("[aria-roledescription=info-value]")
+
+		charges := infoValues.First().MustText()
+		require.Contains(t, charges, "$0.00")
+		objects := infoValues[1].MustText()
+		require.Contains(t, objects, "2")
+		segments := infoValues.Last().MustText()
+		require.Contains(t, segments, "2")
+
+		totalStorageLabel := page.MustElement("[aria-roledescription=total-storage]").MustText()
+		require.Contains(t, totalStorageLabel, "Total of 22.27KB")
+	})
+}

testsuite/ui/uitest/run.go

@@ -36,6 +36,7 @@ func configureSatellite(log *zap.Logger, index int, config *satellite.Config) {
 	}
 	config.Console.NewNavigation = true
 	config.Console.NewObjectsFlow = true
+	config.Console.NewProjectDashboard = true
 	config.Console.CouponCodeBillingUIEnabled = true
 }
 

web/satellite/src/components/common/VDateRangePicker.vue

@@ -3,6 +3,7 @@
 
 <template>
     <DatePicker
+        aria-roledescription="datepicker"
         range
         :open="isOpen"
         :inline="true"

web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue

@@ -6,6 +6,7 @@
         <div
             class="range-selection__toggle-container"
             :class="{ active: isOpen }"
+            aria-roledescription="datepicker-toggle"
             @click.stop="toggle"
         >
             <DatepickerIcon class="range-selection__toggle-container__icon" />

web/satellite/src/components/project/newProjectDashboard/InfoContainer.vue

@@ -7,7 +7,7 @@
         <VLoader v-if="isDataFetching" height="40px" width="40px" />
         <template v-else>
             <p class="info-container__subtitle">{{ subtitle }}</p>
-            <p class="info-container__value">{{ value }}</p>
+            <p class="info-container__value" aria-roledescription="info-value">{{ value }}</p>
             <slot name="side-value" />
         </template>
     </div>

web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue

@@ -3,9 +3,9 @@
 
 <template>
     <div ref="dashboard" class="project-dashboard">
-        <h1 class="project-dashboard__title">Dashboard</h1>
+        <h1 class="project-dashboard__title" aria-roledescription="title">Dashboard</h1>
         <VLoader v-if="isDataFetching" class="project-dashboard__loader" width="100px" height="100px" />
-        <p v-if="!isDataFetching && limits.objectCount" class="project-dashboard__subtitle">
+        <p v-if="!isDataFetching && limits.objectCount" class="project-dashboard__subtitle" aria-roledescription="with-usage-title">
             Your
             <span class="project-dashboard__subtitle__value">{{ limits.objectCount }} objects</span>
             are stored in
@@ -13,7 +13,7 @@
             around the world
         </p>
         <template v-if="!isDataFetching && !limits.objectCount">
-            <p class="project-dashboard__subtitle">
+            <p class="project-dashboard__subtitle" aria-roledescription="empty-title">
                 Welcome to Storj :) <br> You’re ready to experience the future of cloud storage
             </p>
             <VButton
@@ -140,7 +140,9 @@
                 :is-data-fetching="isDataFetching"
             >
                 <template #side-value>
-                    <p class="project-dashboard__info__label">Total of {{ usedLimitFormatted(limits.storageUsed) }}</p>
+                    <p class="project-dashboard__info__label" aria-roledescription="total-storage">
+                        Total of {{ usedLimitFormatted(limits.storageUsed) }}
+                    </p>
                 </template>
             </InfoContainer>
             <InfoContainer