prasad s
prasad s

Reputation: 1

CDK RADIAL Dialog is not loading in jest test cases

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

Answers (0)

Related Questions