From 1c2f1cf6f4804a9390cbbf37cfff88fe455ed665 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 18 Jan 2024 15:49:50 -0500 Subject: [PATCH] use userEvent, await action result --- package-lock.json | 20 ++++++ package.json | 3 +- src/test/suite/views/webview-app/app.test.tsx | 5 +- .../views/webview-app/connect-helper.test.tsx | 4 -- .../views/webview-app/overview-page.test.tsx | 64 +++++++++---------- src/views/webview-app/connect-helper.tsx | 2 + src/views/webview-app/overview-page.tsx | 2 +- 7 files changed, 60 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7b6f1fde9..ecb1f2020 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,6 +53,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", @@ -5629,6 +5630,19 @@ "@types/react": "*" } }, + "node_modules/@testing-library/user-event": { + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "dev": true, + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -24245,6 +24259,12 @@ "react-error-boundary": "^3.1.0" } }, + "@testing-library/user-event": { + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "dev": true + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", diff --git a/package.json b/package.json index 83107eed8..0fc3c3993 100644 --- a/package.json +++ b/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", diff --git a/src/test/suite/views/webview-app/app.test.tsx b/src/test/suite/views/webview-app/app.test.tsx index 1d9b75493..13c29be5c 100644 --- a/src/test/suite/views/webview-app/app.test.tsx +++ b/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(); - screen.getByTestId('overview-page'); + expect(screen.getByTestId('overview-page')).to.exist; }); }); diff --git a/src/test/suite/views/webview-app/connect-helper.test.tsx b/src/test/suite/views/webview-app/connect-helper.test.tsx index 369399311..f868c99a3 100644 --- a/src/test/suite/views/webview-app/connect-helper.test.tsx +++ b/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) - }); }); diff --git a/src/test/suite/views/webview-app/overview-page.test.tsx b/src/test/suite/views/webview-app/overview-page.test.tsx index 260ac8341..d83d7361b 100644 --- a/src/test/suite/views/webview-app/overview-page.test.tsx +++ b/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(); expect( screen.getByText( @@ -23,47 +25,45 @@ 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(); - 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(); - 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(); 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(); - 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( @@ -71,11 +71,11 @@ describe('OverviewPage test suite', function () { ).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(); - 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(); - 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(); - 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(); - 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( diff --git a/src/views/webview-app/connect-helper.tsx b/src/views/webview-app/connect-helper.tsx index 7cf80e75b..f7cbc6050 100644 --- a/src/views/webview-app/connect-helper.tsx +++ b/src/views/webview-app/connect-helper.tsx @@ -61,6 +61,7 @@ const ConnectHelper: React.FC<{ }> = ({ onClickOpenConnectionForm }) => { return (
+
@@ -91,6 +92,7 @@ const ConnectHelper: React.FC<{