@zohodesk/dot 1.7.9 → 1.7.11

package/es/FlipCard/__tests__/FlipCard.spec.js

@@ -1,11 +1,615 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import FlipCard from "../FlipCard";
 describe('FlipCard', () => {
-  test('rendering the defult props', () => {
+  const palettes = ['primary', 'secondary', 'info', 'default'];
+  const textPalettes = ['white', 'black'];
+  const sizes = ['small', 'medium', 'large'];
+  test('renders with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(FlipCard, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders with id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      id: "unique-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with action', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      action: "incoming"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with initial', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      initial: "T"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with isChecked - true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      isChecked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with noNeedFlip - true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      noNeedFlip: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with noNeedFlip set to false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      noNeedFlip: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with noNeedFlip set to true and isChecked set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      noNeedFlip: true,
+      isChecked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with noNeedFlip set to false and isChecked set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      noNeedFlip: false,
+      isChecked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with noNeedFlip set to true and size variations', () => {
+    sizes.forEach(size => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(FlipCard, {
+        noNeedFlip: true,
+        size: size
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('renders with noNeedFlip set to false and size variations', () => {
+    sizes.forEach(size => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(FlipCard, {
+        noNeedFlip: false,
+        size: size
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('renders with noNeedFlip set to true and custom props', () => {
+    const customProps = {
+      CheckBoxProps: {
+        checked: true
+      },
+      ChannelIconProps: {
+        name: 'email'
+      },
+      AvatarIconProps: {
+        name: 'user-icon'
+      },
+      AvatarUserProps: {
+        isPaid: true
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      noNeedFlip: true,
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with noNeedFlip set to false and custom props', () => {
+    const customProps = {
+      CheckBoxProps: {
+        checked: true
+      },
+      ChannelIconProps: {
+        name: 'chat'
+      },
+      AvatarIconProps: {
+        name: 'user-icon'
+      },
+      AvatarUserProps: {
+        isPaid: false
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      noNeedFlip: false,
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders with size - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with channel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "Test Channel"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with isPaidUser - true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      isPaidUser: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with isPortalUser - true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      isPortalUser: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with src', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      src: "https://www.zoho.com/"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      icon: "ZD-chEmail"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with iconSize', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      iconSize: "medium"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with iconClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      iconClass: "icon-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with ticListContainer', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      ticListContainer: "container-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with ticList', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      ticList: "tic-list-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      dataId: "data-id-123"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      className: "custom-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('renders with palette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(textPalettes)('renders with textPalette - %s', textPalette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      textPalette: textPalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customTextClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customTextClass: "custom-text-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with frontClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      frontClass: "front-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with needTitle - true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      needTitle: true,
+      name: "channel"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with iconColor', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      iconColor: "primary"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with tourId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      tourId: "tour-123"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with isFilledCheckbox - true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      isFilledCheckbox: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with channelTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channelTitle: "Test Channel Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', () => {
+    const customProps = {
+      CheckBoxProps: {
+        checked: "isChecked"
+      },
+      ChannelIconProps: {
+        name: "channel"
+      },
+      AvatarIconProps: {
+        name: "icon"
+      },
+      AvatarUserProps: {
+        isPaid: "isPaidUser"
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with customProps for CheckBoxProps', () => {
+    const customProps = {
+      CheckBoxProps: {
+        checked: true
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with customProps for ChannelIconProps', () => {
+    const customProps = {
+      ChannelIconProps: {
+        name: "email"
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with customProps for AvatarIconProps', () => {
+    const customProps = {
+      AvatarIconProps: {
+        name: "user-icon"
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with customProps for AvatarUserProps', () => {
+    const customProps = {
+      AvatarUserProps: {
+        isPaid: true
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with customProps for multiple props', () => {
+    const customProps = {
+      CheckBoxProps: {
+        checked: true
+      },
+      ChannelIconProps: {
+        name: "chat"
+      },
+      AvatarIconProps: {
+        name: "user-icon"
+      },
+      AvatarUserProps: {
+        isPaid: false
+      }
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with channel: email and action: incoming', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "email",
+      action: "incoming"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with channel: chat and action: outgoing', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "chat",
+      action: "outgoing"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with channel: call and action: missed', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "call",
+      action: "missed"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with channel: social and action: incoming', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "social",
+      action: "incoming"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with channel: sms and action: outgoing', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "sms",
+      action: "outgoing"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with name and icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      name: "Test Name",
+      icon: "ZD-icon"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with name but without icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with needTitle set to true and name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      needTitle: true,
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with needTitle set to false and name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      needTitle: false,
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with needTitle set to true, icon, and name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      needTitle: true,
+      icon: "ZD-icon",
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with needTitle set to false, icon, and name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      needTitle: false,
+      icon: "ZD-icon",
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders correctly with size: %s and icon', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      size: size,
+      icon: "ZD-icon"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders correctly with size: %s and initial', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      size: size,
+      initial: "T"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders correctly with size: %s and src', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      size: size,
+      src: "https://www.zoho.com/"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders correctly with size: %s and name', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      size: size,
+      name: "Test Name"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with iconSize as a number', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      iconSize: 24
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with iconSize as a number and channel & action', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      iconSize: 32,
+      channel: "email",
+      action: "incoming"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with className, channel, and action', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      className: "custom-class",
+      channel: "email",
+      action: "incoming"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with palette, channel, and action', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      palette: "primary",
+      channel: "chat",
+      action: "outgoing"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with textPalette, channel, and action', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      textPalette: "white",
+      channel: "call",
+      action: "missed"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders correctly with customTextClass, channel, and action', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FlipCard, {
+      customTextClass: "custom-text-class",
+      channel: "social",
+      action: "incoming"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });