update tests

fkhadra · Nov 10, 2022 · 0242570 · 0242570
1 parent 5082f6d
commit 0242570
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 14 deletions.
diff --git a/cypress/e2e/keyboard-navigation.spec.ts → cypress/e2e/keyboard.spec.ts b/cypress/e2e/keyboard-navigation.spec.ts → cypress/e2e/keyboard.spec.ts
@@ -1,6 +1,6 @@
 import { DATA_TEST } from '../../example/constants';
 
-describe('Context menu', () => {
+describe('Context menu keyboard interaction', () => {
   beforeEach(() => {
     cy.visit('/');
   });
@@ -70,4 +70,23 @@ describe('Context menu', () => {
     cy.get('body').type('{leftarrow}');
     cy.focused().should('have.attr', 'data-test', DATA_TEST.SUBMENU);
   });
+
+  it('Should handle keyboard shortcut', () => {
+    cy.getByDataTest(DATA_TEST.CONTEXT_MENU_TRIGGER).rightclick();
+
+    cy.get('body').type('{ctrl}{u}');
+    cy.wait(500);
+    cy.getByDataTest(DATA_TEST.KDB_SHORTCUT).then((el) => {
+      expect(el.text()).eq('ctrl+u');
+    });
+
+    // nested shortcut
+    cy.getByDataTest(DATA_TEST.CONTEXT_MENU_TRIGGER).rightclick();
+
+    cy.get('body').type('{ctrl}{s}');
+    cy.wait(500);
+    cy.getByDataTest(DATA_TEST.KDB_SHORTCUT).then((el) => {
+      expect(el.text()).eq('ctrl+s');
+    });
+  });
 });
diff --git a/example/components/App.tsx b/example/components/App.tsx
@@ -49,6 +49,7 @@ interface SelectorState {
   customPosition: boolean;
   disableEnterAnimation: boolean;
   disableExitAnimation: boolean;
+  kbdShortcut: string;
 }
 
 function selectorReducer(
@@ -82,6 +83,7 @@ export function App() {
     customPosition: false,
     disableEnterAnimation: false,
     disableExitAnimation: false,
+    kbdShortcut: '',
   });
   const [payload, setPayload] = React.useState({
     x: 0,
@@ -222,6 +224,13 @@ export function App() {
           </span>
         </div>
       </section>
+      <section>
+        <h3>Keyboard shortcut</h3>
+        <div>
+          <span>Shortcut triggered: </span>
+          <span data-test={DATA_TEST.KDB_SHORTCUT}>{state.kbdShortcut}</span>
+        </div>
+      </section>
       <section>
         <div
           className="box"
@@ -242,9 +251,6 @@ export function App() {
           data={{ id: 1 }}
           data-test={DATA_TEST.MENU_FIRST_ITEM}
           hidden={state.hideItems}
-          keyMatcher={(e) => {
-            return e.metaKey && e.key == 'c';
-          }}
         >
           Item 1<RightSlot>⌘C</RightSlot>
         </Item>
@@ -254,7 +260,18 @@ export function App() {
         >
           Item 2
         </Item>
-        <Item>Item 3</Item>
+        <Item
+          onClick={() => {
+            setState({
+              kbdShortcut: 'ctrl+u',
+            });
+          }}
+          keyMatcher={(e: KeyboardEvent) => {
+            return e.ctrlKey && e.key == 'u';
+          }}
+        >
+          Item 3
+        </Item>
         <Item disabled data-test={DATA_TEST.DISABLED_ITEM_VIA_BOOLEAN}>
           Disabled
         </Item>
@@ -270,7 +287,18 @@ export function App() {
           <Item data-test={DATA_TEST.SUBMENU_FIRST_ITEM}>Submenu Item 1</Item>
           <Item>Submenu Item 2</Item>
           <Separator />
-          <Item>Submenu Item 3</Item>
+          <Item
+            onClick={() => {
+              setState({
+                kbdShortcut: 'ctrl+s',
+              });
+            }}
+            keyMatcher={(e: KeyboardEvent) => {
+              return e.ctrlKey && e.key == 's';
+            }}
+          >
+            Submenu Item 3
+          </Item>
           <Item>Submenu Item 4</Item>
           <Submenu label="Nested Submenu" data-test={DATA_TEST.NESTED_SUBMENU}>
             <Item data-test={DATA_TEST.NESTED_SUBMENU_FIRST_ITEM}>

diff --git a/example/constants.ts b/example/constants.ts
@@ -21,4 +21,5 @@ export const enum DATA_TEST {
   SUBMENU_FIRST_ITEM = 'submenu-firt-item',
   NESTED_SUBMENU_FIRST_ITEM = 'nested-submenu-firt-item',
   ONCLICK_PAYLOAD = 'item-payload',
+  KDB_SHORTCUT = "kbd-shortcut"
 }
diff --git a/scss/_themes.scss b/scss/_themes.scss
@@ -9,4 +9,5 @@
   --contexify-item-color: #666;
   --contexify-activeItem-color: #3498db;
   --contexify-activeItem-bgColor: #e0eefd; 
+  --contexify-activeRightSlot-color: #3498db;
 }
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -135,7 +135,7 @@ export const Item: React.FC<ItemProps> = ({
   handlerEvent = 'onClick',
   ...rest
 }) => {
-  const nodeRef = useRef<HTMLElement>();
+  const itemNode = useRef<HTMLElement>();
   const itemTracker = useItemTrackerContext();
   const handlerParams = {
     id,
@@ -157,7 +157,7 @@ export const Item: React.FC<ItemProps> = ({
 
   // provide a feedback to the user that the item has been clicked before closing the menu
   function dispatchUserHanlder() {
-    const node = nodeRef.current!;
+    const node = itemNode.current!;
     node.focus();
     node.addEventListener('animationend', contextMenu.hideAll, { once: true });
     node.classList.add(CssClass.itemClickedFeedback);
@@ -166,7 +166,7 @@ export const Item: React.FC<ItemProps> = ({
 
   function registerItem(node: HTMLElement | null) {
     if (node && !isDisabled) {
-      nodeRef.current = node;
+      itemNode.current = node;
       itemTracker.set(node, {
         node,
         isSubmenu: false,
@@ -176,6 +176,7 @@ export const Item: React.FC<ItemProps> = ({
           ((e: KeyboardEvent) => {
             if (keyMatcher(e)) {
               e.stopPropagation();
+              handlerParams.event = e;
               dispatchUserHanlder();
             }
           }),

diff --git a/src/components/Submenu.tsx b/src/components/Submenu.tsx
@@ -55,7 +55,7 @@ export const Submenu: React.FC<SubMenuProps> = ({
 }) => {
   const parentItemTracker = useItemTrackerContext();
   const itemTracker = useItemTracker();
-  const nodeRef = useRef<HTMLDivElement>(null);
+  const submenuNode = useRef<HTMLDivElement>(null);
   const handlerParams = {
     triggerEvent: triggerEvent as HandlerParamsEvent,
     props: propsFromTrigger,
@@ -64,7 +64,7 @@ export const Submenu: React.FC<SubMenuProps> = ({
   const isHidden = getPredicateValue(hidden, handlerParams);
 
   function setPosition() {
-    const node = nodeRef.current;
+    const node = submenuNode.current;
     if (node) {
       const bottom = `${CssClass.submenu}-bottom`;
       const right = `${CssClass.submenu}-right`;
@@ -119,7 +119,7 @@ export const Submenu: React.FC<SubMenuProps> = ({
         </div>
         <div
           className={`${CssClass.menu} ${CssClass.submenu}`}
-          ref={nodeRef}
+          ref={submenuNode}
           style={style}
         >
           {cloneItems(children, {

diff --git a/src/components/keyboardController.ts b/src/components/keyboardController.ts
@@ -119,7 +119,7 @@ export function createKeyboardController() {
 
   function matchKeys(e: KeyboardEvent) {
     // matches shortcut inside submenu as well even when submenu is not open
-    // it matches native behavior
+    // it matches native menu behavior
     function walkAndMatch(items: ItemTrackerRecord[]) {
       for (const item of items) {
         if (item.isSubmenu && item.submenuRefTracker)

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -99,7 +99,8 @@ export interface ItemParams<Props = any, Data = any>
   event:
     | React.MouseEvent<HTMLElement>
     | React.TouchEvent<HTMLElement>
-    | React.KeyboardEvent<HTMLElement>;
+    | React.KeyboardEvent<HTMLElement>
+    | KeyboardEvent;
 }
 
 export interface InternalProps {