From 359dfd0bf1c5a56f1ec8f9b196417d5aee9ae02e Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Thu, 27 Jan 2022 13:15:00 +0000 Subject: [PATCH 01/24] changes --- src/pages/Login.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 214523e63..146e41b95 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -118,10 +118,11 @@ v-model:value="phoneInput" containerStyling="border-black border h-12 lg:h-16" :validation="phoneInputValidation" - :maxLength="10" + :maxLength="11" :staticText="phoneInputStaticText" :startIcon="phoneInputIconConfig" :placeholder="phoneInputPlaceholder" + :justify="center" data-test="phone" > From ac3aae5f8f9a088a56714f53e1c646ad93682963 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Thu, 27 Jan 2022 14:31:26 +0000 Subject: [PATCH 02/24] change --- src/pages/Login.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 146e41b95..0c165094c 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -122,7 +122,6 @@ :staticText="phoneInputStaticText" :startIcon="phoneInputIconConfig" :placeholder="phoneInputPlaceholder" - :justify="center" data-test="phone" > From a0a786cc7569fb62767a9b413c74bbb129d0b53b Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Fri, 28 Jan 2022 06:36:39 +0000 Subject: [PATCH 03/24] inputNumber_icon_aligned_center --- src/components/UI/Text/InputNumber.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/Text/InputNumber.vue b/src/components/UI/Text/InputNumber.vue index e8ef49105..d23d9440a 100644 --- a/src/components/UI/Text/InputNumber.vue +++ b/src/components/UI/Text/InputNumber.vue @@ -29,7 +29,7 @@
Date: Fri, 28 Jan 2022 06:45:20 +0000 Subject: [PATCH 04/24] inputNumber_icon_aligned_center --- src/pages/Login.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 0c165094c..214523e63 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -118,7 +118,7 @@ v-model:value="phoneInput" containerStyling="border-black border h-12 lg:h-16" :validation="phoneInputValidation" - :maxLength="11" + :maxLength="10" :staticText="phoneInputStaticText" :startIcon="phoneInputIconConfig" :placeholder="phoneInputPlaceholder" From 0b5407f67aa395a4928b17f71d93f374765afd1d Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Tue, 1 Feb 2022 07:49:24 +0000 Subject: [PATCH 05/24] icon_position_fixed --- src/components/UI/Text/InputNumber.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/Text/InputNumber.vue b/src/components/UI/Text/InputNumber.vue index d23d9440a..63df768a7 100644 --- a/src/components/UI/Text/InputNumber.vue +++ b/src/components/UI/Text/InputNumber.vue @@ -29,7 +29,7 @@
Date: Tue, 1 Feb 2022 11:50:37 +0000 Subject: [PATCH 06/24] Resend_timer_added --- src/assets/locales/en.js | 3 ++- src/assets/locales/hi.js | 3 ++- src/pages/Login.vue | 26 ++++++++++++++++++++++---- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/assets/locales/en.js b/src/assets/locales/en.js index ec70ecfcc..75773b7dd 100644 --- a/src/assets/locales/en.js +++ b/src/assets/locales/en.js @@ -276,7 +276,8 @@ export default { }, submit: "Submit OTP", resend: "Resend OTP", - resent: "OTP has been sent again", + timer: "Resend OTP in", + secs: "secs", }, or: "OR", google: { diff --git a/src/assets/locales/hi.js b/src/assets/locales/hi.js index 43a14d33d..cf9bb063b 100644 --- a/src/assets/locales/hi.js +++ b/src/assets/locales/hi.js @@ -278,7 +278,8 @@ export default { }, submit: "OTP जमा करें", resend: "OTP दोबारा भेजो", - resent: "OTP फिर भेजा गया है", + timer: "OTP वापस भेजें", + secs: "सेकंड में", }, or: "या फिर", google: { diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 214523e63..9c31498a7 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -162,12 +162,12 @@ :buttonClass="resendOTPButtonClass" class="mt-2" :isDisabled="submitOTPIconConfig.enabled" - v-if="requestedOtp && !resentOtp" + v-if="requestedOtp && !counting" data-test="resendOTP" > - -

- {{ $t("login.otp.resent") }} + +

+ {{$t("login.otp.timer")}} {{ counter }} {{$t("login.otp.secs")}}

@@ -224,6 +224,8 @@ export default { return { phoneInput: "", // phone input text otpInput: "", // otp input text + counting: false, // whether counter is enabled for resend OTP + counter: "", // the count of the counter requestedOtp: false, // whether the user has requested OTP once resentOtp: false, // whether the user has requested to resend OTP invalidOtp: false, // whether the OTP is invalid @@ -395,16 +397,32 @@ export default { // whether the phone number entered by the user is valid return this.phoneInput.toString().match(/^([0]|\+91)?[6-9]\d{9}$/g) != null; }, + startCountdown(seconds) { + // counts seconds before enabling resend OTP button + this.counter = seconds; + const interval = setInterval(() => { + this.counter--; + if(this.counter == 0) + { + this.counting= false; + clearInterval(interval); + } + }, 1000); + }, requestOtp() { // requests OTP for the first time UserAPIService.requestOtp(this.formattedPhoneInput); this.requestedOtp = true; + this.counting = true; + this.startCountdown(60); this.invalidOtp = false; }, resendOtp() { // resends OTP on user request UserAPIService.requestOtp(this.formattedPhoneInput); this.resentOtp = true; + this.counting = true; + this.startCountdown(60); this.invalidOtp = false; }, phoneLogin() { From c65937a4aee6852f98bb9d08c061a0406cf41a33 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Thu, 3 Feb 2022 05:07:38 +0000 Subject: [PATCH 07/24] test_error_resolved --- tests/unit/pages/Login.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 635c928a7..21cb8624d 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -102,7 +102,7 @@ describe("Login.vue", () => { await requestOTP(); // resend OTP - await wrapper.find('[data-test="resendOTP"]').trigger("click"); + await wrapper.find('#resendOTP').trigger("click"); await flushPromises(); From 0851aec22fd260f634df2b182563981b5a350acf Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Thu, 3 Feb 2022 07:01:04 +0000 Subject: [PATCH 08/24] test_error_resolved --- tests/unit/pages/Login.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 21cb8624d..01eef1a21 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -95,14 +95,14 @@ describe("Login.vue", () => { // mock function to verify OTP const requestOtp = jest .spyOn(UserAPIService, "requestOtp") - .mockImplementation(() => jest.fn()); - + .mockImplementation(() => jest.fn()); + mountWrapper(); await setPhoneNumber(); await requestOTP(); - + await wrapper.setData({ counting: false }); // resend OTP - await wrapper.find('#resendOTP').trigger("click"); + await wrapper.find('[data-test="resendOTP"]').trigger("click"); await flushPromises(); From be36216795eb19a2b29b7e563b3a2c396db85eea Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Thu, 3 Feb 2022 18:03:01 +0000 Subject: [PATCH 09/24] test_updated_for_resend_otp --- tests/unit/pages/Login.spec.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 01eef1a21..821d71f96 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -95,18 +95,23 @@ describe("Login.vue", () => { // mock function to verify OTP const requestOtp = jest .spyOn(UserAPIService, "requestOtp") - .mockImplementation(() => jest.fn()); - + .mockImplementation(() => jest.fn()); + + const startCountdown = jest + .spyOn(Login.methods,"startCountdown") ; mountWrapper(); await setPhoneNumber(); await requestOTP(); await wrapper.setData({ counting: false }); + // resend OTP await wrapper.find('[data-test="resendOTP"]').trigger("click"); await flushPromises(); expect(requestOtp).toHaveBeenCalled(); + expect(startCountdown).toHaveBeenCalled(); + expect(wrapper.vm.counter).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); expect(wrapper.vm.invalidOtp).toBe(false); }); From 85ce380705ab1b8bf73c494d9171c6c18c2eb142 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Fri, 4 Feb 2022 08:46:16 +0000 Subject: [PATCH 10/24] lines_included_in_test --- tests/unit/pages/Login.spec.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 821d71f96..40af720d5 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -96,12 +96,16 @@ describe("Login.vue", () => { const requestOtp = jest .spyOn(UserAPIService, "requestOtp") .mockImplementation(() => jest.fn()); - const startCountdown = jest - .spyOn(Login.methods,"startCountdown") ; + .spyOn(Login.methods, "startCountdown") + .mockImplementation(() => jest.fn()); mountWrapper(); + await setPhoneNumber(); await requestOTP(); + const counter = 60; + await wrapper.setData({ counter: counter }); + await startCountdown(); await wrapper.setData({ counting: false }); // resend OTP @@ -110,7 +114,7 @@ describe("Login.vue", () => { await flushPromises(); expect(requestOtp).toHaveBeenCalled(); - expect(startCountdown).toHaveBeenCalled(); + expect(startCountdown).toHaveBeenCalledWith(60); expect(wrapper.vm.counter).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); expect(wrapper.vm.invalidOtp).toBe(false); From 1d0e4a56819f244413a7e482768064baf02f10c8 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Fri, 4 Feb 2022 10:26:30 +0000 Subject: [PATCH 11/24] test_added_for_timer --- tests/unit/pages/Login.spec.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 40af720d5..e9e55e5a9 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -96,16 +96,11 @@ describe("Login.vue", () => { const requestOtp = jest .spyOn(UserAPIService, "requestOtp") .mockImplementation(() => jest.fn()); - const startCountdown = jest - .spyOn(Login.methods, "startCountdown") - .mockImplementation(() => jest.fn()); + const startCountdown = jest.spyOn(Login.methods, "startCountdown"); mountWrapper(); await setPhoneNumber(); await requestOTP(); - const counter = 60; - await wrapper.setData({ counter: counter }); - await startCountdown(); await wrapper.setData({ counting: false }); // resend OTP @@ -114,12 +109,30 @@ describe("Login.vue", () => { await flushPromises(); expect(requestOtp).toHaveBeenCalled(); - expect(startCountdown).toHaveBeenCalledWith(60); + expect(startCountdown).toHaveBeenCalled(); + expect(wrapper.vm.counting).toBe(true); expect(wrapper.vm.counter).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); expect(wrapper.vm.invalidOtp).toBe(false); }); + it("OTP timer", async () => { + // mock function to verify OTP + const startCountdown = jest.spyOn(Login.methods, "startCountdown"); + mountWrapper(); + + await flushPromises(); + + //Faketimer is only needed for this test case to advance the time of interval + jest.useFakeTimers(); + wrapper.vm.startCountdown(1); + jest.advanceTimersByTime(1000); + expect(wrapper.vm.counting).toBe(false); + expect(wrapper.vm.counter).toBe(0); + //Rest of code should work in real time + jest.useRealTimers(); + }); + describe("submit valid otp", () => { let verifyOtp; let getUserByAccessToken; From 5f81456974c6c5fabd1b51a0554a96759fa25fe8 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Fri, 4 Feb 2022 10:33:06 +0000 Subject: [PATCH 12/24] test_added_for_timer --- tests/unit/pages/Login.spec.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index e9e55e5a9..7f1cdb63a 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -117,12 +117,7 @@ describe("Login.vue", () => { }); it("OTP timer", async () => { - // mock function to verify OTP - const startCountdown = jest.spyOn(Login.methods, "startCountdown"); - mountWrapper(); - - await flushPromises(); - + //To test the Resend OTP Timer //Faketimer is only needed for this test case to advance the time of interval jest.useFakeTimers(); wrapper.vm.startCountdown(1); From e52cc51dc6e394682b97b6b34a8d1ce61416ca87 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Mon, 7 Feb 2022 05:26:08 +0000 Subject: [PATCH 13/24] PR_feedback_incorporated --- src/assets/locales/en.js | 10 +++++++--- src/assets/locales/hi.js | 10 +++++++--- src/pages/Login.vue | 27 +++++++++++++++------------ tests/unit/pages/Login.spec.js | 9 ++++++--- 4 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/assets/locales/en.js b/src/assets/locales/en.js index 75773b7dd..0be29f6d2 100644 --- a/src/assets/locales/en.js +++ b/src/assets/locales/en.js @@ -275,9 +275,13 @@ export default { invalid: "OTP should be 6 digits long", }, submit: "Submit OTP", - resend: "Resend OTP", - timer: "Resend OTP in", - secs: "secs", + resend: { + no_timer: "Resend OTP", + timer: { + 1: "Resend OTP in ", + 2: " secs", + }, + }, }, or: "OR", google: { diff --git a/src/assets/locales/hi.js b/src/assets/locales/hi.js index cf9bb063b..b8f57c0a2 100644 --- a/src/assets/locales/hi.js +++ b/src/assets/locales/hi.js @@ -277,9 +277,13 @@ export default { invalid: "OTP 6 अंको का होना चाहिए", }, submit: "OTP जमा करें", - resend: "OTP दोबारा भेजो", - timer: "OTP वापस भेजें", - secs: "सेकंड में", + resend: { + no_timer: "OTP दोबारा भेजो", + timer: { + 1: "OTP वापस भेजें", + 2: "सेकंड में", + }, + }, }, or: "या फिर", google: { diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 9c31498a7..0def56137 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -167,7 +167,7 @@ >

- {{$t("login.otp.timer")}} {{ counter }} {{$t("login.otp.secs")}} + {{ $t("login.otp.resend.timer.1") }} {{ counter }} {{ $t("login.otp.resend.timer.2") }}

@@ -352,7 +352,7 @@ export default { resendOTPTitleConfig() { // title config for the resend OTP button return { - value: this.$t("login.otp.resend"), + value: this.$t("login.otp.resend.no_timer"), }; }, resendOTPButtonClass() { @@ -397,16 +397,19 @@ export default { // whether the phone number entered by the user is valid return this.phoneInput.toString().match(/^([0]|\+91)?[6-9]\d{9}$/g) != null; }, - startCountdown(seconds) { - // counts seconds before enabling resend OTP button + startResendOTPTimer(seconds) { + /** + * counts seconds before enabling resend OTP button + * + * @param {Integer} seconds - how many seconds timer to be executed + */ this.counter = seconds; const interval = setInterval(() => { - this.counter--; - if(this.counter == 0) - { - this.counting= false; - clearInterval(interval); - } + this.counter--; + if (!this.counter) { + this.counting = false; + clearInterval(interval); + } }, 1000); }, requestOtp() { @@ -414,7 +417,7 @@ export default { UserAPIService.requestOtp(this.formattedPhoneInput); this.requestedOtp = true; this.counting = true; - this.startCountdown(60); + this.startResendOTPTimer(60); this.invalidOtp = false; }, resendOtp() { @@ -422,7 +425,7 @@ export default { UserAPIService.requestOtp(this.formattedPhoneInput); this.resentOtp = true; this.counting = true; - this.startCountdown(60); + this.startResendOTPTimer(60); this.invalidOtp = false; }, phoneLogin() { diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 7f1cdb63a..dde4cc41a 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -96,7 +96,10 @@ describe("Login.vue", () => { const requestOtp = jest .spyOn(UserAPIService, "requestOtp") .mockImplementation(() => jest.fn()); - const startCountdown = jest.spyOn(Login.methods, "startCountdown"); + const startResendOTPTimer = jest.spyOn( + Login.methods, + "startResendOTPTimer" + ); mountWrapper(); await setPhoneNumber(); @@ -109,7 +112,7 @@ describe("Login.vue", () => { await flushPromises(); expect(requestOtp).toHaveBeenCalled(); - expect(startCountdown).toHaveBeenCalled(); + expect(startResendOTPTimer).toHaveBeenCalled(); expect(wrapper.vm.counting).toBe(true); expect(wrapper.vm.counter).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); @@ -120,7 +123,7 @@ describe("Login.vue", () => { //To test the Resend OTP Timer //Faketimer is only needed for this test case to advance the time of interval jest.useFakeTimers(); - wrapper.vm.startCountdown(1); + wrapper.vm.startResendOTPTimer(1); jest.advanceTimersByTime(1000); expect(wrapper.vm.counting).toBe(false); expect(wrapper.vm.counter).toBe(0); From 5ea23a93d6597131893312d2cec2f111ea02e073 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Mon, 7 Feb 2022 08:56:31 +0000 Subject: [PATCH 14/24] timer_text_changed --- src/pages/Login.vue | 49 +++++++++++++++++++--------------- tests/unit/pages/Login.spec.js | 9 +++---- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 0def56137..1f2b784ec 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -161,14 +161,10 @@ :titleConfig="resendOTPTitleConfig" :buttonClass="resendOTPButtonClass" class="mt-2" - :isDisabled="submitOTPIconConfig.enabled" - v-if="requestedOtp && !counting" + :isDisabled="submitOTPIconConfig.enabled || isResendOTPEnabled" + v-if="requestedOtp" data-test="resendOTP" > - -

- {{ $t("login.otp.resend.timer.1") }} {{ counter }} {{ $t("login.otp.resend.timer.2") }} -

@@ -224,8 +220,7 @@ export default { return { phoneInput: "", // phone input text otpInput: "", // otp input text - counting: false, // whether counter is enabled for resend OTP - counter: "", // the count of the counter + resendOTPTimer: "", // the count of the timer requestedOtp: false, // whether the user has requested OTP once resentOtp: false, // whether the user has requested to resend OTP invalidOtp: false, // whether the OTP is invalid @@ -280,6 +275,13 @@ export default { iconClass: "animate-spin h-4 object-scale-down text-white", }; }, + isResendOTPEnabled() { + //return whether resendOTPTimer is enabled for resend OTP + if (this.resendOTPTimer == 0 || this.resendOTPTimer == 60) { + return false; + } + return true; + }, routeParams() { // returns the params for where the user should be directed to if (this.redirectTo == "" || this.redirectTo == "/") { @@ -351,6 +353,14 @@ export default { }, resendOTPTitleConfig() { // title config for the resend OTP button + if (this.isResendOTPEnabled) { + return { + value: + this.$t("login.otp.resend.timer.1") + + this.resendOTPTimer + + this.$t("login.otp.resend.timer.2"), + }; + } return { value: this.$t("login.otp.resend.no_timer"), }; @@ -397,17 +407,16 @@ export default { // whether the phone number entered by the user is valid return this.phoneInput.toString().match(/^([0]|\+91)?[6-9]\d{9}$/g) != null; }, - startResendOTPTimer(seconds) { + startResendOTPTimer(seconds = 60) { /** - * counts seconds before enabling resend OTP button - * - * @param {Integer} seconds - how many seconds timer to be executed - */ - this.counter = seconds; + * counts seconds before enabling resend OTP button + * + * @param {Integer} seconds - how many seconds timer to be executed + */ + this.resendOTPTimer = seconds; const interval = setInterval(() => { - this.counter--; - if (!this.counter) { - this.counting = false; + this.resendOTPTimer--; + if (!this.resendOTPTimer) { clearInterval(interval); } }, 1000); @@ -416,16 +425,14 @@ export default { // requests OTP for the first time UserAPIService.requestOtp(this.formattedPhoneInput); this.requestedOtp = true; - this.counting = true; - this.startResendOTPTimer(60); + this.startResendOTPTimer(); this.invalidOtp = false; }, resendOtp() { // resends OTP on user request UserAPIService.requestOtp(this.formattedPhoneInput); this.resentOtp = true; - this.counting = true; - this.startResendOTPTimer(60); + this.startResendOTPTimer(); this.invalidOtp = false; }, phoneLogin() { diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index dde4cc41a..c384ccd19 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -104,7 +104,7 @@ describe("Login.vue", () => { await setPhoneNumber(); await requestOTP(); - await wrapper.setData({ counting: false }); + await wrapper.setData({ isResendOTPEnabled: false }); // resend OTP await wrapper.find('[data-test="resendOTP"]').trigger("click"); @@ -113,8 +113,7 @@ describe("Login.vue", () => { expect(requestOtp).toHaveBeenCalled(); expect(startResendOTPTimer).toHaveBeenCalled(); - expect(wrapper.vm.counting).toBe(true); - expect(wrapper.vm.counter).toBe(60); + expect(wrapper.vm.resendOTPTimer).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); expect(wrapper.vm.invalidOtp).toBe(false); }); @@ -125,8 +124,8 @@ describe("Login.vue", () => { jest.useFakeTimers(); wrapper.vm.startResendOTPTimer(1); jest.advanceTimersByTime(1000); - expect(wrapper.vm.counting).toBe(false); - expect(wrapper.vm.counter).toBe(0); + expect(wrapper.vm.isResendOTPEnabled).toBe(false); + expect(wrapper.vm.resendOTPTimer).toBe(0); //Rest of code should work in real time jest.useRealTimers(); }); From 1cd39a1ac919a371b26c296368b59b7f99ef2e59 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Mon, 7 Feb 2022 10:13:17 +0000 Subject: [PATCH 15/24] test_updated --- tests/unit/pages/Login.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index c384ccd19..3034d8132 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -113,6 +113,9 @@ describe("Login.vue", () => { expect(requestOtp).toHaveBeenCalled(); expect(startResendOTPTimer).toHaveBeenCalled(); + expect(wrapper.find('[data-test="resendOTP"]').text()).toBe( + "OTP दोबारा भेजो" + ); expect(wrapper.vm.resendOTPTimer).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); expect(wrapper.vm.invalidOtp).toBe(false); From 446b32461fcdf725dbdd9cb4b3d63b2932789bb2 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Mon, 7 Feb 2022 10:24:43 +0000 Subject: [PATCH 16/24] test_updated --- tests/unit/pages/Login.spec.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 3034d8132..c384ccd19 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -113,9 +113,6 @@ describe("Login.vue", () => { expect(requestOtp).toHaveBeenCalled(); expect(startResendOTPTimer).toHaveBeenCalled(); - expect(wrapper.find('[data-test="resendOTP"]').text()).toBe( - "OTP दोबारा भेजो" - ); expect(wrapper.vm.resendOTPTimer).toBe(60); expect(wrapper.vm.resentOtp).toBe(true); expect(wrapper.vm.invalidOtp).toBe(false); From 7191dabae4cd605eac1a9a6380f86c90b30701bd Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Mon, 7 Feb 2022 12:23:27 +0000 Subject: [PATCH 17/24] PR_feedback_incorporated --- src/pages/Login.vue | 33 +++++++++++++++------------------ tests/unit/pages/Login.spec.js | 16 +++++++--------- 2 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 1f2b784ec..d372a3a72 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -152,7 +152,7 @@ :iconConfig="submitOTPIconConfig" :buttonClass="submitOTPButtonClass" v-if="requestedOtp" - :disabled="!isSubmitOTPEnabled || submitOTPIconConfig.enabled" + :disabled="!isSubmitOTPEnabled || isSubmitOTPInProgress" data-test="submitOTP" > @@ -161,7 +161,7 @@ :titleConfig="resendOTPTitleConfig" :buttonClass="resendOTPButtonClass" class="mt-2" - :isDisabled="submitOTPIconConfig.enabled || isResendOTPEnabled" + :isDisabled="isSubmitOTPInProgress || !isResendOTPEnabled" v-if="requestedOtp" data-test="resendOTP" > @@ -212,7 +212,6 @@ export default { isRequestOtpEnabled() { if (!this.isRequestOtpEnabled) { this.requestedOtp = false; - this.resentOtp = false; } }, }, @@ -222,7 +221,6 @@ export default { otpInput: "", // otp input text resendOTPTimer: "", // the count of the timer requestedOtp: false, // whether the user has requested OTP once - resentOtp: false, // whether the user has requested to resend OTP invalidOtp: false, // whether the OTP is invalid toast: useToast(), warningIcon: require("@/assets/images/exclamation-circle-solid.svg"), @@ -275,12 +273,14 @@ export default { iconClass: "animate-spin h-4 object-scale-down text-white", }; }, + /** + * whether resendOTPTimer is enabled for resend OTP + */ isResendOTPEnabled() { - //return whether resendOTPTimer is enabled for resend OTP - if (this.resendOTPTimer == 0 || this.resendOTPTimer == 60) { - return false; + if (this.resendOTPTimer == 0) { + return true; } - return true; + return false; }, routeParams() { // returns the params for where the user should be directed to @@ -353,7 +353,7 @@ export default { }, resendOTPTitleConfig() { // title config for the resend OTP button - if (this.isResendOTPEnabled) { + if (!this.isResendOTPEnabled) { return { value: this.$t("login.otp.resend.timer.1") + @@ -407,18 +407,16 @@ export default { // whether the phone number entered by the user is valid return this.phoneInput.toString().match(/^([0]|\+91)?[6-9]\d{9}$/g) != null; }, + /** + * counts seconds before enabling resend OTP button + * + * @param {Number} seconds - the number of seconds for which the timer is to be run + */ startResendOTPTimer(seconds = 60) { - /** - * counts seconds before enabling resend OTP button - * - * @param {Integer} seconds - how many seconds timer to be executed - */ this.resendOTPTimer = seconds; const interval = setInterval(() => { this.resendOTPTimer--; - if (!this.resendOTPTimer) { - clearInterval(interval); - } + if (!this.resendOTPTimer) clearInterval(interval); }, 1000); }, requestOtp() { @@ -431,7 +429,6 @@ export default { resendOtp() { // resends OTP on user request UserAPIService.requestOtp(this.formattedPhoneInput); - this.resentOtp = true; this.startResendOTPTimer(); this.invalidOtp = false; }, diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index c384ccd19..79a6c15fa 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -88,7 +88,6 @@ describe("Login.vue", () => { .setValue("919191919"); expect(wrapper.vm.requestedOtp).toBe(false); - expect(wrapper.vm.resentOtp).toBe(false); }); it("resends OTP upon requesting", async () => { @@ -104,7 +103,6 @@ describe("Login.vue", () => { await setPhoneNumber(); await requestOTP(); - await wrapper.setData({ isResendOTPEnabled: false }); // resend OTP await wrapper.find('[data-test="resendOTP"]').trigger("click"); @@ -114,19 +112,19 @@ describe("Login.vue", () => { expect(requestOtp).toHaveBeenCalled(); expect(startResendOTPTimer).toHaveBeenCalled(); expect(wrapper.vm.resendOTPTimer).toBe(60); - expect(wrapper.vm.resentOtp).toBe(true); + expect(wrapper.vm.isResendOTPEnabled).toBe(false); expect(wrapper.vm.invalidOtp).toBe(false); }); - it("OTP timer", async () => { - //To test the Resend OTP Timer + it("enables ResendOTP button when timer ends", async () => { //Faketimer is only needed for this test case to advance the time of interval jest.useFakeTimers(); - wrapper.vm.startResendOTPTimer(1); - jest.advanceTimersByTime(1000); - expect(wrapper.vm.isResendOTPEnabled).toBe(false); + const numseconds = 2; + wrapper.vm.startResendOTPTimer(numseconds); + jest.advanceTimersByTime(numseconds * 1000); + expect(wrapper.vm.isResendOTPEnabled).toBe(true); expect(wrapper.vm.resendOTPTimer).toBe(0); - //Rest of code should work in real time + //reset timers jest.useRealTimers(); }); From b5ff242e407cbacb535ebc1e1de02be27700028f Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Tue, 8 Feb 2022 06:31:59 +0000 Subject: [PATCH 18/24] Bug_fixed --- src/pages/Login.vue | 10 ++++------ tests/unit/pages/Login.spec.js | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index d372a3a72..982712909 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -219,7 +219,7 @@ export default { return { phoneInput: "", // phone input text otpInput: "", // otp input text - resendOTPTimer: "", // the count of the timer + resendOTPTimer: 0, // the count of the timer requestedOtp: false, // whether the user has requested OTP once invalidOtp: false, // whether the OTP is invalid toast: useToast(), @@ -274,12 +274,10 @@ export default { }; }, /** - * whether resendOTPTimer is enabled for resend OTP + * whether the button for resending OTP is enabled */ isResendOTPEnabled() { - if (this.resendOTPTimer == 0) { - return true; - } + if (this.resendOTPTimer == 0) return true; return false; }, routeParams() { @@ -416,7 +414,7 @@ export default { this.resendOTPTimer = seconds; const interval = setInterval(() => { this.resendOTPTimer--; - if (!this.resendOTPTimer) clearInterval(interval); + if (!this.resendOTPTimer || !this.requestedOtp) clearInterval(interval); }, 1000); }, requestOtp() { diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index 79a6c15fa..ef0798e80 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -124,7 +124,7 @@ describe("Login.vue", () => { jest.advanceTimersByTime(numseconds * 1000); expect(wrapper.vm.isResendOTPEnabled).toBe(true); expect(wrapper.vm.resendOTPTimer).toBe(0); - //reset timers + // reset timers jest.useRealTimers(); }); From a5580d323f9d2943393ee9b9642a3f6753351c3b Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Tue, 8 Feb 2022 09:40:42 +0000 Subject: [PATCH 19/24] Test_updated --- tests/unit/pages/Login.spec.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index ef0798e80..c2bc88ec6 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -56,7 +56,6 @@ describe("Login.vue", () => { mountWrapper(); await setPhoneNumber(); await requestOTP(); - expect(requestOtp).toHaveBeenCalled(); expect(wrapper.vm.invalidOtp).toBe(false); expect(wrapper.vm.requestedOtp).toBe(true); @@ -95,6 +94,7 @@ describe("Login.vue", () => { const requestOtp = jest .spyOn(UserAPIService, "requestOtp") .mockImplementation(() => jest.fn()); + const resendOtp = jest.spyOn(Login.methods, "resendOtp"); const startResendOTPTimer = jest.spyOn( Login.methods, "startResendOTPTimer" @@ -102,14 +102,18 @@ describe("Login.vue", () => { mountWrapper(); await setPhoneNumber(); + jest.useFakeTimers(); await requestOTP(); + await jest.advanceTimersByTime(60000); + // reset timers + jest.useRealTimers(); // resend OTP await wrapper.find('[data-test="resendOTP"]').trigger("click"); - await flushPromises(); expect(requestOtp).toHaveBeenCalled(); + expect(resendOtp).toHaveBeenCalled(); expect(startResendOTPTimer).toHaveBeenCalled(); expect(wrapper.vm.resendOTPTimer).toBe(60); expect(wrapper.vm.isResendOTPEnabled).toBe(false); @@ -117,7 +121,7 @@ describe("Login.vue", () => { }); it("enables ResendOTP button when timer ends", async () => { - //Faketimer is only needed for this test case to advance the time of interval + //Faketimer is needed for this test case to advance the time of interval jest.useFakeTimers(); const numseconds = 2; wrapper.vm.startResendOTPTimer(numseconds); From 0472defd4a12f4d47e511248ad73b8121c85f474 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Tue, 8 Feb 2022 17:56:01 +0000 Subject: [PATCH 20/24] interval_fixed --- src/pages/Login.vue | 6 +++--- tests/unit/pages/Login.spec.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 982712909..9ff328f7a 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -274,10 +274,10 @@ export default { }; }, /** - * whether the button for resending OTP is enabled + * whether the button for resending OTP is enabled */ isResendOTPEnabled() { - if (this.resendOTPTimer == 0) return true; + if (!this.resendOTPTimer) return true; return false; }, routeParams() { @@ -414,7 +414,7 @@ export default { this.resendOTPTimer = seconds; const interval = setInterval(() => { this.resendOTPTimer--; - if (!this.resendOTPTimer || !this.requestedOtp) clearInterval(interval); + if (!this.resendOTPTimer || !this.isPhoneValid()) clearInterval(interval); }, 1000); }, requestOtp() { diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index c2bc88ec6..e0942cd47 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -121,7 +121,7 @@ describe("Login.vue", () => { }); it("enables ResendOTP button when timer ends", async () => { - //Faketimer is needed for this test case to advance the time of interval + // fake timer is needed for this test case to advance the time of interval jest.useFakeTimers(); const numseconds = 2; wrapper.vm.startResendOTPTimer(numseconds); From 9077b4c8e568be7dd5876f69da3069e098b67774 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Wed, 9 Feb 2022 08:31:25 +0000 Subject: [PATCH 21/24] fixed_bug_and_added_watcher --- src/pages/Login.vue | 11 +++++++++-- tests/unit/pages/Login.spec.js | 2 ++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 9ff328f7a..ae803a25d 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -214,12 +214,17 @@ export default { this.requestedOtp = false; } }, + requestedOtp() + { + if (!this.resendOTPTimer) clearInterval(this.interval); + }, }, data() { return { phoneInput: "", // phone input text otpInput: "", // otp input text resendOTPTimer: 0, // the count of the timer + interval: 0, // to reset the timer requestedOtp: false, // whether the user has requested OTP once invalidOtp: false, // whether the OTP is invalid toast: useToast(), @@ -412,9 +417,9 @@ export default { */ startResendOTPTimer(seconds = 60) { this.resendOTPTimer = seconds; - const interval = setInterval(() => { + this.interval = setInterval(() => { this.resendOTPTimer--; - if (!this.resendOTPTimer || !this.isPhoneValid()) clearInterval(interval); + if (!this.resendOTPTimer) clearInterval(this.interval); }, 1000); }, requestOtp() { @@ -422,12 +427,14 @@ export default { UserAPIService.requestOtp(this.formattedPhoneInput); this.requestedOtp = true; this.startResendOTPTimer(); + this.otpInput= ""; this.invalidOtp = false; }, resendOtp() { // resends OTP on user request UserAPIService.requestOtp(this.formattedPhoneInput); this.startResendOTPTimer(); + this.otpInput= ""; this.invalidOtp = false; }, phoneLogin() { diff --git a/tests/unit/pages/Login.spec.js b/tests/unit/pages/Login.spec.js index e0942cd47..003d5e1d2 100644 --- a/tests/unit/pages/Login.spec.js +++ b/tests/unit/pages/Login.spec.js @@ -57,6 +57,7 @@ describe("Login.vue", () => { await setPhoneNumber(); await requestOTP(); expect(requestOtp).toHaveBeenCalled(); + expect(wrapper.vm.otpInput).toBe(""); expect(wrapper.vm.invalidOtp).toBe(false); expect(wrapper.vm.requestedOtp).toBe(true); expect(wrapper.find('[data-test="otp"]').exists()).toBe(true); @@ -115,6 +116,7 @@ describe("Login.vue", () => { expect(requestOtp).toHaveBeenCalled(); expect(resendOtp).toHaveBeenCalled(); expect(startResendOTPTimer).toHaveBeenCalled(); + expect(wrapper.vm.otpInput).toBe(""); expect(wrapper.vm.resendOTPTimer).toBe(60); expect(wrapper.vm.isResendOTPEnabled).toBe(false); expect(wrapper.vm.invalidOtp).toBe(false); From 90b7991c7c1c72cb8da0ebe6e517637e9b22cf95 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Wed, 9 Feb 2022 08:33:17 +0000 Subject: [PATCH 22/24] cleaned --- src/pages/Login.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index ae803a25d..281630772 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -210,9 +210,7 @@ export default { }, watch: { isRequestOtpEnabled() { - if (!this.isRequestOtpEnabled) { - this.requestedOtp = false; - } + if (!this.isRequestOtpEnabled) this.requestedOtp = false; }, requestedOtp() { From 52ea92b02b33bd4afc8d271cce4ecab1ffa23aa0 Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Wed, 9 Feb 2022 09:03:31 +0000 Subject: [PATCH 23/24] spaces_added --- src/pages/Login.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 281630772..3aeb9b1a8 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -214,7 +214,7 @@ export default { }, requestedOtp() { - if (!this.resendOTPTimer) clearInterval(this.interval); + if (!this.requestedOtp) clearInterval(this.otpTimerInterval); }, }, data() { @@ -222,7 +222,7 @@ export default { phoneInput: "", // phone input text otpInput: "", // otp input text resendOTPTimer: 0, // the count of the timer - interval: 0, // to reset the timer + otpTimerInterval: 0, // to reset the otp timer requestedOtp: false, // whether the user has requested OTP once invalidOtp: false, // whether the OTP is invalid toast: useToast(), @@ -415,9 +415,9 @@ export default { */ startResendOTPTimer(seconds = 60) { this.resendOTPTimer = seconds; - this.interval = setInterval(() => { + this.otpTimerInterval = setInterval(() => { this.resendOTPTimer--; - if (!this.resendOTPTimer) clearInterval(this.interval); + if (!this.resendOTPTimer) clearInterval(this.otpTimerInterval); }, 1000); }, requestOtp() { @@ -425,14 +425,14 @@ export default { UserAPIService.requestOtp(this.formattedPhoneInput); this.requestedOtp = true; this.startResendOTPTimer(); - this.otpInput= ""; + this.otpInput = ""; this.invalidOtp = false; }, resendOtp() { // resends OTP on user request UserAPIService.requestOtp(this.formattedPhoneInput); this.startResendOTPTimer(); - this.otpInput= ""; + this.otpInput = ""; this.invalidOtp = false; }, phoneLogin() { From b0c2a889a86562316f55ceebd07d76c2d200043c Mon Sep 17 00:00:00 2001 From: Saloni Choudhary <73693628+Salonichoudhary07@users.noreply.github.com> Date: Wed, 9 Feb 2022 10:06:00 +0000 Subject: [PATCH 24/24] corrected clearInterval condition --- src/pages/Login.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 3aeb9b1a8..bf60048cd 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -210,11 +210,10 @@ export default { }, watch: { isRequestOtpEnabled() { - if (!this.isRequestOtpEnabled) this.requestedOtp = false; - }, - requestedOtp() - { - if (!this.requestedOtp) clearInterval(this.otpTimerInterval); + if (!this.isRequestOtpEnabled) { + this.requestedOtp = false; + if (this.resendOTPTimer) clearInterval(this.otpTimerInterval); + } }, }, data() {