@peter.naydenov/shortcuts 3.3.0 → 3.4.0

package/src/plugins/key/_readKeyEvent.js

@@ -4,6 +4,7 @@ function _readKeyEvent ( event, _specialChars ) {
     let
           { shiftKey, altKey, ctrlKey } = event
         , falseKeys = [ 'ControlLeft','ControlRight', 'ShiftLeft', 'ShiftRight', 'AltLeft', 'AltRight', 'Meta' ]
+        , _sp = _specialChars ()
         , key = event.code
                      .replace ( 'Key', '' )
                      .replace('Digit','')
@@ -14,8 +15,9 @@ function _readKeyEvent ( event, _specialChars ) {
     if ( shiftKey )  res.push ( 'SHIFT' )
     if ( altKey )    res.push ( 'ALT' )
 
-    if ( _specialChars.hasOwnProperty ( key ) )  res.push ( _specialChars[key].toUpperCase () )
-    else if (       !falseKeys.includes(key)  )  res.push ( key.toUpperCase () )
+    if ( _sp.hasOwnProperty ( key )     )  res.push ( _sp[key].toUpperCase () )
+    else if ( !falseKeys.includes(key)  )  res.push ( key.toUpperCase () )
+
     return res.sort ()
 } // _readKeyEvent func.
 

package/src/plugins/key/index.js

@@ -59,11 +59,7 @@ function pluginKey ( dependencies, state, options={} ) {
                                         }
                              , mute          : () => keysListener.stop ()
                              , unmute        : () => keysListener.start ()
-                             , destroy       : () => {
-                                                        keysListener.stop ()
-                                                        pluginState = null
-                                                        pluginAPI = null
-                                                }
+                             , destroy       : () => keysListener.stop ()
                         };
         Object.freeze ( pluginAPI )
         return pluginAPI

package/test/01-general.test.js

@@ -1,37 +1,51 @@
-import { beforeEach, describe, it, test } from 'vitest'
+import { beforeEach, afterEach, describe, it, expect } from 'vitest'
 import { userEvent } from '@vitest/browser/context'
+import {
+  getByLabelText,
+  getByText,
+  getByTestId,
+  queryByTestId,
+  // Tip: all queries are also exposed on an object
+  // called "queries" which you could import here as well
+  waitFor
+} from '@testing-library/dom'
+
 
-import Block from '../test-components/Block.jsx'
-import VisaulController from '@peter.naydenov/visual-controller-for-react'
-import '../test-components/style.css'
 
+import '../test-helpers/style.css'
+import Block from '../test-helpers/Block.jsx'
+import VisaulController from '@peter.naydenov/visual-controller-for-react'
+import wait             from '../test-helpers/wait.js'
 import { 
           pluginClick,
           pluginKey
         , pluginForm
         , shortcuts 
                 } from '../src/main.js'
-import { expect } from 'chai'
+
 
 import askForPromise from 'ask-for-promise'
 
 const html = new VisaulController ();
-
 let
        a = false
      , b = false
+     , c = null
      ;
-
-
-function wait (ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-      }
-                                    
-const short = shortcuts ({onShortcut : ( shortcut, {context,note,type}) =>  console.log (shortcut, context, note, type)   });
-    
-short.load ({
+const contextDefinition = {
                   general : {
-                            ' key : shift+a': [ () => a = true ]
+                            ' key : shift+a': [ 
+                                        () => a = true, 
+                                        () => c = 'triggered' 
+                                      ]
+                        }
+                , touch : {
+                              // Single click with left button
+                              'click: left-1': () => b = true,
+                              // Double click with left button
+                              'click: left-2': () => b = true,
+                              // Single click with right button
+                              'click: right-1': () => b = true
                         }
                 , extra : {    
                             'key : p,r,o,b,a': () => b = true                        
@@ -47,253 +61,87 @@ short.load ({
                                 }
                             ]
                     }
-        })
-
-beforeEach ( () => {
-    let container = document.createElement ( 'div' )
-    container.id = 'app'
-    document.body.appendChild ( container )
-    html.publish ( Block, {}, 'app' )
-    a = false, b = false
-}) // beforeEach
+      }
 
 
+                                    
+let short = shortcuts ();
 
 
 
 describe ( "Shortcuts", () => {
 
+        beforeEach ( async  () => {
+                        short.load ( contextDefinition )
+                        let container = document.createElement ( 'div' )
+                        container.id = 'app'
+                        document.body.appendChild ( container )
+                        await html.publish ( Block, {}, 'app' )
+                        a = false, b = false
+            }) // beforeEach
 
 
-test ( 'Shortcut if no plugin installed', () => {
-            let res = new Promise ( (resolve,reject) => {
-                            short.changeContext ( 'general' )
-                            let r = short.listShortcuts ('general')
-                            expect ( r[0]).to.equal ( ' key : shift+a' ) // Shortcut name is the same as it was set
-                            resolve ('success')
-                })
-            return res
-    }) // test no plugin installed
-
-
-
-test ( 'Key plugin, no context selected', () => {
-            const res = new Promise ( ( resolve ) => {
-                        short.enablePlugin ( pluginKey )
-                        const r = short.listShortcuts ( 'general' )
-                        expect ( r[0] ).to.equal ( 'KEY:A+SHIFT' ) // Shortcut name is recognized by plugin and is normalized
-                        resolve ('success')
-                })
-            return res
-    }) // test key plugin installed, no context selected
-
-
-
-test ( 'Key plugin with context selected', () => {
-            const res = new Promise ( (resolve) => {
-                        short.enablePlugin ( pluginKey )
-                        short.changeContext ( 'general' )
-                        const r = short.listShortcuts ('general')
-                        expect ( r[0] ).to.equal ( 'KEY:A+SHIFT' ) // Shortcut name is recognized by plugin and is normalized
-                        resolve ( 'success' )
-                    })
-            return res
-    }) // test key plugin installed with context selected
-
-
-
-test ( 'Simple shortcut', () => {
-            const res = new Promise ( (resolve) => {
-                                    short.enablePlugin ( pluginKey )
-                                    short.changeContext ()
-                                    short.changeContext ( 'general'  )
-                                    userEvent.keyboard ( '{Shift>}a</Shift>' )
-                                    expect ( a ).to.be.false
-                                    wait ( 1000 ) 
-                                       .then ( () => { // Default wait sequence timeout is 480 ms, but maxSequence is 1, so we don't need to wait for timeout
-                                                expect ( a ).to.be.true 
-                                                resolve ( 'success' )
-                                       })
-                            })
-            return res
-    }) // test simple shortcut
 
+        afterEach ( async  () => {
+                    short.reset ()
+                    a = false, b = false, c = null;
+            }) // afterEach
 
 
-test ( 'Call sequence shortcut', async () => {
-        let res = new Promise ( async (resolve) => {
-                            b = false
-                            short.enablePlugin ( pluginKey )
-                            short.changeContext ()
-                            short.changeContext ( 'extra' )
-                            await userEvent.keyboard ( 'proba' )
-                            expect ( b ).to.be.true
-                            resolve ( 'success' )
-                    })
-        return res
-    }) // test call sequence shortcut
-
-
-
-test ( 'Single mouse click', done => {
-        const res = new Promise ( async (resolve) => {
-                                expect ( a ).to.be.false
-                                expect ( b ).to.be.false
-                                short.enablePlugin ( pluginClick )
-                                
-                                short.load ({ 'extra' : { 
-                                                        ' cLIck  : left - 1 ' : () => a = true   // Check if spaces, letter case can break the shortcut recognition
-                                                    }
-                                        })
-                                short.changeContext ()
-                                short.changeContext ( 'extra' )
-                                wait ( 100 )
-                                   .then ( async () => {
-                                            // Default wait mouse timeout is 320 ms, but maxClicks is 1, so we don't need to wait for timeout
-                                            let loc = document.querySelector('#rspan')  || false 
-                                            if ( loc )   await userEvent.click ( loc )
-                                            expect ( a ).to.be.true 
-                                            resolve ( 'success' ) 
-                                        })
-                                
-                                
-                        })
-        return res
-    }) // test single mouse click
-
-
-
-test ( 'Double mouse click', () => {
-        let res = new Promise ( async (resolve) => {
-                                    expect ( a ).to.be.false
-                                    expect ( b ).to.be.false
-
-                                    short.enablePlugin ( pluginClick )
-                                    short.changeContext ( 'extra' )
-                                    short.load ({ // load will restart the selected context
-                                                    'extra' : {   // load will overwrite existing 'extra' context definition
-                                                                'click: left-2' : () => a = true
-                                                            } 
-                                                }) 
-                                    wait ( 350 )
-                                        .then ( async () => {   // Default wait mouse timeout is 320 ms
-                                            let loc = document.querySelector ( '#rspan' )  || false
-                                            // Third click is ignored. Max clicks according definition is 2.
-                                            if ( loc )   await userEvent.tripleClick ( loc )
-                                            expect ( a ).to.be.true
-                                            resolve ( 'success' )
-                                        })
-                    })
-        return res
-    }) // test double mouse click
-
-
-
-test ( 'Dependencies on shortcuts', () => {
-        const res = new Promise ( async (resolve) => {
-                            const task = askForPromise ();
-                            expect ( a ).to.be.false
-                            expect ( b ).to.be.false
-
-                            short.enablePlugin ( pluginClick )
-                            short.setDependencies ({ task })
-                            
-                            short.load ({   
-                                            'extra' : {   // load will overwrite existing 'extra' context definition
-                                                        'click: left-1' : ({dependencies}) => {
-                                                                                            const { task } = dependencies;
-                                                                                            expect ( task ).to.have.property ( 'done' )
-                                                                                            expect ( task ).to.have.property ( 'promise' )
-                                                                                            a = true
-                                                                                        }
-                                                    } 
-                                        }) // load will restart the selected context
-                            short.changeContext ( 'extra' )
-                            wait ( 350 )   // Default wait mouse timeout is 320 ms
-                                .then ( async () => {
-                                        let loc = document.querySelector ( '#rspan' )  || false
-                                        if ( loc )   await userEvent.click ( loc )
-                                        resolve ( 'success' )
-                                })
-                    }) // res promise
-        return res
-    }) // test dependencies on shortcuts
-
-
-
-test ( 'Emit custom event', () => {
-        const res = new Promise ( async (resolve) => {
-                                let result = null;
-                                short.changeContext ()
-                                short.enablePlugin ( pluginClick )
-                                const myAllContext = { 
-                                                        myAll: {
-                                                                'click : leff-1' : () =>  console.log ( 'nothing' )
-                                                                , 'yo' : ({msg}) => result = msg
-                                                            }}
-                                short.load ( myAllContext )
-                                short.changeContext ( 'myAll' )    
-                                short.emit ( 'yo', { context: short.getContext(), note: 'tt', type:'custom', msg:'hello' })
-                                expect ( result ).to.be.equal ( 'hello' )
-                                short.changeContext ( 'general' )
-                                short.unload ( 'myAll' )
-                                resolve ( 'success' )
-                        })
-        return res
-    }) // test emit custom event
-
-
-
-test ( 'List shortcuts', () => {
-        short.enablePlugin ( pluginKey )
-        let general =  short.listShortcuts ('general');
-        expect ( general ).to.be.an ( 'array' )
-        expect ( general ).to.have.lengthOf ( 1 )
-        expect ( general[0] ).to.be.equal ( 'KEY:A+SHIFT' )
         
-        let fail = short.listShortcuts ( 'somethingNotExisting' );
-        expect ( fail ).to.be.null
-    
-        let all = short.listShortcuts ();
-        expect ( all ).to.be.an ( 'array' )
+        it ( 'Emit custom event', () => {
+                            // TODO: Check arguments for the custom event handlers
+                            let result = null;
+                            short.enablePlugin ( pluginClick )
+                            const myAllContext = { 
+                                                    myAll: {
+                                                            'click : leff-1' : () =>  console.log ( 'nothing' )
+                                                            , 'yo' : ({msg}) => result = msg
+                                                        }}
+                            short.load ( myAllContext )
+                            short.changeContext ( 'myAll' )    
+                            short.emit ( 'yo', { context: short.getContext(), note: 'tt', type:'custom', msg:'hello' })
+                            expect ( result ).to.be.equal ( 'hello' )
+                            short.changeContext ( 'general' )
+                            short.unload ( 'myAll' )
+            }) // it emit custom event
+
+
+
+        it ( 'List shortcuts', () => {
+                      short.enablePlugin ( pluginKey )
+
+                      let general =  short.listShortcuts ('general');
+                      expect ( general ).to.be.an ( 'array' )
+                      expect ( general ).to.have.lengthOf ( 1 )
+                      expect ( general[0] ).to.be.equal ( 'KEY:A+SHIFT' )
+                      
+                      let fail = short.listShortcuts ( 'somethingNotExisting' );
+                      expect ( fail ).to.be.null
+                  
+                      let all = short.listShortcuts ();
+                      expect ( all ).to.be.an ( 'array' )
+                   
+                      expect ( all ).to.have.lengthOf ( 4 )
+                      // Property 'context' is a context name - string
+                      expect ( all[0] ).to.have.property ( 'context' )
+                      expect ( all[0] ).to.have.property ( 'shortcuts' )
+                      expect ( all[0].shortcuts ).to.be.an ( 'array' )
+                      expect ( all[0].shortcuts ).to.have.lengthOf ( 1 )
+                      expect ( all[0].shortcuts[0] ).to.be.equal ( 'KEY:A+SHIFT' )
+                      expect ( all[0].context ).to.be.equal ( 'general' )
+            }) // it list shortcuts
+
+
+
+        it ( 'Reset', () => {
+                      short.enablePlugin ( pluginKey )
+                      short.reset ()
+                      expect ( short.listShortcuts () ).to.have.lengthOf ( 0 )
+                      expect ( short.listShortcuts () ).to.have.lengthOf ( 0 )
+                      expect ( short.getContext () ).to.be.null
+            }) // it Reset
         
-        expect ( all ).to.have.lengthOf ( 3 )
-        expect ( all[0] ).to.have.property ( 'context' )
-        expect ( all[0] ).to.have.property ( 'shortcuts' )
-        expect ( all[0].shortcuts ).to.be.an('array')
-        expect ( all[0].shortcuts ).to.have.lengthOf ( 1 )
-        expect ( all[0].shortcuts[0] ).to.be.equal ( 'KEY:A+SHIFT' )
-        expect ( all[0].context ).to.be.equal ( 'general' )
-    }) // test list shortcuts
-
-
-
-test ( 'Click on anchor', () => {
-        const res = new Promise ( async (resolve) => {
-                                // Click on anchor that don't have click-data attribute.
-                                let result = 'none';
-                                short.enablePlugin ( pluginClick )
-                                short.load ({ 'extra' : { 
-                                                        'click: 1 - left' : ({target, context, event }) => {   // Order of button name and number of click is not important
-                                                                    event.preventDefault ()
-                                                                    expect ( context ).to.be.equal ( 'extra' )
-                                                                    expect ( target.nodeName ).to.be.equal ( 'A' )
-                                                                    result = target.nodeName
-                                                                }
-                                                    } 
-                                        })
-                                short.changeContext ( 'extra' )
-                                wait ( 10 )
-                                    .then ( async () => {
-                                            let loc = document.querySelector ( '#anchor' )  || false;
-                                            if ( loc )   await userEvent.click ( loc )
-                                            expect ( result ).to.be.equal ( 'A' )  
-                                            short.changeContext ( 'general' )
-                                            resolve ( 'success' )
-                                        })
-                        })
-        return res
-    }) // test click on anchor
 
 }) // describe
 

package/test/02-key.test.js

@@ -0,0 +1,174 @@
+import { beforeEach, afterEach, describe, it, expect } from 'vitest'
+import { userEvent } from '@vitest/browser/context'
+import {
+  getByLabelText,
+  getByText,
+  getByTestId,
+  queryByTestId,
+  // Tip: all queries are also exposed on an object
+  // called "queries" which you could import here as well
+  waitFor
+} from '@testing-library/dom'
+
+
+
+import '../test-helpers/style.css'
+import Block             from '../test-helpers/Block.jsx'
+import VisaulController  from '@peter.naydenov/visual-controller-for-react'
+import wait              from '../test-helpers/wait.js'
+import { 
+          shortcuts 
+        , pluginKey
+        , pluginClick
+        , pluginForm
+                } from '../src/main.js'
+
+
+
+const html = new VisaulController ();
+let
+       a = false
+     , b = false
+     , c = null
+     ;
+
+const contextDefinition = {
+                  general : {
+                            ' key : shift+a': [ 
+                                        () => a = true, 
+                                        () => c = 'triggered' 
+                                      ]
+                        }
+                , touch : {
+                              // Single click with left button
+                              'click: left-1': () => b = true,
+                              // Double click with left button
+                              'click: left-2': () => b = true,
+                              // Single click with right button
+                              'click: right-1': () => b = true
+                        }
+                , extra : {    
+                            'key : p,r,o,b,a': () => b = true                        
+                        }
+                , extend : {
+                              'form : watch' : () => 'input'
+                            , 'form : define' : () => 'input'
+                            , 'form : action' : () => [
+                                {
+                                      fn : (e) => console.log ( e.target )
+                                    , type : 'input'
+                                    , mode : 'in'
+                                }
+                            ]
+                    }
+      }
+
+let short = shortcuts ();
+
+
+
+
+
+describe ( 'Key plugin', () => {
+
+      beforeEach ( async  () => {
+                    short.load ( contextDefinition )
+                    let container = document.createElement ( 'div' )
+                    container.id = 'app'
+                    document.body.appendChild ( container )
+                    await html.publish ( Block, {}, 'app' )
+                    a = false, b = false
+          }) // beforeEach
+
+
+
+      afterEach ( async  () => {
+                  short.reset ()
+                  a = false, b = false, c = null;
+          }) // afterEach
+
+
+
+      it ( 'No "key" plugin installed', () => {
+                          let r = short.listShortcuts ('general');
+                          // Shortcut name is the same as it was set
+                          expect ( r[0]).to.equal ( ' key : shift+a' ) 
+          }) // it no 'key' plugin installed
+
+
+
+    it ( 'Key plugin installed', () => {
+                          short.enablePlugin ( pluginKey )
+                          const r = short.listShortcuts ( 'general' )
+                          // Shortcut name is recognized by plugin and is normalized
+                          expect ( r[0] ).to.equal ( 'KEY:A+SHIFT' ) 
+        }) // it key plugin installed
+
+
+
+    it ( 'Execute a key shortcut: shift+a', async () => {
+                          expect ( a ).to.equal ( false )
+                          // Enable key plugin, normalize shortcuts related to the plugin
+                          short.enablePlugin ( pluginKey )
+                          short.changeContext ( 'general' )
+                          await userEvent.keyboard ( '{Shift>}A{/Shift}' ) // Write 'a' with shift
+                          await wait ( 12 )
+                          await waitFor ( () => {
+                                    expect ( a ).to.equal ( true ) 
+                                    expect ( c ).to.equal ( 'triggered' )       
+                              }, { timeout: 1000, interval: 12 })
+        }) // it execute a key shortcut
+
+
+
+    it ( 'Key sequence', async () => {
+                      // enable key plugin and normalize shortcuts related to the plugin 'key'
+                      short.enablePlugin ( pluginKey )
+                      short.changeContext ( 'extra' )
+                      // Execute key sequence: 'p,r,o,b,a'
+                      await userEvent.keyboard ( 'proba' )
+                      await wait ( 12 )
+                      await waitFor ( () => {
+                                expect ( b ).to.equal ( true )
+                      }, { timeout: 1000, interval: 12 })
+        }) // it key sequence
+
+
+
+    it ( 'Mute key plugin', async () => {
+                          short.enablePlugin ( pluginKey )
+                          const result = [];
+                          let i = 0;
+                          result.push ( 'init' )
+
+                          short.setDependencies ({ result })
+                          short.load ({
+                                'local': {
+                                        'key: g,t,i ' : ({dependencies}) => {
+                                                  let { result } = dependencies;
+                                                  result.push ( i++ )
+                                              }
+                                      }
+                              })
+                          
+                          short.changeContext ( 'local' )
+                          await userEvent.keyboard ( 'gti' )
+                          await waitFor ( () => {
+                                    // We checking if the shortcut works
+                                    expect ( result ).to.have.lengthOf ( 2 )
+                                    expect ( i ).to.equal ( 1 )
+                              }, { timeout: 1000, interval: 12 })
+
+                          short.mutePlugin ( 'key' )
+                          await userEvent.keyboard ( 'gti' )
+                          await waitFor ( () => {
+                                    // Plugin is muted, so we don't expect any changes
+                                    expect ( result ).to.have.lengthOf ( 2 )
+                                    expect ( i ).to.equal ( 1 )
+                              }, { timeout: 1000, interval: 12 })
+        }) // it mute key plugin
+    
+    
+
+
+})