@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
615 lines • 17.1 kB
JavaScript
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import FlipCard from "../FlipCard";
describe('FlipCard', () => {
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();
});
});