Collapse the strategy, backtest and sweep panels
Adds a reusable CollapsiblePanel (chevron header, optional summary shown when collapsed, state persisted in localStorage) and wraps the Strategy, Backtest and Parameter sweep panels with it, so any single part of the dashboard can be focused on quickly. Panels stay mounted (v-show) so their form/results state is preserved across collapse. Includes component tests.
This commit is contained in:
1 parent
fedcd07ffd
commit
1b44e456c6
5 files changed
+190
-55
No files matched your search
@@ -0,0 +1,64 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { beforeEach, describe, expect, it } from 'vitest'
|
||||
import CollapsiblePanel from './components/CollapsiblePanel.vue'
|
||||
|
||||
describe('CollapsiblePanel', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear()
|
||||
})
|
||||
|
||||
it('renders the title and slot when open by default', () => {
|
||||
const wrapper = mount(CollapsiblePanel, {
|
||||
props: { title: 'Strategy' },
|
||||
slots: { default: '<p>content</p>' },
|
||||
})
|
||||
expect(wrapper.text()).toContain('Strategy')
|
||||
expect(wrapper.text()).toContain('content')
|
||||
expect(wrapper.find('button').attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('hides the slot after clicking the header', async () => {
|
||||
const wrapper = mount(CollapsiblePanel, {
|
||||
props: { title: 'Strategy' },
|
||||
slots: { default: '<p>content</p>' },
|
||||
})
|
||||
await wrapper.find('button').trigger('click')
|
||||
expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
|
||||
// v-show keeps the node but hides it.
|
||||
expect(wrapper.find('div[style*="display: none"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('shows the summary only when collapsed', async () => {
|
||||
const wrapper = mount(CollapsiblePanel, {
|
||||
props: { title: 'Backtest', summary: 'BTC/USDT 5m' },
|
||||
slots: { default: '<p>content</p>' },
|
||||
})
|
||||
expect(wrapper.text()).not.toContain('BTC/USDT 5m')
|
||||
await wrapper.find('button').trigger('click')
|
||||
expect(wrapper.text()).toContain('BTC/USDT 5m')
|
||||
})
|
||||
|
||||
it('persists the collapsed state in localStorage', async () => {
|
||||
const wrapper = mount(CollapsiblePanel, {
|
||||
props: { title: 'Backtest', storageKey: 'backtest' },
|
||||
slots: { default: '<p>content</p>' },
|
||||
})
|
||||
await wrapper.find('button').trigger('click')
|
||||
expect(localStorage.getItem('panel:backtest')).toBe('0')
|
||||
|
||||
// A fresh mount with the same key starts collapsed.
|
||||
const remounted = mount(CollapsiblePanel, {
|
||||
props: { title: 'Backtest', storageKey: 'backtest' },
|
||||
slots: { default: '<p>content</p>' },
|
||||
})
|
||||
expect(remounted.find('button').attributes('aria-expanded')).toBe('false')
|
||||
})
|
||||
|
||||
it('honours defaultOpen when nothing is stored', () => {
|
||||
const wrapper = mount(CollapsiblePanel, {
|
||||
props: { title: 'Strategy', defaultOpen: false },
|
||||
slots: { default: '<p>content</p>' },
|
||||
})
|
||||
expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
|
||||
})
|
||||
})
|
||||
Reference in new issue
Block a user