@patternfly/react-code-editor 6.0.0-alpha.9 → 6.0.0-alpha.90

package/src/components/CodeEditor/__test__/CodeEditor.test.tsx

@@ -1,46 +1,76 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
+import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-});
-
-describe('CodeEditor', () => {
-  beforeAll(() => {
-    window.HTMLCanvasElement.prototype.getContext = () => ({}) as any;
-  });
+jest.mock('@monaco-editor/react', () => jest.fn(() => <div data-testid="mock-editor"></div>));
 
-  test('matches snapshot without props', () => {
-    const { asFragment } = render(<CodeEditor />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Matches snapshot without props', () => {
+  const { asFragment } = render(<CodeEditor code="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with control buttons enabled', () => {
+  const { asFragment } = render(<CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled code="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorMain}, ${styles.codeEditorCode}`, () => {
+  render(<CodeEditor />);
+  expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor);
+});
+
+test('Renders custom class when className is passed', () => {
+  render(<CodeEditor className="custom" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass('custom');
+});
+
+test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
+  render(<CodeEditor isReadOnly />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
+    styles.modifiers.readOnly
+  );
+});
+
+test(`Renders with ${styles.codeEditorUpload} when isUploadEnabled = true`, () => {
+  render(<CodeEditor isUploadEnabled code="test" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorUpload);
+});
+
+test(`Renders with empty state when code = undefined`, () => {
+  render(<CodeEditor emptyState={<div>empty</div>} />);
+  expect(screen.getByText('empty')).toBeInTheDocument();
+});
+
+test(`Renders with empty state when isUploadEnabled = true and code = undefined`, () => {
+  render(<CodeEditor emptyState={<div>empty</div>} isUploadEnabled />);
+  expect(screen.getByText('empty')).toBeInTheDocument();
+});
+
+test(`Renders with language label when isLanguageLabelVisible`, () => {
+  render(<CodeEditor isLanguageLabelVisible language={Language.java} />);
+  expect(screen.getByText('JAVA')).toBeInTheDocument();
+});
+
+test(`Renders with custom controls when customControls is passed`, () => {
+  render(<CodeEditor customControls={<div>control</div>} />);
+  expect(screen.getByText('control')).toBeInTheDocument();
+});
+
+test(`Renders with custom header content when headerMainContent is passed`, () => {
+  render(<CodeEditor headerMainContent="header content" />);
+  expect(screen.getByText('header content')).toBeInTheDocument();
+});
 
-  test('matches snapshot with all props', () => {
-    const { asFragment } = render(
-      <CodeEditor
-        isReadOnly
-        isDarkTheme
-        isLineNumbersVisible={false}
-        isUploadEnabled
-        isLanguageLabelVisible
-        isDownloadEnabled
-        isCopyEnabled
-        height="400px"
-        code={'test'}
-        language={Language.javascript}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
+test(`Renders with shortcuts when shortcutsPopoverButtonText is passed`, () => {
+  render(
+    <CodeEditor shortcutsPopoverButtonText="shortcuts-button" shortcutsPopoverProps={{ bodyContent: 'shortcuts' }} />
+  );
+  expect(screen.getByText('shortcuts-button')).toBeInTheDocument();
+  act(() => {
+    screen.getByText('shortcuts-button').click();
   });
+  expect(screen.getByText('shortcuts')).toBeInTheDocument();
 });

package/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CodeEditorControl } from '../CodeEditorControl';
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<CodeEditorControl icon={<div>icon</div>} onClick={jest.fn()} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders with custom class when className is passed', () => {
+  render(<CodeEditorControl className="custom" icon={<div>icon</div>} onClick={jest.fn()} />);
+  expect(screen.getByText('icon').parentElement?.parentElement).toHaveClass('custom');
+});
+
+test('Renders with accessible name when aria-label is passed', () => {
+  render(<CodeEditorControl aria-label="aria-test" icon={<div>icon</div>} onClick={jest.fn()} />);
+  expect(screen.getByLabelText('aria-test'));
+});