test: update tests with types, include tests in linting (#23136)

#22530 broke eslint
for `*.test.ts` and `*.test.tsx` files. This PR restores eslint
functionality in those files.

In order for eslint to work with typescript files the typescript files
need to have a corresponding `tsconfig.json`. Instead of having a
separate config for our test files I've added the test files to our
existing `tsconfig.json`. Many of the tests didn't pass the type
checker, so I had to update types in the tests to get everything
working.

This PR does not restore eslint for `*.stories.ts(x)` files. I think
that should be in another PR, as there are 40 stories files that don't
pass the type checker.

Author: davidmurdoch

app/scripts/controllers/decrypt-message.test.ts

@@ -1,5 +1,7 @@
-import { DecryptMessageManager } from '@metamask/message-manager';
-import { AbstractMessage } from '@metamask/message-manager/dist/AbstractMessageManager';
+import {
+  DecryptMessageManager,
+  DecryptMessageParams,
+} from '@metamask/message-manager';
 import { MetaMetricsEventCategory } from '../../../shared/constants/metametrics';
 import DecryptMessageController, {
   DecryptMessageControllerMessenger,
@@ -8,15 +10,17 @@ import DecryptMessageController, {
 } from './decrypt-message';
 
 const messageIdMock = '12345';
+const messageDataMock =
+  '0x7b2276657273696f6e223a227832353531392d7873616c736132302d706f6c7931333035222c226e6f6e6365223a226b45586143524c3045646142766f77756e35675979357175784a4a6967304548222c22657068656d5075626c69634b6579223a224863334636506d314734385a567955424763365866537839682b77784b6958587238456a51434253466e553d222c2263697068657274657874223a22546a41556b68554a5968656e7a2f655a6e57454a2b31456c7861354f77765939613830507a62746c7a7a48746934634175525941227d';
 const messageMock = {
   metamaskId: messageIdMock,
   time: 123,
   status: 'unapproved',
   type: 'testType',
   rawSig: undefined,
-} as any as AbstractMessage;
-const messageDataMock =
-  '0x7b2276657273696f6e223a227832353531392d7873616c736132302d706f6c7931333035222c226e6f6e6365223a226b45586143524c3045646142766f77756e35675979357175784a4a6967304548222c22657068656d5075626c69634b6579223a224863334636506d314734385a567955424763365866537839682b77784b6958587238456a51434253466e553d222c2263697068657274657874223a22546a41556b68554a5968656e7a2f655a6e57454a2b31456c7861354f77765939613830507a62746c7a7a48746934634175525941227d';
+  data: messageDataMock,
+  from: '0x0',
+} as DecryptMessageParams & { metamaskId: string };
 
 const mockExtState = {};
 
@@ -56,7 +60,14 @@ const createDecryptMessageManagerMock = <T>() =>
   } as any as jest.Mocked<T>);
 
 describe('DecryptMessageController', () => {
-  let decryptMessageController: DecryptMessageController;
+  class MockDecryptMessageController extends DecryptMessageController {
+    // update is protected, so we expose it for typechecking here
+    public update(callback: Parameters<DecryptMessageController['update']>[0]) {
+      return super.update(callback);
+    }
+  }
+
+  let decryptMessageController: MockDecryptMessageController;
 
   const decryptMessageManagerConstructorMock =
     DecryptMessageManager as jest.MockedClass<typeof DecryptMessageManager>;
@@ -88,7 +99,7 @@ describe('DecryptMessageController', () => {
       decryptMessageManagerMock,
     );
 
-    decryptMessageController = new DecryptMessageController({
+    decryptMessageController = new MockDecryptMessageController({
       getState: getStateMock as any,
       keyringController: keyringControllerMock as any,
       messenger: messengerMock as any,
@@ -118,7 +129,10 @@ describe('DecryptMessageController', () => {
     expect(decryptMessageManagerMock.update).toBeCalledTimes(1);
   });
   it('should add unapproved messages', async () => {
-    await decryptMessageController.newRequestDecryptMessage(messageMock);
+    await decryptMessageController.newRequestDecryptMessage(
+      messageMock,
+      undefined as any,
+    );
 
     expect(decryptMessageManagerMock.addUnapprovedMessageAsync).toBeCalledTimes(
       1,
@@ -206,7 +220,7 @@ describe('DecryptMessageController', () => {
     const messageToDecrypt = {
       ...messageMock,
       data: messageDataMock,
-    };
+    } as any;
     decryptMessageManagerMock.getMessage.mockReturnValue(messageToDecrypt);
     mockMessengerAction(
       'KeyringController:decryptMessage',
@@ -238,7 +252,9 @@ describe('DecryptMessageController', () => {
   });
 
   it('should be able to cancel decrypt message', async () => {
-    decryptMessageManagerMock.rejectMessage.mockResolvedValue(messageMock);
+    decryptMessageManagerMock.rejectMessage.mockResolvedValue(
+      messageMock as never,
+    );
     getStateMock.mockReturnValue(mockExtState);
 
     const result = await decryptMessageController.cancelDecryptMessage(
@@ -255,7 +271,7 @@ describe('DecryptMessageController', () => {
   it('should be able to reject all unapproved messages', async () => {
     decryptMessageManagerMock.getUnapprovedMessages.mockReturnValue({
       [messageIdMock]: messageMock,
-    });
+    } as any);
 
     await decryptMessageController.rejectUnapproved('reason to cancel');
 

app/scripts/lib/SnapsNameProvider.test.ts

@@ -1,4 +1,5 @@
 import { NameType } from '@metamask/name-controller';
+// @ts-expect-error see: https://github.com/MetaMask/snaps/pull/2174
 import { HandlerType } from '@metamask/snaps-utils';
 import {
   GetAllSnaps,

app/scripts/lib/notification-manager.test.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck types are very broken
 import browser from 'webextension-polyfill';
 import NotificationManager from './notification-manager';
 
@@ -44,7 +46,7 @@ describe('Notification Manager', () => {
   let notificationManager: NotificationManager,
     setCurrentPopupIdSpy: (a: number) => void,
     focusWindowSpy: () => void,
-    currentPopupId: number;
+    currentPopupId: number | undefined;
 
   beforeEach(() => {
     notificationManager = new NotificationManager();
@@ -65,7 +67,8 @@ describe('Notification Manager', () => {
     browser.windows.getAll.mockReturnValue([]);
     browser.windows.create.mockReturnValue(newPopupWindow);
     currentPopupId = undefined;
-    await notificationManager.showPopup(setCurrentPopupIdSpy, currentPopupId);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await notificationManager.showPopup(setCurrentPopupIdSpy, currentPopupId!);
     expect(setCurrentPopupIdSpy).toHaveBeenCalledTimes(1);
     expect(setCurrentPopupIdSpy).toHaveBeenCalledWith(newPopupWindow.id);
   });
@@ -82,7 +85,8 @@ describe('Notification Manager', () => {
       width: 120, // make sure this is smalled than NOTIFICATION_WIDTH
     });
     currentPopupId = undefined;
-    await notificationManager.showPopup(setCurrentPopupIdSpy, currentPopupId);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await notificationManager.showPopup(setCurrentPopupIdSpy, currentPopupId!);
     expect(createSpy).toHaveBeenCalledTimes(1);
     expect(createSpy).toHaveBeenCalledWith({
       height: 620,

app/scripts/lib/snap-keyring/metrics.test.ts

@@ -3,7 +3,7 @@ import { getSnapAndHardwareInfoForMetrics } from './metrics';
 describe('getSnapAndHardwareInfoForMetrics', () => {
   let getAccountType: jest.Mock;
   let getDeviceModel: jest.Mock;
-  let messenger;
+  let messenger: any;
 
   beforeEach(() => {
     getAccountType = jest.fn();

app/scripts/lib/transaction/metrics.test.ts

@@ -1,5 +1,6 @@
 import { Provider } from '@metamask/network-controller';
 import {
+  TransactionMeta,
   TransactionStatus,
   TransactionType,
 } from '@metamask/transaction-controller';
@@ -75,15 +76,15 @@ describe('Transaction metrics', () => {
   let fromAccount,
     mockChainId,
     mockNetworkId,
-    mockTransactionMeta,
-    mockTransactionMetaWithBlockaid,
-    expectedProperties,
-    expectedSensitiveProperties,
-    mockActionId;
+    mockTransactionMeta: TransactionMeta,
+    mockTransactionMetaWithBlockaid: any,
+    expectedProperties: any,
+    expectedSensitiveProperties: any,
+    mockActionId: any;
 
   beforeEach(() => {
     fromAccount = getTestAccounts()[0];
-    mockChainId = '0x5';
+    mockChainId = '0x5' as const;
     mockNetworkId = '5';
     mockActionId = '2';
     mockTransactionMeta = {
@@ -188,7 +189,10 @@ describe('Transaction metrics', () => {
     });
 
     it('should create event fragment when simulation failed', async () => {
-      mockTransactionMeta.simulationFails = true;
+      mockTransactionMeta.simulationFails = {
+        reason: 'test',
+        debug: {},
+      };
 
       await handleTransactionAdded(mockTransactionMetricsRequest, {
         transactionMeta: mockTransactionMeta as any,

app/scripts/lib/transaction/util.test.ts

@@ -220,7 +220,8 @@ describe('Transaction Utils', () => {
 
         expect(completed).toBe(false);
 
-        resultResolve(TRANSACTION_META_MOCK.hash);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        resultResolve!(TRANSACTION_META_MOCK.hash);
 
         await flushPromises();
 
@@ -307,7 +308,8 @@ describe('Transaction Utils', () => {
 
         expect(completed).toBe(false);
 
-        transactionHashResolve(TRANSACTION_META_MOCK.hash);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        transactionHashResolve!(TRANSACTION_META_MOCK.hash);
 
         await flushPromises();
 

package.json

@@ -455,6 +455,7 @@
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
     "@types/readable-stream": "^4.0.4",
+    "@types/redux-mock-store": "1.0.6",
     "@types/remote-redux-devtools": "^0.5.5",
     "@types/sass": "^1.43.1",
     "@types/selenium-webdriver": "^4.1.19",

tsconfig.json

@@ -23,10 +23,9 @@
     "useUnknownInCatchVariables": true
   },
   "exclude": [
-    "**/*.test.ts", // its pretty important to
-    "**/*.test.tsx", // use accurate types in
-    "**/*.stories.tsx", // tests and we don't
-    "**/*.stories.ts" // even come close.
+    // don't typecheck stories, as they don't yet pass the type checker.
+    "**/*.stories.tsx",
+    "**/*.stories.ts"
   ],
   // this should match our node version in .nvmrc
   "extends": "@tsconfig/node20/tsconfig.json",

ui/components/app/configure-snap-popup/configure-snap-popup.test.tsx

@@ -11,7 +11,7 @@ import ConfigureSnapPopup, {
 const mockOnClose = jest.fn();
 const mockStore = configureMockStore([])(mockState);
 describe('ConfigureSnapPopup', () => {
-  global.platform = { openTab: jest.fn() };
+  global.platform = { openTab: jest.fn(), closeCurrentWindow: jest.fn() };
 
   it('should show configure popup title and description', async () => {
     const { getByText } = renderWithProvider(

ui/components/app/snaps/keyring-snap-removal-warning/keyring-snap-removal-warning.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { waitFor, fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
+// @ts-expect-error see: https://github.com/MetaMask/snaps/pull/2174
 import { Snap } from '@metamask/snaps-utils';
 import mockStore from '../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../test/jest';
@@ -40,7 +41,7 @@ const defaultArgs = {
 };
 
 describe('Keyring Snap Remove Warning', () => {
-  let store;
+  let store: any;
   beforeAll(() => {
     store = configureMockStore()(mockStore);
   });
@@ -102,7 +103,7 @@ describe('Keyring Snap Remove Warning', () => {
   });
 
   it('opens block explorer for account', async () => {
-    global.platform = { openTab: jest.fn() };
+    global.platform = { openTab: jest.fn(), closeCurrentWindow: jest.fn() };
     const { getByText, getAllByTestId } = renderWithProvider(
       <KeyringSnapRemovalWarning {...defaultArgs} />,
       store,