test: Writing new test about metamask section links (#22911)

## **Description**

This PR adds test coverage for About MetaMask section - Links using
TestScript which is critical flow in the extension.

## **Related issues**

Fixes: #22812

## **Manual testing steps**

Run the tests locally checkout to the branch
yarn
yarn start:test
yarn test:e2e:single
test/e2e/tests/settings/about-metamask/ui-validation.spec.ts
--browser=firefox --debug --leave-running
yarn test:e2e:single
test/e2e/tests/settings/about-metamask/ui-validation.spec.ts
--browser=chrome --debug --leave-running

## ** Notes **
This PR specifically addresses the links found in the About section,
which is an essential aspect of the extension. This section provides
users with access to support and privacy-related information, making it
a critical pathway for user engagement and trust.

Initially, my strategy involved validating the functionality by clicking
on the links within this section, which would then open in a new tab in
the web browser, directing to the MetaMask and ConsenSys sites. However,
I encountered a challenge: we needed to include the links in the
privacy-snapshot.json file, along with the corresponding child links
(such as YouTube, Twitter, etc.).

Consequently, the decision was made to avoid clicking on the links
directly. Instead, we opted to validate the href attributes, and this
task was successfully completed as part of the end-to-end (e2e) testing
process. I strongly agree with the feedback provided by @seaona and I
believe that this validation process should indeed be incorporated into
the unit testing due to the effort involved in the validation now.

After dedicating some time to learning, I was able to write the unit
tests and also have the e2e tests for comparative purposes. I also
intend to document this here for future reference on the approach taken.

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/e2e/tests/settings/about-metamask/ui-validation.spec.ts

@@ -24,12 +24,15 @@ const selectors = {
   walletOverview: '.wallet-overview__balance',
 };
 
+// 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);
 }
 
+// Test case to validate the view in the "About" - MetaMask.
 describe('Setting - About MetaMask : @no-mmi', function (this: Suite) {
   it('validate the view', async function () {
     await withFixtures(
@@ -44,7 +47,7 @@ describe('Setting - About MetaMask : @no-mmi', function (this: Suite) {
         // navigate to settings and click on about view
         await switchToAboutView(driver);
 
-        // Validating the heading text
+        // Validating the title
         const isTitlePresent = await driver.isElementPresent(
           selectors.titleText,
         );
@@ -64,7 +67,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,
         );

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';

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.,
+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,

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(
-      <TransactionAlreadyConfirmed  />,
+      <TransactionAlreadyConfirmed />,
       getStoreWithModalData(),
     );
     expect(baseElement).toMatchSnapshot();

ui/hooks/useModalProps.test.ts

@@ -29,4 +29,4 @@ describe('useModalProps', () => {
     expect(props).toStrictEqual(MOCK_PROPS);
     expect(hideModal).toStrictEqual(expect.any(Function));
   });
-});
+});

ui/pages/settings/info-tab/info-tab.test.tsx

@@ -0,0 +1,59 @@
+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(<InfoTab />);
+      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');
+      expect(contactUsLink).toHaveAttribute(
+        'href',
+        'https://metamask.zendesk.com/hc/en-us',
+      );
+    });
+  });
+});