chore(Avatar) update tests to new standarts (#7829)

dominik-petrik · web-flow · commit d20245fe40ae · 2022-09-01T13:24:20.000-04:00
* chore(Avatar) update tests to new standarts

* add more tests

* fix querying components
diff --git a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
@@ -1,8 +1,74 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Avatar } from '../Avatar';
 
-test('simple avatar', () => {
-  const { asFragment } = render(<Avatar alt="avatar" src="test.png" border="light" />);
+test('Renders simple avatar', () => {
+  render(
+    <div data-testid="avatar">
+      <Avatar alt="avatar" />
+    </div>
+  );
+  expect(screen.getByTestId('avatar').firstChild).toBeVisible();
+});
+
+test('Renders without any modifier class when border and size props are not passed', () => {
+  render(<Avatar alt="avatar" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-c-avatar', { exact: true });
+});
+
+test('Renders with class name pf-m-light when "light" is passed as border prop', () => {
+  render(<Avatar alt="avatar" border="light" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-light');
+});
+
+test('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
+  render(<Avatar alt="avatar" border="dark" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
+});
+
+test('Renders with class name pf-m-xl when "xl" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="xl" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-xl');
+});
+
+test('Renders with class name pf-m-lg when "lg" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="lg" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-lg');
+});
+
+test('Renders with class name pf-m-md when "md" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="md" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-md');
+});
+
+test('Renders with class name pf-m-sm when "sm" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="sm" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-sm');
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Avatar alt="avatar" className="test-class" />);
+  expect(screen.getByRole('img')).toHaveClass('test-class');
+});
+
+test('Renders with passed src prop', () => {
+  render(<Avatar alt="avatar" src="test.png" />);
+  const image = screen.getByRole('img') as HTMLImageElement;
+  expect(image.src).toMatch('test.png');
+});
+
+test('Renders with passed alt prop', () => {
+  render(<Avatar alt="avatar" />);
+  expect(screen.getByRole('img')).toHaveProperty('alt', 'avatar');
+});
+
+test('Renders with passed aria-label prop', () => {
+  render(<Avatar alt="avatar" aria-label="Avatar test" />);
+  expect(screen.getByRole('img')).toHaveAccessibleName('Avatar test');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Avatar alt="avatar" aria-label="Avatar test" src="test.png" className="test-class" />);
+
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/react-core/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`simple avatar 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <img
     alt="avatar"
-    class="pf-c-avatar pf-m-light"
+    aria-label="Avatar test"
+    class="pf-c-avatar test-class"
     src="test.png"
   />
 </DocumentFragment>
