fix: Imports (#1228)

* fix: imports

* fix: removed download dir

* fix: format

.gitignore

@@ -39,7 +39,7 @@ playwright-report
 playwright/.cache
 
 ### Cypress
-wallets/**/downloads
+**/downloads
 
 ### Synpress
 

examples/ethereum-wallet-mock/cypress.config.ts

@@ -0,0 +1,15 @@
+import { configureSynpressForEthereumWalletMock } from '@synthetixio/synpress/cypress'
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: 'http://localhost:9999',
+    specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'src/cypress/support/e2e.{js,jsx,ts,tsx}',
+    testIsolation: false,
+    async setupNodeEvents(on, config) {
+      return configureSynpressForEthereumWalletMock(on, config)
+    }
+  }
+})

examples/ethereum-wallet-mock/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@examples/ethereum-wallet-mock",
+  "version": "0.0.1-alpha.9",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build:cache": "synpress",
+    "build:cache:force": "synpress --force",
+    "build:cache:headless": "synpress --headless",
+    "serve:test-dapp": "serve node_modules/@metamask/test-dapp/dist -p 9999",
+    "test:cypress:headful": "cypress run --browser chrome --headed"
+  },
+  "dependencies": {
+    "@synthetixio/synpress": "workspace:*",
+    "dotenv": "16.4.2"
+  },
+  "devDependencies": {
+    "@metamask/test-dapp": "8.1.0",
+    "@synthetixio/synpress-tsconfig": "0.0.1-alpha.9",
+    "@types/node": "20.11.17",
+    "cypress": "13.13.0",
+    "serve": "14.2.1",
+    "typescript": "5.3.3"
+  }
+}

examples/new-dawn/test/cypress/support/e2e.ts → examples/ethereum-wallet-mock/src/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import { mockEthereum, synpressCommandsForEthereumWalletMock } from '@synthetixio/synpress/cypress'
+import { mockEthereum, synpressCommandsForEthereumWalletMock } from '@synthetixio/synpress/cypress/support'
 
 synpressCommandsForEthereumWalletMock()
 mockEthereum()

examples/new-dawn/tsconfig.json → examples/ethereum-wallet-mock/tsconfig.json

@@ -10,6 +10,6 @@
     "skipLibCheck": true,
     "types": ["cypress"]
   },
-  "include": ["test"],
+  "include": ["cypress.config.ts", "test", "src"],
   "files": ["environment.d.ts"]
 }

examples/metamask/.env

@@ -0,0 +1,2 @@
+SEED_PHRASE="test test test test test test test test test test test junk"
+WALLET_PASSWORD="SynpressIsAwesomeNow!!!"

examples/metamask/CHANGELOG.md

@@ -0,0 +1,70 @@
+# example-new-dawn
+
+## 0.0.1-alpha.9
+
+### Patch Changes
+
+- Alpha Release
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.9
+
+## 0.0.1-alpha.8
+
+### Patch Changes
+
+- Alpha Release
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.8
+
+## 0.0.1-alpha.7
+
+### Patch Changes
+
+- Alpha Release
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.7
+
+## 0.0.1-alpha.6
+
+### Patch Changes
+
+- Alpha Release
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.6
+
+## 0.0.1-alpha.5
+
+### Patch Changes
+
+- Alpha Release
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.5
+
+## 0.0.1-alpha.4
+
+### Patch Changes
+
+- Alpha Release
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.4
+
+## 0.0.1-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.3
+
+## 0.0.1-alpha.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.2
+
+## 0.0.1-alpha.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @synthetixio/synpress@4.0.0-alpha.1

examples/metamask/README.md

@@ -0,0 +1,87 @@
+<h1 align="center">
+    Synpress: New Dawn
+    <br>
+    <small>⭐ Example Project ⭐</small>
+</h1>
+
+# 📖 Intro
+
+The New Dawn version of Synpress differs in one major way from all previous versions and all other similar Web3 tools:
+
+- We set up the browser only once, and we cache it. Thanks to this, tests not only run faster, but it also allows to use
+  **ALL FEATURES** of [Playwright](https://playwright.dev/), such as parallel testing 🚀
+
+You can define how a browser should be set up yourself. You can find setup file examples [here](test/wallet-setup).
+All setup files must have the following naming structure: `*.setup.{js,ts}`.
+
+Once you define a setup file, you can build a cache with our CLI. By default, the cache is built in a headed mode and
+utilizes the setup files from `test/wallet-setup` directory.
+Try running it with the `--help` flag to see all available configuration options.
+
+Here's how to use it:
+
+```bash
+# Build cache in a headed mode:
+synpress
+
+# Build cache in a headless mode:
+synpress --headless
+```
+
+# 🧑‍💻 Usage
+
+1. Install dependencies:
+
+```bash
+pnpm install 
+```
+
+2. Start MetaMask Test Dapp:
+
+```bash
+pnpm run serve:test-dapp
+```
+
+3. Install Playwright:
+
+```bash
+pnpm exec playwright install  
+```
+
+*3a. If you do not have Anvil installed, go to
+the [Foundry installation guide](https://book.getfoundry.sh/getting-started/installation#installation)* and follow the
+instructions.
+
+4. Build cache with our CLI by using a script:
+
+```bash
+# You can either build cache in a headed mode:
+pnpm run build:cache
+
+# Or in a headless mode:
+pnpm run build:cache:headless
+```
+
+5. Run Playwright tests as you would normally do:
+
+```bash
+# Use one of our scripts:
+pnpm run test:playwright:headful
+pnpm run test:playwright:headless
+pnpm run test:playwright:headless:ui
+
+# Or use Playwright directly:
+playwright test
+HEADLESS=true playwright test
+HEADLESS=true playwright test --ui
+```
+
+### ⚠️ Important note ⚠️
+
+Currently, tests are triggered in a headed mode by default. Add `HEADLESS=true` to run them in a headless mode.
+
+This behavior will change soon! 🫡
+
+# 🤔 Still want more?
+
+If you need more than this example project, check out our tests for MetaMask [here](../../wallets/metamask/test/e2e).

examples/new-dawn/cypress.config.ts → examples/metamask/cypress.config.ts

@@ -1,15 +1,15 @@
-import { configureSynpress } from '@synthetixio/synpress/cypress'
+import { configureSynpressForMetaMask } from '@synthetixio/synpress/cypress'
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
   chromeWebSecurity: false,
   e2e: {
     baseUrl: 'http://localhost:9999',
     specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',
-    supportFile: 'test/cypress/support/e2e.{js,jsx,ts,tsx}',
+    supportFile: 'src/cypress/support/e2e.{js,jsx,ts,tsx}',
     testIsolation: false,
     async setupNodeEvents(on, config) {
-      return configureSynpress(on, config)
+      return configureSynpressForMetaMask(on, config)
     }
   }
 })

examples/metamask/environment.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      SEED_PHRASE: string
+      WALLET_PASSWORD: string
+    }
+  }
+}
+
+export {}

examples/new-dawn/package.json → examples/metamask/package.json

@@ -1,7 +1,6 @@
 {
-  "name": "example-new-dawn",
+  "name": "@examples/metamask",
   "version": "0.0.1-alpha.9",
-  "private": true,
   "type": "module",
   "scripts": {
     "build:cache": "synpress",
@@ -20,6 +19,7 @@
   },
   "devDependencies": {
     "@metamask/test-dapp": "8.1.0",
+    "@synthetixio/synpress-tsconfig": "0.0.1-alpha.9",
     "@types/node": "20.11.17",
     "cypress": "13.13.0",
     "serve": "14.2.1",

examples/new-dawn/playwright.config.ts → examples/metamask/playwright.config.ts

@@ -5,7 +5,7 @@ import { defineConfig, devices } from '@playwright/test'
  */
 export default defineConfig({
   // Look for test files in the "test/e2e" directory, relative to this configuration file.
-  testDir: './test/e2e',
+  testDir: './test/playwright',
 
   // Run all tests in parallel.
   fullyParallel: true,

examples/metamask/src/cypress/support/e2e.ts

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import { synpressCommandsForMetaMask } from '@synthetixio/synpress/cypress/support'
+
+Cypress.on('uncaught:exception', () => {
+  // failing the test
+  return false
+})
+
+synpressCommandsForMetaMask()
+
+before(() => {
+  cy.visit('/')
+})

examples/metamask/test/cypress/metamask.cy.ts

@@ -0,0 +1,12 @@
+it('should connect to ethereum', () => {
+  cy.window().then((window) => {
+    // @ts-ignore
+    window.ethereum
+      .request({
+        method: 'eth_chainId'
+      })
+      .then((currentChainId: string) => {
+        expect(currentChainId).to.equal('0x1')
+      })
+  })
+})

examples/new-dawn/test/playwright/01_basic.spec.ts → examples/metamask/test/playwright/01_basic.spec.ts

@@ -1,6 +1,6 @@
 import { testWithSynpress } from '@synthetixio/synpress'
 import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
-import basicSetup from './wallet-setup/basic.setup'
+import basicSetup from '../wallet-setup/basic.setup'
 
 const test = testWithSynpress(metaMaskFixtures(basicSetup))
 

examples/new-dawn/test/playwright/advancedFixtures.ts → examples/metamask/test/playwright/advancedFixtures.ts

@@ -1,5 +1,5 @@
 import { metaMaskFixtures } from '@synthetixio/synpress/playwright'
-import connectedSetup from './wallet-setup/connected.setup'
+import connectedSetup from '../wallet-setup/connected.setup'
 
 export const test = metaMaskFixtures(connectedSetup).extend<{
   deployToken: () => Promise<void>

examples/new-dawn/test/playwright/synpress.ts → examples/metamask/test/playwright/synpress.ts

@@ -1,5 +1,5 @@
 import { testWithSynpress } from '@synthetixio/synpress'
 import { metaMaskFixtures } from '@synthetixio/synpress/playwright'
-import connectedSetup from './wallet-setup/connected.setup'
+import connectedSetup from '../wallet-setup/connected.setup'
 
 export default testWithSynpress(metaMaskFixtures(connectedSetup))

examples/metamask/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@synthetixio/synpress-tsconfig/base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "exactOptionalPropertyTypes": false, // Allows for `undefined` in `playwright.config.ts`
+    "types": ["cypress"],
+    "sourceMap": false
+  },
+  "include": ["cypress.config.ts", "test", "src"],
+  "files": ["environment.d.ts"]
+}