Merge branch 'main' into feature/appearance-settings

ui/src/views/__tests__/SettingsView.spec.js

@@ -46,6 +46,47 @@ describe('SettingsView.vue', () => {
 
   it('renders all input elements with initial values from store', () => {
     const { wrapper } = createWrapperAndStore({ // Store is created inside here after LS mock
+  let store
+
+  beforeEach(() => {
+    // Create a new Pinia instance and activate it for each test
+    // This also resets the store state for each test
+    store = getFreshStore()
+
+    // Mock localStorage for the store
+    const localStorageMock = (() => {
+      let lsStore = {}
+      return {
+        getItem: vi.fn((key) => lsStore[key] || null),
+        setItem: vi.fn((key, value) => { lsStore[key] = value.toString() }),
+        clear: vi.fn(() => { lsStore = {} }),
+        removeItem: vi.fn((key) => { delete lsStore[key] }),
+      }
+    })()
+    Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true })
+    localStorageMock.clear()
+  })
+
+  const createWrapper = (initialStoreState = {}) => {
+    // Apply initial state to the store if provided
+    // This is a bit of a workaround as direct state mutation isn't ideal,
+    // but for testing initial binding it can be simpler than calling actions.
+    // Alternatively, set up localStorage then init store.
+    if (Object.keys(initialStoreState).length > 0) {
+        localStorage.setItem('appearanceSettings', JSON.stringify(initialStoreState))
+    }
+    // Re-initialize store to pick up mocked localStorage if initialStoreState was set
+    store = getFreshStore()
+
+    return mount(SettingsView, {
+      global: {
+        // plugins: [store.$pinia], // Removed: setActivePinia should make it available
+      },
+    })
+  }
+
+  it('renders all input elements with initial values from store', () => {
+    const wrapper = createWrapper({
         primaryColor: '#111111',
         secondaryColor: '#222222',
         warningColor: '#333333',
@@ -62,6 +103,8 @@ describe('SettingsView.vue', () => {
     })
 
     // Check general appearance settings
+    })
+
     expect(wrapper.find('input#primaryColor').element.value).toBe('#111111')
     expect(wrapper.find('input#secondaryColor').element.value).toBe('#222222')
     expect(wrapper.find('input#warningColor').element.value).toBe('#333333')
@@ -97,11 +140,32 @@ describe('SettingsView.vue', () => {
     const spy = vi.spyOn(store, 'setFontFamily')
     const input = wrapper.find('input#fontFamily')
     await input.setValue('Helvetica')
+  })
+
+  it('calls setPrimaryColor action when primary color input changes', async () => {
+    const wrapper = createWrapper()
+    const spy = vi.spyOn(store, 'setPrimaryColor')
+    const colorInput = wrapper.find('input#primaryColor')
+
+    // Simulate color picker actually setting the value and then dispatching input
+    // For input type=color, setting .value and then .trigger('input') is typical
+    colorInput.element.value = '#FF00FF'
+    await colorInput.trigger('input')
+
+    expect(spy).toHaveBeenCalledWith('#ff00ff') // Changed to lowercase
+  })
+
+  it('calls setFontFamily action when font family input changes', async () => {
+    const wrapper = createWrapper()
+    const spy = vi.spyOn(store, 'setFontFamily')
+    const input = wrapper.find('input#fontFamily')
+    await input.setValue('Helvetica') // .setValue also triggers 'input'
     expect(spy).toHaveBeenCalledWith('Helvetica')
   })
 
   it('calls setFontSize action when font size input changes', async () => {
     const { wrapper, store } = createWrapperAndStore()
+    const wrapper = createWrapper()
     const spy = vi.spyOn(store, 'setFontSize')
     const input = wrapper.find('input#fontSize')
     await input.setValue('22')
@@ -114,6 +178,12 @@ describe('SettingsView.vue', () => {
     const checkbox = wrapper.find('input#animationsEnabled')
 
     await checkbox.setChecked(false)
+    const wrapper = createWrapper({ animationsEnabled: true }) // Start with true
+    const spy = vi.spyOn(store, 'setAnimationsEnabled')
+    const checkbox = wrapper.find('input#animationsEnabled')
+
+    // For checkboxes, .setValue(false) or .setChecked(false) and then trigger 'change'
+    await checkbox.setChecked(false) // This should trigger the change event for v-model
 
     expect(spy).toHaveBeenCalledWith(false)
   })
@@ -168,6 +238,19 @@ describe('SettingsView.vue', () => {
 
     // Test primaryColor
     store.primaryColor = '#001122' // Directly manipulate the store used by the component
+=======
+    const wrapper = createWrapper()
+    const spy = vi.spyOn(store, 'setTheme')
+    const select = wrapper.find('select#theme')
+    await select.setValue('dark') // .setValue on select triggers 'change'
+    expect(spy).toHaveBeenCalledWith('dark')
+  })
+
+  it('updates input values when store state changes programmatically', async () => {
+    const wrapper = createWrapper()
+
+    // Test primaryColor
+    store.primaryColor = '#001122'
     await wrapper.vm.$nextTick() // Wait for Vue to react to state change
     expect(wrapper.find('input#primaryColor').element.value).toBe('#001122')
 
@@ -203,6 +286,7 @@ describe('SettingsView.vue', () => {
     vi.useFakeTimers()
 
     const { wrapper } = createWrapperAndStore() // Use the new function name
+    const wrapper = createWrapper()
     expect(wrapper.find('.settings-view').classes()).not.toContain('opacity-100')
 
     // Advance timers by the amount used in setTimeout in SettingsView.vue (50ms)