ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-03-01 12:44:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(webapp): webapp test - no more skipped, no more todos (#9252)

Browse Source
This commit is contained in:
Ulf Gebhardt 2026-02-21 00:15:56 +01:00 committed by GitHub
parent 7bb8c95770
commit 518ed8af89
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 426 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
webapp/components/Button/FollowButton.spec.js
View File

@ -39,9 +39,58 @@ describe('FollowButton.vue', () => {
expect(wrapper.findAll('[data-test="follow-btn"]')).toHaveLength(1)
})
it.skip('toggle the button', async () => {
wrapper.find('[data-test="follow-btn"]').trigger('click') // This does not work since @click.prevent is used
expect(wrapper.vm.isFollowed).toBe(true)
describe('clicking the follow button', () => {
beforeEach(() => {
propsData = { followId: 'u1' }
mocks.$apollo.mutate.mockResolvedValue({
data: { followUser: { id: 'u1', followedByCurrentUser: true } },
})
wrapper = Wrapper()
})
it('emits optimistic result', async () => {
await wrapper.vm.toggle()
expect(wrapper.emitted('optimistic')[0]).toEqual([{ followedByCurrentUser: true }])
})
it('calls followUser mutation', async () => {
await wrapper.vm.toggle()
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({ variables: { id: 'u1' } }),
)
})
it('emits update with server response', async () => {
await wrapper.vm.toggle()
expect(wrapper.emitted('update')[0]).toEqual([{ id: 'u1', followedByCurrentUser: true }])
})
})
describe('clicking the unfollow button', () => {
beforeEach(() => {
propsData = { followId: 'u1', isFollowed: true }
mocks.$apollo.mutate.mockResolvedValue({
data: { unfollowUser: { id: 'u1', followedByCurrentUser: false } },
})
wrapper = Wrapper()
})
it('emits optimistic result', async () => {
await wrapper.vm.toggle()
expect(wrapper.emitted('optimistic')[0]).toEqual([{ followedByCurrentUser: false }])
})
it('calls unfollowUser mutation', async () => {
await wrapper.vm.toggle()
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({ variables: { id: 'u1' } }),
)
})
it('emits update with server response', async () => {
await wrapper.vm.toggle()
expect(wrapper.emitted('update')[0]).toEqual([{ id: 'u1', followedByCurrentUser: false }])
})
})
})
})

11
webapp/components/CommentCard/CommentCard.spec.js
View File

@ -42,7 +42,7 @@ describe('CommentCard.vue', () => {
},
}
stubs = {
ContentViewer: true,
ContentViewer: { template: '<div>{{ content }}</div>', props: ['content'] },
'client-only': true,
'nuxt-link': true,
}
@ -85,10 +85,9 @@ describe('CommentCard.vue', () => {
}
})
// skipped for now because of the immense difficulty in testing tiptap editor
it.skip('renders content', () => {
it('renders content', () => {
wrapper = Wrapper()
expect(wrapper.text()).toMatch('Hello I am a comment content')
expect(wrapper.text()).toMatch('Hello I am comment content')
})
describe('which is disabled', () => {
@ -118,9 +117,9 @@ describe('CommentCard.vue', () => {
getters['auth/isModerator'] = () => true
})
it.skip('renders comment data', () => {
it('renders comment data', () => {
wrapper = Wrapper()
expect(wrapper.text()).toMatch('comment content')
expect(wrapper.text()).toMatch('Hello I am comment content')
})
it('has a "disabled-content" css class', () => {

8
webapp/components/CommentList/CommentList.spec.js
View File

@ -1,7 +1,6 @@
import { mount } from '@vue/test-utils'
import CommentList from './CommentList'
import Vuex from 'vuex'
import Vue from 'vue'
const localVue = global.localVue
@ -163,8 +162,7 @@ describe('CommentList.vue', () => {
wrapper = Wrapper()
})
// TODO: Test does not find .count = 0 but 1. Can't understand why...
it.skip('sets counter to 0', async () => {
it('hides counter when no visible comments remain', async () => {
wrapper.vm.updateCommentList({
id: 'comment134',
contentExcerpt: 'this is another deleted comment',
@ -175,8 +173,8 @@ describe('CommentList.vue', () => {
slug: 'some-slug',
},
})
await Vue.nextTick()
await expect(wrapper.find('.count').text()).toEqual('0')
await wrapper.vm.$nextTick()
expect(wrapper.find('.count').exists()).toBe(false)
})
})
})

25
webapp/components/DonationInfo/DonationInfo.spec.js
View File

@ -48,13 +48,28 @@ describe('DonationInfo.vue', () => {
describe('mount with data', () => {
describe('given german locale', () => {
let toLocaleStringSpy
beforeEach(() => {
mocks.$i18n.locale = () => 'de'
const originalToLocaleString = Number.prototype.toLocaleString
toLocaleStringSpy = jest.spyOn(Number.prototype, 'toLocaleString')
toLocaleStringSpy.mockImplementation(function (locale) {
if (locale === 'de')
return this.valueOf()
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, '.')
return originalToLocaleString.call(this, locale)
})
})
// it looks to me that toLocaleString for some reason is not working as expected
it.skip('creates a label from the given amounts and a translation string', () => {
expect(mocks.$t).toHaveBeenNthCalledWith(1, 'donations.amount-of-total', {
afterEach(() => {
toLocaleStringSpy.mockRestore()
})
it('creates a label from the given amounts and a translation string', () => {
wrapper = Wrapper()
expect(mocks.$t).toHaveBeenCalledWith('donations.amount-of-total', {
amount: '10.000',
total: '50.000',
})
@ -62,6 +77,10 @@ describe('DonationInfo.vue', () => {
})
describe('given english locale', () => {
beforeEach(() => {
mocks.$i18n.locale = () => 'en'
})
it('creates a label from the given amounts and a translation string', () => {
expect(mocks.$t).toHaveBeenCalledWith(
'donations.amount-of-total',

33
webapp/components/Editor/nodes/Embed.spec.js
View File

@ -47,11 +47,40 @@ describe('Embed.vue', () => {
})
describe('without embedded html but some meta data instead', () => {
it.todo('renders description and link')
it('renders embed with metadata but no html', async () => {
propsData.options = {
onEmbed: () => ({
description: 'A nice description',
url: someUrl,
title: 'Some Title',
image: 'https://example.com/image.jpg',
}),
}
propsData.node = { attrs: { dataEmbedUrl: someUrl } }
const wrapper = Wrapper({ propsData })
await wrapper.vm.$nextTick()
expect(wrapper.find('embed-component-stub').exists()).toBe(true)
expect(wrapper.vm.embedData).toEqual(
expect.objectContaining({
description: 'A nice description',
title: 'Some Title',
}),
)
expect(wrapper.vm.embedData.html).toBeUndefined()
})
})
describe('without any meta data', () => {
it.todo('renders a link without `embed` class')
it('renders with empty embed data', async () => {
propsData.options = {
onEmbed: () => ({}),
}
propsData.node = { attrs: { dataEmbedUrl: someUrl } }
const wrapper = Wrapper({ propsData })
await wrapper.vm.$nextTick()
expect(wrapper.find('embed-component-stub').exists()).toBe(true)
expect(wrapper.vm.embedData).toEqual({})
})
})
})
})

70
webapp/components/Password/Change.spec.js
View File

@ -8,7 +8,6 @@ describe('ChangePassword.vue', () => {
beforeEach(() => {
mocks = {
validate: jest.fn(),
$toast: {
error: jest.fn(),
success: jest.fn(),
@ -41,34 +40,67 @@ describe('ChangePassword.vue', () => {
})
describe('validations', () => {
describe('old password and new password', () => {
describe('match', () => {
beforeEach(() => {
wrapper.find('input#oldPassword').setValue('some secret')
wrapper.find('input#password').setValue('some secret')
})
it.skip('displays a warning', () => {
const calls = mocks.validate.mock.calls
const expected = [['change-password.validations.old-and-new-password-match']]
expect(calls).toEqual(expect.arrayContaining(expected))
})
})
// $t must return strings so async-validator produces proper error messages
// (jest.fn() returns undefined which causes Error(undefined) → DsInputError type warning)
mocks.$t = jest.fn((key) => key)
wrapper = Wrapper()
})
describe('new password and confirmation', () => {
describe('mismatch', () => {
it.todo('invalid')
it.todo('displays a warning')
beforeEach(async () => {
await wrapper.find('input#oldPassword').setValue('oldsecret')
await wrapper.find('input#password').setValue('superdupersecret')
await wrapper.find('input#passwordConfirmation').setValue('different')
})
it('does not submit the form', async () => {
mocks.$apollo.mutate.mockReset()
await wrapper.find('form').trigger('submit')
await wrapper.vm.$nextTick()
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
it('displays a validation error', async () => {
await wrapper.find('form').trigger('submit')
await wrapper.vm.$nextTick()
const dsForm = wrapper.findComponent({ name: 'DsForm' })
expect(dsForm.vm.errors).toHaveProperty('passwordConfirmation')
})
})
describe('match', () => {
describe('and old password mismatch', () => {
it.todo('valid')
beforeEach(async () => {
await wrapper.find('input#oldPassword').setValue('oldsecret')
await wrapper.find('input#password').setValue('superdupersecret')
await wrapper.find('input#passwordConfirmation').setValue('superdupersecret')
})
describe('clicked', () => {
it.todo('sets loading')
it('passes validation and submits', async () => {
mocks.$apollo.mutate.mockReset()
mocks.$apollo.mutate.mockResolvedValue({ data: { changePassword: 'TOKEN' } })
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalled()
})
describe('while mutation is pending', () => {
it('sets loading while mutation is pending', async () => {
mocks.$apollo.mutate.mockReset()
let resolvePromise
mocks.$apollo.mutate.mockReturnValue(
new Promise((resolve) => {
resolvePromise = resolve
}),
)
const promise = wrapper.vm.handleSubmit()
expect(wrapper.vm.loading).toBe(true)
resolvePromise({ data: { changePassword: 'TOKEN' } })
await promise
expect(wrapper.vm.loading).toBe(false)
})
})
})
})

54
webapp/components/_new/features/Invitations/Invitation.spec.js
View File

@ -1,5 +1,6 @@
import { render, screen, fireEvent } from '@testing-library/vue'
import '@testing-library/jest-dom'
import Vuex from 'vuex'
import Invitation from './Invitation.vue'
@ -12,13 +13,28 @@ Object.assign(navigator, {
})
const mutations = {
'modal/SET_OPEN': jest.fn().mockResolvedValue(),
'modal/SET_OPEN': jest.fn(),
}
describe('Invitation.vue', () => {
let wrapper
beforeEach(() => {
mutations['modal/SET_OPEN'].mockClear()
navigator.clipboard.writeText.mockClear()
})
const Wrapper = ({ wasRedeemed = false, withCopymessage = false }) => {
const store = new Vuex.Store({
modules: {
modal: {
namespaced: true,
mutations: {
SET_OPEN: mutations['modal/SET_OPEN'],
},
},
},
})
const propsData = {
inviteCode: {
code: 'test-invite-code',
@ -29,6 +45,7 @@ describe('Invitation.vue', () => {
}
return render(Invitation, {
localVue,
store,
propsData,
mocks: {
$t: jest.fn((v) => v),
@ -37,7 +54,6 @@ describe('Invitation.vue', () => {
error: jest.fn(),
},
},
mutations,
})
}
@ -77,10 +93,9 @@ describe('Invitation.vue', () => {
})
it('can copy the link', async () => {
const clipboardMock = jest.spyOn(navigator.clipboard, 'writeText').mockResolvedValue()
const copyButton = screen.getByLabelText('invite-codes.copy-code')
await fireEvent.click(copyButton)
expect(clipboardMock).toHaveBeenCalledWith(
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
'http://localhost/registration?method=invite-code&inviteCode=test-invite-code',
)
})
@ -92,24 +107,45 @@ describe('Invitation.vue', () => {
})
it('can copy the link with message', async () => {
const clipboardMock = jest.spyOn(navigator.clipboard, 'writeText').mockResolvedValue()
const copyButton = screen.getByLabelText('invite-codes.copy-code')
await fireEvent.click(copyButton)
expect(clipboardMock).toHaveBeenCalledWith(
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
'test-copy-message http://localhost/registration?method=invite-code&inviteCode=test-invite-code',
)
})
})
describe.skip('invalidate button', () => {
describe('invalidate button', () => {
beforeEach(() => {
wrapper = Wrapper({ wasRedeemed: false })
})
it('opens the delete modal', async () => {
it('opens the delete modal with correct payload', async () => {
const deleteButton = screen.getByLabelText('invite-codes.invalidate')
await fireEvent.click(deleteButton)
expect(mutations['modal/SET_OPEN']).toHaveBeenCalledTimes(1)
expect(mutations['modal/SET_OPEN']).toHaveBeenCalledWith(
expect.anything(),
expect.objectContaining({
name: 'confirm',
data: expect.objectContaining({
modalData: expect.objectContaining({
titleIdent: 'invite-codes.delete-modal.title',
messageIdent: 'invite-codes.delete-modal.message',
buttons: expect.objectContaining({
confirm: expect.objectContaining({
danger: true,
textIdent: 'actions.delete',
callback: expect.any(Function),
}),
cancel: expect.objectContaining({
textIdent: 'actions.cancel',
callback: expect.any(Function),
}),
}),
}),
}),
}),
)
})
})
})

3
webapp/jest.config.js
View File

@ -2,7 +2,6 @@ const path = require('path')
module.exports = {
verbose: true,
collectCoverage: true,
collectCoverageFrom: [
'**/*.{js,vue}',
'!**/?(*.)+(spec|test|story).js?(x)',
@ -19,7 +18,7 @@ module.exports = {
],
coverageThreshold: {
global: {
lines: 82,
lines: 83,
},
},
coverageProvider: 'v8',

4
webapp/package.json
View File

@ -16,9 +16,9 @@
"locales": "../scripts/translations/missing-keys.sh && ../scripts/translations/sort.sh",
"locales:normalize": "../scripts/translations/normalize.sh",
"precommit": "yarn lint",
"test": "cross-env NODE_ENV=test jest --coverage --forceExit --detectOpenHandles",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:unit:update": "yarn test -- --updateSnapshot",
"test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand",
"test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand --forceExit --detectOpenHandles",
"postinstall": "node scripts/fix-vue2-jest.js && node scripts/fix-v-mapbox.js"
},
"dependencies": {

136
webapp/pages/admin/donations.spec.js
View File

@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
import Vue from 'vue'
import flushPromises from 'flush-promises'
import Donations from './donations.vue'
const localVue = global.localVue
@ -10,21 +10,25 @@ describe('donations.vue', () => {
const donationsQueryMock = jest.fn()
const donationsUpdateMock = jest.fn()
const donationsMutaionMock = jest.fn()
donationsMutaionMock.mockResolvedValue({
then: jest.fn(),
catch: jest.fn(),
const donationsMutationMock = jest.fn().mockResolvedValue({})
afterEach(() => {
donationsMutationMock.mockClear()
})
beforeEach(() => {
mocks = {
$t: jest.fn((string) => string),
$toast: {
success: jest.fn(),
error: jest.fn(),
},
$apollo: {
Donations: {
query: donationsQueryMock,
update: donationsUpdateMock,
},
mutate: donationsMutaionMock,
mutate: donationsMutationMock,
queries: {
Donations: {
query: donationsQueryMock,
@ -98,36 +102,36 @@ describe('donations.vue', () => {
expect(wrapper.vm.showDonations).toBe(false)
})
it.skip('on donations-goal and enter value XXX', async () => {
await wrapper.find('#donations-goal').setValue('20000')
expect(wrapper.vm.formData.goal).toBe('20000')
it('donations-goal input exists and accepts input', async () => {
const goalInput = wrapper.find('#donations-goal')
expect(goalInput.exists()).toBe(true)
await goalInput.setValue('42000')
expect(goalInput.element.value).toBe('42000')
})
})
describe('apollo', () => {
it.skip('query is called', () => {
expect(donationsQueryMock).toHaveBeenCalledTimes(1)
expect(mocks.$apollo.queries.Donations.refetch).toHaveBeenCalledTimes(1)
// expect(mocks.$apollo.Donations.query().exists()).toBeTruthy()
// console.log('mocks.$apollo: ', mocks.$apollo)
it('query is defined and returns a GraphQL document', () => {
const apolloOption = wrapper.vm.$options.apollo.Donations
expect(apolloOption.query).toBeInstanceOf(Function)
const query = apolloOption.query.call(wrapper.vm)
expect(query).toBeDefined()
expect(query.kind).toBe('Document')
})
it.skip('query result is displayed', () => {
mocks.$apollo.queries = jest.fn().mockResolvedValue({
data: {
PostsEmotionsCountByEmotion: 1,
},
})
it('query result is displayed', async () => {
const updateFn = wrapper.vm.$options.apollo.Donations.update.bind(wrapper.vm)
updateFn({ Donations: { showDonations: true, goal: 25000, progress: 8000 } })
await wrapper.vm.$nextTick()
expect(wrapper.vm.showDonations).toBe(true)
expect(wrapper.vm.formData).toEqual({ goal: '25000', progress: '8000' })
})
describe('submit', () => {
beforeEach(() => {
jest.clearAllMocks()
})
it('calls mutation with default values once', () => {
wrapper.find('.donations-info-button').trigger('submit')
expect(donationsMutaionMock).toHaveBeenCalledWith(
it('calls mutation with default values once', async () => {
await wrapper.find('.donations-info-button').trigger('submit')
expect(donationsMutationMock).toHaveBeenCalledTimes(1)
expect(donationsMutationMock).toHaveBeenCalledWith(
expect.objectContaining({
variables: { showDonations: false, goal: 15000, progress: 0 },
}),
@ -135,61 +139,53 @@ describe('donations.vue', () => {
})
it('calls mutation with input values once', async () => {
wrapper.find('#showDonations').setChecked(true)
await wrapper.vm.$nextTick()
wrapper.find('#donations-goal').setValue('20000')
await wrapper.vm.$nextTick()
wrapper.find('#donations-progress').setValue('10000')
await wrapper.vm.$nextTick()
wrapper.find('.donations-info-button').trigger('submit')
await wrapper.vm.$nextTick()
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
await wrapper.find('#showDonations').setChecked(true)
await wrapper.find('#donations-goal').setValue('20000')
await wrapper.find('#donations-progress').setValue('10000')
await wrapper.find('.donations-info-button').trigger('submit')
expect(donationsMutationMock).toHaveBeenCalledTimes(1)
expect(donationsMutationMock).toHaveBeenCalledWith(
expect.objectContaining({
variables: { showDonations: true, goal: 20000, progress: 10000 },
}),
)
})
it.skip('calls mutation with corrected values once', async () => {
wrapper.find('.show-donations-checkbox').trigger('click')
await Vue.nextTick()
expect(wrapper.vm.showDonations).toBe(false)
// wrapper.find('.donations-info-button').trigger('submit')
// await mocks.$apollo.mutate
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: false, goal: 15000, progress: 7000 }}))
// expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
it('calls mutation with corrected values once', async () => {
await wrapper.find('#showDonations').setChecked(true)
await wrapper.find('#donations-goal').setValue('10000')
await wrapper.find('#donations-progress').setValue('15000')
await wrapper.find('.donations-info-button').trigger('submit')
expect(donationsMutationMock).toHaveBeenCalledTimes(1)
expect(donationsMutationMock).toHaveBeenCalledWith(
expect.objectContaining({
variables: { showDonations: true, goal: 10000, progress: 10000 },
}),
)
})
it.skip('default values are displayed', async () => {
mocks.$apollo.mutate = jest.fn().mockResolvedValue({
data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } },
it('default values are displayed after mutation', async () => {
await wrapper.find('.donations-info-button').trigger('submit')
const { update } = donationsMutationMock.mock.calls[0][0]
update(null, {
data: { UpdateDonations: { showDonations: true, goal: 15000, progress: 0 } },
})
wrapper.find('.donations-info-button').trigger('submit')
await mocks.$apollo.mutate
await Vue.nextTick()
expect(wrapper.vm.showDonations).toBe(false)
expect(wrapper.vm.formData.goal).toBe(1)
expect(wrapper.vm.formData.progress).toBe(1)
await wrapper.vm.$nextTick()
expect(wrapper.vm.showDonations).toBe(true)
expect(wrapper.vm.formData).toEqual({ goal: '15000', progress: '0' })
})
it.skip('entered values are send in the mutation', async () => {
// mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } } })
it('shows success toast after successful mutation', async () => {
await wrapper.find('.donations-info-button').trigger('submit')
await flushPromises()
expect(mocks.$toast.success).toHaveBeenCalledWith('admin.donations.successfulUpdate')
})
// expect(wrapper.vm.showDonations).toBe(null)
// expect(wrapper.vm.formData.goal).toBe(null)
// expect(wrapper.vm.formData.progress).toBe(null)
// wrapper.find('button').trigger('click')
// await Vue.nextTick()
// expect(wrapper.vm.showDonations).toBe(true)
// expect(wrapper.vm.formData.goal).toBe(1)
// expect(wrapper.vm.formData.progress).toBe(1)
// wrapper.find('button').trigger('click')
// wrapper.find('.donations-info-button').trigger('click')
// await Vue.nextTick()
// wrapper.find('.donations-info-button').trigger('submit')
await mocks.$apollo.mutate
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
it('shows error toast when mutation fails', async () => {
donationsMutationMock.mockRejectedValueOnce(new Error('Network error'))
await wrapper.find('.donations-info-button').trigger('submit')
await flushPromises()
expect(mocks.$toast.error).toHaveBeenCalledWith('Network error')
})
})
})

28
webapp/pages/admin/index.spec.js
View File

@ -9,7 +9,6 @@ localVue.use(VueApollo)
describe('admin/index.vue', () => {
let Wrapper
let store
let mocks
beforeEach(() => {
@ -21,32 +20,27 @@ describe('admin/index.vue', () => {
describe('mount', () => {
Wrapper = () => {
return mount(AdminIndexPage, {
store,
mocks,
localVue,
})
}
describe('in loading state', () => {
beforeEach(() => {
mocks = { ...mocks, $apolloData: { loading: true } }
it('shows a loading spinner and no error message', async () => {
mocks.$t.mockImplementation((key) => key)
const wrapper = Wrapper()
wrapper.vm.$data.$apolloData.loading = 1
await wrapper.vm.$nextTick()
expect(wrapper.findComponent({ name: 'OsSpinner' }).exists()).toBe(true)
expect(wrapper.text()).not.toContain('site.error-occurred')
})
})
it.skip('shows a loading spinner', () => {
// I don't know how to mock the data that gets passed to
// ApolloQuery component
// What I found:
// https://github.com/Akryum/vue-apollo/issues/656
// https://github.com/Akryum/vue-apollo/issues/609
describe('in default state (no data, not loading)', () => {
it('displays the error message', () => {
Wrapper()
const calls = mocks.$t.mock.calls
const expected = [['site.error-occurred']]
expect(calls).toEqual(expected)
expect(mocks.$t).toHaveBeenCalledWith('site.error-occurred')
})
})
describe('in error state', () => {
it.todo('displays an error message')
})
})
})

19
webapp/pages/password-reset/request.spec.js
View File

@ -13,18 +13,13 @@ describe('request.vue', () => {
beforeEach(() => {
mocks = {
/* $toast: {
success: jest.fn(),
error: jest.fn(),
}, */
$t: jest.fn(),
$apollo: {
loading: false,
// mutate: jest.fn().mockResolvedValue({ data: { reqestPasswordReset: true } }),
},
/* $router: {
push: jest.fn()
} */
$router: {
push: jest.fn(),
},
}
})
@ -41,12 +36,8 @@ describe('request.vue', () => {
expect(wrapper.findAll('.ds-form')).toHaveLength(1)
})
it.skip('calls "handlePasswordResetRequested" on submit', async () => {
await jest.useFakeTimers()
await wrapper.find('input#email').setValue('mail@example.org')
await wrapper.findAll('.ds-form').trigger('submit')
await jest.runAllTimers()
expect(wrapper.emitted('handleSubmitted')).toEqual([[{ email: 'mail@example.org' }]])
it('navigates to enter-nonce on handlePasswordResetRequested', () => {
wrapper.vm.handlePasswordResetRequested({ email: 'mail@example.org' })
expect(mocks.$router.push).toHaveBeenCalledWith({
path: 'enter-nonce',
query: { email: 'mail@example.org' },

78
webapp/pages/settings/badges.spec.js
View File

@ -17,6 +17,7 @@ describe('badge settings', () => {
}
beforeEach(() => {
apolloMutateMock.mockReset()
mocks = {
$t: jest.fn((t) => t),
$toast: {
@ -94,6 +95,7 @@ describe('badge settings', () => {
beforeEach(() => {
mocks.$store = {
commit: jest.fn(),
getters: {
'auth/isModerator': () => false,
'auth/user': {
@ -133,14 +135,12 @@ describe('badge settings', () => {
}
describe('with successful server request', () => {
beforeEach(() => {
apolloMutateMock.mockResolvedValue({
data: {
const removedResponseData = {
setTrophyBadgeSelected: {
id: 'u23',
badgeTrophiesSelected: [
{
id: '2',
id: 'empty-0',
icon: '/path/to/empty/icon',
isDefault: true,
description: 'Empty',
@ -159,9 +159,15 @@ describe('badge settings', () => {
},
],
},
},
}
beforeEach(async () => {
apolloMutateMock.mockImplementation(({ update }) => {
const result = { data: removedResponseData }
if (update) update(null, result)
return Promise.resolve(result)
})
clickButton()
await clickButton()
})
it('calls the server', () => {
@ -175,9 +181,15 @@ describe('badge settings', () => {
})
})
/* To test this, we would need a better apollo mock */
it.skip('removes the badge', async () => {
expect(wrapper.container).toMatchSnapshot()
it('updates badges in store via update callback', () => {
expect(mocks.$store.commit).toHaveBeenCalledWith(
'auth/SET_USER',
expect.objectContaining({
id: 'u23',
badgeTrophiesSelected:
removedResponseData.setTrophyBadgeSelected.badgeTrophiesSelected,
}),
)
})
it('shows a success message', () => {
@ -186,9 +198,9 @@ describe('badge settings', () => {
})
describe('with failed server request', () => {
beforeEach(() => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'Ouch!' })
clickButton()
await clickButton()
})
it('shows an error message', () => {
@ -233,23 +245,21 @@ describe('badge settings', () => {
}
describe('with successful server request', () => {
beforeEach(() => {
apolloMutateMock.mockResolvedValue({
data: {
const addedResponseData = {
setTrophyBadgeSelected: {
id: 'u23',
badgeTrophiesSelected: [
{
id: '4',
icon: '/path/to/fourth/icon',
description: 'Fourth description',
id: '1',
icon: '/path/to/some/icon',
isDefault: false,
description: 'Some description',
},
{
id: '2',
icon: '/path/to/empty/icon',
isDefault: true,
description: 'Empty',
id: '4',
icon: '/path/to/fourth/icon',
isDefault: false,
description: 'Fourth description',
},
{
id: '3',
@ -259,9 +269,15 @@ describe('badge settings', () => {
},
],
},
},
}
beforeEach(async () => {
apolloMutateMock.mockImplementation(({ update }) => {
const result = { data: addedResponseData }
if (update) update(null, result)
return Promise.resolve(result)
})
clickBadge()
await clickBadge()
})
it('calls the server', () => {
@ -275,9 +291,15 @@ describe('badge settings', () => {
})
})
/* To test this, we would need a better apollo mock */
it.skip('adds the badge', async () => {
expect(wrapper.container).toMatchSnapshot()
it('updates badges in store via update callback', () => {
expect(mocks.$store.commit).toHaveBeenCalledWith(
'auth/SET_USER',
expect.objectContaining({
id: 'u23',
badgeTrophiesSelected:
addedResponseData.setTrophyBadgeSelected.badgeTrophiesSelected,
}),
)
})
it('shows a success message', () => {
@ -286,9 +308,9 @@ describe('badge settings', () => {
})
describe('with failed server request', () => {
beforeEach(() => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'Ouch!' })
clickBadge()
await clickBadge()
})
it('shows an error message', () => {

45
webapp/pages/settings/my-social-media.spec.js
View File

@ -32,7 +32,7 @@ describe('my-social-media.vue', () => {
},
}
mutations = {
'modal/SET_OPEN': jest.fn().mockResolvedValueOnce(),
'modal/SET_OPEN': jest.fn(),
}
})
@ -150,14 +150,31 @@ describe('my-social-media.vue', () => {
})
})
// TODO: confirm deletion modal is not present
describe.skip('deleting social media link', () => {
describe('deleting social media link', () => {
beforeEach(async () => {
const deleteButton = wrapper.find('button[data-test="delete-button"]')
deleteButton.trigger('click')
await Vue.nextTick()
// wrapper.find('button.cancel').trigger('click')
// await Vue.nextTick()
})
it('opens the confirmation modal', () => {
expect(mutations['modal/SET_OPEN']).toHaveBeenCalledTimes(1)
expect(mutations['modal/SET_OPEN']).toHaveBeenCalledWith(
expect.anything(),
expect.objectContaining({
name: 'confirm',
}),
)
})
describe('when user confirms deletion', () => {
beforeEach(async () => {
mocks.$apollo.mutate.mockResolvedValue({
data: { DeleteSocialMedia: { id: 's1' } },
})
const modalCall = mutations['modal/SET_OPEN'].mock.calls[0][1]
modalCall.data.modalData.buttons.confirm.callback()
await flushPromises()
})
it('sends the link id to the backend', () => {
@ -168,11 +185,25 @@ describe('my-social-media.vue', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
})
it('displays a success message', async () => {
await flushPromises()
it('displays a success message', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
})
describe('when deletion fails', () => {
beforeEach(async () => {
mocks.$apollo.mutate.mockRejectedValue(new Error('Network error'))
const modalCall = mutations['modal/SET_OPEN'].mock.calls[0][1]
modalCall.data.modalData.buttons.confirm.callback()
await flushPromises()
})
it('displays an error message', () => {
expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
expect(mocks.$toast.error).toHaveBeenCalledWith('Network error')
})
})
})
})
})
})