@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/Avatar/__tests__/Avatar.spec.js

@@ -1,161 +1,181 @@
 import React from 'react';
-import Avatar from '../Avatar';
-import renderer from 'react-test-renderer';
-let avatarURL = 'avatar.jpg';
-describe('Avatar component', () => {
-  it('should display initial', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display avatar image and initial while avatar loading...', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display initial if invalid url', () => {
-    Avatar.invalidImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display image valid url', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is default', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      palette: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is secondary', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      palette: "secondary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is info', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      palette: "info"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the shape is square', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      shape: "square"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is small', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      size: "square"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is xsmall', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      size: "xsmall"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is xmedium', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      size: "xmedium"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is large', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      size: "large"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is xlarge', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      size: "xlarge"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should have title', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      title: "Sample Title"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should no need title', () => {
-    Avatar.invalidImageURLs.length = 0;
-    Avatar.validImageURLs.push(avatarURL);
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Avatar, {
-      name: "vimalesan a",
-      src: avatarURL,
-      needTitle: false
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
+import { render } from '@testing-library/react';
+import Avatar from '../Avatar.js';
+describe('Avatar', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['primary', 'secondary', 'info', 'default'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const shape = ['circle', 'square'];
+  test.each(shape)('rendering the shape of- %s', shape => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      shape: shape
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'];
+  test.each(size)('rendering the size of- %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const textPalette = ['white', 'black'];
+  test.each(textPalette)('rendering the size of- %s', textPalette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      textPalette: textPalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering src', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      name: "AvatarName"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering Name in 2 Word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      name: "Gowtham Kathirvel"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      title: "AvatarNameTitile"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      needTitle: true,
+      title: "AvatarNameTitile"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering initial', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      initial: "AvatarTeam"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering NeedBorder false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering BorderOnActive true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      borderOnActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering borderOnHover true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      borderOnHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      customClass: "customClassAvatar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering alternateSrc', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      showAlternateAvatar: true,
+      alternateSrc: "https://www.w3schools.com/css/img_5terre.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering showAlternateAvatar is enabled border get disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      showAlternateAvatar: true,
+      alternateSrc: "https://www.w3schools.com/css/img_5terre.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isAnimate is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isAnimate: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needInnerBorder is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isAnimate: false,
+      needInnerBorder: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering showDefaultBorder is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isInvalidImageList: false,
+      needDefaultBorder: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      customProps: {
+        AvatarProps: {
+          'data-avatar': true
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });