feat: add generate and back actions to workspace toolbar
This commit is contained in:
41
src/components/WorkspaceToolbar.test.ts
Normal file
41
src/components/WorkspaceToolbar.test.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import WorkspaceToolbar from './WorkspaceToolbar.vue'
|
||||
|
||||
function mountToolbar(lessonCount: number): ReturnType<typeof mount> {
|
||||
return mount(WorkspaceToolbar, {
|
||||
props: { lessonCount, warningCount: 0, saveStatus: 'idle' },
|
||||
})
|
||||
}
|
||||
|
||||
describe('WorkspaceToolbar', () => {
|
||||
it('renders the lesson count', () => {
|
||||
const wrapper = mountToolbar(3)
|
||||
expect(wrapper.text()).toContain('共 3 课')
|
||||
})
|
||||
|
||||
it('emits generate when the generate button is clicked', async () => {
|
||||
const wrapper = mountToolbar(3)
|
||||
await wrapper.get('button[data-testid="generate"]').trigger('click')
|
||||
expect(wrapper.emitted('generate')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('emits back when the back button is clicked', async () => {
|
||||
const wrapper = mountToolbar(0)
|
||||
await wrapper.get('button[data-testid="back"]').trigger('click')
|
||||
expect(wrapper.emitted('back')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('keeps generate and back enabled even with no lessons', () => {
|
||||
const wrapper = mountToolbar(0)
|
||||
expect(wrapper.get('button[data-testid="generate"]').attributes('disabled')).toBeUndefined()
|
||||
expect(wrapper.get('button[data-testid="back"]').attributes('disabled')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables print, export and clear when there are no lessons', () => {
|
||||
const wrapper = mountToolbar(0)
|
||||
expect(wrapper.get('button[data-testid="print"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('button[data-testid="export"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('button[data-testid="clear"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
})
|
||||
@@ -12,22 +12,26 @@ defineEmits<{
|
||||
print: []
|
||||
export: []
|
||||
clear: []
|
||||
generate: []
|
||||
back: []
|
||||
}>()
|
||||
|
||||
const saveStatusLabel: Record<SaveStatus, string> = {
|
||||
idle: '',
|
||||
saving: '保存中…',
|
||||
saved: '已保存到本地',
|
||||
saved: '已保存',
|
||||
error: '保存失败',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="workspace-toolbar">
|
||||
<button type="button" @click="$emit('upload')">导入教案</button>
|
||||
<button type="button" :disabled="lessonCount === 0" @click="$emit('print')">打印整册</button>
|
||||
<button type="button" :disabled="lessonCount === 0" @click="$emit('export')">导出 Markdown</button>
|
||||
<button type="button" :disabled="lessonCount === 0" @click="$emit('clear')">清空</button>
|
||||
<button type="button" data-testid="back" @click="$emit('back')">返回列表</button>
|
||||
<button type="button" data-testid="upload" @click="$emit('upload')">导入教案</button>
|
||||
<button type="button" data-testid="generate" @click="$emit('generate')">生成教案</button>
|
||||
<button type="button" data-testid="print" :disabled="lessonCount === 0" @click="$emit('print')">打印整册</button>
|
||||
<button type="button" data-testid="export" :disabled="lessonCount === 0" @click="$emit('export')">导出 Markdown</button>
|
||||
<button type="button" data-testid="clear" :disabled="lessonCount === 0" @click="$emit('clear')">清空</button>
|
||||
|
||||
<span class="workspace-toolbar-count">共 {{ lessonCount }} 课</span>
|
||||
<span v-if="warningCount > 0" class="workspace-toolbar-warning">
|
||||
|
||||
Reference in New Issue
Block a user