From 0c41f815e614bb09720a13904abbda370992dbfb Mon Sep 17 00:00:00 2001 From: HJetpoluru Date: Thu, 8 Feb 2024 15:39:03 -0500 Subject: [PATCH 1/6] Added links validation --- .../about-metamask/ui-validation.spec.ts | 76 ++++++++++++++++++- 1 file changed, 73 insertions(+), 3 deletions(-) diff --git a/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts b/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts index 47bfc3ea0df3..5117d5e566b3 100644 --- a/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts +++ b/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts @@ -22,6 +22,10 @@ const selectors = { titleText: { text: 'About', tag: 'h4' }, closeButton: '.mm-box button[aria-label="Close"]', walletOverview: '.wallet-overview__balance', + privacyPolicy: { text: 'Privacy Policy', tag: 'h1' }, + termsOfUse: { text: 'Terms of Use', tag: 'h1' }, + attributions: { text: 'Attributions', tag: 'h1' }, + website: { text: 'Get started with MetaMask Portfolio', tag: 'div' }, }; async function switchToAboutView(driver: Driver) { @@ -30,8 +34,33 @@ async function switchToAboutView(driver: Driver) { await driver.clickElement(selectors.aboutDiv); } +const validateLink = async ( + driver: Driver, + linkText: string, + title: string, + expectedUrl: string, + expectedHeading: any, +) => { + // Click on the link + await driver.clickElement({ text: linkText, tag: 'a' }); + + // Switch to the new window + await driver.switchToWindowWithTitle(title); + + // Validate the URL + assert.equal(await driver.getCurrentUrl(), expectedUrl); + + // Validate the heading + const isHeadingPresent = await driver.isElementPresent(expectedHeading); + assert.equal( + isHeadingPresent, + true, + `${linkText} heading is not present in the page`, + ); +}; + describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { - it('validate the view', async function () { + it('validate the view and links', async function () { await withFixtures( { fixtures: new FixtureBuilder().build(), @@ -44,7 +73,48 @@ describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { // navigate to settings and click on about view await switchToAboutView(driver); - // Validating the heading text + // Validate 'Privacy Policy' link + await validateLink( + driver, + 'Privacy policy', + 'Privacy Policy | Consensys', + 'https://consensys.io/privacy-policy', + selectors.privacyPolicy, + ); + + await driver.switchToWindowWithTitle('MetaMask'); + // Validate 'Terms of Use' link + await validateLink( + driver, + 'Terms of use', + 'Terms of use | Consensys', + 'https://consensys.io/terms-of-use', + selectors.termsOfUse, + ); + + await driver.switchToWindowWithTitle('MetaMask'); + // Validate 'Attributions' link + await validateLink( + driver, + 'Attributions', + 'Attributions | MetaMask', + 'https://metamask.io/attributions/', + selectors.attributions, + ); + + await driver.switchToWindowWithTitle('MetaMask'); + // Validate 'Visit our website' link + await validateLink( + driver, + 'Visit our website', + 'The Ultimate Crypto Wallet for DeFi, Web3 Apps, and NFTs | MetaMask', + 'https://metamask.io/', + selectors.website, + ); + + await driver.switchToWindowWithTitle('MetaMask'); + + // Validating the title const isTitlePresent = await driver.isElementPresent( selectors.titleText, ); @@ -64,7 +134,7 @@ describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { 'Meta Mask label is not present in the about view section', ); - // verify the version number in the about view section to the fixture builder version as 11.7.3 + // verify the version number of the MetaMask const metaMaskVersion = await driver.findElement( selectors.metaMaskVersion, ); From f1b0308c1a178f5bf83a74f06746d5b84b75af38 Mon Sep 17 00:00:00 2001 From: HJetpoluru Date: Fri, 9 Feb 2024 23:11:58 -0500 Subject: [PATCH 2/6] Updated the test to validate the link and not to click --- .../about-metamask/ui-validation.spec.ts | 132 ++++++++++-------- .../about-metamask/ui-validation.csv | 10 +- 2 files changed, 80 insertions(+), 62 deletions(-) diff --git a/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts b/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts index 5117d5e566b3..fc9c7069a9de 100644 --- a/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts +++ b/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts @@ -22,43 +22,42 @@ const selectors = { titleText: { text: 'About', tag: 'h4' }, closeButton: '.mm-box button[aria-label="Close"]', walletOverview: '.wallet-overview__balance', - privacyPolicy: { text: 'Privacy Policy', tag: 'h1' }, - termsOfUse: { text: 'Terms of Use', tag: 'h1' }, - attributions: { text: 'Attributions', tag: 'h1' }, - website: { text: 'Get started with MetaMask Portfolio', tag: 'div' }, }; +const exceptedUrl = { + privacyPolicy: 'https://metamask.io/privacy.html', + termsOfUse: 'https://metamask.io/terms.html', + attributions: 'https://metamask.io/attributions.html', + supportCenter: 'https://support.metamask.io', + website: 'https://metamask.io/', + contactUS: 'https://metamask.zendesk.com/hc/en-us', +}; + +const linkTexts = { + privacyPolicy: 'Privacy policy', + termsOfUse: 'Terms of use', + attributions: 'Attributions', + supportCenter: 'Support Center', + website: 'Visit our website', + contactUS: 'Contact us', +}; + +// This function is to click on the three dots and select the "Settings" option from the dropdown menu. +// Then, click on the "About" section from the left panel. async function switchToAboutView(driver: Driver) { await driver.clickElement(selectors.accountOptionsMenuButton); await driver.clickElement(selectors.settingsDiv); await driver.clickElement(selectors.aboutDiv); } -const validateLink = async ( - driver: Driver, - linkText: string, - title: string, - expectedUrl: string, - expectedHeading: any, -) => { - // Click on the link - await driver.clickElement({ text: linkText, tag: 'a' }); - - // Switch to the new window - await driver.switchToWindowWithTitle(title); - - // Validate the URL - assert.equal(await driver.getCurrentUrl(), expectedUrl); - - // Validate the heading - const isHeadingPresent = await driver.isElementPresent(expectedHeading); - assert.equal( - isHeadingPresent, - true, - `${linkText} heading is not present in the page`, - ); +// Get the href value of the link +const getHrefValue = async (driver: Driver, linkText: string) => { + const getHref = await driver.findElement({ text: linkText, tag: 'a' }); + return await getHref.getAttribute('href'); }; +// Test case to validate the view and links in the "About" - MetaMask. +// This test is critical because it's the only way to access privacy policy and other important links. describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { it('validate the view and links', async function () { await withFixtures( @@ -74,45 +73,58 @@ describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { await switchToAboutView(driver); // Validate 'Privacy Policy' link - await validateLink( - driver, - 'Privacy policy', - 'Privacy Policy | Consensys', - 'https://consensys.io/privacy-policy', - selectors.privacyPolicy, - ); + getHrefValue(driver, linkTexts.privacyPolicy).then((actualUrlValue) => { + assert.strictEqual( + actualUrlValue, + exceptedUrl.privacyPolicy, + 'URLs are not equal', + ); + }); - await driver.switchToWindowWithTitle('MetaMask'); // Validate 'Terms of Use' link - await validateLink( - driver, - 'Terms of use', - 'Terms of use | Consensys', - 'https://consensys.io/terms-of-use', - selectors.termsOfUse, - ); + getHrefValue(driver, linkTexts.termsOfUse).then((actualUrlValue) => { + assert.strictEqual( + actualUrlValue, + exceptedUrl.termsOfUse, + 'URLs are not equal', + ); + }); - await driver.switchToWindowWithTitle('MetaMask'); // Validate 'Attributions' link - await validateLink( - driver, - 'Attributions', - 'Attributions | MetaMask', - 'https://metamask.io/attributions/', - selectors.attributions, - ); + getHrefValue(driver, linkTexts.attributions).then((actualUrlValue) => { + assert.strictEqual( + actualUrlValue, + exceptedUrl.attributions, + 'URLs are not equal', + ); + }); + + // Validate 'Support Center' link + getHrefValue(driver, linkTexts.supportCenter).then((actualUrlValue) => { + assert.strictEqual( + actualUrlValue, + exceptedUrl.supportCenter, + 'URLs are not equal', + ); + }); - await driver.switchToWindowWithTitle('MetaMask'); // Validate 'Visit our website' link - await validateLink( - driver, - 'Visit our website', - 'The Ultimate Crypto Wallet for DeFi, Web3 Apps, and NFTs | MetaMask', - 'https://metamask.io/', - selectors.website, - ); - - await driver.switchToWindowWithTitle('MetaMask'); + getHrefValue(driver, linkTexts.website).then((actualUrlValue) => { + assert.strictEqual( + actualUrlValue, + exceptedUrl.website, + 'URLs are not equal', + ); + }); + + // Validate 'Contact us' link + getHrefValue(driver, linkTexts.contactUS).then((actualUrlValue) => { + assert.strictEqual( + actualUrlValue, + exceptedUrl.contactUS, + 'URLs are not equal', + ); + }); // Validating the title const isTitlePresent = await driver.isElementPresent( diff --git a/test/scenarios/17. settings/about-metamask/ui-validation.csv b/test/scenarios/17. settings/about-metamask/ui-validation.csv index e8520db6635f..01a4e31515a2 100644 --- a/test/scenarios/17. settings/about-metamask/ui-validation.csv +++ b/test/scenarios/17. settings/about-metamask/ui-validation.csv @@ -1,4 +1,4 @@ -Validate UI components of the About - MetaMask,,,, +Critical Test - Validate UI components of the About - MetaMask,,,, Step,Test Steps,Test Data,Expected Result,Notes 1,Open the extension.,,The Welcome Back screen is shown, 2,Proceed to Unlock the wallet.,password (8 characters min),, @@ -7,4 +7,10 @@ Step,Test Steps,Test Data,Expected Result,Notes 5,Validate the heading in the section,,'About' text needs to appear., 6,Validate the version in the section,,'MetaMask Version' label should appear with the appriorate version, 7,Validate the tag line in the section,,'MetaMask is designed and built around the world.' tagline should appear, -8,Click on the close button,,Validate the wallet overview page appears., \ No newline at end of file +8,Click on the close button,,Validate the wallet overview page appears., +9,Click on the link for the 'Privacy policy',,Privacy policy 'https://consensys.io/privacy-policy' page is loaded,Critical because it's the only way to access privacy policy +10,Click on the link for the 'Terms of use',,Terms of use page 'https://consensys.io/terms-of-use' is loaded, +11,Click on the link for the 'Visit our support center',,Support page 'https://support.metamask.io/hc/en-us' is loaded, +12,Click on the link for the 'Attributions',,Attributions 'https://metamask.io/attributions/' page is loaded, +13,Click on the link for the 'Visit our website',,Visit our website 'https://metamask.io/' page is loaded, +14,Click on the link for the 'Contact us',,Contact us 'https://support.metamask.io/hc/en-us' code page is loaded, \ No newline at end of file From 868bc9e65fb0ff4f5af52bbc8729b88ae3642b85 Mon Sep 17 00:00:00 2001 From: HJetpoluru Date: Tue, 20 Feb 2024 17:33:14 -0500 Subject: [PATCH 3/6] Added unit test --- test/env.js | 1 + ui/pages/settings/info-tab/info-tab.test.tsx | 45 ++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 ui/pages/settings/info-tab/info-tab.test.tsx diff --git a/test/env.js b/test/env.js index dd3c370b88da..240a7f55b25e 100644 --- a/test/env.js +++ b/test/env.js @@ -1,4 +1,5 @@ process.env.METAMASK_ENVIRONMENT = 'test'; process.env.SUPPORT_LINK = 'https://support.metamask.io'; +process.env.SUPPORT_REQUEST_LINK = 'https://metamask.zendesk.com/hc/en-us'; process.env.IFRAME_EXECUTION_ENVIRONMENT_URL = 'https://execution.metamask.io/0.36.1-flask.1/index.html'; diff --git a/ui/pages/settings/info-tab/info-tab.test.tsx b/ui/pages/settings/info-tab/info-tab.test.tsx new file mode 100644 index 000000000000..80bd4dbe9414 --- /dev/null +++ b/ui/pages/settings/info-tab/info-tab.test.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { renderWithProvider } from '../../../../test/jest/rendering'; +import InfoTab from '.'; + +describe('InfoTab', () => { + describe('validate links', () => { + let getByText: (text: string) => HTMLElement; + + beforeEach(() => { + const renderResult = renderWithProvider(); + getByText = renderResult.getByText; + }); + + it('should have correct href for "Privacy Policy" link', () => { + const privacyPolicyLink = getByText('Privacy policy'); + expect(privacyPolicyLink).toHaveAttribute('href', 'https://metamask.io/privacy.html'); + }); + + it('should have correct href for "Terms of Use" link', () => { + const termsOfUseLink = getByText('Terms of use'); + expect(termsOfUseLink).toHaveAttribute('href', 'https://metamask.io/terms.html'); + }); + + it('should have correct href for "Attributions" link', () => { + const attributionsLink = getByText('Attributions'); + expect(attributionsLink).toHaveAttribute('href', 'https://metamask.io/attributions.html'); + }); + + it('should have correct href for "Support" link', () => { + const supportLink = getByText('Visit our support center'); + expect(supportLink).toHaveAttribute('href', 'https://support.metamask.io'); + }); + + it('should have correct href for "Visit our website" link', () => { + const websiteLink = getByText('Visit our website'); + expect(websiteLink).toHaveAttribute('href', 'https://metamask.io/'); + }); + + it('should have correct href for "Contact us" link', () => { + const contactUsLink = getByText('Contact us'); + console.log(contactUsLink); + expect(contactUsLink).toHaveAttribute('href', 'https://metamask.zendesk.com/hc/en-us'); + }); + }); +}); From c755045ba384b003fb5f1a5154700acf546618d9 Mon Sep 17 00:00:00 2001 From: HJetpoluru Date: Tue, 20 Feb 2024 22:09:54 -0500 Subject: [PATCH 4/6] Removed console log --- ui/pages/settings/info-tab/info-tab.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/pages/settings/info-tab/info-tab.test.tsx b/ui/pages/settings/info-tab/info-tab.test.tsx index 80bd4dbe9414..a47d1ad34cb3 100644 --- a/ui/pages/settings/info-tab/info-tab.test.tsx +++ b/ui/pages/settings/info-tab/info-tab.test.tsx @@ -38,7 +38,6 @@ describe('InfoTab', () => { it('should have correct href for "Contact us" link', () => { const contactUsLink = getByText('Contact us'); - console.log(contactUsLink); expect(contactUsLink).toHaveAttribute('href', 'https://metamask.zendesk.com/hc/en-us'); }); }); From c54b9fd7f11880f1889e2558cb3290af84d99483 Mon Sep 17 00:00:00 2001 From: HJetpoluru Date: Wed, 21 Feb 2024 07:55:13 -0500 Subject: [PATCH 5/6] Removed e2e validation for links --- .../about-metamask/ui-validation.spec.ts | 83 +------------------ 1 file changed, 2 insertions(+), 81 deletions(-) diff --git a/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts b/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts index fc9c7069a9de..222f1ed02b0a 100644 --- a/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts +++ b/test/e2e/tests/settings/about-metamask/ui-validation.spec.ts @@ -24,24 +24,6 @@ const selectors = { walletOverview: '.wallet-overview__balance', }; -const exceptedUrl = { - privacyPolicy: 'https://metamask.io/privacy.html', - termsOfUse: 'https://metamask.io/terms.html', - attributions: 'https://metamask.io/attributions.html', - supportCenter: 'https://support.metamask.io', - website: 'https://metamask.io/', - contactUS: 'https://metamask.zendesk.com/hc/en-us', -}; - -const linkTexts = { - privacyPolicy: 'Privacy policy', - termsOfUse: 'Terms of use', - attributions: 'Attributions', - supportCenter: 'Support Center', - website: 'Visit our website', - contactUS: 'Contact us', -}; - // This function is to click on the three dots and select the "Settings" option from the dropdown menu. // Then, click on the "About" section from the left panel. async function switchToAboutView(driver: Driver) { @@ -50,16 +32,9 @@ async function switchToAboutView(driver: Driver) { await driver.clickElement(selectors.aboutDiv); } -// Get the href value of the link -const getHrefValue = async (driver: Driver, linkText: string) => { - const getHref = await driver.findElement({ text: linkText, tag: 'a' }); - return await getHref.getAttribute('href'); -}; - -// Test case to validate the view and links in the "About" - MetaMask. -// This test is critical because it's the only way to access privacy policy and other important links. +// Test case to validate the view in the "About" - MetaMask. describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { - it('validate the view and links', async function () { + it('validate the view', async function () { await withFixtures( { fixtures: new FixtureBuilder().build(), @@ -72,60 +47,6 @@ describe('Setting - About MetaMask : @no-mmi', function (this: Suite) { // navigate to settings and click on about view await switchToAboutView(driver); - // Validate 'Privacy Policy' link - getHrefValue(driver, linkTexts.privacyPolicy).then((actualUrlValue) => { - assert.strictEqual( - actualUrlValue, - exceptedUrl.privacyPolicy, - 'URLs are not equal', - ); - }); - - // Validate 'Terms of Use' link - getHrefValue(driver, linkTexts.termsOfUse).then((actualUrlValue) => { - assert.strictEqual( - actualUrlValue, - exceptedUrl.termsOfUse, - 'URLs are not equal', - ); - }); - - // Validate 'Attributions' link - getHrefValue(driver, linkTexts.attributions).then((actualUrlValue) => { - assert.strictEqual( - actualUrlValue, - exceptedUrl.attributions, - 'URLs are not equal', - ); - }); - - // Validate 'Support Center' link - getHrefValue(driver, linkTexts.supportCenter).then((actualUrlValue) => { - assert.strictEqual( - actualUrlValue, - exceptedUrl.supportCenter, - 'URLs are not equal', - ); - }); - - // Validate 'Visit our website' link - getHrefValue(driver, linkTexts.website).then((actualUrlValue) => { - assert.strictEqual( - actualUrlValue, - exceptedUrl.website, - 'URLs are not equal', - ); - }); - - // Validate 'Contact us' link - getHrefValue(driver, linkTexts.contactUS).then((actualUrlValue) => { - assert.strictEqual( - actualUrlValue, - exceptedUrl.contactUS, - 'URLs are not equal', - ); - }); - // Validating the title const isTitlePresent = await driver.isElementPresent( selectors.titleText, From 0a73d83687781ed0839427d718ecf1c7aa10764c Mon Sep 17 00:00:00 2001 From: HJetpoluru Date: Fri, 23 Feb 2024 12:30:00 -0500 Subject: [PATCH 6/6] Fixed my lint and some other files --- .../transaction-already-confirmed.test.tsx | 6 ++-- ui/hooks/useModalProps.test.ts | 2 +- ui/pages/settings/info-tab/info-tab.test.tsx | 33 ++++++++++++++----- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/ui/components/app/modals/transaction-already-confirmed/transaction-already-confirmed.test.tsx b/ui/components/app/modals/transaction-already-confirmed/transaction-already-confirmed.test.tsx index c48129e0549f..7c04a452fbc2 100644 --- a/ui/components/app/modals/transaction-already-confirmed/transaction-already-confirmed.test.tsx +++ b/ui/components/app/modals/transaction-already-confirmed/transaction-already-confirmed.test.tsx @@ -2,9 +2,7 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; import mockStore from '../../../../../test/data/mock-state.json'; -import { - renderWithProvider, -} from '../../../../../test/jest'; +import { renderWithProvider } from '../../../../../test/jest'; import TransactionAlreadyConfirmed from '.'; const getStoreWithModalData = () => { @@ -26,7 +24,7 @@ const getStoreWithModalData = () => { describe('Transaction Already Confirmed modal', () => { it('should match snapshot', async () => { const { baseElement } = renderWithProvider( - , + , getStoreWithModalData(), ); expect(baseElement).toMatchSnapshot(); diff --git a/ui/hooks/useModalProps.test.ts b/ui/hooks/useModalProps.test.ts index d4ba2beace1c..4ba8ca2bd697 100644 --- a/ui/hooks/useModalProps.test.ts +++ b/ui/hooks/useModalProps.test.ts @@ -29,4 +29,4 @@ describe('useModalProps', () => { expect(props).toStrictEqual(MOCK_PROPS); expect(hideModal).toStrictEqual(expect.any(Function)); }); -}); \ No newline at end of file +}); diff --git a/ui/pages/settings/info-tab/info-tab.test.tsx b/ui/pages/settings/info-tab/info-tab.test.tsx index a47d1ad34cb3..30bcc9493726 100644 --- a/ui/pages/settings/info-tab/info-tab.test.tsx +++ b/ui/pages/settings/info-tab/info-tab.test.tsx @@ -13,32 +13,47 @@ describe('InfoTab', () => { it('should have correct href for "Privacy Policy" link', () => { const privacyPolicyLink = getByText('Privacy policy'); - expect(privacyPolicyLink).toHaveAttribute('href', 'https://metamask.io/privacy.html'); + expect(privacyPolicyLink).toHaveAttribute( + 'href', + 'https://metamask.io/privacy.html', + ); }); it('should have correct href for "Terms of Use" link', () => { const termsOfUseLink = getByText('Terms of use'); - expect(termsOfUseLink).toHaveAttribute('href', 'https://metamask.io/terms.html'); + expect(termsOfUseLink).toHaveAttribute( + 'href', + 'https://metamask.io/terms.html', + ); }); it('should have correct href for "Attributions" link', () => { - const attributionsLink = getByText('Attributions'); - expect(attributionsLink).toHaveAttribute('href', 'https://metamask.io/attributions.html'); + const attributionsLink = getByText('Attributions'); + expect(attributionsLink).toHaveAttribute( + 'href', + 'https://metamask.io/attributions.html', + ); }); it('should have correct href for "Support" link', () => { const supportLink = getByText('Visit our support center'); - expect(supportLink).toHaveAttribute('href', 'https://support.metamask.io'); + expect(supportLink).toHaveAttribute( + 'href', + 'https://support.metamask.io', + ); }); it('should have correct href for "Visit our website" link', () => { - const websiteLink = getByText('Visit our website'); - expect(websiteLink).toHaveAttribute('href', 'https://metamask.io/'); + const websiteLink = getByText('Visit our website'); + expect(websiteLink).toHaveAttribute('href', 'https://metamask.io/'); }); it('should have correct href for "Contact us" link', () => { - const contactUsLink = getByText('Contact us'); - expect(contactUsLink).toHaveAttribute('href', 'https://metamask.zendesk.com/hc/en-us'); + const contactUsLink = getByText('Contact us'); + expect(contactUsLink).toHaveAttribute( + 'href', + 'https://metamask.zendesk.com/hc/en-us', + ); }); }); });