Dia 3 - con localStorage test

Author: paulmelero

04-frameworks/03-vue/Dia_3/src/components/ToDoList/ToDoList.spec.ts

@@ -1,8 +1,10 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, beforeAll } from 'vitest'
 import { mount } from '@vue/test-utils'
 
 import ToDoList from './ToDoList.vue'
 import { createPinia, setActivePinia } from 'pinia'
+import type { ToDo } from '@/types'
+import { nextTick } from 'vue'
 
 describe('ToDoList', () => {
   beforeEach(() => {
@@ -14,8 +16,68 @@ describe('ToDoList', () => {
 
     const label = wrapper.find('label')
 
-    console.log(label)
-
     expect(label.text()).toMatchInlineSnapshot(`"Show only pending"`)
   })
 })
+
+describe('ToDoList (with localStorage)', () => {
+  beforeAll(() => {
+    setActivePinia(createPinia())
+  })
+
+  beforeEach(() => {
+    localStorage.setItem(
+      'todos',
+      JSON.stringify(<ToDo[]>[
+        { timestamp: 1, text: 'First todo', completed: false },
+        { timestamp: 2, text: 'Second todo', completed: true },
+      ]),
+    )
+  })
+
+  it('should render a list with the expected number of items', async () => {
+    const wrapper = mount(ToDoList)
+    // Wait for the next tick to allow the component to update
+    // after the localStorage data is loaded inside the `onMounted` hook
+    await nextTick()
+
+    const list = wrapper.find('ul')
+    const listItems = list.findAll('li')
+
+    expect(listItems).toHaveLength(2)
+  })
+
+  it('should render a list and some items should be checked', async () => {
+    const wrapper = mount(ToDoList)
+    // Wait for the next tick to allow the component to update
+    // after the localStorage data is loaded inside the `onMounted` hook
+    await nextTick()
+
+    const list = wrapper.find('ul')
+    const listItems = list.findAll('li')
+
+    const checkedItems = listItems.filter((item) => item.find('input').element.checked)
+
+    expect(checkedItems).toHaveLength(1)
+  })
+
+  it('should render a list and the items can be checked', async () => {
+    const wrapper = mount(ToDoList)
+    // Wait for the next tick to allow the component to update
+    // after the localStorage data is loaded inside the `onMounted` hook
+    await nextTick()
+
+    const list = wrapper.find('ul')
+    const listItems = list.findAll('li')
+
+    const unCheckedItems = listItems.filter((item) => !item.find('input').element.checked)
+
+    expect(unCheckedItems).toHaveLength(1)
+
+    await unCheckedItems[0].find('input').trigger('click')
+
+    const checkedItems = listItems.filter((item) => item.find('input').element.checked)
+
+    expect(checkedItems).toHaveLength(2)
+  })
+})