JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

testsuite/ui/satellite: test for new navigation sidebar

Browse Source 
Added tests for new navigation sidebar.

Change-Id: If07615625ecb21de060e7c3853e6d1d675edb8e8
This commit is contained in:
Vitalii Shpital 2021-10-21 19:21:37 +03:00
parent f2d8e97d97
commit 49492d28fc
16 changed files with 199 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
testsuite/ui/satellite/navigation_test.go Normal file
View File

@ -0,0 +1,170 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
package satellite_test
import (
"testing"
"github.com/go-rod/rod"
"github.com/go-rod/rod/lib/input"
"github.com/stretchr/testify/require"
"storj.io/common/testcontext"
"storj.io/storj/private/testplanet"
"storj.io/storj/testsuite/ui/uitest"
)
func TestNavigation(t *testing.T) {
uitest.Run(t, func(t *testing.T, ctx *testcontext.Context, planet *testplanet.Planet, browser *rod.Browser) {
signupPageURL := planet.Satellites[0].ConsoleURL() + "/signup"
fullName := "John Doe"
emailAddress := "test@email.com"
password := "qazwsx123"
page := openPage(browser, signupPageURL)
// first time User signs up
page.MustElement("[aria-roledescription=name] input").MustInput(fullName)
page.MustElement("[aria-roledescription=email] input").MustInput(emailAddress)
page.MustElement("[aria-roledescription=password] input").MustInput(password)
page.MustElement("[aria-roledescription=retype-password] input").MustInput(password)
page.MustElement(".checkmark").MustClick()
page.Keyboard.MustPress(input.Enter)
waitVueTick(page)
confirmAccountEmailMessage := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, confirmAccountEmailMessage, "You're almost there!")
// first time user logs in
page.MustElement("[href=\"/login\"]").MustClick()
waitVueTick(page)
page.MustElement("[aria-roledescription=email] input").MustInput(emailAddress)
page.MustElement("[aria-roledescription=password] input").MustInput(password)
page.Keyboard.MustPress(input.Enter)
// waitVueTick(page)
// skip onboarding process
page.MustElement("[href=\"/project-dashboard\"]").MustClick()
dashboardTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, dashboardTitle, "Dashboard")
// nav bar test
// manage projects route
page.MustElement("[aria-roledescription=project-selection]").MustClick()
page.MustElementR("p", "Manage Projects").MustClick()
waitVueTick(page)
projectsTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, projectsTitle, "Projects")
// create new project route
page.MustElement("[aria-roledescription=project-selection]").MustClick()
page.MustElementR("p", "Create new").MustClick()
waitVueTick(page)
createProjectTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, createProjectTitle, "Create a Project")
page.MustNavigateBack()
// project dashboard route
page.MustElementR("p", "Dashboard").MustClick()
waitVueTick(page)
dashboardTitle1 := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, dashboardTitle1, "Dashboard")
// project dashboard route
page.MustElementR("p", "Objects").MustClick()
waitVueTick(page)
objectsTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, objectsTitle, "Object Browser")
// access grants route
page.MustElementR("p", "Access").MustClick()
waitVueTick(page)
accessGrantsTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, accessGrantsTitle, "Access Grants")
// project members route
page.MustElementR("p", "Users").MustClick()
waitVueTick(page)
membersTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, membersTitle, "Project Members")
// resources dropdown
page.MustElementR("p", "Resources").MustClick()
docsLinkTitle := page.MustElement("[href=\"https://docs.storj.io/\"] div h2").MustText()
require.Contains(t, docsLinkTitle, "Docs")
forumLinkTitle := page.MustElement("[href=\"https://forum.storj.io/\"] div h2").MustText()
require.Contains(t, forumLinkTitle, "Forum")
supportLinkTitle := page.MustElement("[href=\"https://supportdcs.storj.io/hc/en-us\"] div h2").MustText()
require.Contains(t, supportLinkTitle, "Support")
// quick start dropdown
// create project route
page.MustElementR("p", "Quick Start").MustClick()
page.MustElement("[href=\"/create-project\"]").MustClick()
waitVueTick(page)
createProjectTitle1 := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, createProjectTitle1, "Create a Project")
page.MustNavigateBack()
// create access grant route
page.MustElement("[href=\"/access-grants/create-grant\"]").MustClick()
waitVueTick(page)
nameAGTitle := page.MustElement("[aria-roledescription=name-ag-title]").MustText()
require.Contains(t, nameAGTitle, "Name Your Access Grant")
page.MustElementX("(//span[text()=\"Cancel\"])").MustClick()
// objects route
page.MustElementR("p", "Quick Start").MustClick()
page.MustElement("[href=\"/objects\"]").MustClick()
waitVueTick(page)
objectsTitle1 := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, objectsTitle1, "Object Browser")
// onboarding cli flow route
page.MustElementR("p", "Quick Start").MustClick()
wait := page.MustWaitRequestIdle()
page.MustElement("[href=\"/onboarding-tour/cli/api-key\"]").MustClick()
wait()
apiKeyGeneratedTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, apiKeyGeneratedTitle, "API Key Generated")
page.Race().Element("[aria-roledescription=satellite-address]").MustHandle(func(el *rod.Element) {
require.NotEmpty(t, el.MustText())
}).MustDo()
page.Race().Element("[aria-roledescription=api-key]").MustHandle(func(el *rod.Element) {
require.NotEmpty(t, el.MustText())
}).MustDo()
page.MustElementX("(//span[text()=\"< Back\"])").MustClick()
waitVueTick(page)
page.MustElement("[href=\"/project-dashboard\"]").MustClick()
waitVueTick(page)
// account dropdown
// account settings route
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Account Settings").MustClick()
waitVueTick(page)
settingsTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, settingsTitle, "Account Settings")
// billing route
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Billing").MustClick()
waitVueTick(page)
pmTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, pmTitle, "Payment Method")
// upgrade account popup
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Upgrade Plan").MustClick()
upgradeTitle := page.MustElement("[aria-roledescription=modal-title]").MustText()
require.Contains(t, upgradeTitle, "Upgrade to Pro Account")
page.MustElement(".close-cross-container").MustClick()
// logout route
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Logout").MustClick()
waitVueTick(page)
signInTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, signInTitle, "Sign In")
})
}

1
testsuite/ui/uitest/run.go
View File

@ -40,6 +40,7 @@ func Run(t *testing.T, test Test) {
config.Console.StaticDir = dir
}
config.Console.NewOnboarding = true
config.Console.NewNavigation = true
config.Console.CouponCodeBillingUIEnabled = true
},
},

2
web/satellite/src/components/accessGrants/AccessGrants.vue
View File

@ -4,7 +4,7 @@
<template>
<div class="access-grants">
<div class="access-grants__title-area">
<h2 class="access-grants__title-area__title">Access Grants</h2>
<h2 class="access-grants__title-area__title" aria-roledescription="title">Access Grants</h2>
<div v-if="accessGrantsList.length" class="access-grants__title-area__right">
<VButton
v-if="selectedAccessGrantsAmount"

2
web/satellite/src/components/accessGrants/steps/NameStep.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="name-step" :class="{ 'border-radius': isOnboardingTour }">
<h1 class="name-step__title">Name Your Access Grant</h1>
<h1 class="name-step__title" aria-roledescription="name-ag-title">Name Your Access Grant</h1>
<p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
<HeaderedInput
label="Access Grant Name"

2
web/satellite/src/components/account/SettingsArea.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="settings">
<h1 class="settings__title">Account Settings</h1>
<h1 class="settings__title" aria-roledescription="title">Account Settings</h1>
<div class="settings__edit-profile">
<div class="settings__edit-profile__row">
<div class="settings__edit-profile__avatar">

2
web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
View File

@ -5,7 +5,7 @@
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area" :class="functionalAreaClassName">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 class="payment-methods-area__functional-area__title" aria-roledescription="title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div v-if="!areAddButtonsClicked" class="payment-methods-area__functional-area__button-area__default-buttons">
<VButton

2
web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="account-area" :class="{ active: isDropdown }" @click.stop="toggleDropdown">
<div class="account-area" :class="{ active: isDropdown }" aria-roledescription="account-area" @click.stop="toggleDropdown">
<div class="account-area__avatar">
<h1 class="account-area__avatar__letter">{{ avatarLetter }}</h1>
</div>

7
web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
View File

@ -3,7 +3,12 @@
<template>
<div class="project-selection">
<div class="project-selection__selected" :class="{ active: isDropdownShown }" @click.stop.prevent="toggleSelection">
<div
class="project-selection__selected"
:class="{ active: isDropdownShown }"
aria-roledescription="project-selection"
@click.stop.prevent="toggleSelection"
>
<div class="project-selection__selected__left">
<ProjectIcon class="project-selection__selected__left__image" />
<p class="project-selection__selected__left__name" :title="projectName">{{ projectName }}</p>

2
web/satellite/src/components/objects/WarningView.vue
View File

@ -4,7 +4,7 @@
<template>
<div class="warning-view">
<div class="warning-view__container">
<h1 class="warning-view__container__title">Object Browser</h1>
<h1 class="warning-view__container__title" aria-roledescription="title">Object Browser</h1>
<div class="warning-view__container__message-container">
<h2 class="warning-view__container__message-container__sub-title" aria-roledescription="sub-title">The object browser uses server side encryption.</h2>
<p class="warning-view__container__message-container__message">

2
web/satellite/src/components/project/CreateProject.vue
View File

@ -11,7 +11,7 @@
alt="create project"
>
</div>
<h2 class="create-project__container__title">Create a Project</h2>
<h2 class="create-project__container__title" aria-roledescription="title">Create a Project</h2>
<HeaderedInput
label="Project Name"
additional-label="Up To 20 Characters"

2
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -4,7 +4,7 @@
<template>
<div class="projects-list">
<div class="projects-list__title-area">
<h2 class="projects-list__title-area__title">Projects</h2>
<h2 class="projects-list__title-area__title" aria-roledescription="title">Projects</h2>
<VButton
label="Create Project +"
width="203px"

2
web/satellite/src/components/team/HeaderArea.vue
View File

@ -4,7 +4,7 @@
<template>
<div class="team-header-container">
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<h1 class="team-header-container__title-area__title" aria-roledescription="title">Project Members</h1>
<VInfo class="team-header-container__title-area__info-button">
<template #icon>
<InfoIcon />

2
web/satellite/src/views/LoginArea.vue
View File

@ -16,7 +16,7 @@
</div>
<div class="login-area__content-area__container">
<div class="login-area__content-area__container__title-area">
<h1 class="login-area__content-area__container__title-area__title">Sign In</h1>
<h1 class="login-area__content-area__container__title-area__title" aria-roledescription="title">Sign In</h1>
<div class="login-area__expand" @click.stop="toggleDropdown">
<span class="login-area__expand__value">{{ satelliteName }}</span>

12
web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap
View File

@ -4,7 +4,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 1`] =
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area extended">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__cancel">
<p class="payment-methods-area__functional-area__button-area__cancel__text">Cancel</p>
@ -80,7 +80,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 2`] =
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px;"><span class="label">Add STORJ</span></div>
@ -120,7 +120,7 @@ exports[`PaymentMethods renders correctly after add card and cancel click 1`] =
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area reduced">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__cancel">
<p class="payment-methods-area__functional-area__button-area__cancel__text">Cancel</p>
@ -150,7 +150,7 @@ exports[`PaymentMethods renders correctly after add card and cancel click 2`] =
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<vbutton-stub label="Add STORJ" width="123px" height="46px" borderradius="6px" isbluewhite="true" onpress="function () { [native code] }" class="add-storj-button"></vbutton-stub>
@ -176,7 +176,7 @@ exports[`PaymentMethods renders correctly with card 1`] = `
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px;"><span class="label">Add STORJ</span></div>
@ -260,7 +260,7 @@ exports[`PaymentMethods renders correctly without card 1`] = `
<div class="payment-methods-area">
<div class="payment-methods-area__functional-area">
<div class="payment-methods-area__functional-area__top-container">
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px;"><span class="label">Add STORJ</span></div>

2
web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap
View File

@ -4,7 +4,7 @@ exports[`CreateProject.vue renders correctly 1`] = `
<div class="create-project">
<div class="create-project__container">
<div class="create-project__container__image-container"><img src="@/../static/images/project/createProject.png" alt="create project" class="create-project__container__image-container__img"></div>
<h2 class="create-project__container__title">Create a Project</h2>
<h2 aria-roledescription="title" class="create-project__container__title">Create a Project</h2>
<div class="input-container full-input">
<div class="label-container">
<div class="label-container__main">

10
web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
View File

@ -3,7 +3,7 @@
exports[`Team HeaderArea renders correctly 1`] = `
<div class="team-header-container">
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<h1 aria-roledescription="title" class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
</div>
<div class="team-header-container__wrapper">
@ -24,7 +24,7 @@ exports[`Team HeaderArea renders correctly 1`] = `
exports[`Team HeaderArea renders correctly with 1 selected user and delete clicked once 1`] = `
<div class="team-header-container">
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<h1 aria-roledescription="title" class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
</div>
<div class="team-header-container__wrapper">
@ -48,7 +48,7 @@ exports[`Team HeaderArea renders correctly with 1 selected user and delete click
exports[`Team HeaderArea renders correctly with 2 selected users and delete clicked once 1`] = `
<div class="team-header-container">
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<h1 aria-roledescription="title" class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
</div>
<div class="team-header-container__wrapper">
@ -72,7 +72,7 @@ exports[`Team HeaderArea renders correctly with 2 selected users and delete clic
exports[`Team HeaderArea renders correctly with opened Add team member popup 1`] = `
<div class="team-header-container">
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<h1 aria-roledescription="title" class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
</div>
<div class="team-header-container__wrapper">
@ -93,7 +93,7 @@ exports[`Team HeaderArea renders correctly with opened Add team member popup 1`]
exports[`Team HeaderArea renders correctly with selected users 1`] = `
<div class="team-header-container">
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<h1 aria-roledescription="title" class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
</div>
<div class="team-header-container__wrapper">