test: added unit test about parser-compiler-sfc

Author: baiwusanyu-c

packages/core/parser/__test__/parser-compiled-sfc.spec.ts

@@ -0,0 +1,230 @@
+
+import { beforeEach, describe, expect, test } from 'vitest'
+import { parse } from '@babel/parser'
+import {
+  getVar,
+  parseHasCSSVars,
+  parseSetupBody,
+  parseUseCSSVars,
+  parserCompiledSfc,
+  reSetVar,
+  setVar,
+} from '../parser-compiled-sfc'
+import type { ImportSpecifier } from '@babel/types'
+describe('parseSetupBody', () => {
+  let node: any
+
+  beforeEach(() => {
+    node = {}
+    reSetVar()
+  })
+
+  test('should set isSetupEnter to true when node is an Identifier with name "setup"', () => {
+    node.type = 'Identifier'
+    node.name = 'setup'
+
+    parseSetupBody(node)
+
+    expect(getVar().isSetupEnter).toBe(true)
+  })
+
+  test('should set setupBodyNode to node when isSetupEnter is true and node is a BlockStatement', () => {
+    setVar('isSetupEnter', true)
+    node.type = 'BlockStatement'
+
+    parseSetupBody(node)
+
+    expect(getVar().isSetupEnter).toBe(false)
+    expect(getVar().setupBodyNode).toBe(node)
+  })
+
+  test('should do nothing when node is not an Identifier with name "setup" and isSetupEnter is false', () => {
+    node.type = 'BlockStatement'
+
+    parseSetupBody(node)
+
+    expect(getVar().isSetupEnter).toBe(false)
+    expect(getVar().setupBodyNode).toEqual({})
+  })
+
+  test('should do nothing when node is not a BlockStatement and isSetupEnter is true', () => {
+    setVar('isSetupEnter', true)
+    node.type = 'Identifier'
+    node.name = 'not-setup'
+
+    parseSetupBody(node)
+
+    expect(getVar().isSetupEnter).toBe(true)
+    expect(getVar().setupBodyNode).toEqual({})
+  })
+})
+
+describe('parseHasCSSVars', () => {
+  beforeEach(() => {
+    // reset the state of `hasCSSVars` to `false` after each test
+    reSetVar()
+  })
+
+  test('should set `hasCSSVars` to `true` if node type is Identifier with name "useCssVars" and has a parent ImportSpecifier', () => {
+    const code = 'import { useCssVars } from \'vue\''
+    const ast = parse(code, { sourceType: 'module' })
+
+    // the node representing the `useCssVars` identifier
+    const node = (ast.program.body[0] as any).specifiers[0].local
+    const parent = (ast.program.body[0] as any).specifiers[0] as ImportSpecifier
+
+    parseHasCSSVars(node, parent)
+
+    expect(getVar().hasCSSVars).toBe(true)
+  })
+
+  test('should not set `hasCSSVars` to `true` if node type is not Identifier with name "useCssVars"', () => {
+    const code = 'const a = 1'
+    const ast = parse(code)
+
+    const node = ast.program.body[0].declarations[0].init
+
+    parseHasCSSVars(node, null!)
+
+    expect(getVar().hasCSSVars).toBe(false)
+  })
+
+  test('should not set `hasCSSVars` to `true` if node has no parent ImportSpecifier', () => {
+    const code = 'import useCssVars from \'vue\''
+    const ast = parse(code, { sourceType: 'module' })
+
+    const node = (ast.program.body[0] as any).specifiers[0].local
+
+    parseHasCSSVars(node, null!)
+
+    expect(getVar().hasCSSVars).toBe(false)
+  })
+})
+
+describe('parseUseCSSVars function', () => {
+  let node: Node & { scopeIds?: Set<string> }
+  let parent: Node & { scopeIds?: Set<string> }
+
+  beforeEach(() => {
+    reSetVar()
+    node = {} as Node & { scopeIds?: Set<string> }
+    parent = {} as Node & { scopeIds?: Set<string> }
+  })
+
+  test('sets isUseCSSVarsEnter to true when called with _useCssVars identifier and a CallExpression parent', () => {
+    node.type = 'Identifier';
+    (node as any).name = '_useCssVars'
+    parent.type = 'CallExpression'
+
+    parseUseCSSVars(node, parent as any)
+
+    expect(getVar().isUseCSSVarsEnter).toBe(true)
+  })
+
+  test('does not set isUseCSSVarsEnter to true when called with non-_useCssVars identifier and a CallExpression parent', () => {
+    node.type = 'Identifier';
+    (node as any).name = 'foo'
+    parent.type = 'CallExpression'
+
+    parseUseCSSVars(node, parent as any)
+
+    expect(getVar().isUseCSSVarsEnter).toBe(false)
+  })
+
+  test('does not set isUseCSSVarsEnter to true when called with _useCssVars identifier and a non-CallExpression parent', () => {
+    node.type = 'Identifier';
+    (node as any).name = '_useCssVars'
+    parent.type = 'Identifier'
+
+    parseUseCSSVars(node, parent as any)
+
+    expect(getVar().isUseCSSVarsEnter).toBe(false)
+  })
+
+  test('does not set isUseCSSVarsEnter to true when called with _useCssVars identifier and no parent', () => {
+    node.type = 'Identifier';
+    (node as any).name = '_useCssVars'
+
+    parseUseCSSVars(node, undefined!)
+
+    expect(getVar().isUseCSSVarsEnter).toBe(false)
+  })
+
+  test('sets useCSSVarsNode to the node when isUseCSSVarsEnter is true and node is an ObjectExpression', () => {
+    setVar('isUseCSSVarsEnter', true)
+    node.type = 'ObjectExpression'
+
+    parseUseCSSVars(node, parent as any)
+
+    expect(getVar().useCSSVarsNode).toBe(node)
+  })
+
+  test('does not set useCSSVarsNode when isUseCSSVarsEnter is true and node is not an ObjectExpression', () => {
+    setVar('isUseCSSVarsEnter', true)
+    node.type = 'Identifier'
+
+    parseUseCSSVars(node, parent as any)
+
+    expect(getVar().useCSSVarsNode).not.toBe(node)
+  })
+
+  test('does not set useCSSVarsNode when isUseCSSVarsEnter is false and node is an ObjectExpression', () => {
+    setVar('isUseCSSVarsEnter', false)
+    node.type = 'ObjectExpression'
+
+    parseUseCSSVars(node, parent as any)
+
+    expect(getVar().useCSSVarsNode).not.toBe(node)
+  })
+})
+
+describe('parserCompiledSfc', () => {
+  test('should parse setupBodyNode when an Identifier named setup is encountered', () => {
+    const code = `
+    const comp = {
+      setup() {
+        console.log('Setting up...');
+        }
+      }
+    `
+    const res = parserCompiledSfc(code)
+    expect(res.setupBodyNode.type).toBe('BlockStatement')
+  })
+
+  test('should parse hasCSSVars when an Identifier named useCssVars is encountered with a parent ImportSpecifier', () => {
+    const code = `
+      import { useCssVars } from 'vue';
+      useCssVars();
+    `
+    const res = parserCompiledSfc(code)
+    expect(res.hasCSSVars).toBe(true)
+  })
+
+  test('should parse useCSSVarsNode when an Identifier named _useCssVars is encountered with a parent CallExpression and an ObjectExpression node is encountered afterwards', () => {
+    const code = `
+    import {useCssVars as _useCssVars} from "vue"
+    const comp = {
+      setup() {
+          _useCssVars((_ctx)=>({
+            "1439c43b": color.value,
+
+          }));
+        }
+      }
+    `
+    const res = parserCompiledSfc(code)
+    expect(res.useCSSVarsNode.type).toBe('ObjectExpression')
+  })
+
+  test('should not parse setupBodyNode, hasCSSVars or useCSSVarsNode when there are no matches', () => {
+    const code = `
+      const a = 1;
+      const b = 2;
+      const c = a + b;
+    `
+    const res = parserCompiledSfc(code)
+    expect(res.setupBodyNode).toEqual({})
+    expect(res.hasCSSVars).toBe(false)
+    expect(res.useCSSVarsNode).toEqual({})
+  })
+})

packages/core/parser/index.ts

@@ -1,4 +1,4 @@
 export * from './parser-variable'
 export * from './parser-import'
 export * from './parser-vbindm'
-export * from './parser-compiled-sfc'
+export { parserCompiledSfc } from './parser-compiled-sfc'

packages/core/parser/parser-compiled-sfc.ts

@@ -17,7 +17,6 @@ export interface IParseSFCRes {
 
 let isSetupEnter = false
 let setupBodyNode = {} as BlockStatement
-// TODO: unit test
 export function parseSetupBody(node: Node & { scopeIds?: Set<string> }) {
   if ((node as Identifier).type === 'Identifier' && (node as Identifier).name === 'setup') {
     isSetupEnter = true
@@ -30,7 +29,6 @@ export function parseSetupBody(node: Node & { scopeIds?: Set<string> }) {
 }
 
 let hasCSSVars = false
-// TODO: unit test
 export function parseHasCSSVars(
   node: Node & { scopeIds?: Set<string> },
   parent: ImportSpecifier) {
@@ -41,7 +39,7 @@ export function parseHasCSSVars(
     hasCSSVars = true
 }
 
-let useCSSVarsNode = {} as ExpressionStatement
+let useCSSVarsNode = {} as ObjectExpression
 let isUseCSSVarsEnter = false
 export function parseUseCSSVars(
   node: Node & { scopeIds?: Set<string> },
@@ -54,18 +52,13 @@ export function parseUseCSSVars(
 
   if (isUseCSSVarsEnter && (node as ObjectExpression).type === 'ObjectExpression') {
     isUseCSSVarsEnter = false
-    useCSSVarsNode = node as ExpressionStatement
+    useCSSVarsNode = node as ObjectExpression
   }
 }
 
 // TODO: unit test
 export function parserCompiledSfc(code: string) {
-  isSetupEnter = false
-  setupBodyNode = {} as BlockStatement
-  isUseCSSVarsEnter = false
-  useCSSVarsNode = {} as ExpressionStatement
-  hasCSSVars = false
-
+  reSetVar()
   const ast = babelParse(code, {
     sourceType: 'module',
     plugins: ['typescript'],
@@ -86,3 +79,40 @@ export function parserCompiledSfc(code: string) {
     useCSSVarsNode,
   } as IParseSFCRes
 }
+
+export function reSetVar() {
+  isSetupEnter = false
+  setupBodyNode = {} as BlockStatement
+  isUseCSSVarsEnter = false
+  useCSSVarsNode = {} as ObjectExpression
+  hasCSSVars = false
+}
+
+// test only
+export function getVar() {
+  return {
+    isSetupEnter,
+    setupBodyNode,
+    isUseCSSVarsEnter,
+    useCSSVarsNode,
+    hasCSSVars,
+  }
+}
+
+// test only
+export function setVar(k, v) {
+  if (k === 'isSetupEnter')
+    isSetupEnter = v
+
+  if (k === 'setupBodyNode')
+    setupBodyNode = v
+
+  if (k === 'isUseCSSVarsEnter')
+    isUseCSSVarsEnter = v
+
+  if (k === 'useCSSVarsNode')
+    useCSSVarsNode = v
+
+  if (k === 'hasCSSVars')
+    hasCSSVars = v
+}