diff --git a/grafana-plugin/src/components/Collapse/Collapse.tsx b/grafana-plugin/src/components/Collapse/Collapse.tsx index 959898d6..27644e0d 100644 --- a/grafana-plugin/src/components/Collapse/Collapse.tsx +++ b/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 = (props) => { return (
-
+
{label}
- {isOpen &&
{children}
} + {isOpen && ( +
+ {children} +
+ )}
); }; diff --git a/grafana-plugin/src/tests/components/Avatar/Avatar.test.tsx b/grafana-plugin/src/tests/components/Avatar/Avatar.test.tsx index b7dfa91d..826c4ce8 100644 --- a/grafana-plugin/src/tests/components/Avatar/Avatar.test.tsx +++ b/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(); - const image = await screen.findByTestId('test__avatar'); - - screen.debug(image, MAX_PRINT); - }); + const avatarSizeSmall = 'small'; test("Avatar's image points to given src attribute", async () => { render(); diff --git a/grafana-plugin/src/tests/components/Collapse/Collapse.test.tsx b/grafana-plugin/src/tests/components/Collapse/Collapse.test.tsx new file mode 100644 index 00000000..ea3346ed --- /dev/null +++ b/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(); + + 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(); + + const content = getChildrenEl(); + expect(content).toBeDefined(); + }); + + function getChildrenEl(): HTMLElement { + return screen.queryByTestId('test__children'); + } + + function getTogglerEl(): HTMLElement { + return screen.getByTestId('test__toggle'); + } +});