hamburger menu, article view

vue/src/components/__tests__/AppNav.spec.js

@@ -1,7 +1,11 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
+import axios from 'axios'
 import AppNav from '../AppNav.vue'
+import { useFeeds } from '../../composables/useFeeds'
+
+vi.mock('axios')
 
 describe('AppNav', () => {
   let router
@@ -9,6 +13,13 @@ describe('AppNav', () => {
   beforeEach(async () => {
     localStorage.setItem('user-token', 'abc123')
     localStorage.setItem('user-id', '7')
+    vi.clearAllMocks()
+
+    const { feeds, showMessage, message, showModal } = useFeeds()
+    feeds.value = []
+    showMessage.value = false
+    message.value = ''
+    showModal.value = false
 
     router = createRouter({
       history: createWebHistory(),
@@ -21,8 +32,27 @@ describe('AppNav', () => {
     await router.isReady()
   })
 
-  it('clears stored credentials and redirects to login on logout', async () => {
+  async function mountWithMenuOpen() {
     const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    await wrapper.find('.app-nav__hamburger').trigger('click')
+    await flushPromises()
+    return wrapper
+  }
+
+  it('toggles the menu open and closed via the hamburger button', async () => {
+    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
+
+    await wrapper.find('.app-nav__hamburger').trigger('click')
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(true)
+
+    await wrapper.find('.app-nav__hamburger').trigger('click')
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
+  })
+
+  it('clears stored credentials and redirects to login on logout', async () => {
+    const wrapper = await mountWithMenuOpen()
 
     await wrapper.find('.app-nav__logout').trigger('click')
     await flushPromises()
@@ -31,4 +61,33 @@ describe('AppNav', () => {
     expect(localStorage.getItem('user-id')).toBeNull()
     expect(router.currentRoute.value.name).toBe('login')
   })
+
+  it('triggers a sync from the menu', async () => {
+    axios.get.mockResolvedValue({ data: { feeds: [] } })
+    axios.post.mockResolvedValueOnce({ status: 200 })
+
+    const wrapper = await mountWithMenuOpen()
+
+    const syncButton = wrapper.findAll('.app-nav__menu-item').find(el => el.text() === 'Sync')
+    await syncButton.trigger('click')
+    await flushPromises()
+
+    expect(axios.post).toHaveBeenCalledWith(
+      '/api/v1/article/sync',
+      { user_id: 7 },
+      expect.anything(),
+    )
+    // Menu auto-closes after an action
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
+  })
+
+  it('opens the add-feed modal from the menu', async () => {
+    const wrapper = await mountWithMenuOpen()
+    const { showModal } = useFeeds()
+
+    const addButton = wrapper.findAll('.app-nav__menu-item').find(el => el.text() === 'Add RSS')
+    await addButton.trigger('click')
+
+    expect(showModal.value).toBe(true)
+  })
 })