feat: implement loading state for checkout process and enhance stepper component

src/app/shared/components/stepper/stepper.component.spec.ts

@@ -14,7 +14,7 @@ import { StepComponent } from './step.component';
         <div id="content-2">Content 2</div>
       </app-step>
     </app-stepper>
-  `
+  `,
 })
 class TestHostComponent {
   @ViewChild('stepper') stepper!: StepperComponent;
@@ -25,7 +25,7 @@ class TestHostComponent {
 describe('StepperComponent & StepComponent', () => {
   async function setup() {
     await TestBed.configureTestingModule({
-      imports: [TestHostComponent, StepperComponent, StepComponent]
+      imports: [TestHostComponent, StepperComponent, StepComponent],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(TestHostComponent);
@@ -50,6 +50,18 @@ describe('StepperComponent & StepComponent', () => {
     expect(content2).toBeNull();
   });
 
+  it('can initialize on a specified step', async () => {
+    await TestBed.configureTestingModule({
+      imports: [StepperComponent, StepComponent],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StepperComponent);
+    fixture.componentRef.setInput('initialStepIndex', 1);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.currentStepIndex()).toBe(1);
+  });
+
   it('advances to step 2 when next() is called and current step is valid', async () => {
     const { fixture, component } = await setup();