mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
ffe6dc7736
Our build server failed because of frontend tests. However, all our
fullstack tests are passing... So maybe an issue in our test setup, not
reproducible in a real browser?
This commit:
ee4f132b0f (diff-0806c5f3fdae5e139222967601c7faca)
adds MutationObserver to their test setup. Adding it to our test suites
that touch the `editor` directly fixes our tests, too!
From what I can tell is that prosemirror is calling
`this.observer.takeRecords()`. Probably `tiptap` updated its
dependencies at some point and that's where `this.observer` was
introduced? Hard to tell. It really looks just like an issue only
present in test environments, so I think it's safe not to investigate
any further.
98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
import { mount, createLocalVue } from '@vue/test-utils'
|
|
import CommentForm from './index.vue'
|
|
import Styleguide from '@human-connection/styleguide'
|
|
import Vuex from 'vuex'
|
|
import MutationObserver from 'mutation-observer'
|
|
|
|
global.MutationObserver = MutationObserver
|
|
|
|
const localVue = createLocalVue()
|
|
localVue.use(Vuex)
|
|
localVue.use(Styleguide)
|
|
|
|
describe('CommentForm.vue', () => {
|
|
let mocks
|
|
let wrapper
|
|
let propsData
|
|
let cancelBtn
|
|
let cancelMethodSpy
|
|
|
|
beforeEach(() => {
|
|
mocks = {
|
|
$t: jest.fn(),
|
|
$apollo: {
|
|
mutate: jest
|
|
.fn()
|
|
.mockResolvedValueOnce({
|
|
data: { CreateComment: { contentExcerpt: 'this is a comment' } },
|
|
})
|
|
.mockRejectedValue({ message: 'Ouch!' }),
|
|
},
|
|
$toast: {
|
|
error: jest.fn(),
|
|
success: jest.fn(),
|
|
},
|
|
}
|
|
propsData = {
|
|
post: { id: 1 },
|
|
}
|
|
})
|
|
|
|
describe('mount', () => {
|
|
const getters = {
|
|
'editor/placeholder': () => {
|
|
return 'some cool placeholder'
|
|
},
|
|
'editor/editPending': () => false,
|
|
}
|
|
const store = new Vuex.Store({
|
|
getters,
|
|
})
|
|
const Wrapper = () => {
|
|
return mount(CommentForm, { mocks, localVue, propsData, store })
|
|
}
|
|
|
|
beforeEach(() => {
|
|
wrapper = Wrapper()
|
|
cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear')
|
|
})
|
|
|
|
it('calls the apollo mutation when form is submitted', async () => {
|
|
wrapper.vm.updateEditorContent('this is a comment')
|
|
await wrapper.find('form').trigger('submit')
|
|
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('calls clear method when the cancel button is clicked', () => {
|
|
wrapper.vm.updateEditorContent('ok')
|
|
cancelBtn = wrapper.find('.cancelBtn')
|
|
cancelBtn.trigger('click')
|
|
expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
describe('mutation resolves', () => {
|
|
beforeEach(async () => {
|
|
wrapper.vm.updateEditorContent('this is a comment')
|
|
wrapper.find('form').trigger('submit')
|
|
})
|
|
|
|
it('shows a success toaster', async () => {
|
|
await mocks.$apollo.mutate
|
|
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('clears the editor', () => {
|
|
expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
describe('mutation fails', () => {
|
|
it('shows the error toaster', async () => {
|
|
await wrapper.find('form').trigger('submit')
|
|
await mocks.$apollo.mutate
|
|
expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|