ending

Author: Andy

tests/unit/MessageDisplay.spec.js

@@ -1,20 +1,35 @@
 import MessageDisplay from '@/components/MessageDisplay'
 import { mount } from '@vue/test-utils'
+import { getMessage } from '@/services/axios'
+import flushPromises from 'flush-promises'
+
+jest.mock('@/services/axios')
 
 describe('MessageDisplay', () => {
-  it('Calls getMessage and displays message', async () => {
-    // mock the API call
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('Calls getMessage once and displays message', async () => {
+    const mockMessage = 'Hello from the db'
+    getMessage.mockResolvedValueOnce({ text: mockMessage })
     const wrapper = mount(MessageDisplay)
-    // wait for promise to resolve
-    // check that call happened once
-    // check that component displays message
+
+    await flushPromises()
+    expect(getMessage).toHaveBeenCalledTimes(1)
+
+    const message = wrapper.find('[data-testid="message"]').text()
+    expect(message).toEqual(mockMessage)
   })
 
   it('Displays an error when getMessage call fails', async () => {
-    // mock the failed API call
+    const mockError = 'Oops! Something went wrong.'
+    getMessage.mockRejectedValueOnce(mockError)
     const wrapper = mount(MessageDisplay)
-    // wait for promise to resolve
-    // check that call happened once
-    // check that component displays error
+
+    await flushPromises()
+    expect(getMessage).toHaveBeenCalledTimes(1)
+    const displayedError = wrapper.find('[data-testid="message-error"]').text()
+    expect(displayedError).toEqual(mockError)
   })
 })