use userEvent, await action result

package.json

@@ -50,7 +50,7 @@
     "pretest": "npm run compile",
     "test": "npm run test-webview && npm run test-extension",
     "test-extension": "cross-env NODE_OPTIONS=--no-force-async-hooks-checks xvfb-maybe node ./out/test/runTest.js",
-    "test-webview": "mocha -r ts-node/register --file ./src/test/setup-webview.ts src/test/suite/views/**/*.test.tsx",
+    "test-webview": "mocha -r ts-node/register --file ./src/test/setup-webview.ts src/test/suite/views/webview-app/**/*.test.tsx",
     "analyze-bundle": "webpack --mode production --analyze",
     "vscode:prepublish": "npm run clean && npm run compile:keyfile && npm run compile:resources && webpack --mode production",
     "check": "npm run lint && npm run depcheck",
@@ -1104,6 +1104,7 @@
     "@mongodb-js/sbom-tools": "^0.5.4",
     "@mongosh/service-provider-core": "^2.0.2",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.1",
     "@types/babel__traverse": "^7.20.1",
     "@types/chai": "^4.3.5",

src/test/suite/views/webview-app/app.test.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+
 import App from '../../../../views/webview-app/app';
 
 describe('App Component Test Suite', () => {
   it('it renders the overview page', () => {
     render(<App />);
-    screen.getByTestId('overview-page');
+    expect(screen.getByTestId('overview-page')).to.exist;
   });
 });

src/test/suite/views/webview-app/connect-helper.test.tsx

@@ -34,8 +34,4 @@ describe('ConnectHelper test suite', function () {
       command: MESSAGE_TYPES.OPEN_CONNECTION_STRING_INPUT,
     });
   });
-
-  it.skip('when clicked on open connection form, it should open connection form', function () {
-    // TODO(VSCODE-488)
-  });
 });

src/test/suite/views/webview-app/overview-page.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { expect } from 'chai';
-import Sinon from 'sinon';
+import sinon from 'sinon';
 import { cleanup, render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import OverviewPage from '../../../../views/webview-app/overview-page';
 import vscode from '../../../../views/webview-app/vscode-api';
@@ -12,9 +13,10 @@ const connectionFormTestId = 'connection-form-modal';
 describe('OverviewPage test suite', function () {
   afterEach(() => {
     cleanup();
-    Sinon.restore();
+    sinon.restore();
   });
-  it('should render OverviewPage', function () {
+
+  it('should render the OverviewPage', function () {
     render(<OverviewPage />);
     expect(
       screen.getByText(
@@ -23,59 +25,57 @@ describe('OverviewPage test suite', function () {
     ).to.exist;
   });
 
-  it('on click of resources, it should open resources panel', function () {
+  it('should open and close the resources panel', async function () {
     render(<OverviewPage />);
-    screen.getByText('Resources').click();
+
+    expect(screen.queryByText('Product overview')).to.not.exist;
+    await userEvent.click(screen.getByText('Resources'));
     expect(screen.getByText('Product overview')).to.exist;
-  });
 
-  it('on click of close button on resources panel, it should close resources panel', function () {
-    render(<OverviewPage />);
-    screen.getByText('Resources').click();
-    screen.getByLabelText('Close').click();
+    await userEvent.click(screen.getByLabelText('Close'));
     expect(screen.queryByText('Product overview')).to.be.null;
   });
 
   describe('Connection Form', function () {
-    it('is able to open and close the new connection form', function () {
+    it('is able to open and close the new connection form', async function () {
       render(<OverviewPage />);
 
       expect(screen.queryByTestId(connectionFormTestId)).to.not.exist;
-      const postMessageSpy = Sinon.spy(vscode, 'postMessage');
+      const postMessageSpy = sinon.spy(vscode, 'postMessage');
       expect(postMessageSpy).to.not.be.called;
 
-      screen.getByText('Open form').click();
+      await userEvent.click(screen.getByTestId('open-connection-form-button'));
       expect(screen.getByTestId(connectionFormTestId)).to.exist;
       const message = postMessageSpy.firstCall.args[0];
       expect(message).to.deep.equal({
         command: MESSAGE_TYPES.CONNECTION_FORM_OPENED,
       });
 
-      screen.getByLabelText('Close modal').click();
+      await userEvent.click(screen.getByLabelText('Close modal'));
       expect(screen.queryByTestId(connectionFormTestId)).to.not.exist;
     });
 
-    it('should send connect request to webview controller when clicked on Connect button', function () {
-      const postMessageSpy = Sinon.spy(vscode, 'postMessage');
+    it('should send connect request to webview controller when clicked on Connect button', async function () {
+      const postMessageSpy = sinon.spy(vscode, 'postMessage');
 
       render(<OverviewPage />);
-      screen.getByText('Open form').click();
+      await userEvent.click(screen.getByTestId('open-connection-form-button'));
 
       expect(screen.getByDisplayValue('mongodb://localhost:27017/')).to.not.be
         .null;
-      screen.getByTestId('connect-button').click();
+      await userEvent.click(screen.getByTestId('connect-button'));
       const argsWithoutConnectId = postMessageSpy.lastCall.args[0] as any;
       expect(argsWithoutConnectId.command).to.equal(MESSAGE_TYPES.CONNECT);
       expect(
         argsWithoutConnectId.connectionInfo.connectionOptions.connectionString
       ).to.equal('mongodb://localhost:27017');
     });
 
-    it('should display error message returned from connection attempt', function () {
+    it('should display error message returned from connection attempt', async function () {
       render(<OverviewPage />);
-      const postMessageSpy = Sinon.spy(vscode, 'postMessage');
-      screen.getByText('Open form').click();
-      screen.getByTestId('connect-button').click();
+      const postMessageSpy = sinon.spy(vscode, 'postMessage');
+      await userEvent.click(screen.getByTestId('open-connection-form-button'));
+      await userEvent.click(screen.getByTestId('connect-button'));
       const connectionId = (postMessageSpy.lastCall.args[0] as any)
         .connectionInfo.id;
 
@@ -94,11 +94,11 @@ describe('OverviewPage test suite', function () {
       expect(screen.queryByTestId('connection-error-summary')).to.not.be.null;
     });
 
-    it('should close the connection modal when connected successfully', function () {
+    it('should close the connection modal when connected successfully', async function () {
       render(<OverviewPage />);
-      const postMessageSpy = Sinon.spy(vscode, 'postMessage');
-      screen.getByText('Open form').click();
-      screen.getByTestId('connect-button').click();
+      const postMessageSpy = sinon.spy(vscode, 'postMessage');
+      await userEvent.click(screen.getByTestId('open-connection-form-button'));
+      await userEvent.click(screen.getByTestId('connect-button'));
       const connectionId = (postMessageSpy.lastCall.args[0] as any)
         .connectionInfo.id;
 
@@ -117,10 +117,10 @@ describe('OverviewPage test suite', function () {
       expect(screen.queryByTestId(connectionFormTestId)).to.not.exist;
     });
 
-    it('should handle editing a connection', function () {
+    it('should handle editing a connection', async function () {
       render(<OverviewPage />);
 
-      const postMessageSpy = Sinon.spy(vscode, 'postMessage');
+      const postMessageSpy = sinon.spy(vscode, 'postMessage');
       expect(screen.queryByTestId(connectionFormTestId)).to.not.exist;
       expect(screen.queryByText('pineapple')).to.not.exist;
 
@@ -146,7 +146,7 @@ describe('OverviewPage test suite', function () {
       expect(screen.getByText('pineapple')).to.exist;
 
       expect(postMessageSpy).to.not.be.called;
-      screen.getByTestId('connect-button').click();
+      await userEvent.click(screen.getByTestId('connect-button'));
       expect(postMessageSpy).to.be.calledOnce;
 
       const editAttempt = postMessageSpy.lastCall.args[0] as any;
@@ -161,10 +161,10 @@ describe('OverviewPage test suite', function () {
       });
     });
 
-    it('should not display results from other connection attempts', function () {
+    it('should not display results from other connection attempts', async function () {
       render(<OverviewPage />);
-      screen.getByText('Open form').click();
-      screen.getByTestId('connect-button').click();
+      await userEvent.click(screen.getByTestId('open-connection-form-button'));
+      await userEvent.click(screen.getByTestId('connect-button'));
 
       act(() => {
         window.dispatchEvent(

src/views/webview-app/connect-helper.tsx

@@ -61,6 +61,7 @@ const ConnectHelper: React.FC<{
 }> = ({ onClickOpenConnectionForm }) => {
   return (
     <div className={containerStyles}>
+      <input type="text" />
       <div className={cardContainerStyles}>
         <div className={leftCardStyles}>
           <div>
@@ -91,6 +92,7 @@ const ConnectHelper: React.FC<{
           <Button
             aria-label="Open connection form"
             darkMode
+            data-testid="open-connection-form-button"
             onClick={onClickOpenConnectionForm}
           >
             Open form

src/views/webview-app/overview-page.tsx

@@ -56,7 +56,7 @@ const OverviewPage: React.FC = () => {
   }, []);
 
   return (
-    <div className={pageStyles}>
+    <div data-testid="overview-page" className={pageStyles}>
       {showResourcesPanel && (
         <ResourcesPanel onClose={handleResourcesPanelClose} />
       )}