E2E: Stake an SNS neuron (#2316)

# Motivation

Continuing with end-to-end test for SNS.

# Changes

1. Stake an SNS neuron.
2. Page objects for SnsNeuronsFooter and SnsTransactionModal.
3. data-tid for SnsNeuronsFooter and SnsTransactionModal components

# Tests

`npm run test`
`npm run test-e2e`

frontend/src/lib/components/sns-neurons/SnsNeuronsFooter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import Footer from "$lib/components/layout/Footer.svelte";
   import { Modal, Spinner } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
@@ -12,32 +13,34 @@
   const closeModal = () => (showModal = undefined);
 </script>
 
-<Footer columns={1}>
-  <button
-    data-tid="stake-sns-neuron-button"
-    class="primary full-width"
-    on:click={() => openModal("stake-neuron")}
-    >{$i18n.neurons.stake_neurons}</button
-  >
-</Footer>
-
-{#if showModal === "stake-neuron"}
-  {#if $snsSelectedProjectNewTxData !== undefined && $snsProjectSelectedStore !== undefined}
-    <SnsStakeNeuronModal
-      token={$snsSelectedProjectNewTxData.token}
-      on:nnsClose={closeModal}
-      rootCanisterId={$snsSelectedProjectNewTxData.rootCanisterId}
-      transactionFee={$snsSelectedProjectNewTxData.transactionFee}
-      governanceCanisterId={$snsProjectSelectedStore.summary
-        .governanceCanisterId}
-    />
-  {:else}
-    <!-- A toast error is shown if there is an error fetching any of the needed data -->
-    <!-- TODO: replace with busy spinner pattern as in <SnsIncreateStakeNeuronModal /> -->
-    <Modal on:nnsClose>
-      <svelte:fragment slot="title"
-        >{$i18n.neurons.stake_neuron}</svelte:fragment
-      ><Spinner /></Modal
+<TestIdWrapper testId="sns-neurons-footer-component">
+  <Footer columns={1}>
+    <button
+      data-tid="stake-sns-neuron-button"
+      class="primary full-width"
+      on:click={() => openModal("stake-neuron")}
+      >{$i18n.neurons.stake_neurons}</button
     >
+  </Footer>
+
+  {#if showModal === "stake-neuron"}
+    {#if $snsSelectedProjectNewTxData !== undefined && $snsProjectSelectedStore !== undefined}
+      <SnsStakeNeuronModal
+        token={$snsSelectedProjectNewTxData.token}
+        on:nnsClose={closeModal}
+        rootCanisterId={$snsSelectedProjectNewTxData.rootCanisterId}
+        transactionFee={$snsSelectedProjectNewTxData.transactionFee}
+        governanceCanisterId={$snsProjectSelectedStore.summary
+          .governanceCanisterId}
+      />
+    {:else}
+      <!-- A toast error is shown if there is an error fetching any of the needed data -->
+      <!-- TODO: replace with busy spinner pattern as in <SnsIncreateStakeNeuronModal /> -->
+      <Modal on:nnsClose>
+        <svelte:fragment slot="title"
+          >{$i18n.neurons.stake_neuron}</svelte:fragment
+        ><Spinner /></Modal
+      >
+    {/if}
   {/if}
-{/if}
+</TestIdWrapper>

frontend/src/lib/modals/sns/neurons/SnsStakeNeuronModal.svelte

@@ -94,6 +94,7 @@
 </script>
 
 <SnsTransactionModal
+  testId="sns-stake-neuron-modal-component"
   {rootCanisterId}
   on:nnsSubmit={stake}
   on:nnsClose

frontend/src/lib/modals/sns/neurons/SnsTransactionModal.svelte

@@ -7,6 +7,7 @@
   import type { ValidateAmountFn } from "$lib/types/transaction";
   import type { TransactionInit } from "$lib/types/transaction";
 
+  export let testId: string | undefined = undefined;
   export let token: Token;
   export let rootCanisterId: Principal;
   export let governanceCanisterId: Principal;
@@ -20,6 +21,7 @@
 </script>
 
 <TransactionModal
+  {testId}
   {rootCanisterId}
   on:nnsSubmit
   on:nnsClose

frontend/src/tests/e2e/sns-governance.spec.ts

@@ -40,6 +40,8 @@ test("Test SNS governance", async ({ page, context }) => {
     `You have no ${snsProjectName} neurons. Stake a neuron to vote on proposals for ${snsProjectName}.`
   );
 
+  await appPo.getNeuronsPo().getSnsNeuronsFooterPo().stakeNeuron(5);
+
   // TODO:
   // SN001: User can see the list of neurons
 

frontend/src/tests/page-objects/Neurons.page-object.ts

@@ -1,6 +1,7 @@
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import { NnsNeuronsPo } from "$tests/page-objects/NnsNeurons.page-object";
 import { SnsNeuronsPo } from "$tests/page-objects/SnsNeurons.page-object";
+import { SnsNeuronsFooterPo } from "$tests/page-objects/SnsNeuronsFooter.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 
 export class NeuronsPo extends BasePageObject {
@@ -18,6 +19,10 @@ export class NeuronsPo extends BasePageObject {
     return SnsNeuronsPo.under(this.root);
   }
 
+  getSnsNeuronsFooterPo(): SnsNeuronsFooterPo {
+    return SnsNeuronsFooterPo.under(this.root);
+  }
+
   hasNnsNeuronsPo(): Promise<boolean> {
     return this.getNnsNeuronsPo().isPresent();
   }

frontend/src/tests/page-objects/SnsNeuronsFooter.page-object.ts

@@ -0,0 +1,34 @@
+import { BasePageObject } from "$tests/page-objects/base.page-object";
+import { ButtonPo } from "$tests/page-objects/Button.page-object";
+import { SnsStakeNeuronModalPo } from "$tests/page-objects/SnsStakeNeuronModal.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class SnsNeuronsFooterPo extends BasePageObject {
+  private static readonly TID = "sns-neurons-footer-component";
+
+  static under(element: PageObjectElement): SnsNeuronsFooterPo {
+    return new SnsNeuronsFooterPo(element.byTestId(SnsNeuronsFooterPo.TID));
+  }
+
+  getStakeNeuronsButtonPo(): ButtonPo {
+    return ButtonPo.under({
+      element: this.root,
+      testId: "stake-sns-neuron-button",
+    });
+  }
+
+  getSnsStakeNeuronModalPo(): SnsStakeNeuronModalPo {
+    return SnsStakeNeuronModalPo.under(this.root);
+  }
+
+  clickStakeNeuronsButton(): Promise<void> {
+    return this.getStakeNeuronsButtonPo().click();
+  }
+
+  async stakeNeuron(amount: number): Promise<void> {
+    await this.clickStakeNeuronsButton();
+    const modal = this.getSnsStakeNeuronModalPo();
+    await modal.stake(amount);
+    await modal.waitForAbsent();
+  }
+}

frontend/src/tests/page-objects/SnsStakeNeuronModal.page-object.ts

@@ -0,0 +1,19 @@
+import { TransactionModalPo } from "$tests/page-objects/TransactionModal.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class SnsStakeNeuronModalPo extends TransactionModalPo {
+  private static readonly TID = "sns-stake-neuron-modal-component";
+
+  static under(element: PageObjectElement): SnsStakeNeuronModalPo | null {
+    return new SnsStakeNeuronModalPo(
+      element.byTestId(SnsStakeNeuronModalPo.TID)
+    );
+  }
+
+  async stake(amount: number): Promise<void> {
+    const formPo = this.getTransactionFormPo();
+    await formPo.enterAmount(amount);
+    await formPo.clickContinue();
+    await this.getTransactionReviewPo().clickSend();
+  }
+}