Delete unnecessary code

This commit is contained in:
Wolfgang Huß 2021-03-23 13:59:18 +01:00 committed by Ulf Gebhardt
parent 3d8fe39cbe
commit 3fa7e04d48
No known key found for this signature in database
GPG Key ID: 81308EFE29ABFEBD
15 changed files with 155 additions and 565 deletions

View File

@ -1,153 +0,0 @@
import { config, mount } from '@vue/test-utils'
import Vue from 'vue'
import { VERSION } from '~/constants/terms-and-conditions-version.js'
import CreateUserAccount from './CreateUserAccount'
import { SignupVerificationMutation } from '~/graphql/Registration.js'
const localVue = global.localVue
config.stubs['sweetalert-icon'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>'
describe('CreateUserAccount', () => {
let wrapper, Wrapper, mocks, propsData, stubs
beforeEach(() => {
mocks = {
$toast: {
success: jest.fn(),
error: jest.fn(),
},
$t: jest.fn(),
$apollo: {
loading: false,
mutate: jest.fn(),
},
$i18n: {
locale: () => 'en',
},
}
propsData = {}
stubs = {
LocaleSwitch: "<div class='stub'></div>",
}
})
describe('mount', () => {
Wrapper = () => {
return mount(CreateUserAccount, {
mocks,
propsData,
localVue,
stubs,
})
}
describe('given email and nonce', () => {
beforeEach(() => {
propsData.nonce = '666777'
propsData.email = 'sixseven@example.org'
})
it('renders a form to create a new user', () => {
wrapper = Wrapper()
expect(wrapper.find('.create-user-account').exists()).toBe(true)
})
describe('submit', () => {
let action
beforeEach(() => {
action = async () => {
wrapper = Wrapper()
wrapper.find('input#name').setValue('John Doe')
wrapper.find('input#password').setValue('hellopassword')
wrapper.find('textarea#about').setValue('Hello I am the `about` attribute')
wrapper.find('input#passwordConfirmation').setValue('hellopassword')
wrapper.find('input#checkbox0').setChecked()
wrapper.find('input#checkbox1').setChecked()
wrapper.find('input#checkbox2').setChecked()
wrapper.find('input#checkbox3').setChecked()
wrapper.find('input#checkbox4').setChecked()
await wrapper.find('form').trigger('submit')
await wrapper.html()
}
})
it('delivers data to backend', async () => {
await action()
const expected = expect.objectContaining({
variables: {
about: 'Hello I am the `about` attribute',
name: 'John Doe',
email: 'sixseven@example.org',
nonce: '666777',
password: 'hellopassword',
termsAndConditionsAgreedVersion: VERSION,
locale: 'en',
},
})
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
})
it('calls CreateUserAccount graphql mutation', async () => {
await action()
const expected = expect.objectContaining({ mutation: SignupVerificationMutation })
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
})
describe('in case mutation resolves', () => {
beforeEach(() => {
mocks.$apollo.mutate = jest.fn().mockResolvedValue({
data: {
SignupVerification: {
id: 'u1',
name: 'John Doe',
slug: 'john-doe',
},
},
})
})
it('displays success', async () => {
await action()
await Vue.nextTick()
expect(mocks.$t).toHaveBeenCalledWith(
'components.registration.create-user-account.success',
)
})
describe('after timeout', () => {
beforeEach(jest.useFakeTimers)
it('emits `userCreated` with { password, email }', async () => {
await action()
jest.runAllTimers()
expect(wrapper.emitted('userCreated')).toEqual([
[
{
email: 'sixseven@example.org',
password: 'hellopassword',
},
],
])
})
})
})
describe('in case mutation rejects', () => {
beforeEach(() => {
mocks.$apollo.mutate = jest.fn().mockRejectedValue(new Error('Invalid nonce'))
})
it('displays form errors', async () => {
await action()
await Vue.nextTick()
expect(mocks.$t).toHaveBeenCalledWith(
'components.registration.create-user-account.error',
)
})
})
})
})
})
})

View File

@ -1,84 +0,0 @@
import { storiesOf } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import { action } from '@storybook/addon-actions'
import Vuex from 'vuex'
import helpers from '~/storybook/helpers'
import links from '~/constants/links.js'
import metadata from '~/constants/metadata.js'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import CreateUserAccount from './CreateUserAccount.vue'
helpers.init()
const createStore = ({ loginSuccess }) => {
return new Vuex.Store({
modules: {
auth: {
namespaced: true,
state: () => ({
pending: false,
}),
mutations: {
SET_PENDING(state, pending) {
state.pending = pending
},
},
getters: {
pending(state) {
return !!state.pending
},
},
actions: {
async login({ commit, dispatch }, args) {
action('Vuex action `auth/login`')(args)
return new Promise((resolve, reject) => {
commit('SET_PENDING', true)
setTimeout(() => {
commit('SET_PENDING', false)
if (loginSuccess) {
resolve(loginSuccess)
} else {
reject(new Error('Login unsuccessful'))
}
}, 1000)
})
},
},
},
},
})
}
storiesOf('CreateUserAccount', module)
.addDecorator(withA11y)
.addDecorator(helpers.layout)
.add('standard', () => ({
components: { LocaleSwitch, CreateUserAccount },
store: createStore({ loginSuccess: true }),
data: () => ({
links,
metadata,
nonce: 'A34RB56',
email: 'user@example.org',
}),
methods: {
handleSuccess() {
action('You are logged in!')()
},
},
template: `
<ds-container width="small">
<base-card>
<template #imageColumn>
<a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
<img class="image" alt="Sign up" src="/img/custom/sign-up.svg" />
</a>
</template>
<create-user-account @userCreated="handleSuccess" :email="email" :nonce="nonce" />
<template #topMenu>
<locale-switch offset="5" />
</template>
</base-card>
</ds-container>
`,
}))

View File

@ -1,222 +0,0 @@
<template>
<div v-if="response === 'success'">
<transition name="ds-transition-fade">
<sweetalert-icon icon="success" />
</transition>
<ds-text align="center" bold color="success">
{{ $t('components.registration.create-user-account.success') }}
</ds-text>
</div>
<div v-else-if="response === 'error'">
<transition name="ds-transition-fade">
<sweetalert-icon icon="error" />
</transition>
<ds-text align="center" bold color="danger">
{{ $t('components.registration.create-user-account.error') }}
</ds-text>
<ds-text align="center">
{{ $t('components.registration.create-user-account.help') }}
<a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
</ds-text>
<ds-space centered>
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
</div>
<div v-else class="create-account-card">
<ds-space margin-top="large">
<ds-heading size="h3">
{{ $t('components.registration.create-user-account.title') }}
</ds-heading>
</ds-space>
<ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
<template v-slot="{ errors }">
<ds-input
id="name"
model="name"
icon="user"
:label="$t('settings.data.labelName')"
:placeholder="$t('settings.data.namePlaceholder')"
/>
<ds-input
id="about"
model="about"
type="textarea"
rows="3"
:label="$t('settings.data.labelBio')"
:placeholder="$t('settings.data.labelBio')"
/>
<ds-input
id="password"
model="password"
type="password"
autocomplete="off"
:label="$t('settings.security.change-password.label-new-password')"
/>
<ds-input
id="passwordConfirmation"
model="passwordConfirmation"
type="password"
autocomplete="off"
:label="$t('settings.security.change-password.label-new-password-confirm')"
/>
<password-strength :password="formData.password" />
<ds-text>
<input
id="checkbox0"
type="checkbox"
v-model="termsAndConditionsConfirmed"
:checked="termsAndConditionsConfirmed"
/>
<label for="checkbox0">
{{ $t('termsAndConditions.termsAndConditionsConfirmed') }}
<br />
<nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
</label>
</ds-text>
<ds-text>
<input id="checkbox1" type="checkbox" v-model="dataPrivacy" :checked="dataPrivacy" />
<label for="checkbox1">
{{ $t('components.registration.signup.form.data-privacy') }}
<br />
<nuxt-link to="/data-privacy">
{{ $t('site.data-privacy') }}
</nuxt-link>
</label>
</ds-text>
<ds-text>
<input id="checkbox2" type="checkbox" v-model="minimumAge" :checked="minimumAge" />
<label
for="checkbox2"
v-html="$t('components.registration.signup.form.minimum-age')"
></label>
</ds-text>
<ds-text>
<input id="checkbox3" type="checkbox" v-model="noCommercial" :checked="noCommercial" />
<label
for="checkbox3"
v-html="$t('components.registration.signup.form.no-commercial')"
></label>
</ds-text>
<ds-text>
<input id="checkbox4" type="checkbox" v-model="noPolitical" :checked="noPolitical" />
<label
for="checkbox4"
v-html="$t('components.registration.signup.form.no-political')"
></label>
</ds-text>
<base-button
style="float: right"
icon="check"
type="submit"
filled
:loading="$apollo.loading"
:disabled="
errors ||
!termsAndConditionsConfirmed ||
!dataPrivacy ||
!minimumAge ||
!noCommercial ||
!noPolitical
"
>
{{ $t('actions.save') }}
</base-button>
</template>
</ds-form>
</div>
</template>
<script>
import links from '~/constants/links'
import PasswordStrength from '../Password/Strength'
import { SweetalertIcon } from 'vue-sweetalert-icons'
import PasswordForm from '~/components/utils/PasswordFormHelper'
import { VERSION } from '~/constants/terms-and-conditions-version.js'
import { SignupVerificationMutation } from '~/graphql/Registration.js'
import emails from '~/constants/emails'
export default {
components: {
PasswordStrength,
SweetalertIcon,
},
data() {
const passwordForm = PasswordForm({ translate: this.$t })
return {
links,
supportEmail: emails.SUPPORT,
formData: {
name: '',
about: '',
...passwordForm.formData,
},
formSchema: {
name: {
type: 'string',
required: true,
min: 3,
},
about: {
type: 'string',
required: false,
},
...passwordForm.formSchema,
},
disabled: true,
response: null,
// TODO: Our styleguide does not support checkmarks.
// Integrate termsAndConditionsConfirmed into `this.formData` once we
// have checkmarks available.
termsAndConditionsConfirmed: false,
dataPrivacy: false,
minimumAge: false,
noCommercial: false,
noPolitical: false,
}
},
props: {
nonce: { type: String, required: true },
email: { type: String, required: true },
},
methods: {
async submit() {
const { name, password, about } = this.formData
const { email, nonce } = this
const termsAndConditionsAgreedVersion = VERSION
const locale = this.$i18n.locale()
try {
await this.$apollo.mutate({
mutation: SignupVerificationMutation,
variables: {
name,
password,
about,
email,
nonce,
termsAndConditionsAgreedVersion,
locale,
},
})
this.response = 'success'
setTimeout(() => {
this.$emit('userCreated', {
email,
password,
})
}, 3000)
} catch (err) {
this.response = 'error'
}
},
},
}
</script>
<style lang="scss" scoped>
.create-account-image {
width: 50%;
max-width: 200px;
}
</style>

View File

@ -23,12 +23,6 @@
</ds-space>
</div>
<div v-else class="create-account-card">
<!-- Wolle <ds-space margin-top="large">
<ds-heading size="h3">
{{ $t('components.registration.create-user-account.title') }}
</ds-heading>
</ds-space> -->
<!-- Wolle ??? submit -->
<ds-form
class="create-user-account"

View File

@ -804,9 +804,7 @@
}
},
"termsAndConditions": {
"agree": "Ich stimme zu!",
"newTermsAndConditions": "Neue Nutzungsbedingungen",
"termsAndConditionsConfirmed": "Ich habe die Nutzungsbedingungen durchgelesen und stimme ihnen zu.",
"termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
"termsAndConditionsNewConfirmText": "Bitte lies Dir die neuen Nutzungsbedingungen jetzt durch!"
},

View File

@ -804,9 +804,7 @@
}
},
"termsAndConditions": {
"agree": "I agree!",
"newTermsAndConditions": "New Terms and Conditions",
"termsAndConditionsConfirmed": "I have read and confirmed the terms and conditions.",
"termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
"termsAndConditionsNewConfirmText": "Please read the new terms of use now!"
},

View File

@ -728,9 +728,7 @@
}
},
"termsAndConditions": {
"agree": "¡Estoy de acuerdo!",
"newTermsAndConditions": "Nuevos términos de uso",
"termsAndConditionsConfirmed": "He leído y acepto los términos de uso.",
"termsAndConditionsNewConfirm": "He leído y acepto los nuevos términos de uso.",
"termsAndConditionsNewConfirmText": "¡Por favor, lea los nuevos términos de uso ahora!"
},

View File

@ -696,9 +696,7 @@
}
},
"termsAndConditions": {
"agree": "J'accepte!",
"newTermsAndConditions": "Nouvelles conditions générales",
"termsAndConditionsConfirmed": "J'ai lu et accepte les conditions générales.",
"termsAndConditionsNewConfirm": "J'ai lu et accepté les nouvelles conditions générales.",
"termsAndConditionsNewConfirmText": "Veuillez lire les nouvelles conditions d'utilisation dès maintenant !"
},

View File

@ -644,9 +644,7 @@
}
},
"termsAndConditions": {
"agree": "Sono d'accordo!",
"newTermsAndConditions": "Nuovi Termini e Condizioni",
"termsAndConditionsConfirmed": "Ho letto e confermato i Termini e condizioni.",
"termsAndConditionsNewConfirm": "Ho letto e accetto le nuove condizioni generali di contratto.",
"termsAndConditionsNewConfirmText": "Si prega di leggere le nuove condizioni d'uso ora!"
},

View File

@ -679,9 +679,7 @@
}
},
"termsAndConditions": {
"agree": "Eu concordo!",
"newTermsAndConditions": "Novos Termos e Condições",
"termsAndConditionsConfirmed": "Eu li e confirmei os Terms and Conditions.",
"termsAndConditionsNewConfirm": "Eu li e concordo com os novos termos de condições.",
"termsAndConditionsNewConfirmText": "Por favor, leia os novos termos de uso agora!"
},

View File

@ -728,9 +728,7 @@
}
},
"termsAndConditions": {
"agree": "Я согласен(на)!",
"newTermsAndConditions": "Новые условия и положения",
"termsAndConditionsConfirmed": "Я прочитал(а) и подтверждаю Условия и положения.",
"termsAndConditionsNewConfirm": "Я прочитал(а) и согласен(на) с новыми условиями.",
"termsAndConditionsNewConfirmText": "Пожалуйста, ознакомьтесь с новыми условиями использования!"
},

View File

@ -191,3 +191,158 @@ describe('Registration', () => {
// })
})
})
// Wolle templete from deleted webapp/components/Registration/CreateUserAccount.spec.js
// import { config, mount } from '@vue/test-utils'
// import Vue from 'vue'
// import { VERSION } from '~/constants/terms-and-conditions-version.js'
// import CreateUserAccount from './CreateUserAccount'
// import { SignupVerificationMutation } from '~/graphql/Registration.js'
// const localVue = global.localVue
// config.stubs['sweetalert-icon'] = '<span><slot /></span>'
// config.stubs['client-only'] = '<span><slot /></span>'
// config.stubs['nuxt-link'] = '<span><slot /></span>'
// describe('CreateUserAccount', () => {
// let wrapper, Wrapper, mocks, propsData, stubs
// beforeEach(() => {
// mocks = {
// $toast: {
// success: jest.fn(),
// error: jest.fn(),
// },
// $t: jest.fn(),
// $apollo: {
// loading: false,
// mutate: jest.fn(),
// },
// $i18n: {
// locale: () => 'en',
// },
// }
// propsData = {}
// stubs = {
// LocaleSwitch: "<div class='stub'></div>",
// }
// })
// describe('mount', () => {
// Wrapper = () => {
// return mount(CreateUserAccount, {
// mocks,
// propsData,
// localVue,
// stubs,
// })
// }
// describe('given email and nonce', () => {
// beforeEach(() => {
// propsData.nonce = '666777'
// propsData.email = 'sixseven@example.org'
// })
// it('renders a form to create a new user', () => {
// wrapper = Wrapper()
// expect(wrapper.find('.create-user-account').exists()).toBe(true)
// })
// describe('submit', () => {
// let action
// beforeEach(() => {
// action = async () => {
// wrapper = Wrapper()
// wrapper.find('input#name').setValue('John Doe')
// wrapper.find('input#password').setValue('hellopassword')
// wrapper.find('textarea#about').setValue('Hello I am the `about` attribute')
// wrapper.find('input#passwordConfirmation').setValue('hellopassword')
// wrapper.find('input#checkbox0').setChecked()
// wrapper.find('input#checkbox1').setChecked()
// wrapper.find('input#checkbox2').setChecked()
// wrapper.find('input#checkbox3').setChecked()
// wrapper.find('input#checkbox4').setChecked()
// await wrapper.find('form').trigger('submit')
// await wrapper.html()
// }
// })
// it('delivers data to backend', async () => {
// await action()
// const expected = expect.objectContaining({
// variables: {
// about: 'Hello I am the `about` attribute',
// name: 'John Doe',
// email: 'sixseven@example.org',
// nonce: '666777',
// password: 'hellopassword',
// termsAndConditionsAgreedVersion: VERSION,
// locale: 'en',
// },
// })
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
// })
// it('calls CreateUserAccount graphql mutation', async () => {
// await action()
// const expected = expect.objectContaining({ mutation: SignupVerificationMutation })
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
// })
// describe('in case mutation resolves', () => {
// beforeEach(() => {
// mocks.$apollo.mutate = jest.fn().mockResolvedValue({
// data: {
// SignupVerification: {
// id: 'u1',
// name: 'John Doe',
// slug: 'john-doe',
// },
// },
// })
// })
// it('displays success', async () => {
// await action()
// await Vue.nextTick()
// expect(mocks.$t).toHaveBeenCalledWith(
// 'components.registration.create-user-account.success',
// )
// })
// describe('after timeout', () => {
// beforeEach(jest.useFakeTimers)
// it('emits `userCreated` with { password, email }', async () => {
// await action()
// jest.runAllTimers()
// expect(wrapper.emitted('userCreated')).toEqual([
// [
// {
// email: 'sixseven@example.org',
// password: 'hellopassword',
// },
// ],
// ])
// })
// })
// })
// describe('in case mutation rejects', () => {
// beforeEach(() => {
// mocks.$apollo.mutate = jest.fn().mockRejectedValue(new Error('Invalid nonce'))
// })
// it('displays form errors', async () => {
// await action()
// await Vue.nextTick()
// expect(mocks.$t).toHaveBeenCalledWith(
// 'components.registration.create-user-account.error',
// )
// })
// })
// })
// })
// })
// })

View File

@ -1,27 +0,0 @@
<template>
<create-user-account @userCreated="handleUserCreated" :email="email" :nonce="nonce" />
</template>
<script>
import CreateUserAccount from '~/components/Registration/CreateUserAccount'
export default {
data() {
const { nonce = '', email = '' } = this.$route.query
return { nonce, email }
},
components: {
CreateUserAccount,
},
methods: {
async handleUserCreated({ email, password }) {
try {
await this.$store.dispatch('auth/login', { email, password })
this.$toast.success('You are logged in!')
this.$router.push('/')
} catch (err) {
this.$toast.error(err.message)
}
},
},
}
</script>

View File

@ -1,25 +0,0 @@
<template>
<enter-nonce :email="email" @nonceEntered="nonceEntered">
<ds-space margin-bottom="xxx-small" margin-top="large" centered>
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
</enter-nonce>
</template>
<script>
import EnterNonce from '~/components/EnterNonce/EnterNonce.vue'
export default {
components: {
EnterNonce,
},
data() {
const { email = '' } = this.$route.query
return { email }
},
methods: {
nonceEntered({ email, nonce }) {
this.$router.push({ path: 'create-user-account', query: { email, nonce } })
},
},
}
</script>

View File

@ -1,34 +0,0 @@
<template>
<signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted">
<ds-space centered margin-top="large">
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
</signup>
<ds-space v-else centered>
<hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
</template>
<script>
import Signup from '~/components/Registration/Signup'
import HcEmpty from '~/components/Empty/Empty'
export default {
layout: 'no-header',
components: {
HcEmpty,
Signup,
},
asyncData({ app }) {
return {
publicRegistration: app.$env.PUBLIC_REGISTRATION,
}
},
methods: {
handleSubmitted({ email }) {
this.$router.push({ path: 'enter-nonce', query: { email } })
},
},
}
</script>