Skip to content

Commit

Permalink
test: add test coverage
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhmushtaha
muhmushtaha committed Sep 17, 2024
1 parent 6d0df96 commit 8028133
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 85 deletions.
12 changes: 11 additions & 1 deletion .github/workflows/deploy-github-pages.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,14 @@ jobs:
install_command: yarn install # default: npm ci
build_command: yarn build-storybook # default: npm run build-storybook
path: storybook-static # default: dist/storybook
checkout: false # default: true
checkout: false # default: true

# Install dependencies
- name: Install dependencies
run: npm ci
# Run tests
- name: Run tests
run: npx jest --coverage --coverageReporters json-summary
# Add Jest Coverage Comment
- name: Jest Coverage Comment
uses: MishaKav/jest-coverage-comment@main
190 changes: 122 additions & 68 deletions coverage/FacebookLoginButton.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">90% </span>
<span class="strong">90.38% </span>
<span class="quiet">Statements</span>
<span class='fraction'>45/50</span>
<span class='fraction'>47/52</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">55.88% </span>
<span class="strong">50% </span>
<span class="quiet">Branches</span>
<span class='fraction'>19/34</span>
<span class='fraction'>20/40</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>


<div class='fl pad1y space-right2'>
<span class="strong">88.09% </span>
<span class="strong">88.37% </span>
<span class="quiet">Lines</span>
<span class='fraction'>37/42</span>
<span class='fraction'>38/43</span>
</div>


Expand Down Expand Up @@ -276,7 +276,34 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
<a name='L211'></a><a href='#L211'>211</a>
<a name='L212'></a><a href='#L212'>212</a>
<a name='L213'></a><a href='#L213'>213</a>
<a name='L214'></a><a href='#L214'>214</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
<a name='L214'></a><a href='#L214'>214</a>
<a name='L215'></a><a href='#L215'>215</a>
<a name='L216'></a><a href='#L216'>216</a>
<a name='L217'></a><a href='#L217'>217</a>
<a name='L218'></a><a href='#L218'>218</a>
<a name='L219'></a><a href='#L219'>219</a>
<a name='L220'></a><a href='#L220'>220</a>
<a name='L221'></a><a href='#L221'>221</a>
<a name='L222'></a><a href='#L222'>222</a>
<a name='L223'></a><a href='#L223'>223</a>
<a name='L224'></a><a href='#L224'>224</a>
<a name='L225'></a><a href='#L225'>225</a>
<a name='L226'></a><a href='#L226'>226</a>
<a name='L227'></a><a href='#L227'>227</a>
<a name='L228'></a><a href='#L228'>228</a>
<a name='L229'></a><a href='#L229'>229</a>
<a name='L230'></a><a href='#L230'>230</a>
<a name='L231'></a><a href='#L231'>231</a>
<a name='L232'></a><a href='#L232'>232</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -376,6 +403,7 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -481,6 +509,13 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand All @@ -489,26 +524,27 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1x</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useEffect, useState } from 'react';
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useEffect, useState } from "react";
&nbsp;
interface Theme {
backgroundColor: string;
textColor: string;
hoverBackgroundColor: string;
}
&nbsp;
export interface FacebookLoginButtonProps {
interface FacebookLoginButtonProps {
/**
* The shape of the button. Can be 'rectangular' or 'circle'.
* @default 'rectangular'
*/
shape?: 'rectangular' | 'circle';
shape?: "rectangular" | "circle";
&nbsp;
/**
* The text direction. Can be 'ltr' or 'rtl'.
* @default 'ltr'
*/
direction?: 'ltr' | 'rtl';
direction?: "ltr" | "rtl";
&nbsp;
/**
* Custom text to display on the button.
Expand All @@ -526,7 +562,7 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
* Theme of the button. Choose from predefined themes or 'custom' to provide custom colors.
* @default 'blue'
*/
theme?: 'blue' | 'dark' | 'light' | 'custom';
theme?: "blue" | "dark" | "light" | "custom";
&nbsp;
/**
* Custom theme colors. Used only when theme is set to 'custom'.
Expand All @@ -536,7 +572,7 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
/**
* Function to call on successful login.
*/
onSuccess?: (response: fb.StatusResponse) =&gt; void;
onSuccess?: (response: StatusResponse) =&gt; void;
&nbsp;
/**
* Function to call on login failure.
Expand All @@ -547,70 +583,80 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
* Facebook App ID.
*/
appId: string;
&nbsp;
/**
* Permissions to request during login.
* @default 'public_profile,email'
*/
scope?: string;
}
&nbsp;
declare global {
namespace fb {
interface AuthResponse {
accessToken: string;
expiresIn: number;
data_access_expiration_time: number;
signedRequest: string;
userID: string;
}
export interface AuthResponse {
accessToken: string;
expiresIn: number;
data_access_expiration_time: number;
signedRequest: string;
userID: string;
}
&nbsp;
interface StatusResponse {
status: 'connected' | 'not_authorized' | 'unknown';
authResponse?: AuthResponse;
}
export interface StatusResponse {
status: "connected" | "not_authorized" | "unknown";
authResponse?: AuthResponse;
}
&nbsp;
type LoginStatusCallback = (response: StatusResponse) =&gt; void;
export type LoginStatusCallback = (response: StatusResponse) =&gt; void;
&nbsp;
interface FB {
init: (params: { appId: string; cookie?: boolean; xfbml?: boolean; version: string }) =&gt; void;
login: (callback: LoginStatusCallback, options?: { scope: string }) =&gt; void;
getLoginStatus: (callback: LoginStatusCallback) =&gt; void;
}
}
export interface FB {
init: (params: {
appId: string;
cookie?: boolean;
xfbml?: boolean;
version: string;
}) =&gt; void;
login: (callback: LoginStatusCallback, options?: { scope: string }) =&gt; void;
getLoginStatus: (callback: LoginStatusCallback) =&gt; void;
}
&nbsp;
declare global {
interface Window {
fbAsyncInit?: () =&gt; void;
FB?: fb.FB;
FB?: FB;
}
}
&nbsp;
const FacebookLoginButton: React.FC&lt;FacebookLoginButtonProps&gt; = ({
shape = 'rectangular'<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
direction = 'ltr'<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
text = 'Login with Facebook',
shape = "rectangular"<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
direction = "ltr"<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
text = "Login with Facebook",
style = {}<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
theme = 'blue'<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
theme = "blue"<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
customTheme = {}<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
onSuccess,
onFail,
appId,
scope = "public_profile,email"<span class="branch-1 cbranch-no" title="branch not covered" >,</span>
}) =&gt; {
const [sdkLoaded, setSdkLoaded] = useState(false);
&nbsp;
useEffect(() =&gt; {
// Load the Facebook SDK if it's not already loaded
if (!window.FB) {
window.fbAsyncInit = <span class="fstat-no" title="function not covered" >() =&gt; {</span>
(<span class="cstat-no" title="statement not covered" >window as any).FB.init({</span>
<span class="cstat-no" title="statement not covered" > window.FB?.init({</span>
appId: appId,
cookie: true,
xfbml: false,
version: 'v20.0',
version: "v20.0",
});
<span class="cstat-no" title="statement not covered" > setSdkLoaded(true);</span>
};
&nbsp;
// Load the SDK script
const script = document.createElement('script');
script.src = 'https://connect.facebook.net/en_US/sdk.js';
const script = document.createElement("script");
script.src = "https://connect.facebook.net/en_US/sdk.js";
script.async = true;
script.defer = true;
script.crossOrigin = 'anonymous';
script.crossOrigin = "anonymous";
document.body.appendChild(script);
} else {
setSdkLoaded(true);
Expand All @@ -620,14 +666,14 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
const handleClick = () =&gt; {
<span class="missing-if-branch" title="if path not taken" >I</span>if (!sdkLoaded || !window.FB) {
<span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (onFail) {</span>
<span class="cstat-no" title="statement not covered" > onFail(new Error('Facebook SDK not loaded.'));</span>
<span class="cstat-no" title="statement not covered" > onFail(new Error("Facebook SDK not loaded."));</span>
}
<span class="cstat-no" title="statement not covered" > return;</span>
}
&nbsp;
(window as any).FB.login(
(response: fb.StatusResponse) =&gt; {
if (response.status === 'connected') {
window.FB.login(
(response: StatusResponse) =&gt; {
if (response.status === "connected") {
if (onSuccess) {
onSuccess(response);
}
Expand All @@ -637,45 +683,45 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
}
}
},
{ scope: 'public_profile,email' }
{ scope },
);
};
&nbsp;
const shapeClasses: Record&lt;string, string&gt; = {
rectangular: 'rounded-md',
circle: 'rounded-full !p-2',
rectangular: "rounded-md",
circle: "rounded-full !p-2",
};
&nbsp;
const defaultThemes: Record&lt;string, Theme&gt; = {
blue: {
backgroundColor: 'bg-blue-600',
textColor: 'text-white',
hoverBackgroundColor: 'hover:bg-blue-700',
backgroundColor: "bg-blue-600",
textColor: "text-white",
hoverBackgroundColor: "hover:bg-blue-700",
},
dark: {
backgroundColor: 'bg-gray-800',
textColor: 'text-white',
hoverBackgroundColor: 'hover:bg-gray-900',
backgroundColor: "bg-gray-800",
textColor: "text-white",
hoverBackgroundColor: "hover:bg-gray-900",
},
light: {
backgroundColor: 'bg-white',
textColor: 'text-gray-800',
hoverBackgroundColor: 'hover:bg-gray-100',
backgroundColor: "bg-white",
textColor: "text-gray-800",
hoverBackgroundColor: "hover:bg-gray-100",
},
};
&nbsp;
const currentTheme: Theme =
theme === 'custom'
theme === "custom"
? <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
backgroundColor: customTheme.backgroundColor || '',
textColor: customTheme.textColor || '',
hoverBackgroundColor: customTheme.hoverBackgroundColor || '',
backgroundColor: customTheme.backgroundColor || "",
textColor: customTheme.textColor || "",
hoverBackgroundColor: customTheme.hoverBackgroundColor || "",
}
: defaultThemes[theme];
&nbsp;
const buttonClasses = `
flex items-center justify-center
${direction === 'rtl' ? <span class="branch-0 cbranch-no" title="branch not covered" >'flex-row-reverse' </span>: ''}
${direction === "rtl" ? <span class="branch-0 cbranch-no" title="branch not covered" >"flex-row-reverse" </span>: ""}
${shapeClasses[shape]}
${currentTheme.backgroundColor}
${currentTheme.textColor}
Expand All @@ -684,7 +730,14 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
`;
&nbsp;
const icon = (
&lt;svg width="36" height="36" viewBox="0 0 48 48" version="1.1" id="Shopicons" fill="currentColor" &gt;
&lt;svg
width="36"
height="36"
viewBox="0 0 48 48"
version="1.1"
id="Shopicons"
fill="currentColor"
&gt;
&lt;g id="SVGRepo_iconCarrier"&gt;
&lt;g id="facebook"&gt;
&lt;path d="M0 0h48v48H0V0z" fill="none" /&gt;
Expand All @@ -697,19 +750,20 @@ <h1><a href="index.html">All files</a> FacebookLoginButton.tsx</h1>
return (
&lt;button onClick={handleClick} className={buttonClasses} style={style}&gt;
{icon}
{shape !== 'circle' &amp;&amp; &lt;span className="mx-2"&gt;{text}&lt;/span&gt;}
{shape !== "circle" &amp;&amp; &lt;span className="mx-2"&gt;{text}&lt;/span&gt;}
&lt;/button&gt;
);
};
&nbsp;
export default FacebookLoginButton;</pre></td></tr></table></pre>
export default FacebookLoginButton;
&nbsp;</pre></td></tr></table></pre>

<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-13T14:48:47.350Z
at 2024-09-17T16:56:13.391Z
</div>
<script src="prettify.js"></script>
<script>
Expand Down
Loading

0 comments on commit 8028133

Please sign in to comment.