[WIP]: Adding events for twitter

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
 

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<HTMLDivElement | null>(null);
   const [loading, setLoading] = React.useState(true);
 

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;

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 <TwitterDMButton id={1364031673} />;
+};
+
+const RenderEventTwitterFollowButton = ({
+  name,
+  fn
+}: {
+  name: string;
+  fn: any;
+}) => {
+  useTwitterEvents({
+    [name]: fn
+  });
+  return <TwitterFollowButton screenName='saurabhnemade' />;
+};
+
+const RenderEventTwitterTweet = ({ name, fn }: { name: string; fn: any }) => {
+  useTwitterEvents({
+    [name]: fn
+  });
+  return <TwitterTweetEmbed tweetId='933354946111705097' />;
+};
+
+describe('Twitter Events', () => {
+  it('loaded event test', () => {
+    const callback = cy.stub();
+    mount(<RenderEventTweetDMButton name='loaded' fn={callback} />);
+    cy.wait(4000);
+    cy.waitUntil(() => expect(callback.callCount).to.eq(1));
+  });
+
+  it('rendered event test', () => {
+    const callback = cy.stub();
+    mount(<RenderEventTweetDMButton name='rendered' fn={callback} />);
+    cy.wait(4000);
+    cy.waitUntil(() => expect(callback.callCount).to.eq(1));
+  });
+
+  it('follow event test', () => {
+    const callback = cy.stub();
+    mount(<RenderEventTwitterFollowButton name='follow' fn={callback} />);
+    cy.wait(4000);
+    cy.getIframeBody().getIframeBody().click();
+    cy.waitUntil(() => expect(callback.callCount).to.eq(1));
+  });
+
+  it('like event test', () => {
+    const callback = cy.stub();
+    mount(<RenderEventTwitterTweet name='like' fn={callback} />);
+    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(<RenderEventTwitterTweet name='click' fn={callback} />);
+    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));
+    });
+  });
+});