feat: add UI tests to create fuels template (#3104)

* feat: add ui testing to `create-fuels` template * add changeset * fix changeset * add to nextjs template too * update changeset * restructure folders * update some paths * add to docs * Update pnpm-lock.yaml * Update tests-validate.sh * update path in test * update other tests too * fix tests-validate.sh * revert contract-ids.json * update test file path * use `webServer` to start servers * add comment * move tests from e2e to integration * rename npm scripts * remove playwright-report --------- Co-authored-by: Chad Nehemiah <chad.nehemiah94@gmail.com>
FuelLabs · Sep 11, 2024 · 11d4f8b · 11d4f8b
1 parent aef7282
commit 11d4f8b
Show file tree

Hide file tree

Showing 32 changed files with 345 additions and 87 deletions.
diff --git a/.changeset/wet-sheep-call.md b/.changeset/wet-sheep-call.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: add UI tests to `create fuels` template
diff --git a/apps/create-fuels-counter-guide/.gitignore b/apps/create-fuels-counter-guide/.gitignore
@@ -31,4 +31,7 @@ src/sway-api/scripts
 src/sway-api/index.ts
 
 sway-programs/**/out
-.turbo
+.turbo
+
+playwright-report
+test-results
diff --git a/apps/create-fuels-counter-guide/package.json b/apps/create-fuels-counter-guide/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "test": "vitest",
+    "test:ui": "./test/ui/test-ui.sh",
     "original:dev": "vite",
     "original:build": "tsc -b && vite build",
     "original:start": "next start",
@@ -18,17 +18,18 @@
     "@fuels/react": "^0.27.1",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-router": "^1.48.1",
-    "fuels": "workspace:*",
     "@wagmi/connectors": "^5.1.8",
     "@wagmi/core": "^2.13.4",
     "dotenv": "^16.4.5",
+    "fuels": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-use": "^17.5.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
+    "@playwright/test": "^1.46.1",
     "@tanstack/router-plugin": "^1.47.0",
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.5",

diff --git a/apps/create-fuels-counter-guide/playwright.config.ts b/apps/create-fuels-counter-guide/playwright.config.ts
@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test/ui',
+  /* Run tests in files in parallel */
+  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', { open: 'never' }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  timeout: 60000,
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: [
+    {
+      command: 'pnpm run original:dev',
+      port: 5173,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: 'pnpm run fuels:dev',
+      port: 4000,
+      reuseExistingServer: !process.env.CI,
+    }
+  ]
+});
diff --git a/apps/create-fuels-counter-guide/test/ui/test-ui.sh b/apps/create-fuels-counter-guide/test/ui/test-ui.sh
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# This script installs the necessary dependencies for the UI tests and runs them.
+
+pnpm exec playwright install --with-deps  > /dev/null 2>&1
+pnpm exec playwright test
+TEST_RESULT=$?
+
+exit $TEST_RESULT
diff --git a/apps/create-fuels-counter-guide/test/ui/ui.test.ts b/apps/create-fuels-counter-guide/test/ui/ui.test.ts
@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+const WEB_SERVER_URL = 'http://localhost:5173';
+
+test.extend({
+  page: async ({ page }, use) => {
+    await page.evaluate(() => window.localStorage.clear());
+    await use(page);
+  },
+});
+
+test('counter contract - increment function call works properly', async ({ page }) => {
+  await page.goto(WEB_SERVER_URL, { waitUntil: 'networkidle' });
+
+  await page.waitForTimeout(2000);
+
+  const topUpWalletButton = page.getByText('Top-up Wallet');
+  await topUpWalletButton.click();
+
+  await page.waitForTimeout(2000);
+
+  const initialCounterValue = +(page.getByTestId('counter').textContent);
+
+  const incrementButton = page.getByText('Increment Counter');
+  await incrementButton.click();
+
+  await page.waitForTimeout(2000);
+
+  const counterValueAfterIncrement = +(page.getByTestId('counter').textContent);
+  expect(+(counterValueAfterIncrement)).toEqual(+initialCounterValue + 1);
+});
+
+// #region decrement-counter-ui-test
+test('counter contract - decrement function call works properly', async ({ page }) => {
+  await page.goto(WEB_SERVER_URL, { waitUntil: 'networkidle' });
+
+  await page.waitForTimeout(2000); // These timeouts are needed to ensure that we wait for transactions to be mined
+
+  const topUpWalletButton = page.getByText('Top-up Wallet');
+  await topUpWalletButton.click();
+
+  await page.waitForTimeout(2000);
+
+  const initialCounterValue = +(page.getByTestId('counter').textContent);
+
+  const decrementButton = page.getByText('Decrement Counter');
+  await decrementButton.click();
+
+  await page.waitForTimeout(2000);
+
+  const counterValueAfterDecrement = +(page.getByTestId('counter').textContent);
+  expect(+(counterValueAfterDecrement)).toEqual(+initialCounterValue - 1);
+});
+// #endregion decrement-counter-ui-test
diff --git a/apps/docs/src/guide/creating-a-fuel-dapp/index.md b/apps/docs/src/guide/creating-a-fuel-dapp/index.md
@@ -199,6 +199,10 @@ We've provided some examples for each program type in the `./test` directory of
 
 <<< @/../../docs-snippets/src/guide/create-fuels/decrement_counter.test.ts#decrement-counter{ts:line-numbers}
 
+The template also comes with a UI testing setup using [Playwright](https://playwright.dev/). We can add a test for our new `decrement_counter` function in the `./test/ui/ui.test.ts` file:
+
+<<< @/../../create-fuels-counter-guide/test/ui/ui.test.ts#decrement-counter-ui-test{ts:line-numbers}
+
 ## Next Steps
 
 - Now that you have a basic counter dApp running and have the `npm create fuels` workflow powering you, you can start building more complex dApps using the Fuel Stack. A good place to start for ideas and reference code is the [Sway Applications Repo](https://github.com/FuelLabs/sway-applications).

diff --git a/packages/create-fuels/src/lib/rewriteTemplateFiles.test.ts b/packages/create-fuels/src/lib/rewriteTemplateFiles.test.ts
@@ -65,7 +65,7 @@ describe('rewriteTemplateFiles', () => {
   });
 
   it('should rewrite the test files', () => {
-    const testDir = join(paths.templateRoot, 'test');
+    const testDir = join(paths.templateRoot, 'test', 'integration');
     const programs = [
       {
         program: 'contract',

diff --git a/packages/create-fuels/src/lib/rewriteTemplateFiles.ts b/packages/create-fuels/src/lib/rewriteTemplateFiles.ts
@@ -19,7 +19,7 @@ export const rewriteTemplateFiles = (templateDir: string) => {
   writeFileSync(fuelsConfigFilePath, contents);
 
   // tests
-  const testDir = join(templateDir, 'test');
+  const testDir = join(templateDir, 'test', 'integration');
   const programs = ['contract', 'predicate', 'script'];
   programs.forEach((program) => {
     const testFilePath = join(testDir, `${program}.test.ts`);

diff --git a/playwright-tests/create-fuels.test.ts b/playwright-tests/create-fuels.test.ts
@@ -13,23 +13,22 @@ test.extend({
 test('counter contract - increment function call works properly', async ({ page }) => {
   await page.goto(WEB_SERVER_URL, { waitUntil: 'networkidle' });
 
-  await page.waitForTimeout(5000);
+  await page.waitForTimeout(2000);
 
   const topUpWalletButton = page.getByText('Top-up Wallet');
   await topUpWalletButton.click();
 
-  const welcomeToFuelText = page.getByText('Welcome to Fuel');
-  await expect(welcomeToFuelText).toBeVisible();
+  await page.waitForTimeout(2000);
 
-  await page.waitForTimeout(4000);
+  const initialCounterValue = +page.getByTestId('counter').textContent;
 
   const incrementButton = page.getByText('Increment Counter');
   await incrementButton.click();
 
   await page.waitForTimeout(2000);
 
-  const counter = page.getByTestId('counter');
-  await expect(counter).toBeVisible();
+  const counterValueAfterIncrement = +page.getByTestId('counter').textContent;
+  expect(counterValueAfterIncrement).toEqual(initialCounterValue + 1);
 });
 
 test('top-up wallet button', async ({ page }) => {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/tests-validate.sh b/scripts/tests-validate.sh
@@ -2,7 +2,9 @@
 
 ROOT=$(cd "$(dirname "$0")/.."; pwd)
 
-FILES=$(find $ROOT/{apps,packages,internal} -name '*.test.ts')
+# ignore files in apps/create-fuels-counter-guide/test/ui
+FILES=$(find $ROOT/{apps,packages,internal} -name '*.test.ts' | grep -v "apps/create-fuels-counter-guide/test/ui")
+
 INVALID_FILES=$(grep -LE "@group\s+(node|browser|e2e|integration)" $FILES)
 
 if [ ! -z "$INVALID_FILES" ]; then

diff --git a/templates/nextjs/.gitignore b/templates/nextjs/.gitignore
@@ -40,4 +40,7 @@ src/sway-api/scripts
 src/sway-api/index.ts
 
 sway-programs/**/out
-.turbo
+.turbo
+
+test-results
+playwright-report