chore(connection-form): typecheck packages/connection-form (#6143)

typecheck packages/connection-form

Author: lerouxb

packages/connection-form/package.json

@@ -32,11 +32,12 @@
     "bootstrap": "npm run compile",
     "prepublishOnly": "npm run compile && compass-scripts check-exports-exist",
     "compile": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig-lint.json --noEmit",
     "eslint": "eslint",
     "prettier": "prettier",
     "lint": "npm run eslint . && npm run prettier -- --check .",
     "depcheck": "compass-scripts check-peer-deps && depcheck",
-    "check": "npm run lint && npm run depcheck",
+    "check": "npm run typecheck && npm run lint && npm run depcheck",
     "check-ci": "npm run check",
     "test": "mocha",
     "test-electron": "xvfb-maybe electron-mocha --no-sandbox",

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-default.spec.tsx

@@ -172,6 +172,7 @@ describe('AuthenticationDefault Component', function () {
         {
           fieldName: 'username',
           message: 'username error',
+          fieldTab: 'general',
         },
       ],
       updateConnectionFormField: updateConnectionFormFieldSpy,
@@ -186,6 +187,7 @@ describe('AuthenticationDefault Component', function () {
         {
           fieldName: 'password',
           message: 'password error',
+          fieldTab: 'general',
         },
       ],
       updateConnectionFormField: updateConnectionFormFieldSpy,

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-gssapi.spec.tsx

@@ -118,7 +118,7 @@ describe('AuthenticationGssapi Component', function () {
         .getByTestId('gssapi-canonicalize-host-name-none')
         .closest('input');
 
-      expect(radio.checked).to.be.true;
+      expect(radio?.checked).to.be.true;
     });
 
     it('updates the form field with CANONICALIZE_HOST_NAME forward', function () {
@@ -188,7 +188,7 @@ describe('AuthenticationGssapi Component', function () {
       it('allows to edit the password when enter password directly is enabled', function () {
         expect(screen.queryByTestId('gssapi-password-input')).to.not.exist;
         const checkbox = screen.getByTestId('gssapi-password-checkbox');
-        expect(checkbox.closest('input').checked).to.be.false;
+        expect(checkbox.closest('input')?.checked).to.be.false;
 
         fireEvent.click(checkbox);
 
@@ -220,15 +220,17 @@ describe('AuthenticationGssapi Component', function () {
 
       it('enables the checkbox and shows the password input', function () {
         const checkbox = screen.getByTestId('gssapi-password-checkbox');
-        expect(checkbox.closest('input').checked).to.be.true;
+        expect(checkbox.closest('input')?.checked).to.be.true;
         const passwordInput = screen.queryByTestId('gssapi-password-input');
         expect(passwordInput).to.exist;
-        expect(passwordInput.closest('input').value).to.equal('password');
+        expect(passwordInput && passwordInput.closest('input')?.value).to.equal(
+          'password'
+        );
       });
 
       it('resets the password when the checkbox is unchecked', function () {
         const checkbox = screen.getByTestId('gssapi-password-checkbox');
-        expect(checkbox.closest('input').checked).to.be.true;
+        expect(checkbox.closest('input')?.checked).to.be.true;
         fireEvent.click(checkbox);
 
         expect(updateConnectionFormFieldSpy.callCount).to.equal(1);

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-oidc.spec.tsx

@@ -15,7 +15,9 @@ import ConnectionForm from '../../../';
 const deviceAuthFlowText = 'Enable Device Authentication Flow';
 
 async function renderConnectionForm(
-  connectSpy,
+  connectSpy: (
+    expected: ConnectionOptions | ((expected: ConnectionOptions) => void)
+  ) => Promise<void>,
   { showOIDCDeviceAuthFlow }: { showOIDCDeviceAuthFlow: boolean }
 ) {
   render(
@@ -27,9 +29,12 @@ async function renderConnectionForm(
         },
       }}
       onConnectClicked={(connectionInfo) => {
-        connectSpy(connectionInfo.connectionOptions);
+        void connectSpy(connectionInfo.connectionOptions);
       }}
       preferences={{ enableOidc: true, showOIDCDeviceAuthFlow }}
+      onSaveClicked={() => {
+        return Promise.resolve();
+      }}
     />
   );
 
@@ -57,13 +62,15 @@ const openOptionsAccordion = () =>
   fireEvent.click(screen.getByText('OIDC Options'));
 
 describe('Authentication OIDC Connection Form', function () {
-  let expectToConnectWith;
+  let expectToConnectWith: (
+    expected: ConnectionOptions | ((expected: ConnectionOptions) => void)
+  ) => Promise<void>;
   let connectSpy: sinon.SinonSpy;
 
   beforeEach(function () {
     connectSpy = sinon.spy();
     expectToConnectWith = async (
-      expected: ConnectionOptions | ((ConnectionOptions) => void)
+      expected: ConnectionOptions | ((expected: ConnectionOptions) => void)
     ): Promise<void> => {
       connectSpy.resetHistory();
       fireEvent.click(screen.getByTestId('connect-button'));

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-plain.spec.tsx

@@ -83,6 +83,7 @@ describe('AuthenticationAws Component', function () {
         {
           fieldName: 'username',
           message: 'username error',
+          fieldTab: 'general',
         },
       ],
       updateConnectionFormField: updateConnectionFormFieldSpy,
@@ -97,6 +98,7 @@ describe('AuthenticationAws Component', function () {
         {
           fieldName: 'password',
           message: 'password error',
+          fieldTab: 'general',
         },
       ],
       updateConnectionFormField: updateConnectionFormFieldSpy,

packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.spec.tsx

@@ -44,14 +44,16 @@ const setFileInputValue = (testId: string, value: string) =>
   });
 
 describe('In-Use Encryption', function () {
-  let expectToConnectWith;
-  let expectConnectionError;
+  let expectToConnectWith: (
+    expected: ConnectionOptions | ((opts: ConnectionOptions) => void)
+  ) => Promise<void>;
+  let expectConnectionError: (expectedErrorText: string) => Promise<void>;
 
   beforeEach(async function () {
     const connectSpy = sinon.spy();
 
     expectToConnectWith = async (
-      expected: ConnectionOptions | ((ConnectionOptions) => void)
+      expected: ConnectionOptions | ((opts: ConnectionOptions) => void)
     ): Promise<void> => {
       connectSpy.resetHistory();
       fireEvent.click(screen.getByTestId('connect-button'));
@@ -90,6 +92,9 @@ describe('In-Use Encryption', function () {
         onConnectClicked={(connectionInfo) => {
           connectSpy(connectionInfo.connectionOptions);
         }}
+        onSaveClicked={() => {
+          return Promise.resolve();
+        }}
       />
     );
 
@@ -192,6 +197,10 @@ describe('In-Use Encryption', function () {
       .getByTestId('csfle-kms-local-key')
       .closest('input')?.value;
 
+    if (!generatedLocalKey) {
+      throw new Error('expected generatedLocalKey');
+    }
+
     expect(generatedLocalKey).to.match(/^[a-zA-Z0-9+/-_=]{128}$/);
 
     await expectToConnectWith({

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/socks.spec.tsx

@@ -22,20 +22,23 @@ const formFields = [
     key: 'proxyPassword',
     value: 'password',
   },
-];
+] as const;
 
 const proxyParams = {
   proxyHost: 'hello-world.com',
-  proxyPort: 1080,
+  proxyPort: '1080',
   proxyUsername: 'cosmo',
   proxyPassword: 'kramer',
-};
+} as const;
 const connectionStringUrl = new ConnectionStringUrl(
   'mongodb+srv://0ranges:p!neapp1es@localhost/'
 );
 
 for (const key in proxyParams) {
-  connectionStringUrl.searchParams.set(key, proxyParams[key]);
+  connectionStringUrl.searchParams.set(
+    key,
+    proxyParams[key as keyof typeof proxyParams]
+  );
 }
 
 describe('TunnelSocks', function () {

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/ssh-tunnel-identity.spec.tsx

@@ -8,7 +8,10 @@ import SSHTunnelIdentity from './ssh-tunnel-identity';
 import type { ConnectionFormError } from '../../../utils/validation';
 import { errorMessageByFieldName } from '../../../utils/validation';
 
-const formFields = [
+const formFields: {
+  key: keyof SSHConnectionOptions;
+  value: string;
+}[] = [
   {
     key: 'host',
     value: 'host',
@@ -61,7 +64,7 @@ describe('SSHTunnelIdentity', function () {
 
       if (key !== 'identityKeyFile') {
         expect(el.getAttribute('value'), `renders ${key} value`).to.equal(
-          sshTunnelOptions[key].toString()
+          sshTunnelOptions[key]?.toString()
         );
       }
     });
@@ -92,14 +95,17 @@ describe('SSHTunnelIdentity', function () {
       {
         fieldName: 'sshHostname',
         message: 'Invalid host',
+        fieldTab: 'authentication',
       },
       {
         fieldName: 'sshUsername',
         message: 'Invalid username',
+        fieldTab: 'authentication',
       },
       {
         fieldName: 'sshIdentityKeyFile',
         message: 'Invalid file',
+        fieldTab: 'authentication',
       },
     ];
 
@@ -112,17 +118,23 @@ describe('SSHTunnelIdentity', function () {
     );
 
     expect(
-      screen.getByText(errorMessageByFieldName(errors, 'sshHostname')),
+      screen.getByText(
+        errorMessageByFieldName(errors, 'sshHostname') as string
+      ),
       'renders sshHostname field error'
     ).to.exist;
 
     expect(
-      screen.getByText(errorMessageByFieldName(errors, 'sshUsername')),
+      screen.getByText(
+        errorMessageByFieldName(errors, 'sshUsername') as string
+      ),
       'renders sshUsername field error'
     ).to.exist;
 
     expect(
-      screen.getByText(errorMessageByFieldName(errors, 'sshIdentityKeyFile')),
+      screen.getByText(
+        errorMessageByFieldName(errors, 'sshIdentityKeyFile') as string
+      ),
       'renders sshIdentityKeyFile field error'
     ).to.exist;
   });

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/ssh-tunnel-password.spec.tsx

@@ -25,14 +25,14 @@ const formFields = [
     key: 'password',
     value: 'password',
   },
-];
+] as const;
 
 const sshTunnelOptions: SSHConnectionOptions = {
   host: 'old host',
   port: 22,
   username: 'old username',
   password: 'old password',
-};
+} as const;
 
 describe('SSHTunnelPassword', function () {
   let updateConnectionFormFieldSpy: sinon.SinonSpy;
@@ -54,7 +54,7 @@ describe('SSHTunnelPassword', function () {
       const el = screen.getByTestId(key);
       expect(el, `renders ${key} field`).to.exist;
       expect(el.getAttribute('value'), `renders ${key} value`).to.equal(
-        sshTunnelOptions[key].toString()
+        sshTunnelOptions[key]?.toString()
       );
     });
   });
@@ -97,17 +97,23 @@ describe('SSHTunnelPassword', function () {
     );
 
     expect(
-      screen.getByText(errorMessageByFieldName(errors, 'sshHostname')),
+      screen.getByText(
+        errorMessageByFieldName(errors, 'sshHostname') as string
+      ),
       'renders sshHostname field error'
     ).to.exist;
 
     expect(
-      screen.getByText(errorMessageByFieldName(errors, 'sshUsername')),
+      screen.getByText(
+        errorMessageByFieldName(errors, 'sshUsername') as string
+      ),
       'renders sshUsername field error'
     ).to.exist;
 
     expect(
-      screen.getByText(errorMessageByFieldName(errors, 'sshPassword')),
+      screen.getByText(
+        errorMessageByFieldName(errors, 'sshPassword') as string
+      ),
       'renders sshPassword field error'
     ).to.exist;
   });

packages/connection-form/src/components/connection-form.spec.tsx

@@ -303,7 +303,10 @@ describe('ConnectionForm Component', function () {
 
     expect(screen.queryByText('Save connection to favorites')).to.not.exist;
 
-    fireEvent.click(screen.getByText(favoriteText).closest('button'));
+    const button = screen.getByText(favoriteText).closest('button');
+    if (button) {
+      fireEvent.click(button);
+    }
 
     expect(screen.getByText('Save connection to favorites')).to.be.visible;
   });
@@ -420,7 +423,9 @@ describe('ConnectionForm Component', function () {
 
     describe('name input', function () {
       it('should sync with the href of the connection string unless it has been edited', async function () {
-        const connectionString = screen.getByTestId('connectionString');
+        const connectionString = screen.getByTestId(
+          'connectionString'
+        ) as HTMLInputElement;
         userEvent.clear(connectionString);
 
         await waitFor(() => expect(connectionString.value).to.equal(''));
@@ -433,15 +438,17 @@ describe('ConnectionForm Component', function () {
 
         const personalizationName = screen.getByTestId(
           'personalization-name-input'
-        );
+        ) as HTMLInputElement;
         expect(personalizationName.value).to.equal('myserver:27017');
       });
 
       it('should not sync with the href of the connection string when it has been edited', async function () {
-        const connectionString = screen.getByTestId('connectionString');
+        const connectionString = screen.getByTestId(
+          'connectionString'
+        ) as HTMLInputElement;
         const personalizationName = screen.getByTestId(
           'personalization-name-input'
-        );
+        ) as HTMLInputElement;
 
         userEvent.clear(personalizationName);
         userEvent.clear(connectionString);