test(token): validations added for vega wallet widget (#885)
* test(token): validations added for vega wallet widget * test: add missing vega wallet import * test: add validation for url value Co-authored-by: Rado <rado@vegaprotocol.io>
This commit is contained in:
Radosław Szpiech
GitHub
parent
e3dd73531c
commit
f1c3eab914
287
apps/token-e2e/src/integration/view/wallet-vega.cy.js
Normal file
287
apps/token-e2e/src/integration/view/wallet-vega.cy.js
Normal file
@ -0,0 +1,287 @@
|
||||
const walletContainer = '[data-testid="vega-wallet"]';
|
||||
const walletHeader = '[data-testid="wallet-header"] h1';
|
||||
const connectButton = '[data-testid="connect-vega"]';
|
||||
const getVegaLink = '[data-testid="link"]';
|
||||
const dialog = '[role="dialog"]';
|
||||
const dialogHeader = '[data-testid="dialog-title"]';
|
||||
const connectorsList = '[data-testid="connectors-list"]';
|
||||
const dialogCloseBtn = '[data-testid="dialog-close"]';
|
||||
const restConnectorForm = '[data-testid="rest-connector-form"]';
|
||||
const restUrl = '#url';
|
||||
const restWallet = '#wallet';
|
||||
const restPassphrase = '#passphrase';
|
||||
const restConnectBtn = '[type="submit"]';
|
||||
const accountNo = '[data-testid="vega-account-truncated"]';
|
||||
const walletName = '[data-testid="wallet-name"]';
|
||||
const currencyTitle = '[data-testid="currency-title"]';
|
||||
const currencyValue = '[data-testid="currency-value"]';
|
||||
const vegaUnstaked = '[data-testid="vega-wallet-balance-unstaked"] .text-right';
|
||||
const governanceBtn = '[href="/governance"]';
|
||||
const stakingBtn = '[href="/staking"]';
|
||||
const manageLink = '[data-testid="manage-vega-wallet"]';
|
||||
const dialogWalletName = `[data-testid="key-${Cypress.env(
|
||||
'vegaWalletPublicKey'
|
||||
)}"] h2`;
|
||||
const dialogVegaKey = '[data-testid="vega-public-key-full"]';
|
||||
const dialogDisconnectBtn = '[data-testid="disconnect"]';
|
||||
const copyPublicKeyBtn = '[data-testid="copy-vega-public-key"]';
|
||||
|
||||
context('Vega Wallet - verify elements on widget', function () {
|
||||
before('visit token home page', function () {
|
||||
cy.visit('/');
|
||||
});
|
||||
|
||||
describe('with wallets disconnected', function () {
|
||||
before('wait for widget to load', function () {
|
||||
cy.get(walletContainer, { timeout: 10000 }).should('be.visible');
|
||||
});
|
||||
|
||||
it('should have VEGA WALLET header visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(walletHeader)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Vega Wallet');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Connect Vega button visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(connectButton)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Connect Vega wallet to use associated $VEGA');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Get a Vega wallet link visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(getVegaLink)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Get a Vega wallet')
|
||||
.and('have.attr', 'href', 'https://vega.xyz/wallet');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when connect button clicked', function () {
|
||||
before('click connect vega wallet button', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(connectButton).click();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Connect Vega header visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogHeader)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Connect to your Vega Wallet');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have REST connector visible on list', function () {
|
||||
cy.get(connectorsList).within(() => {
|
||||
cy.get('button').should('be.visible').and('have.text', 'rest provider');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have close button visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogCloseBtn).should('be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when rest connector form opened', function () {
|
||||
before('click rest provider link', function () {
|
||||
cy.get(connectorsList).within(() => {
|
||||
cy.get('button').click();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have url field visible', function () {
|
||||
cy.get(restConnectorForm).within(() => {
|
||||
cy.get(restUrl)
|
||||
.should('be.visible')
|
||||
.and('have.value', 'http://localhost:1789/api/v1');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have wallet field visible', function () {
|
||||
cy.get(restConnectorForm).within(() => {
|
||||
cy.get(restWallet).should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have password field visible', function () {
|
||||
cy.get(restConnectorForm).within(() => {
|
||||
cy.get(restPassphrase).should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have connect button visible', function () {
|
||||
cy.get(restConnectorForm).within(() => {
|
||||
cy.get(restConnectBtn).should('be.visible').and('have.text', 'Connect');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Connect Vega header visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogHeader)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Connect to your Vega Wallet');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have close button visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogCloseBtn).should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
// after('close dialog', function () {
|
||||
// cy.get(dialogCloseBtn).click().should('not.exist');
|
||||
// }); - to be changed when dialog state is fixed - https://github.com/vegaprotocol/frontend-monorepo/issues/838
|
||||
});
|
||||
|
||||
describe('when vega wallet connected', function () {
|
||||
before('connect vega wallet', function () {
|
||||
cy.vega_wallet_import();
|
||||
|
||||
// cy.vega_wallet_connect(); - to be changed when dialog state is fixed - https://github.com/vegaprotocol/frontend-monorepo/issues/838
|
||||
// then code below can be removed
|
||||
cy.get(restConnectorForm).within(() => {
|
||||
cy.get('#wallet').click().type(Cypress.env('vegaWalletName'));
|
||||
cy.get('#passphrase').click().type(Cypress.env('vegaWalletPassphrase'));
|
||||
cy.get('button').contains('Connect').click();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have VEGA WALLET header visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(walletHeader)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Vega Wallet');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have truncated account number visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(accountNo)
|
||||
.should('be.visible')
|
||||
.and('have.text', Cypress.env('vegaWalletPublicKeyShort'));
|
||||
});
|
||||
});
|
||||
|
||||
it('should have wallet name visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(walletName)
|
||||
.should('be.visible')
|
||||
.and('have.text', `${Cypress.env('vegaWalletName')} key 1`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Vega Associated currency title visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(currencyTitle)
|
||||
.should('be.visible')
|
||||
.and('have.text', `VEGAAssociated`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Vega Associated currency value visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(currencyValue)
|
||||
.should('be.visible')
|
||||
.and('have.text', `0.000000000000000000`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Unstaked value visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(vegaUnstaked)
|
||||
.should('be.visible')
|
||||
.and('have.text', `0.000000000000000000`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Governance button visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(governanceBtn)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Governance');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Staking button visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(stakingBtn).should('be.visible').and('have.text', 'Staking');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have Manage link visible', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(manageLink).should('be.visible').and('have.text', 'Manage');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when Manage dialog opened', function () {
|
||||
before('click Manage link', function () {
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(manageLink).click();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have SELECT A VEGA KEY dialog title visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogHeader)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'SELECT A VEGA KEY');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have wallet name visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogWalletName)
|
||||
.should('be.visible')
|
||||
.and('have.text', `${Cypress.env('vegaWalletName')} key 1`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have vega wallet public key visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogVegaKey)
|
||||
.should('be.visible')
|
||||
.and('have.text', `${Cypress.env('vegaWalletPublicKey')}`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have copy public key button visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(copyPublicKeyBtn).should('be.visible').and('have.text', 'Copy');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have close button visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogCloseBtn).should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have vega Disconnect all keys button visible', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogDisconnectBtn)
|
||||
.should('be.visible')
|
||||
.and('have.text', 'Disconnect all keys');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to disconnect all keys', function () {
|
||||
cy.get(dialog).within(() => {
|
||||
cy.get(dialogDisconnectBtn).click();
|
||||
});
|
||||
cy.get(walletContainer).within(() => {
|
||||
cy.get(connectButton).should('be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -43,10 +43,16 @@ export const VegaWallet = () => {
|
||||
<h1 className="col-start-1 m-0">{t('vegaWallet')}</h1>
|
||||
{keypair && (
|
||||
<>
|
||||
<div className="sm:row-start-2 sm:col-start-1 sm:col-span-2 text-h6 mb-12">
|
||||
<div
|
||||
data-testid="wallet-name"
|
||||
className="sm:row-start-2 sm:col-start-1 sm:col-span-2 text-h6 mb-12"
|
||||
>
|
||||
{keypair.name}
|
||||
</div>
|
||||
<span className="sm:col-start-2 place-self-end font-mono pb-2 px-4">
|
||||
<span
|
||||
data-testid="vega-account-truncated"
|
||||
className="sm:col-start-2 place-self-end font-mono pb-2 px-4"
|
||||
>
|
||||
{truncateMiddle(keypair.pub)}
|
||||
</span>
|
||||
</>
|
||||
@ -129,6 +135,7 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
|
||||
const footer = (
|
||||
<WalletCardActions>
|
||||
<Button
|
||||
data-testid="manage-vega-wallet"
|
||||
variant="inline-link"
|
||||
className="mt-4"
|
||||
onClick={() =>
|
||||
|
||||
@ -57,12 +57,23 @@ export const VegaManageDialog = ({
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex justify-between text-ui-small">
|
||||
<p className="font-mono block sm:hidden">
|
||||
<p
|
||||
data-testid="vega-public-key-trunc"
|
||||
className="font-mono block sm:hidden"
|
||||
>
|
||||
{truncateByChars(kp.pub, 23, 23)}
|
||||
</p>
|
||||
<p className="font-mono hidden sm:block">{kp.pub}</p>
|
||||
<p
|
||||
data-testid="vega-public-key-full"
|
||||
className="font-mono hidden sm:block"
|
||||
>
|
||||
{kp.pub}
|
||||
</p>
|
||||
<CopyWithTooltip text={kp.pub}>
|
||||
<button className="underline">
|
||||
<button
|
||||
data-testid="copy-vega-public-key"
|
||||
className="underline"
|
||||
>
|
||||
<Icon name="duplicate" className="mr-4" />
|
||||
{t('Copy')}
|
||||
</button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user