@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
491 lines • 14.8 kB
JavaScript
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
import Onboarding from "../Onboarding";
beforeEach(() => {
setGlobalId(0);
});
afterEach(() => {
cleanup();
});
describe('Onboarding', () => {
test('rendering the defult props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, null));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of hasCloseIcon', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasCloseIcon: true,
onClose: () => {}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without hasCloseIcon', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasCloseIcon: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering prop of ribbonText', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasRibbon: true,
ribbonText: "closed"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the prop of hasRibbon is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasRibbon: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with customStyle', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
customStyle: {
mainContainer: "customMainContainer"
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of sliderData with heading and description', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "slide1",
heading: "Onboarding Heading",
description: "Onboarding Description"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of sliderData with image ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of image with hasVideoPlayButton ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasVideoPlayButton: true,
imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",
videoLookupSource: {
link: 'https://static.videezy.com/system/resources/previews/000/043/458/original/30_strings.mp4',
format: 'mp4'
}
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of image without hasVideoPlayButton', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasVideoPlayButton: false,
imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of videoSource ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
videoSource: {
link: 'https://www.w3schools.com/html/mov_bbb.mp4',
format: 'mp4'
}
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of primaryButtonText', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasPrimaryButton: true,
primaryButtonText: "Got it"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without primaryButtonText', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasPrimaryButton: false
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of secondaryButtonText', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasSecondaryButton: true,
secondaryButtonText: "read more"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without secondaryButtonText', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasSecondaryButton: false
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of SecondaryButton as link', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasSecondaryButton: true,
hasSecondaryButtonLink: true,
secondaryButtonText: "read more",
secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without SecondaryButton as link', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
hasSecondaryButton: true,
hasSecondaryButtonLink: false,
secondaryButtonText: "read more"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for primarybuttonprops ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "visibility",
hasPrimaryButton: true
}],
customProps: {
primaryButtonProps: {
text: "New primaryButton text "
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of two sliderData', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: 'slide 1',
heading: "Onboarding with carousel Slide 1"
}, {
tabName: 'slide 2',
heading: "Onboarding with carousel Slide 2"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of hasBouncAnimationOnMount', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasBouncAnimationOnMount: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without hasBouncAnimationOnMount', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasBouncAnimationOnMount: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering with customId', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
customId: "radar_onboarding",
ribbonText: "new",
hasCloseIcon: true,
sliderData: [{
tabName: "video",
primaryButtonText: "Got It",
secondaryButttonText: "learn more",
hasPrimaryButton: true,
hasSecondaryButton: true,
hasVideoPlayButton: true,
videoSource: {
link: 'https://www.w3schools.com/html/mov_bbb.mp4',
format: 'mp4'
},
heading: "Video source",
description: "Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface."
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering with customId - hasSecondaryButtonLink ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
customId: "radar_onboarding",
ribbonText: "new",
hasCloseIcon: true,
sliderData: [{
tabName: "visibility",
secondaryButtonText: "learn more",
hasSecondaryButtonLink: true,
secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001",
hasSecondaryButton: true
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering with testId', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
testId: "radar_onboarding",
ribbonText: "new",
hasCloseIcon: true,
sliderData: [{
tabName: "video",
hasVideoPlayButton: true
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of Video with videoFormats', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
videoFormats: ['webm', 'mp4', 'ogg'],
sliderData: [{
hasVideoPlayButton: true,
videoSource: {
link: 'https://www.w3schools.com/html/mov_bbb.mp4',
format: 'mp4'
},
videoLookupSource: {
link: 'https://www.w3schools.com/html/mov_bbb.mp4',
format: 'mp4'
}
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with hasExpandedButton by hasSecondaryButton, hasSecondaryButtonLink as true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasExpandedButton: true,
sliderData: [{
hasSecondaryButton: true,
hasSecondaryButtonLink: true,
secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001"
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with hasExpandedButton - hasSecondaryButton as true, hasSecondaryButtonLink as false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasExpandedButton: true,
sliderData: [{
hasSecondaryButton: true,
hasSecondaryButtonLink: false
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without hasExpandedButton', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasExpandedButton: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for Secondarybuttonprops ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "visibility",
hasSecondaryButton: true
}],
customProps: {
secondaryButtonProps: {
text: "New secondaryButton text"
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for secondaryButtonLinkProps ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "visibility",
secondaryButtonText: "learn more",
hasSecondaryButtonLink: true,
secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001",
hasSecondaryButton: true
}],
customProps: {
secondaryButtonLinkProps: {
target: '_self'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for ribbonProps ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
hasRibbon: true,
customProps: {
ribbonProps: {
type: "sticker"
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for footerProps ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
customProps: {
footerProps: {
$ui_displayMode: 'inline'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for headingProps ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "heading",
heading: "Slide 6"
}],
customProps: {
headingProps: {
$ui_size: '12'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data of customprops for descriptionProps ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "description",
description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
}],
customProps: {
descriptionProps: {
$ui_size: '10'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with mediaElement', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
sliderData: [{
tabName: "description",
description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.",
mediaElement: /*#__PURE__*/React.createElement("div", null, "Custom Element")
}]
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with tagAttributes', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
tagAttributes: {
'data-scroll': true
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with a11yAttributes', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
a11yAttributes: {
'data-a11y-focus': true
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with closeIconTooltip', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
closeIconTooltip: "escape"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data with position - absolute', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
position: "absolute"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering data without isDraggable', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Onboarding, {
isDraggable: false
}));
expect(asFragment()).toMatchSnapshot();
});
});