testing (in progress)

grafana-plugin/src/components/Collapse/Collapse.tsx

@@ -3,11 +3,9 @@ import React, { FC, useCallback, useState } from 'react';
 import { Icon } from '@grafana/ui';
 import cn from 'classnames/bind';
 
-import Block from 'components/GBlock/Block';
-
 import styles from 'components/Collapse/Collapse.module.css';
 
-interface CollapseProps {
+export interface CollapseProps {
   label: React.ReactNode;
   isOpen: boolean;
   onToggle?: (isOpen: boolean) => void;
@@ -15,7 +13,7 @@ interface CollapseProps {
   className?: string;
   contentClassName?: string;
   headerWithBackground?: boolean;
-  children?: any
+  children?: any;
 }
 
 const cx = cn.bind(styles);
@@ -45,11 +43,19 @@ const Collapse: FC<CollapseProps> = (props) => {
 
   return (
     <div className={cx('root', className)}>
-      <div className={cx('header', { 'header_with-background': headerWithBackground })} onClick={onHeaderClickCallback}>
+      <div
+        className={cx('header', { 'header_with-background': headerWithBackground })}
+        onClick={onHeaderClickCallback}
+        data-testid="test__toggle"
+      >
         <Icon name={isOpen ? 'angle-down' : 'angle-right'} size="xl" className={cx('icon')} />
         <div className={cx('label')}> {label}</div>
       </div>
-      {isOpen && <div className={cx('content', contentClassName)}>{children}</div>}
+      {isOpen && (
+        <div className={cx('content', contentClassName)} data-testid="test__children">
+          {children}
+        </div>
+      )}
     </div>
   );
 };

grafana-plugin/src/tests/components/Avatar/Avatar.test.tsx

@@ -6,19 +6,10 @@ import React from 'react';
 
 import '@testing-library/jest-dom';
 
-const MAX_PRINT = 1000000;
-
-describe('Text', () => {
-  const avatarSrc = 'http://avatar.com/'
+describe('Avatar', () => {
+  const avatarSrc = 'http://avatar.com/';
   const avatarSizeLarge = 'large';
-  const avatarSizeSmall = 'small'
-
-  test('Usage of debug', async () => {
-    render(<Avatar size="large" src={'http://avatar.com'} />);
-    const image = await screen.findByTestId<HTMLImageElement>('test__avatar');
-
-    screen.debug(image, MAX_PRINT);
-  });
+  const avatarSizeSmall = 'small';
 
   test("Avatar's image points to given src attribute", async () => {
     render(<Avatar size={avatarSizeLarge} src={avatarSrc} />);

grafana-plugin/src/tests/components/Collapse/Collapse.test.tsx

@@ -0,0 +1,49 @@
+import { describe, expect, test } from '@jest/globals';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { Icon } from '@grafana/ui';
+
+import Collapse, { CollapseProps } from 'components/Collapse/Collapse';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+describe('Collapse', () => {
+  function getProps(isOpen: boolean, onClick: jest.Mock = null) {
+    return {
+      label: 'Toggle',
+      isOpen: false,
+      onClick: onClick
+    }
+  }
+
+  test('It renders the content of children on click', () => {
+    const mock = jest.fn()
+
+    render(<Collapse {...getProps(false)} />);
+
+    const hiddenChildrenContent = getChildrenEl();
+    expect(hiddenChildrenContent).toBeNull();
+
+    const toggler = getTogglerEl();
+    fireEvent.click(toggler);
+
+    expect(mock).toHaveBeenCalledTimes(1);
+
+    expect(hiddenChildrenContent).toBeDefined();
+  });
+
+  test('It renders open if isOpen=true', () => {
+    render(<Collapse {...getProps(true)} />);
+
+    const content = getChildrenEl();
+    expect(content).toBeDefined();
+  });
+
+  function getChildrenEl(): HTMLElement {
+    return screen.queryByTestId<HTMLElement>('test__children');
+  }
+
+  function getTogglerEl(): HTMLElement {
+    return screen.getByTestId<HTMLElement>('test__toggle');
+  }
+});