fix: cancel button no longer accidentally submits valid form

feature-libs/user/profile/components/forgot-password/forgot-password.component.html

@@ -29,7 +29,11 @@
     ></cx-form-errors>
   </label>
 
-  <button class="btn btn-block btn-secondary" (click)="navigateTo('login')">
+  <button
+    type="button"
+    class="btn btn-block btn-secondary"
+    (click)="navigateTo('login')"
+  >
     {{ 'common.cancel' | cxTranslate }}
   </button>
   <button class="btn btn-block btn-primary" [disabled]="form.disabled">

feature-libs/user/profile/components/forgot-password/forgot-password.component.spec.ts

@@ -1,4 +1,3 @@
-import { vi } from 'vitest';
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@@ -17,6 +16,7 @@ import {
 } from '@spartacus/storefront';
 import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 import { BehaviorSubject } from 'rxjs';
+import { vi } from 'vitest';
 import { ForgotPasswordComponentService } from './forgot-password-component.service';
 import { ForgotPasswordComponent } from './forgot-password.component';
 
@@ -141,8 +141,17 @@ describe('ForgotPasswordComponent', () => {
     it('should navigate to login on cancel', () => {
       vi.spyOn(routingService, 'go');
       const cancelBtn = el.query(By.css('button.btn-secondary'));
-      cancelBtn.triggerEventHandler('click');
+      cancelBtn.nativeElement.click();
       expect(routingService.go).toHaveBeenCalledWith({ cxRoute: 'login' });
     });
+
+    it('should not submit the form on cancel', () => {
+      vi.spyOn(component, 'onSubmit');
+
+      const cancelBtn = el.query(By.css('button.btn-secondary'));
+      cancelBtn.nativeElement.click();
+
+      expect(component.onSubmit).not.toHaveBeenCalled();
+    });
   });
 });

feature-libs/user/profile/components/update-email/my-account-v2-email.component.html

@@ -140,7 +140,11 @@
         </label>
 
         <div class="btn-group">
-          <button class="btn button-cancel button" (click)="cancelEdit()">
+          <button
+            type="button"
+            class="btn button-cancel button"
+            (click)="cancelEdit()"
+          >
             {{ 'common.cancel' | cxTranslate }}
           </button>
           <button

feature-libs/user/profile/components/update-email/my-account-v2-email.component.spec.ts

@@ -44,13 +44,13 @@ import {
   PasswordVisibilityToggleModule,
   SpinnerComponent,
 } from '@spartacus/storefront';
-import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 import {
   MockFeatureTogglesController,
   provideMockFeatureToggles,
 } from 'core-libs/core/src/features-config/feature-toggles/testing';
 import { MockUrlPipe } from 'core-libs/core/src/routing/configurable-routes/url-translation/testing/mock-url.pipe';
 import { UrlTestingModule } from 'core-libs/core/src/routing/configurable-routes/url-translation/testing/url-testing.module';
+import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 import { BehaviorSubject, Subject, of } from 'rxjs';
 import { UserProfileFacade } from '../../root/facade';
 import { MyAccountV2EmailComponent } from './my-account-v2-email.component';
@@ -250,12 +250,28 @@ describe('MyAccountV2EmailComponent', () => {
       expect(service.save).toHaveBeenCalled();
     });
 
-    it('when cancel is called. submit button is not visible', () => {
-      component.form.enable();
-      component.cancelEdit();
-      detectChanges();
-      const submitBtn = el.query(By.css('button.btn-primary'));
-      expect(submitBtn).toBeNull();
+    describe('when cancel is called', () => {
+      it('should remove the submit button', () => {
+        component.form.enable();
+        component.cancelEdit();
+        detectChanges();
+        const submitBtn = el.query(By.css('button.btn-primary'));
+        expect(submitBtn).toBeNull();
+      });
+
+      it('it should not submit the form', () => {
+        vi.spyOn(component, 'onSubmit');
+        const editBtn = el.query(By.css('button.editButton'));
+        editBtn.nativeElement.click();
+        component.onEdit();
+        fixture.detectChanges();
+
+        const cancelBtn = el.query(By.css('button.button-cancel'));
+        cancelBtn.nativeElement.click();
+        fixture.detectChanges();
+
+        expect(component.onSubmit).not.toHaveBeenCalled();
+      });
     });
   });
 

feature-libs/user/profile/components/update-email/my-account-v2-email.component.ts

@@ -8,8 +8,8 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
   inject,
+  OnInit,
 } from '@angular/core';
 import {
   FormsModule,

feature-libs/user/profile/components/update-password/my-account-v2-password.component.html

@@ -119,6 +119,7 @@
 
     <div class="password-btn-group">
       <button
+        type="button"
         class="btn myaccount-password-button myaccount-password-button-cancel"
         (click)="onCancel()"
       >

feature-libs/user/profile/components/update-password/my-account-v2-password.component.spec.ts

@@ -28,6 +28,7 @@ import {
 import { By } from '@angular/platform-browser';
 import {
   CxDatePipe,
+  FeatureDirective,
   GlobalMessageService,
   I18nTestingModule,
   MockDatePipe,
@@ -36,20 +37,19 @@ import {
   PageMetaService,
   TranslatePipe,
   UrlPipe,
-  FeatureDirective,
 } from '@spartacus/core';
 import {
   FormErrorsModule,
   PasswordVisibilityToggleModule,
   SpinnerComponent,
 } from '@spartacus/storefront';
-import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 import {
   MockFeatureTogglesController,
   provideMockFeatureToggles,
 } from 'core-libs/core/src/features-config/feature-toggles/testing';
 import { MockUrlPipe } from 'core-libs/core/src/routing/configurable-routes/url-translation/testing/mock-url.pipe';
 import { UrlTestingModule } from 'core-libs/core/src/routing/configurable-routes/url-translation/testing/url-testing.module';
+import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 import { BehaviorSubject, of } from 'rxjs';
 import { MyAccountV2PasswordComponent } from './my-account-v2-password.component';
 import { UpdatePasswordComponentService } from './update-password-component.service';
@@ -198,13 +198,25 @@ describe('MyAccountV2PasswordComponent', () => {
 
     it('should clean input box', () => {
       fixture.detectChanges();
-      const buttons = fixture.debugElement.queryAll(
+      const cancelButton = fixture.debugElement.query(
         By.css('.myaccount-password-button-cancel')
       );
-      buttons[0].triggerEventHandler('click', null);
+      cancelButton.nativeElement.click();
       expect(el.queryAll(By.css('form-control')).length).toEqual(0);
     });
 
+    it('should not submit the form when cancel is clicked', () => {
+      vi.spyOn(component, 'onSubmit');
+      fixture.detectChanges();
+
+      const cancelButton = fixture.debugElement.query(
+        By.css('.myaccount-password-button-cancel')
+      );
+      cancelButton.nativeElement.click();
+
+      expect(component.onSubmit).not.toHaveBeenCalled();
+    });
+
     it('should hide cx message strip when close clicked', () => {
       component.closeDialogConfirmationAlert();
       fixture.detectChanges();

feature-libs/user/profile/components/update-password/update-password.component.html

@@ -108,7 +108,11 @@
       ></cx-form-errors>
     </label>
 
-    <button class="btn btn-block btn-secondary" (click)="navigateTo('home')">
+    <button
+      type="button"
+      class="btn btn-block btn-secondary"
+      (click)="navigateTo('home')"
+    >
       {{ 'common.cancel' | cxTranslate }}
     </button>
     <button class="btn btn-block btn-primary" [disabled]="form.disabled">

feature-libs/user/profile/components/update-password/update-password.component.spec.ts

@@ -1,4 +1,3 @@
-import { vi } from 'vitest';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -25,15 +24,16 @@ import {
   PasswordVisibilityToggleModule,
   SpinnerComponent,
 } from '@spartacus/storefront';
-import { UrlTestingModule } from 'core-libs/core/src/routing/configurable-routes/url-translation/testing/url-testing.module';
 import {
   MockFeatureTogglesController,
   provideMockFeatureToggles,
 } from 'core-libs/core/src/features-config/feature-toggles/testing';
+import { UrlTestingModule } from 'core-libs/core/src/routing/configurable-routes/url-translation/testing/url-testing.module';
+import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 import { BehaviorSubject, of } from 'rxjs';
+import { vi } from 'vitest';
 import { UpdatePasswordComponentService } from './update-password-component.service';
 import { UpdatePasswordComponent } from './update-password.component';
-import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 
 @Component({
   selector: 'cx-spinner',
@@ -180,9 +180,18 @@ describe('UpdatePasswordComponent', () => {
     it('should navigate to home on cancel', () => {
       vi.spyOn(routingService, 'go');
       const cancelBtn = el.query(By.css('button.btn-secondary'));
-      cancelBtn.triggerEventHandler('click');
+      cancelBtn.nativeElement.click();
       expect(routingService.go).toHaveBeenCalledWith({ cxRoute: 'home' });
     });
+
+    it('should not submit the form on cancel', () => {
+      vi.spyOn(component, 'onSubmit');
+
+      const cancelBtn = el.query(By.css('button.btn-secondary'));
+      cancelBtn.nativeElement.click();
+
+      expect(component.onSubmit).not.toHaveBeenCalled();
+    });
   });
 
   describe('Accessibility', () => {

feature-libs/user/profile/components/update-password/update-password.component.ts

@@ -8,8 +8,8 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  Optional,
   inject,
+  Optional,
 } from '@angular/core';
 import {
   FormsModule,