testing library

grafana-plugin/package.json

@@ -55,21 +55,32 @@
     "@grafana/runtime": "^9.1.1",
     "@grafana/toolkit": "^9.1.1",
     "@grafana/ui": "^9.1.1",
+    "@jest/globals": "^27.5.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "12",
     "@types/dompurify": "^2.3.4",
+    "@types/jest": "^27.5.1",
     "@types/lodash-es": "^4.17.6",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.6",
     "@types/react-responsive": "^8.0.5",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "17.0.2",
     "@types/throttle-debounce": "^5.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "dompurify": "^2.3.12",
     "eslint-plugin-rulesdir": "^0.2.1",
+    "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.3.1",
+    "jest-environment-jsdom": "^27.5.1",
+    "jest-junit": "^13.1.0",
     "lint-staged": "^10.2.11",
     "lodash-es": "^4.17.21",
     "moment-timezone": "^0.5.35",
     "plop": "^2.7.4",
     "postcss-loader": "^7.0.1",
+    "react-test-renderer": "^17.2.0",
+    "ts-jest": "^27.1.3",
     "ts-loader": "^9.3.1",
     "webpack-bundle-analyzer": "^4.6.1"
   },

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

@@ -19,7 +19,7 @@ const Avatar: FC<AvatarProps> = (props) => {
     return null;
   }
 
-  return <img src={src} className={cx('root', `avatarSize-${size}`, className)} {...rest} />;
+  return <img src={src} className={cx('root', `avatarSize-${size}`, className)} data-testid="test__avatar" {...rest} />;
 };
 
 export default Avatar;

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

@@ -0,0 +1,34 @@
+import { describe, expect, test } from '@jest/globals';
+import { render, fireEvent, screen } from '@testing-library/react';
+
+import Avatar from 'components/Avatar/Avatar';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+const MAX_PRINT = 1000000;
+
+describe('Text', () => {
+  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);
+  });
+
+  test("Avatar's image points to given src attribute", async () => {
+    render(<Avatar size={avatarSizeLarge} src={avatarSrc} />);
+    const imageEl = await screen.findByTestId<HTMLImageElement>('test__avatar');
+    expect(imageEl.src).toBe(avatarSrc);
+  });
+
+  test('Avatar appends sizing class', async () => {
+    render(<Avatar size={avatarSizeSmall} src={avatarSrc} />);
+    const imageEl = await screen.findByTestId<HTMLImageElement>('test__avatar');
+    expect(imageEl.classList).toContain(`avatarSize-${avatarSizeSmall}`);
+  });
+});