Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v16] Fix updates outside of act in TabHost tests #43265

Merged
merged 1 commit into from
Jun 20, 2024
Merged

[v16] Fix updates outside of act in TabHost tests #43265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion web/packages/shared/setupTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
40 changes: 22 additions & 18 deletions web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import 'jest-canvas-mock';
import { createRef } from 'react';
import { fireEvent, render, screen } from 'design/utils/testing';

Expand Down Expand Up @@ -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');

Expand Down Expand Up @@ -78,21 +79,24 @@ function getTestSetup({ documents }: { documents: Document[] }) {
jest.spyOn(docsService, 'closeToRight');
jest.spyOn(docsService, 'duplicatePtyAndActivate');

const utils = render(
render(
<MockAppContextProvider appContext={appContext}>
<TabHost ctx={appContext} topBarContainerRef={createRef()} />
</MockAppContextProvider>
);

// 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();
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -146,28 +150,28 @@ 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);

expect(add).toHaveBeenCalledWith(mockedClusterDocument);
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);
Expand Down
Loading