Merge pull request #83 from CityOfZion/CU-86a0jg58y

CU-86a0jg58y - Setup e2e tests for the \"examples\" folder of WcSdk

examples/wc-dapp-react/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@cityofzion/wallet-connect-sdk-react": "^2.5.3",
+    "@playwright/test": "^1.38.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
@@ -14,6 +15,7 @@
     "@walletconnect/sign-client": "^2.8.6",
     "@walletconnect/types": "^2.8.6",
     "gh-pages": "^4.0.0",
+    "playwright": "^1.38.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
@@ -26,6 +28,8 @@
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build",
     "test": "react-scripts test",
+    "test:e2e": "playwright test --headed",
+    "test:e2e:headless": "playwright test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

examples/wc-dapp-react/playwright.config.ts

@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  testMatch: '**/*.ts',
+  webServer: {
+    command: 'yarn start',
+    port: 3000,
+  },
+  testDir: 'tests',
+}
+
+export default config

examples/wc-dapp-react/src/components/HelloWorld.tsx

@@ -194,7 +194,7 @@ function HelloWorld () {
                         value={networkType}>
                     {Object.keys(networks).map((key) => (<option value={key} key={key}>{networks[key as NetworkType].name}</option>))}
                 </select>
-                <button onClick={connect}>Connect</button>
+                <button data-testid="hello-world__wallet-connect" onClick={connect}>Connect</button>
             </>}
             {wcSdk.isConnected() && <>
                 <button onClick={disconnect}>Disconnect</button>

examples/wc-dapp-react/tests/walletConnect.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('Dapp connect to wallet', async ({context, page}) => {
+  await page.goto('/') // Go home page
+  await page.waitForTimeout(750) // Await home to load
+  const [newPage] = await Promise.all([
+    context.waitForEvent('page'),
+    page.getByTestId('hello-world__wallet-connect').click() // Click to connect
+  ])
+  expect(newPage).toBeDefined() // Verify if a new tab is opened
+  expect(newPage.url().startsWith("https://neon.coz.io/connect?uri=")).toBe(true) // Verify if the new tab opened Neon Coz Connect.
+})

examples/wc-dapp-react/yarn.lock

@@ -1493,6 +1493,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.38.0":
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.38.0.tgz#0ad33f62394d6a9cb768d0ddfa93b12304c64e13"
+  integrity sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==
+  dependencies:
+    playwright "1.38.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz#e77aac783bd079f548daa0a7f080ab5b5a9741ca"
@@ -5138,7 +5145,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -7388,6 +7395,20 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+[email protected]:
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.38.0.tgz#cb8e135da1c0b1918b070642372040ed9aa7009a"
+  integrity sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==
+
+[email protected], playwright@^1.38.0:
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.38.0.tgz#0ee19d38512b7b1f961c0eb44008a6fed373d206"
+  integrity sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==
+  dependencies:
+    playwright-core "1.38.0"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 portfinder@^1.0.28:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"

examples/wc-dapp-vite-vanilla/index.html

@@ -21,7 +21,7 @@
         <button id="traverseIterator">traverse Iterator</button>
         <button id="getWalletInfo">get Wallet Info</button>
       </div>
-      <button id="connect">Connect Wallet</div>
+      <button data-testid="app__wallet-connect" id="connect">Connect Wallet</div>
     </div>
     <script type="module" src="/main.js"></script>
   </body>

examples/wc-dapp-vite-vanilla/package.json

@@ -6,14 +6,18 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:e2e": "playwright test --headed",
+    "test:e2e:headless": "playwright test"
   },
   "devDependencies": {
     "vite": "^4.4.0"
   },
   "dependencies": {
     "@cityofzion/wallet-connect-sdk-core": "^2.5.4",
     "@walletconnect/sign-client": "^2.9.1",
-    "@walletconnect/types": "^2.9.1"
+    "@walletconnect/types": "^2.9.1",
+    "@playwright/test": "^1.38.0",
+    "playwright": "^1.38.0"
   }
 }

examples/wc-dapp-vite-vanilla/playwright.config.js

@@ -0,0 +1,12 @@
+
+
+const config = {
+  testMatch: '**/*.js',
+  webServer: {
+    command: 'yarn run build && yarn run preview',
+    port: 4173,
+  },
+  testDir: 'tests',
+}
+
+export default config

examples/wc-dapp-vite-vanilla/tests/walletConnect.spec.js

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('Dapp connect to wallet', async ({context, page}) => {
+  await page.goto('/') // Go home page
+  await page.waitForTimeout(500) // Await home to load
+  const [newPage] = await Promise.all([
+    context.waitForEvent('page'),
+    page.getByTestId('app__wallet-connect').click() // Click to connect
+  ])
+  expect(newPage).toBeDefined() // Verify if a new tab is opened
+  expect(newPage.url().startsWith("https://neon.coz.io/connect?uri=")).toBe(true) // Verify if the new tab opened Neon Coz Connect.
+})