diff --git a/web/packages/shared/setupTests.tsx b/web/packages/shared/setupTests.tsx index 3f83181203977..8bf61734b1944 100644 --- a/web/packages/shared/setupTests.tsx +++ b/web/packages/shared/setupTests.tsx @@ -55,7 +55,6 @@ const failOnConsoleIgnoreList = new Set([ 'web/packages/shared/components/TextEditor/TextEditor.test.tsx', 'web/packages/teleport/src/components/BannerList/useAlerts.test.tsx', 'web/packages/teleport/src/Navigation/NavigationItem.test.tsx', - 'web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx', // As of the parent commit (708dac8e0d0), the tests below are flakes. // https://github.com/gravitational/teleport/pull/41252#discussion_r1595036569 'web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx', diff --git a/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx b/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx index cef81a193fc93..1237024a97dbf 100644 --- a/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx +++ b/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +import 'jest-canvas-mock'; import { createRef } from 'react'; import { fireEvent, render, screen } from 'design/utils/testing'; @@ -44,7 +45,7 @@ function getMockDocuments(): Document[] { const rootClusterUri = '/clusters/test_uri'; -function getTestSetup({ documents }: { documents: Document[] }) { +async function getTestSetup({ documents }: { documents: Document[] }) { const appContext = new MockAppContext(); jest.spyOn(appContext.mainProcessClient, 'openTabContextMenu'); @@ -78,21 +79,24 @@ function getTestSetup({ documents }: { documents: Document[] }) { jest.spyOn(docsService, 'closeToRight'); jest.spyOn(docsService, 'duplicatePtyAndActivate'); - const utils = render( + render( ); + // Mostly a bogus await just so that all useEffects in all of the mounted contexts have time to be + // processed and not throw an error due to a state update outside of `act`. + expect(await screen.findByTitle(/New Tab/)).toBeInTheDocument(); + return { - ...utils, docsService, mainProcessClient: appContext.mainProcessClient, }; } -test('render documents', () => { - const { docsService } = getTestSetup({ +test('render documents', async () => { + const { docsService } = await getTestSetup({ documents: getMockDocuments(), }); const documents = docsService.getDocuments(); @@ -101,21 +105,21 @@ test('render documents', () => { expect(screen.getByTitle(documents[1].title)).toBeInTheDocument(); }); -test('open tab on click', () => { - const { getByTitle, docsService } = getTestSetup({ +test('open tab on click', async () => { + const { docsService } = await getTestSetup({ documents: [getMockDocuments()[0]], }); const documents = docsService.getDocuments(); const { open } = docsService; - const $tabTitle = getByTitle(documents[0].title); + const $tabTitle = screen.getByTitle(documents[0].title); fireEvent.click($tabTitle); expect(open).toHaveBeenCalledWith(documents[0].uri); }); -test('open context menu', () => { - const { getByTitle, docsService, mainProcessClient } = getTestSetup({ +test('open context menu', async () => { + const { docsService, mainProcessClient } = await getTestSetup({ documents: [getMockDocuments()[0]], }); const { openTabContextMenu } = mainProcessClient; @@ -124,7 +128,7 @@ test('open context menu', () => { const documents = docsService.getDocuments(); const document = documents[0]; - const $tabTitle = getByTitle(documents[0].title); + const $tabTitle = screen.getByTitle(documents[0].title); fireEvent.contextMenu($tabTitle); expect(openTabContextMenu).toHaveBeenCalled(); @@ -146,14 +150,14 @@ test('open context menu', () => { expect(duplicatePtyAndActivate).toHaveBeenCalledWith(document.uri); }); -test('open new tab', () => { - const { getByTitle, docsService } = getTestSetup({ +test('open new tab', async () => { + const { docsService } = await getTestSetup({ documents: [getMockDocuments()[0]], }); const { add, open } = docsService; const mockedClusterDocument = makeDocumentCluster(); docsService.createClusterDocument = () => mockedClusterDocument; - const $newTabButton = getByTitle('New Tab', { exact: false }); + const $newTabButton = screen.getByTitle('New Tab', { exact: false }); fireEvent.click($newTabButton); @@ -161,13 +165,13 @@ test('open new tab', () => { expect(open).toHaveBeenCalledWith(mockedClusterDocument.uri); }); -test('swap tabs', () => { - const { getByTitle, docsService } = getTestSetup({ +test('swap tabs', async () => { + const { docsService } = await getTestSetup({ documents: getMockDocuments(), }); const documents = docsService.getDocuments(); - const $firstTab = getByTitle(documents[0].title); - const $secondTab = getByTitle(documents[1].title); + const $firstTab = screen.getByTitle(documents[0].title); + const $secondTab = screen.getByTitle(documents[1].title); fireEvent.dragStart($secondTab); fireEvent.drop($firstTab);