diff --git a/README.md b/README.md index 4d7b6d2..de618b3 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ # React Twitter Embed Component -[![NPM](https://img.shields.io/npm/v/react-twitter-embed.svg)](https://www.npmjs.com/package/react-twitter-embed) [![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](https://saurabhnemade.github.io/react-twitter-embed/) [![Build Status](https://travis-ci.org/saurabhnemade/react-twitter-embed.svg?branch=storybook-migration)](https://travis-ci.org/saurabhnemade/react-twitter-embed) [![Known Vulnerabilities](https://snyk.io/test/github/saurabhnemade/react-twitter-embed/badge.svg)](https://snyk.io/test/github/saurabhnemade/react-twitter-embed) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/saurabhnemade/react-twitter-embed/master/LICENSE) - +[![NPM](https://img.shields.io/npm/v/react-twitter-embed.svg)](https://www.npmjs.com/package/react-twitter-embed) [![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](https://saurabhnemade.github.io/react-twitter-embed/) [![Build and Publish to GH pages](https://github.com/saurabhnemade/react-twitter-embed/actions/workflows/deploy.yml/badge.svg)](https://github.com/saurabhnemade/react-twitter-embed/actions/workflows/deploy.yml) [![Known Vulnerabilities](https://snyk.io/test/github/saurabhnemade/react-twitter-embed/badge.svg)](https://snyk.io/test/github/saurabhnemade/react-twitter-embed) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/saurabhnemade/react-twitter-embed/master/LICENSE) React Twitter Embed Component diff --git a/src/components/TwitterMomentShare.tsx b/src/components/TwitterMomentShare.tsx index 101b718..6ced7d4 100644 --- a/src/components/TwitterMomentShare.tsx +++ b/src/components/TwitterMomentShare.tsx @@ -32,7 +32,7 @@ export interface TwitterMomentShareProps { const methodName = 'createMoment'; -const TwitterMomentShare = (props: TwitterMomentShareProps) => { +const TwitterMomentShare = (props: TwitterMomentShareProps): any => { const ref = React.useRef(null); const [loading, setLoading] = React.useState(true); diff --git a/src/components/useTwitterEvents.ts b/src/components/useTwitterEvents.ts new file mode 100644 index 0000000..2ce0c31 --- /dev/null +++ b/src/components/useTwitterEvents.ts @@ -0,0 +1,57 @@ +import React from 'react'; +import twitterWidgetJs from './twiter-widget-url'; + +interface UseEventsProps { + loaded?: (event: { widgets: any }) => void; + rendered?: (event: { target: any }) => void; + tweet?: (event: any) => void; + follow?: (event: { data: any }) => void; + retweet?: (event: { data: any }) => void; + like?: (event: { data: any }) => void; + click?: (intentEvent: any) => void; +} + +const useTwitterEvents = (props: UseEventsProps): void => { + React.useEffect(() => { + const script = require('scriptjs'); + script(twitterWidgetJs, 'twitter-embed', () => { + if (props.loaded && typeof props.loaded === 'function') { + window.twttr.events.bind('loaded', props.loaded); + } + + if (props.rendered && typeof props.rendered === 'function') { + window.twttr.events.bind('rendered', props.rendered); + } + + if (props.tweet && typeof props.tweet === 'function') { + window.twttr.events.bind('tweet', props.tweet); + } + + if (props.follow && typeof props.follow === 'function') { + window.twttr.events.bind('follow', props.follow); + } + + if (props.retweet && typeof props.retweet === 'function') { + window.twttr.events.bind('retweet', props.retweet); + } + + if (props.like && typeof props.like === 'function') { + window.twttr.events.bind('like', props.like); + } + + if (props.click && typeof props.click === 'function') { + window.twttr.events.bind('click', props.click); + } + }); + }, [ + props.loaded, + props.rendered, + props.tweet, + props.follow, + props.retweet, + props.like, + props.click + ]); +}; + +export default useTwitterEvents; diff --git a/src/tests/cypress/components/TwitterEvents.spec.tsx b/src/tests/cypress/components/TwitterEvents.spec.tsx new file mode 100644 index 0000000..377cb76 --- /dev/null +++ b/src/tests/cypress/components/TwitterEvents.spec.tsx @@ -0,0 +1,91 @@ +import { + TwitterDMButton, + TwitterFollowButton, + TwitterTweetEmbed +} from '../../../index'; +import React from 'react'; +import useTwitterEvents from '../../../components/useTwitterEvents'; +import { mount } from '@cypress/react'; + +const RenderEventTweetDMButton = ({ name, fn }: { name: string; fn: any }) => { + useTwitterEvents({ + [name]: fn + }); + return ; +}; + +const RenderEventTwitterFollowButton = ({ + name, + fn +}: { + name: string; + fn: any; +}) => { + useTwitterEvents({ + [name]: fn + }); + return ; +}; + +const RenderEventTwitterTweet = ({ name, fn }: { name: string; fn: any }) => { + useTwitterEvents({ + [name]: fn + }); + return ; +}; + +describe('Twitter Events', () => { + it('loaded event test', () => { + const callback = cy.stub(); + mount(); + cy.wait(4000); + cy.waitUntil(() => expect(callback.callCount).to.eq(1)); + }); + + it('rendered event test', () => { + const callback = cy.stub(); + mount(); + cy.wait(4000); + cy.waitUntil(() => expect(callback.callCount).to.eq(1)); + }); + + it('follow event test', () => { + const callback = cy.stub(); + mount(); + cy.wait(4000); + cy.getIframeBody().getIframeBody().click(); + cy.waitUntil(() => expect(callback.callCount).to.eq(1)); + }); + + it('like event test', () => { + const callback = cy.stub(); + mount(); + cy.wait(4000); + cy.getIframeBody().then((el: any) => { + const likeBtn: any = Array.from( + el[0] + .querySelector('[role="article"]') + .querySelectorAll('[role="link"]') + ).find((elm: any) => elm.textContent === '1.6K'); + likeBtn.click(); + cy.wait(4000); + cy.waitUntil(() => expect(callback.callCount).to.eq(1)); + }); + }); + + it('click event test', () => { + const callback = cy.stub(); + mount(); + cy.wait(4000); + cy.getIframeBody().then((el: any) => { + const likeBtn: any = Array.from( + el[0] + .querySelector('[role="article"]') + .querySelectorAll('[role="link"]') + ).find((elm: any) => elm.textContent === '1.6K'); + likeBtn.click(); + cy.wait(4000); + cy.waitUntil(() => expect(callback.callCount).to.eq(1)); + }); + }); +});