make route for become-a-provider

.gitignore

@@ -38,3 +38,7 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 .idea/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -8,10 +8,10 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
-    "test:e2e": "vitest run --dir ./test/e2e",
+    "test": "vitest run && npx playwright test",
+    "test:e2e": "vitest run ./test/e2e",
     "test:stake": "vitest stake",
-    "test:ci": "vitest run --dir ./test/unit-and-integration --coverage",
+    "test:ci": "vitest run ./test/unit-and-integration --coverage",
     "test:ui": "vitest --ui",
     "test:watch": "vitest src",
     "coverage": "vitest run --coverage",
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@playwright/test": "^1.48.2",
     "@polkadot/types-codec": "^12.4.1",
     "@sveltejs/adapter-static": "^3.0.4",
     "@sveltejs/kit": "2.5.24",
@@ -33,6 +34,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/eslint__js": "^8.42.3",
     "@types/jest": "^29.5.12",
+    "@types/node": "^22.8.4",
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "@vitest/coverage-v8": "^2.0.5",

playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test/playwright',
+  testMatch: /.*.test.ts/,
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // currently failing:
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run build && npm run preview',
+    port: 4173,
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/components/BackHomeButton.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let cancelText = 'Cancel';
+</script>
+
+<a href="/" class="btn-no-fill {$$restProps}" data-testid="back-home">{cancelText}</a>

src/components/BecomeAProvider.svelte

@@ -6,13 +6,8 @@
   import CreateMsa from './CreateMsa.svelte';
   import CreateProvider from './CreateProvider.svelte';
   import EmailProviderRequest from './EmailProviderRequest.svelte';
-  import { pageContent } from '$lib/stores/pageContentStore';
   import { NetworkType } from '$lib/stores/networksStore';
-
-  // a callback for when the user cancels this action
-  export let cancelAction = () => {
-    pageContent.login();
-  };
+  import BackHomeButton from '$components/BackHomeButton.svelte';
 </script>
 
 <div id="become-a-provider" class="content-block column w-single-block">
@@ -34,7 +29,7 @@
           <CreateProvider />
         {/if}
       {:else}
-        <button on:click|preventDefault={cancelAction} class="btn-no-fill text-left">Back</button>
+        <BackHomeButton cancelText="Back" />
       {/if}
     </form>
   </BlockSection>

src/components/CreateMsa.svelte

@@ -10,11 +10,7 @@
   import LoadingIcon from '$lib/assets/LoadingIcon.svelte';
   import ActivityLogPreviewItem from './ActivityLogPreviewItem.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
-
-  // a callback for when the user cancels this action
-  export let cancelAction = () => {
-    pageContent.login();
-  };
+  import BackToRootButton from '$components/BackHomeButton.svelte';
 
   let recentActivityItem: Activity | undefined;
   let recentTxnId: Activity['txnId'] | undefined;
@@ -66,7 +62,7 @@
         Create an MSA
       {/if}
     </button>
-    <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel</button>
+    <BackToRootButton />
   </form>
 </div>
 {#if recentActivityItem}

src/components/CreateProvider.svelte

@@ -9,11 +9,8 @@
   import LoadingIcon from '$lib/assets/LoadingIcon.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
   import ActivityLogPreviewItem from './ActivityLogPreviewItem.svelte';
+  import BackHomeButton from '$components/BackHomeButton.svelte';
 
-  // a callback for when the user cancels this action
-  export let cancelAction = () => {
-    pageContent.login();
-  };
   // a callback for when a transaction hits a final state
   let createProviderTxnFinished = async (succeeded: boolean) => {
     if (succeeded) {
@@ -82,7 +79,7 @@
         Create Provider
       {/if}
     </button>
-    <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel</button>
+    <BackHomeButton />
   </div>
 </form>
 {#if recentActivityItem}

src/components/EmailProviderRequest.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
-  import { pageContent } from '$lib/stores/pageContentStore';
   import { createMailto } from '$lib/utils';
 
   let mailTo: string = createMailto('[email protected]', 'Request to become a Frequency provider', '');
 
-  export let cancelAction = () => {
-    pageContent.login();
-  };
-
   function composeEmail() {
     window.location.href = mailTo;
   }
@@ -20,6 +15,6 @@
   </p>
   <form class="flex w-[350px] items-end justify-between">
     <button id="email-request-btn" on:click|preventDefault={composeEmail} class="btn-primary">Email Request</button>
-    <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel</button>
+    <a href="/" class="btn-no-fill">Cancel</a>
   </form>
 </div>

src/components/ProviderLogin.svelte

@@ -17,7 +17,7 @@
         >Want to learn more about providers?
       </a>
     </div>
-    <Button id="request-2b-provider-btn" title="Become a Provider" action={pageContent.becomeProvider} />
+    <a href="/become-a-provider" data-testid="become-a-provider" class="btn-primary">Become a Provider</a>
   </BlockSection>
   <BlockSection title="Need tokens?">
     <HowToTransact additionalStyles="text-sm" />

src/components/RequestToBeProvider.svelte

@@ -15,7 +15,6 @@
   let localDotApi: DotApi = defaultDotApi;
   let mailTo = createMailto('[email protected]', 'Request to be a Provider', '');
   // a callback for when the user cancels this action
-  export let cancelAction = () => {};
 
   dotApi.subscribe((api) => (localDotApi = api));
 
@@ -64,7 +63,7 @@
       <button on:click|preventDefault={doProposeToBeProvider} id="request-2b-provider-btn" class="btn-primary">
         Submit Request To Be Provider</button
       >
-      <button on:click|preventDefault={cancelAction} class="btn-cancel">Cancel</button>
+      <a href="/" class="btn-cancel">Cancel</a>
     </div>
   </form>
 </div>

src/routes/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import Dashboard from '$components/Dashboard.svelte';
-  import BecomeAProvider from '$components/BecomeAProvider.svelte';
   import ProviderLogin from '$components/ProviderLogin.svelte';
   import { pageContent, PageContent } from '$lib/stores/pageContentStore';
 </script>
 
 {#if $pageContent === PageContent.Dashboard}
   <Dashboard />
-{:else if $pageContent === PageContent.Login}
+{:else}
   <ProviderLogin />
-{:else if $pageContent === PageContent.BecomeProvider}
-  <BecomeAProvider />
 {/if}

src/routes/become-a-provider/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import BecomeAProvider from '$components/BecomeAProvider.svelte';
+</script>
+
+<BecomeAProvider />