test: add test case for Q11 (webfansplz#544)

Author: FliPPeDround

questions/11-next-dom-update/App.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue"
 
 const count = ref(0)
+const counter = ref(null)
 
 function increment() {
   count.value++
@@ -10,13 +11,12 @@ function increment() {
    * DOM is not yet updated, how can we make sure that the DOM gets updated
    * Make the output be true
   */
-
-  console.log(+document.getElementById("counter").textContent === 1)
+  console.log(+counter.value.textContent === 1)
 }
 </script>
 
 <template>
-  <button id="counter" @click="increment">
+  <button ref="counter" @click="increment">
     {{ count }}
   </button>
 </template>

questions/11-next-dom-update/index.test.ts

@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils"
+import { describe, it, expect, vi } from "vitest"
+
+import App from "./App.vue"
+
+describe("next-dom-update", () => {
+  it("should work'", async() => {
+    let printLog = ''
+    console.log = vi.fn(
+      (log: string) => {
+        printLog = log?.toString()?.trim()
+      })
+    const wrapper = mount(App)
+
+    expect(wrapper.text()).toMatchInlineSnapshot("\"0\"")
+
+    const button = wrapper.find("button")
+    await button.trigger("click")
+
+    expect(wrapper.text()).toMatchInlineSnapshot('"1"')
+    expect(printLog).toMatchInlineSnapshot('"true"')
+  })
+})