Reputation: 1
I am not able to load the dialog in test cases which is coming from cdk-radial. I want dialog to open in jest test cases [its working fine in development].
import React from 'react';
import {EditFolderDialog} from 'components/resources/folder/edit-folder';
import {fireEvent, render , screen, waitFor , within} from '@testing-library/react';
import {mockEditFolderProps} from '__tests__/mocks/resources';
import {mockRadialTheme} from '__tests__/mocks/style';
import {ThemeProvider} from 'styled-components';
import userEvent from '@testing-library/user-event';
function MockTheme({children}: any) {
const theme = mockRadialTheme;
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
jest.mock('cdk-radial', () => {
const originalModule = jest.requireActual('cdk-radial');
return {
...originalModule,
Dialog: ({ open, children }) => (open ? <div data-testid="mock-dialog">{children}</div> : null),
};
});
const mockAllGroups = [
{
id: 1,
name: "Group 1",
groupsRoles: [],
roles:[],
users:[]
},
{
id: 2,
name: "Group 2",
groupsRoles: [],
roles:[],
users:[]
},
]
describe('Edit Folder: ', () => {
it('renders without issue: ', async () => {
const container = render(
<MockTheme>
<EditFolderDialog allGroups={mockAllGroups} {...{ softDeletedAt: null,...mockEditFolderProps }} />
</MockTheme>,
);
expect(container).toBeDefined();
});
it('renders with button : ', async () => {
const container = render(
<MockTheme>
<EditFolderDialog allGroups={mockAllGroups} {...{ softDeletedAt: null,...mockEditFolderProps }} />
</MockTheme>,
);
// const editButton = screen.getByTestId("edit-folder-button")
// expect(editButton).toBeDefined();
await userEvent.click(screen.getByTestId("edit-folder-button"));
const dialog = screen.getByTestId("create-folder"); // This will wait for it
expect(dialog).toBeDefined();
const dialogContent = within(dialog).getByText(/Edit /i);
expect(dialogContent).toBeInTheDocument();
});
});
Upvotes: 0
Views: 14