From 82ddeb63c49b59c7f57d8bf3c5a4852ddddbbc50 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Mon, 8 Jul 2019 16:13:49 +0800 Subject: [PATCH] Optimize form validation --- resources/assets/src/views/auth/Forgot.vue | 1 - resources/assets/src/views/auth/Login.vue | 2 - resources/assets/src/views/auth/Register.vue | 4 - resources/assets/src/views/auth/Reset.vue | 1 - resources/assets/src/views/user/Profile.vue | 75 ++++++------------- .../assets/tests/views/user/Profile.test.ts | 59 ++++----------- 6 files changed, 39 insertions(+), 103 deletions(-) diff --git a/resources/assets/src/views/auth/Forgot.vue b/resources/assets/src/views/auth/Forgot.vue index 759bbc4b..c143a66d 100644 --- a/resources/assets/src/views/auth/Forgot.vue +++ b/resources/assets/src/views/auth/Forgot.vue @@ -2,7 +2,6 @@
-
+

@@ -24,20 +24,22 @@
@@ -48,41 +50,44 @@ v-model="confirmPassword" type="password" class="form-control" + required + minlength="8" + maxlength="32" >
- + {{ $t('user.profile.password.button') }}
-
+
-
+

- + {{ $t('general.submit') }}
-
+ -
+

@@ -94,6 +99,7 @@ type="email" class="form-control" :placeholder="$t('user.profile.email.new')" + required >
@@ -104,16 +110,17 @@ type="password" class="form-control" :placeholder="$t('user.profile.email.password')" + required >
- + {{ $t('user.profile.email.button') }}
-
+
@@ -143,7 +150,7 @@ tabindex="-1" role="dialog" > -
+
@@ -175,15 +183,14 @@ class="btn btn-outline" data-dismiss="modal" /> -
-
+
@@ -233,24 +240,6 @@ export default { oldPassword, newPassword, confirmPassword, } = this - if (!oldPassword) { - this.$message.error(this.$t('user.emptyPassword')) - this.$refs.oldPassword.focus() - return - } - - if (!newPassword) { - this.$message.error(this.$t('user.emptyNewPassword')) - this.$refs.newPassword.focus() - return - } - - if (!confirmPassword) { - this.$message.error(this.$t('auth.emptyConfirmPwd')) - this.$refs.confirmPassword.focus() - return - } - if (newPassword !== confirmPassword) { this.$message.error(this.$t('auth.invalidConfirmPwd')) this.$refs.confirmPassword.focus() @@ -270,10 +259,6 @@ export default { async changeNickName() { const { nickname } = this - if (!nickname) { - return this.$alert(this.$t('user.emptyNewNickName'), { type: 'error' }) - } - try { await this.$confirm(this.$t('user.changeNickName', { new_nickname: nickname })) } catch { @@ -294,14 +279,6 @@ export default { async changeEmail() { const { email } = this - if (!email) { - return this.$alert(this.$t('user.emptyNewEmail'), { type: 'error' }) - } - - if (!/\S+@\S+\.\S+/.test(email)) { - return this.$alert(this.$t('auth.invalidEmail'), { type: 'warning' }) - } - try { await this.$confirm(this.$t('user.changeEmail', { new_email: email })) } catch { @@ -321,10 +298,6 @@ export default { async deleteAccount() { const { deleteConfirm: password } = this - if (!password) { - return this.$alert(this.$t('user.emptyDeletePassword'), { type: 'error' }) - } - const { code, message } = await this.$http.post( '/user/profile?action=delete', { password } diff --git a/resources/assets/tests/views/user/Profile.test.ts b/resources/assets/tests/views/user/Profile.test.ts index 9544672a..d9c40b39 100644 --- a/resources/assets/tests/views/user/Profile.test.ts +++ b/resources/assets/tests/views/user/Profile.test.ts @@ -47,29 +47,17 @@ test('change password', async () => { .mockResolvedValueOnce({ code: 1, message: 'w' }) .mockResolvedValueOnce({ code: 0, message: 'o' }) const wrapper = mount(Profile) - const button = wrapper.find('[data-test=changePassword]') - - button.trigger('click') - expect(Vue.prototype.$message.error).toBeCalledWith('user.emptyPassword') - expect(Vue.prototype.$http.post).not.toBeCalled() + const form = wrapper.find('[data-test=changePassword]') wrapper.setData({ oldPassword: '1' }) - button.trigger('click') - expect(Vue.prototype.$message.error).toBeCalledWith('user.emptyNewPassword') - expect(Vue.prototype.$http.post).not.toBeCalled() - wrapper.setData({ newPassword: '1' }) - button.trigger('click') - expect(Vue.prototype.$message.error).toBeCalledWith('auth.emptyConfirmPwd') - expect(Vue.prototype.$http.post).not.toBeCalled() - wrapper.setData({ confirmPassword: '2' }) - button.trigger('click') + form.trigger('submit') expect(Vue.prototype.$message.error).toBeCalledWith('auth.invalidConfirmPwd') expect(Vue.prototype.$http.post).not.toBeCalled() wrapper.setData({ confirmPassword: '1' }) - button.trigger('click') + form.trigger('submit') await wrapper.vm.$nextTick() expect(Vue.prototype.$http.post).toBeCalledWith( '/user/profile?action=password', @@ -77,7 +65,7 @@ test('change password', async () => { ) expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' }) - button.trigger('click') + form.trigger('submit') await wrapper.vm.$nextTick() expect(Vue.prototype.$alert).toBeCalledWith('o') }) @@ -90,19 +78,15 @@ test('change nickname', async () => { .mockRejectedValueOnce('close') .mockResolvedValue('confirm') const wrapper = mount(Profile) - const button = wrapper.find('[data-test=changeNickName]') + const form = wrapper.find('[data-test=changeNickName]') document.body.innerHTML += '' - button.trigger('click') - expect(Vue.prototype.$http.post).not.toBeCalled() - expect(Vue.prototype.$alert).toBeCalledWith('user.emptyNewNickName', { type: 'error' }) - wrapper.setData({ nickname: 'nickname' }) - button.trigger('click') + form.trigger('submit') expect(Vue.prototype.$http.post).not.toBeCalled() expect(Vue.prototype.$confirm).toBeCalledWith('user.changeNickName') - button.trigger('click') + form.trigger('submit') await wrapper.vm.$nextTick() expect(Vue.prototype.$http.post).toBeCalledWith( '/user/profile?action=nickname', @@ -111,7 +95,7 @@ test('change nickname', async () => { await wrapper.vm.$nextTick() expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' }) - button.trigger('click') + form.trigger('submit') await flushPromises() expect(Vue.prototype.$message.success).toBeCalledWith('o') expect(document.querySelector('.nickname')!.textContent).toBe('nickname') @@ -125,23 +109,14 @@ test('change email', async () => { .mockRejectedValueOnce('close') .mockResolvedValue('confirm') const wrapper = mount(Profile) - const button = wrapper.find('[data-test=changeEmail]') - - button.trigger('click') - expect(Vue.prototype.$alert).toBeCalledWith('user.emptyNewEmail', { type: 'error' }) - expect(Vue.prototype.$http.post).not.toBeCalled() - - wrapper.setData({ email: 'e' }) - button.trigger('click') - expect(Vue.prototype.$alert).toBeCalledWith('auth.invalidEmail', { type: 'warning' }) - expect(Vue.prototype.$http.post).not.toBeCalled() + const form = wrapper.find('[data-test=changeEmail]') wrapper.setData({ email: 'a@b.c', currentPassword: 'abc' }) - button.trigger('click') + form.trigger('submit') expect(Vue.prototype.$confirm).toBeCalledWith('user.changeEmail') expect(Vue.prototype.$http.post).not.toBeCalled() - button.trigger('click') + form.trigger('submit') await wrapper.vm.$nextTick() expect(Vue.prototype.$http.post).toBeCalledWith( '/user/profile?action=email', @@ -150,7 +125,7 @@ test('change email', async () => { await wrapper.vm.$nextTick() expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' }) - button.trigger('click') + form.trigger('submit') await flushPromises() expect(Vue.prototype.$message.success).toBeCalledWith('o') }) @@ -161,14 +136,10 @@ test('delete account', async () => { .mockResolvedValueOnce({ code: 1, message: 'w' }) .mockResolvedValue({ code: 0, message: 'o' }) const wrapper = mount(Profile) - const button = wrapper.find('[data-test=deleteAccount]') - - button.trigger('click') - expect(Vue.prototype.$alert).toBeCalledWith('user.emptyDeletePassword', { type: 'error' }) - expect(Vue.prototype.$http.post).not.toBeCalled() + const form = wrapper.find('[data-test=deleteAccount]') wrapper.setData({ deleteConfirm: 'abc' }) - button.trigger('click') + form.trigger('submit') expect(Vue.prototype.$http.post).toBeCalledWith( '/user/profile?action=delete', { password: 'abc' } @@ -176,7 +147,7 @@ test('delete account', async () => { await wrapper.vm.$nextTick() expect(Vue.prototype.$alert).toBeCalledWith('w', { type: 'warning' }) - button.trigger('click') + form.trigger('submit') await wrapper.vm.$nextTick() expect(Vue.prototype.$alert).toBeCalledWith('o', { type: 'success' }) })