Skip to content

Commit

Permalink
add tests and fix accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
vraja-pro committed Jan 21, 2025
1 parent 2f3bf02 commit a952648
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -96,27 +96,39 @@ export const GoogleSiteKitConnectionWidget = ( {
{ label: __( "SET UP", "wordpress-seo" ) },
{ label: __( "CONNECT", "wordpress-seo" ) },
];
const [ open, toggleOpen ] = useToggleState( false );
const [ isMenuOpen, toggleMenuOpen ] = useToggleState( false );
const linkParams = useSelect( select => select( "@yoast/general" ).selectLinkParams(), [] );
const learnMorelink = addQueryArgs( "https://yoa.st/google-site-kit-learn-more", linkParams );

const { buttonProps, currentStep, isComplete } = getButtonAndStepperProps(
active, installed, setup, connected, installUrl, activateUrl, setupUrl );
return <Paper className="yst-@container yst-grow yst-max-w-screen-sm yst-p-8 yst-shadow-md yst-relative">

<DotsVerticalIcon
className={ classNames( "yst-cursor-pointer yst-h-4 yst-absolute yst-top-4 yst-end-4 hover:yst-text-slate-600",
open ? "yst-text-slate-600" : "yst-text-slate-400"
) } onClick={ toggleOpen }
/>
{ open && <div className="yst-w-56 yst-rounded-md yst-border yst-border-slate-200 yst-shadow-sm yst-bg-white yst-absolute yst-top-10 yst-end-4">
<button className="yst-text-slate-600 yst-py-2 yst-border-b yst-border-slate-200 yst-flex yst-justify-start yst-gap-2 yst-px-4" onClick={ onRemove }>
<XIcon className="yst-w-4 yst-text-slate-400" />
{ __( "Remove until next visit", "wordpress-seo" ) }</button>
<button className="yst-text-red-500 yst-py-2 yst-flex yst-justify-start yst-gap-2 yst-px-4" onClick={ onRemovePermanently }>
<TrashIcon className="yst-w-4" />
{ __( "Remove permanently", "wordpress-seo" ) }</button>
</div> }
<button
aria-haspopup="true"
aria-expanded={ isMenuOpen }
aria-controls="menu"
onClick={ toggleMenuOpen }
className="yst-absolute yst-top-4 yst-end-4"
>
<DotsVerticalIcon
className={ classNames( "yst-h-4 hover:yst-text-slate-600",
isMenuOpen ? "yst-text-slate-600" : "yst-text-slate-400"
) }
/>
<span className="yst-sr-only">{ __( "Open menu", "wordpress-seo" ) }</span>
</button>
{ isMenuOpen && <ul role="menu" className="yst-w-56 yst-rounded-md yst-border yst-border-slate-200 yst-shadow-sm yst-bg-white yst-absolute yst-top-10 yst-end-4">
<li role="menuitem" className="yst-border-b yst-border-slate-200">
<button className="yst-text-slate-600 yst-py-2 yst-flex yst-justify-start yst-gap-2 yst-px-4 yst-items-center" onClick={ onRemove }>
<XIcon className="yst-w-4 yst-text-slate-400" />
{ __( "Remove until next visit", "wordpress-seo" ) }</button>
</li>
<li role="menuitem">
<button className="yst-text-red-500 yst-py-2 yst-flex yst-justify-start yst-items-center yst-gap-2 yst-px-4" onClick={ onRemovePermanently }>
<TrashIcon className="yst-w-4" />
{ __( "Remove permanently", "wordpress-seo" ) }</button>
</li>
</ul> }

<div className="yst-flex yst-justify-center yst-mb-6 yst-mt-4"><YoastConnectSiteKit /></div>
<Stepper steps={ steps } currentStep={ currentStep } isComplete={ isComplete } />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { render, screen, fireEvent } from "@testing-library/react";
import { GoogleSiteKitConnectionWidget } from "../../../src/dashboard/components/google-site-kit-connection-widget";

jest.mock( "@wordpress/data", () => ( {
useSelect: jest.fn( () => [] ),
} ) );

describe( "GoogleSiteKitConnectionWidget", () => {
const defaultProps = {
installUrl: "https://example.com/install",
activateUrl: "https://example.com/activate",
setupUrl: "https://example.com/setup",
connected: false,
active: false,
setup: false,
installed: false,
onRemove: jest.fn(),
onRemovePermanently: jest.fn(),
};

it( "renders the widget with install button", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } /> );
expect( screen.getByText( "Install Site Kit by Google" ) ).toBeInTheDocument();
} );

it( "renders the widget with activate button", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } installed={ true } /> );
expect( screen.getByText( "Activate Site Kit by Google" ) ).toBeInTheDocument();
} );

it( "renders the widget with setup button", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } installed={ true } active={ true } /> );
expect( screen.getByText( "Set up Site Kit by Google" ) ).toBeInTheDocument();
} );

it( "renders the widget with connect button", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } installed={ true } active={ true } setup={ true } /> );
expect( screen.getByText( "Connect Site Kit by Google" ) ).toBeInTheDocument();
} );

it( "renders the widget with dismiss button when connected", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } installed={ true } active={ true } setup={ true } connected={ true } /> );
expect( screen.getByText( "Dismiss" ) ).toBeInTheDocument();
} );

it( "opens the menu and calls onRemove when 'Remove until next visit' is clicked", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } /> );
fireEvent.click( screen.getByRole( "button", { name: /open menu/i } ) );
fireEvent.click( screen.getByText( "Remove until next visit" ) );
expect( defaultProps.onRemove ).toHaveBeenCalled();
} );

it( "opens the menu and calls onRemovePermanently when 'Remove permanently' is clicked", () => {
render( <GoogleSiteKitConnectionWidget { ...defaultProps } /> );
fireEvent.click( screen.getByRole( "button", { name: /open menu/i } ) );
fireEvent.click( screen.getByText( "Remove permanently" ) );
expect( defaultProps.onRemovePermanently ).toHaveBeenCalled();
} );
} );

0 comments on commit a952648

Please sign in to comment.