feat: extension events add test case

packages/extensions/events/package.json

@@ -28,14 +28,18 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@codemirror/lang-sql": "^6.6.4",
     "@codemirror/view": "^6.26.3",
+    "@codemirror/state": "^6.4.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "rollup": "^4.18.0",
     "tslib": "^2.6.3",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@codemirror/view": "^6.26.3"
+    "@codemirror/lang-sql": "^6.6.4",
+    "@codemirror/view": "^6.26.3",
+    "@codemirror/state": "^6.4.1"
   },
   "dependencies": {
     "@tidbcloud/codemirror-extension-cur-sql": "workspace:^",

packages/extensions/events/src/change.ts

@@ -1,8 +1,6 @@
 import { EditorView, ViewUpdate } from '@codemirror/view'
 
-type ChangeHelperOptions = {
-  onChange: (sql: string, view?: EditorView) => void
-}
+type ChangeHelperOptions = (sql: string, view?: EditorView) => void
 
 const changeHandler = (change: (sql: string, view?: EditorView) => void) => {
   return EditorView.updateListener.of((update: ViewUpdate) => {
@@ -13,6 +11,6 @@ const changeHandler = (change: (sql: string, view?: EditorView) => void) => {
   })
 }
 
-export const onChange = ({ onChange }: ChangeHelperOptions) => {
+export const onChange = (onChange: ChangeHelperOptions) => {
   return [changeHandler(onChange)]
 }

packages/extensions/events/src/focus-change.ts

@@ -3,9 +3,7 @@ import { EditorView, ViewUpdate } from '@codemirror/view'
 import { getCurStatements } from '@tidbcloud/codemirror-extension-cur-sql'
 import { SqlStatement } from '@tidbcloud/codemirror-extension-sql-parser'
 
-type FocusChangeHelperOptions = {
-  onFocusChange: (curSql: SqlStatement[]) => void
-}
+type FocusChangeHelperOptions = (curSql: SqlStatement[]) => void
 
 const focusChangeHandler = (change: (curSql: SqlStatement[]) => void) => {
   let timer: number | undefined
@@ -28,8 +26,6 @@ const focusChangeHandler = (change: (curSql: SqlStatement[]) => void) => {
   })
 }
 
-export const focusChangeHelper = ({
-  onFocusChange
-}: FocusChangeHelperOptions) => {
-  return [focusChangeHandler(onFocusChange)]
+export const onFocusChange = (onFocusChangeCb: FocusChangeHelperOptions) => {
+  return [focusChangeHandler(onFocusChangeCb)]
 }

packages/extensions/events/src/selection-change.ts

@@ -5,11 +5,11 @@ export interface SelectionRange {
   to: number
 }
 
-type SelectionChangeHelperOptions = {
-  onFocusChange: (curSql: SelectionRange[]) => void
-}
+type SelectionChangeHelperOptions = (selectionRange: SelectionRange[]) => void
 
-const selectionChangeHandler = (change: (curSql: SelectionRange[]) => void) => {
+const selectionChangeHandler = (
+  change: (selectionRange: SelectionRange[]) => void
+) => {
   let timer: number | undefined
   let first = true
 
@@ -36,8 +36,8 @@ const selectionChangeHandler = (change: (curSql: SelectionRange[]) => void) => {
   })
 }
 
-export const onSelectionChange = ({
-  onFocusChange
-}: SelectionChangeHelperOptions) => {
-  return [selectionChangeHandler(onFocusChange)]
+export const onSelectionChange = (
+  onSelectionChange: SelectionChangeHelperOptions
+) => {
+  return [selectionChangeHandler(onSelectionChange)]
 }

packages/extensions/events/src/test/on-change.test.ts

@@ -0,0 +1,37 @@
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+
+import { onChange } from '..'
+
+const LINE_1 = 'USE game;'
+const LINE_2 = `SELECT
+*
+from
+game.all_audio_language
+LIMIT
+10;`
+
+const DOC = `${LINE_1}\n${LINE_2}`
+
+test('test change event', () => {
+  let curSql = ''
+
+  const editorView = new EditorView({
+    state: EditorState.create({
+      doc: '',
+      extensions: [
+        onChange((sql) => {
+          curSql = sql
+        })
+      ]
+    })
+  })
+
+  editorView.dispatch({ changes: { from: 0, insert: LINE_1 } })
+  expect(curSql).toBe(LINE_1)
+
+  editorView.dispatch({
+    changes: { from: LINE_1.length, insert: `\n${LINE_2}` }
+  })
+  expect(curSql).toBe(DOC)
+})

packages/extensions/events/src/test/on-focus-change.test.ts

@@ -0,0 +1,53 @@
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+
+import { MySQL, sql } from '@codemirror/lang-sql'
+import {
+  sqlParser,
+  SqlStatement
+} from '@tidbcloud/codemirror-extension-sql-parser'
+import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
+
+import { onFocusChange } from '..'
+
+jest.useFakeTimers()
+
+const LINE_1 = 'USE game;'
+const LINE_2 = `SELECT
+*
+from
+game.all_audio_language
+LIMIT
+10;`
+
+const DOC = `${LINE_1}\n${LINE_2}`
+
+test('test focuse change event', async () => {
+  let sqlStatement: SqlStatement[] = []
+
+  const editorView = new EditorView({
+    state: EditorState.create({
+      doc: '',
+      extensions: [
+        sqlParser(),
+        sql({ dialect: MySQL }),
+        curSql(),
+        onFocusChange((sql) => {
+          sqlStatement = sql
+        })
+      ]
+    })
+  })
+
+  editorView.dispatch({ changes: { from: 0, insert: DOC } })
+
+  editorView.dispatch({ selection: { anchor: 0, head: 0 } })
+  await jest.advanceTimersByTime(100)
+  expect(sqlStatement.length).toBe(1)
+  expect(sqlStatement[0].content).toBe(LINE_1)
+
+  editorView.dispatch({ selection: { anchor: DOC.length, head: DOC.length } })
+  await jest.advanceTimersByTime(100)
+  expect(sqlStatement.length).toBe(1)
+  expect(sqlStatement[0].content).toBe(LINE_2)
+})

packages/extensions/events/src/test/on-selection-change.test.ts

@@ -0,0 +1,52 @@
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+
+import { MySQL, sql } from '@codemirror/lang-sql'
+import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
+import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
+
+import { onSelectionChange, SelectionRange } from '..'
+
+jest.useFakeTimers()
+
+const LINE_1 = 'USE game;'
+const LINE_2 = `SELECT
+*
+from
+game.all_audio_language
+LIMIT
+10;`
+
+const DOC = `${LINE_1}\n${LINE_2}`
+
+test('test selection change event', async () => {
+  let sqlStatement: SelectionRange[] = []
+
+  const editorView = new EditorView({
+    state: EditorState.create({
+      doc: '',
+      extensions: [
+        sqlParser(),
+        sql({ dialect: MySQL }),
+        curSql(),
+        onSelectionChange((sql) => {
+          sqlStatement = sql
+        })
+      ]
+    })
+  })
+
+  editorView.dispatch({ changes: { from: 0, insert: DOC } })
+
+  editorView.dispatch({ selection: { anchor: 0, head: LINE_1.length } })
+  await jest.advanceTimersByTime(100)
+  expect(sqlStatement[0].from).toBe(0)
+  expect(sqlStatement[0].to).toBe(LINE_1.length)
+
+  editorView.dispatch({
+    selection: { anchor: LINE_1.length, head: DOC.length }
+  })
+  await jest.advanceTimersByTime(100)
+  expect(sqlStatement[0].from).toBe(LINE_1.length)
+  expect(sqlStatement[0].to).toBe(DOC.length)
+})

packages/extensions/events/tsconfig.json

@@ -3,5 +3,6 @@
   "compilerOptions": {
     "outDir": "./dist"
   },
-  "include": ["./src"]
+  "include": ["./src"],
+  "exclude": ["./src/**/*.test.ts"]
 }