m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating network list item hover (#20063)

Browse Source 
* Updating network list item hover

* Updating e2e test

* Updating e2e test

* Updating e2e test

* Updating more e2e tests

* Updating more e2e tests
This commit is contained in:
George Marshall 2023-07-19 10:12:24 -07:00 committed by GitHub
parent 61e88f4bdf
commit b4bc033b72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/tests/add-custom-network.spec.js
View File

@ -363,7 +363,7 @@ describe('Custom network', function () {
const arbitrumNetwork = await driver.findElements({ const arbitrumNetwork = await driver.findElements({
text: 'Arbitrum One', text: 'Arbitrum One',
tag: 'span', tag: 'button',
}); });
assert.ok(arbitrumNetwork.length, 1); assert.ok(arbitrumNetwork.length, 1);
}, },

2
test/e2e/tests/chain-interactions.spec.js
View File

@ -63,7 +63,7 @@ describe('Chain Interactions', function () {
await driver.clickElement('[data-testid="network-display"]'); await driver.clickElement('[data-testid="network-display"]');
const ganacheChain = await driver.findElements({ const ganacheChain = await driver.findElements({
text: `Localhost ${port}`, text: `Localhost ${port}`,
tag: 'span', tag: 'button',
}); });
assert.ok(ganacheChain.length, 1); assert.ok(ganacheChain.length, 1);
}, },

4
test/e2e/tests/custom-rpc-history.spec.js
View File

@ -185,7 +185,7 @@ describe('Stores custom RPC history', function () {
await driver.waitForElementNotPresent('.loading-overlay'); await driver.waitForElementNotPresent('.loading-overlay');
await driver.clickElement('[data-testid="network-display"]'); await driver.clickElement('[data-testid="network-display"]');
await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' }); await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'button' });
}, },
); );
}); });
@ -237,7 +237,7 @@ describe('Stores custom RPC history', function () {
}); });
// click Mainnet to dismiss network dropdown // click Mainnet to dismiss network dropdown
await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' }); await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'button' });
assert.equal(customRpcs.length, 2); assert.equal(customRpcs.length, 2);
}, },

2
test/e2e/tests/import-flow.spec.js
View File

@ -79,7 +79,7 @@ describe('Import flow', function () {
await driver.delay(largeDelayMs); await driver.delay(largeDelayMs);
await driver.clickElement('[data-testid="network-display"]'); await driver.clickElement('[data-testid="network-display"]');
await driver.clickElement('.toggle-button'); await driver.clickElement('.toggle-button');
await driver.clickElement({ text: 'Localhost', tag: 'span' }); await driver.clickElement({ text: 'Localhost', tag: 'button' });
// choose Create account from the account menu // choose Create account from the account menu
await driver.clickElement('[data-testid="account-menu-icon"]'); await driver.clickElement('[data-testid="account-menu-icon"]');

2
test/e2e/tests/provider-api.spec.js
View File

@ -47,7 +47,7 @@ describe('MetaMask', function () {
await driver.switchToWindow(windowHandles[0]); await driver.switchToWindow(windowHandles[0]);
await driver.clickElement('[data-testid="network-display"]'); await driver.clickElement('[data-testid="network-display"]');
await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' }); await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'button' });
await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles); await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
const switchedNetworkDiv = await driver.waitForSelector({ const switchedNetworkDiv = await driver.waitForSelector({

8
ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
View File

@ -18,13 +18,9 @@ exports[`NetworkListItem renders properly 1`] = `
class="mm-box multichain-network-list-item__network-name" class="mm-box multichain-network-list-item__network-name"
> >
<button <button
class="mm-box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent" class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
> >
<span Polygon
class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
Polygon
</span>
</button> </button>
</div> </div>
<button <button

12
ui/components/multichain/network-list-item/network-list-item.js
View File

@ -16,7 +16,7 @@ import {
import { import {
AvatarNetwork, AvatarNetwork,
ButtonIcon, ButtonIcon,
ButtonLink, Text,
IconName, IconName,
Box, Box,
} from '../../component-library'; } from '../../component-library';
@ -55,7 +55,7 @@ export const NetworkListItem = ({
useEffect(() => { useEffect(() => {
if (networkRef.current && selected) { if (networkRef.current && selected) {
networkRef.current.querySelector('.mm-button-link').focus(); networkRef.current.focus();
} }
}, [networkRef, selected]); }, [networkRef, selected]);
@ -72,7 +72,6 @@ export const NetworkListItem = ({
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween} justifyContent={JustifyContent.spaceBetween}
width={BlockSize.Full} width={BlockSize.Full}
ref={networkRef}
> >
{selected && ( {selected && (
<Box <Box
@ -87,12 +86,15 @@ export const NetworkListItem = ({
src={iconSrc} src={iconSrc}
/> />
<Box className="multichain-network-list-item__network-name"> <Box className="multichain-network-list-item__network-name">
<ButtonLink <Text
ref={networkRef}
as="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onClick(); onClick();
}} }}
color={TextColor.textDefault} color={TextColor.textDefault}
backgroundColor={BackgroundColor.transparent}
ellipsis ellipsis
> >
{name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? ( {name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
@ -106,7 +108,7 @@ export const NetworkListItem = ({
) : ( ) : (
name name
)} )}
</ButtonLink> </Text>
</Box> </Box>
{onDeleteClick ? ( {onDeleteClick ? (
<ButtonIcon <ButtonIcon