Skip to content

Commit

Permalink
Add e2e test to naming account feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@buberdds
buberdds committed Oct 13, 2023
1 parent 9bdbf6b commit 42a99f1
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 98 deletions.
15 changes: 15 additions & 0 deletions playwright/tests/toolbar.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,18 @@ test.describe('Profile tab', () => {
await expect(page.getByText('Loading', { exact: true })).toBeHidden()
})
})

test.describe('My Accounts tab', () => {
test('should set custom name', async ({ page }) => {
await page.goto('/open-wallet/private-key')
await fillPrivateKeyAndPassword(page)
await page.getByTestId('account-selector').click()
await page.getByText('Manage').click()
await page.getByPlaceholder('Name (Optional)').fill('My Custom Name')
await page.keyboard.press('Enter')
await page.getByTestId('close-settings-modal').click()
await expect(page.getByTestId('close-settings-modal')).not.toBeVisible()
await expect(page.getByText('My Custom Name')).toBeVisible()
await expect(page.getByText('oasis1 qz0k 5q8v jqvu 4s4n wxyj 406y lnfl kc4v rcjg huwk')).not.toBeVisible()
})
})
193 changes: 109 additions & 84 deletions src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,12 @@ exports[`<AddressBox /> should render address properly 1`] = `
max-width: 100%;
min-width: 0;
min-height: 0;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
.c5 {
Expand Down Expand Up @@ -232,7 +232,7 @@ exports[`<AddressBox /> should render address properly 1`] = `
`;

exports[`<EditableNameBox /> should render name properly 1`] = `
.c5 {
.c6 {
display: inline-block;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
Expand All @@ -243,28 +243,28 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
stroke: link;
}
.c5 g {
.c6 g {
fill: inherit;
stroke: inherit;
}
.c5 *:not([stroke])[fill='none'] {
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c5 *[stroke*='#'],.c5 *[STROKE*='#'] {
.c6 *[stroke*='#'],.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c5 *[fill-rule],
.c5 *[FILL-RULE],
.c5 *[fill*='#'],.c5 *[FILL*='#'] {
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c10 {
.c11 {
display: inline-block;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
Expand All @@ -275,23 +275,23 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
stroke: currentColor;
}
.c10 g {
.c11 g {
fill: inherit;
stroke: inherit;
}
.c10 *:not([stroke])[fill='none'] {
.c11 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c10 *[stroke*='#'],.c10 *[STROKE*='#'] {
.c11 *[stroke*='#'],.c11 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c10 *[fill-rule],
.c10 *[FILL-RULE],
.c10 *[fill*='#'],.c10 *[FILL*='#'] {
.c11 *[fill-rule],
.c11 *[FILL-RULE],
.c11 *[fill*='#'],.c11 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
Expand Down Expand Up @@ -342,6 +342,23 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -353,12 +370,10 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding-left: 12px;
}
.c8 {
.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -380,7 +395,7 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
justify-content: center;
}
.c9 {
.c10 {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
Expand All @@ -390,14 +405,14 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
width: 12px;
}
.c3 {
.c4 {
font-size: 18px;
line-height: 24px;
font-weight: bold;
word-break: break-word;
}
.c4 {
.c5 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
Expand All @@ -417,44 +432,44 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
padding: 12px;
}
.c4:focus {
.c5:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus > circle,
.c4:focus > ellipse,
.c4:focus > line,
.c4:focus > path,
.c4:focus > polygon,
.c4:focus > polyline,
.c4:focus > rect {
.c5:focus > circle,
.c5:focus > ellipse,
.c5:focus > line,
.c5:focus > path,
.c5:focus > polygon,
.c5:focus > polyline,
.c5:focus > rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus::-moz-focus-inner {
.c5:focus::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
.c5:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) > circle,.c4:focus:not(:focus-visible) > ellipse,
.c4:focus:not(:focus-visible) > line,.c4:focus:not(:focus-visible) > path,
.c4:focus:not(:focus-visible) > polygon,.c4:focus:not(:focus-visible) > polyline,
.c4:focus:not(:focus-visible) > rect {
.c5:focus:not(:focus-visible) > circle,.c5:focus:not(:focus-visible) > ellipse,
.c5:focus:not(:focus-visible) > line,.c5:focus:not(:focus-visible) > path,
.c5:focus:not(:focus-visible) > polygon,.c5:focus:not(:focus-visible) > polyline,
.c5:focus:not(:focus-visible) > rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible)::-moz-focus-inner {
.c5:focus:not(:focus-visible)::-moz-focus-inner {
border: 0;
}
.c6 {
.c7 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
Expand All @@ -479,48 +494,48 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
transition-timing-function: ease-in-out;
}
.c6:hover {
.c7:hover {
box-shadow: 0px 0px 0px 2px #7D4CDB;
}
.c6:focus {
.c7:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c6:focus > circle,
.c6:focus > ellipse,
.c6:focus > line,
.c6:focus > path,
.c6:focus > polygon,
.c6:focus > polyline,
.c6:focus > rect {
.c7:focus > circle,
.c7:focus > ellipse,
.c7:focus > line,
.c7:focus > path,
.c7:focus > polygon,
.c7:focus > polyline,
.c7:focus > rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c6:focus::-moz-focus-inner {
.c7:focus::-moz-focus-inner {
border: 0;
}
.c6:focus:not(:focus-visible) {
.c7:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) > circle,.c6:focus:not(:focus-visible) > ellipse,
.c6:focus:not(:focus-visible) > line,.c6:focus:not(:focus-visible) > path,
.c6:focus:not(:focus-visible) > polygon,.c6:focus:not(:focus-visible) > polyline,
.c6:focus:not(:focus-visible) > rect {
.c7:focus:not(:focus-visible) > circle,.c7:focus:not(:focus-visible) > ellipse,
.c7:focus:not(:focus-visible) > line,.c7:focus:not(:focus-visible) > path,
.c7:focus:not(:focus-visible) > polygon,.c7:focus:not(:focus-visible) > polyline,
.c7:focus:not(:focus-visible) > rect {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible)::-moz-focus-inner {
.c7:focus:not(:focus-visible)::-moz-focus-inner {
border: 0;
}
.c7 {
.c8 {
background-color: background-custom-2;
border-width: 1px;
color: text-custom;
Expand Down Expand Up @@ -550,6 +565,12 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
}
}
@media only screen and (max-width:768px) {
.c3 {
padding-left: 6px;
}
}
<div>
<div
class="c0"
Expand All @@ -560,47 +581,51 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
<div
class="c2"
>
<span
<div
class="c3"
style="display: inline-flex; align-items: center; justify-content: space-between; flex: 1;"
>
My Wallet
</span>
<button
class="c4"
type="button"
>
<svg
aria-label="Edit"
<span
class="c4"
style="display: inline-flex; align-items: center; justify-content: space-between; flex: 1;"
>
My Wallet
</span>
<button
class="c5"
data-testid="editable-name-edit-button"
viewBox="0 0 24 24"
type="button"
>
<path
d="m14 4 6 6-6-6zm8.294 1.294c.39.39.387 1.025-.008 1.42L9 20l-7 2 2-7L17.286 1.714a1 1 0 0 1 1.42-.008l3.588 3.588zM3 19l2 2m2-4 8-8"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
<svg
aria-label="Edit"
class="c6"
data-testid="editable-name-edit-button"
viewBox="0 0 24 24"
>
<path
d="m14 4 6 6-6-6zm8.294 1.294c.39.39.387 1.025-.008 1.42L9 20l-7 2 2-7L17.286 1.714a1 1 0 0 1 1.42-.008l3.588 3.588zM3 19l2 2m2-4 8-8"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</div>
</div>
</div>
<button
class="c6 c7"
class="c7 c8"
data-testid="copy-address-button"
type="button"
>
<div
class="c8"
class="c9"
>
oasis1qq...7ftqph
<div
class="c9"
class="c10"
/>
<svg
aria-label="Copy"
class="c10"
class="c11"
viewBox="0 0 24 24"
>
<path
Expand Down
Loading

0 comments on commit 42a99f1

Please sign in to comment.