gym-manage/gym-manage-web/src/__tests__/directives/permission.test.ts

import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import { permissionDirective } from '@/directives/permission'
import { usePermissionStore } from '@/stores/permission'

describe('v-permission 指令', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    localStorage.clear()
  })

  describe('角色检查', () => {
    it('有角色时应该显示元素', () => {
      const store = usePermissionStore()
      store.setPermissionData({
        roles: ['admin'],
        permissions: [],
        menus: []
      })

      const wrapper = mount({
        template: '<button v-permission:role="\'admin\'">管理员按钮</button>',
        directives: {
          permission: permissionDirective
        }
      })

      expect(wrapper.find('button').isVisible()).toBe(true)
    })

    it('无角色时应该隐藏元素', () => {
      const store = usePermissionStore()
      store.setPermissionData({
        roles: ['user'],
        permissions: [],
        menus: []
      })

      const wrapper = mount({
        template: '<button v-permission:role="\'admin\'">管理员按钮</button>',
        directives: {
          permission: permissionDirective
        }
      })

      expect(wrapper.find('button').isVisible()).toBe(false)
    })

    it('支持数组参数（满足任一即可）', () => {
      const store = usePermissionStore()
      store.setPermissionData({
        roles: ['user'],
        permissions: [],
        menus: []
      })

      const wrapper = mount({
        template: '<button v-permission:role="[\'admin\', \'user\']">按钮</button>',
        directives: {
          permission: permissionDirective
        }
      })

      expect(wrapper.find('button').isVisible()).toBe(true)
    })
  })

  describe('权限检查', () => {
    it('有权限时应该显示元素', () => {
      const store = usePermissionStore()
      store.setPermissionData({
        roles: [],
        permissions: ['user:delete'],
        menus: []
      })

      const wrapper = mount({
        template: '<button v-permission:permission="\'user:delete\'">删除用户</button>',
        directives: {
          permission: permissionDirective
        }
      })

      expect(wrapper.find('button').isVisible()).toBe(true)
    })

    it('无权限时应该隐藏元素', () => {
      const store = usePermissionStore()
      store.setPermissionData({
        roles: [],
        permissions: ['user:read'],
        menus: []
      })

      const wrapper = mount({
        template: '<button v-permission:permission="\'user:delete\'">删除用户</button>',
        directives: {
          permission: permissionDirective
        }
      })

      expect(wrapper.find('button').isVisible()).toBe(false)
    })

    it('支持简写形式（默认权限检查）', () => {
      const store = usePermissionStore()
      store.setPermissionData({
        roles: [],
        permissions: ['user:create'],
        menus: []
      })

      const wrapper = mount({
        template: '<button v-permission="\'user:create\'">创建用户</button>',
        directives: {
          permission: permissionDirective
        }
      })

      expect(wrapper.find('button').isVisible()).toBe(true)
    })
  })
})