Skip to content

Commit

Permalink
chore: add integration tests using Playwright and Puppeteer (#627)
Browse files Browse the repository at this point in the history
* feat: add integration tests

* fix: add readme test instructions

* fix: add jest types

* fix: normalize await calls

* fix: development readme instructions

* fix: use getByLabel instead of ids

* fix: remove try/catch

* feat: add playwright testing tool

* fix: update readme test command

* fix: removing args from Puppeteer launch
fix: removing setViewport

* fix: puppeteer args tags

* fix: yarn installation at playwright gh workflow

* fix: playwright commands

* fix: playwright headfull image

* docs: formatting #556

* test: change default wallet create url

* chore: remove conflicts

* chore: exclude playwright tests from default jest run

* chore: adjusted playwirght setup

- reduced to one browser and one test for now to first make it run again
- adjusted readme
- minor changes

* test: update to match current UI

* chore(ci): run playwright tests on open PRs

* chore(deps): minor deps

* chore: comment out tests for now

* chore(playwright): get extension-id via test #556

* test(e2e): add exec path accpring to mujo-code/puppeteer-headful docs #556

* test(e2e): switch path to use prod #556

* test(alby): adjust create wallet test #556

* chore(e2e): adjust playwright setup #556

* test(albywallet): simplify test for now #556

also adjust extension path for CI

* chore: split up test scripts #556

* docs: add tool links and chrome-only info #556

* chore: add info why on-fail screenshots etc are not working #556

* chore: cleanup #556

* chore(e2e): move extension-load code to helpers #556

* chore(e2e): make page var more descriptive #556

* test(albywallet): reduce test for now #556

* chore: fix test commands #556

Co-authored-by: escapedcat <[email protected]>
Co-authored-by: kiwiidb <[email protected]>
  • Loading branch information
3 people authored May 20, 2022
1 parent b230f21 commit 49ebeca
Show file tree
Hide file tree
Showing 12 changed files with 620 additions and 53 deletions.
48 changes: 48 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
name: E2E Tests

on:
push:
branches:
- master
pull_request:
types: [opened, synchronize]

jobs:
e2e-tests:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
env:
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true"
with:
node-version: "14.x"
args: install

- name: Install dependencies
uses: borales/[email protected]
with:
cmd: install # will run `yarn install` command

- name: Build
uses: borales/[email protected]
with:
cmd: build:chrome # will run `yarn build` command

- name: Test Code
uses: mujo-code/puppeteer-headful@v2
env:
CI: "true"
with:
args: npx playwright test

- name: Artifact
uses: actions/upload-artifact@v2
if: always()
with:
name: playwright-artifcats
path: |
playwright-report/
test-results/
retention-days: 30
2 changes: 1 addition & 1 deletion .github/workflows/unit-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@ jobs:
- run: yarn install

- name: Testing
run: yarn test
run: yarn test:unit
13 changes: 8 additions & 5 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ yarn-debug.log*
yarn-error.log*
lerna-debug.log*


# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

Expand All @@ -25,6 +24,11 @@ lib-cov
coverage
*.lcov

# unit/integration tets
test-results/
playwright-report/
trace.zip

# nyc test coverage
.nyc_output

Expand All @@ -43,6 +47,7 @@ build/Release
# Dependency directories
node_modules/
jspm_packages/
.pnp.*

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
Expand Down Expand Up @@ -126,12 +131,10 @@ dist
# OS files
.DS_Store

## Build directory
# Build directory
dist/
.awcache

.pnp.*

# Editor directories and files
.idea
.nova
Expand All @@ -140,4 +143,4 @@ dist/
*.suo
*.ntvs*
*.njsproj
*.sln
*.sln
29 changes: 26 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Add Alby to your browser
- [Add to Chrome, Opera, Brave, and all Chromium based browsers](https://chrome.google.com/webstore/detail/alby/iokeahhehimjnekafflcihljlcjccdbe)
- [Add to Firefox](https://addons.mozilla.org/en-US/firefox/addon/alby/)

Try out the most recent version of Alby (Nightly Releases)
### Try out the most recent version of Alby (Nightly Releases)

- [Firefox Nightly](https://alby-releases-public.s3.eu-central-1.amazonaws.com/alby-firefox-nightly-master.xpi) - best to install it as a temporary add-on as discussed in the "Load extension into browser" section
- [Chrome Nightly](https://alby-releases-public.s3.eu-central-1.amazonaws.com/alby-chrome-nightly-master.zip) - go to `chrome://extensions/`, enable "Developer mode" (top right) and drag & drop the file in the browser
Expand All @@ -60,7 +60,7 @@ Try out the most recent version of Alby (Nightly Releases)

## Project Structure

```
```bash
./lightning-browser-extension
├── src # Source Code
│   ├── app # React UI App
Expand Down Expand Up @@ -127,6 +127,29 @@ If this is not reachable please let us know.
We have a working [Storybook](https://storybook.js.org)-setup and some components have stories.
You can find the deployed Storybook here: https://lbe-stories.netlify.app

### :heavy_check_mark: Tests

#### E2E tests via [playwright](https://playwright.dev) ([using testing-library](https://testing-library.com/docs/pptr-testing-library/intro/))

```bash
yarn run dev:chrome
yarn test:e2e
```

:tipping_hand_woman: For now we only do E2E tests for Chrome

#### Unit tests tests via [Jest](https://jestjs.io)

```bash
yarn test:unit
```

#### Run all tests

```bash
yarn test
```

### 💻 Load extension into browser

- **Chrome**
Expand Down Expand Up @@ -161,7 +184,7 @@ Most logs are written to the background script. Make sure to "inspect" the backg

You can also use a Docker container and run the yarn commands within a container:

```
```bash
docker run --rm --volume="$(pwd):/app" --workdir="/app" -t -i node:lts "yarn install && yarn run package"
```

Expand Down
1 change: 1 addition & 0 deletions jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@ module.exports = {
setupFiles: ["jest-webextension-mock"],
testEnvironment: "./jest.custom-test-environment.ts",
setupFilesAfterEnv: ["./jest.setup.ts"],
modulePathIgnorePatterns: ["<rootDir>/tests"],
};
10 changes: 7 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@
"lint:js:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
"tsc:compile": "tsc --noEmit",
"format": "prettier --loglevel silent --write 'src/**/*.(js|ts|jsx|tsx)'",
"test-ext": "jest ./src/extension",
"test-app": "jest ./src/app",
"test": "jest",
"test:unit": "jest",
"test:e2e": "npx playwright test",
"test": "yarn test:unit && yarn test:e2e",
"test:coverage": "jest --coverage --collectCoverageFrom='src/**/*.(js|ts|jsx|tsx)'",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
Expand Down Expand Up @@ -80,6 +80,7 @@
"@babel/preset-typescript": "^7.16.7",
"@commitlint/cli": "^17.0.0",
"@commitlint/config-conventional": "^17.0.0",
"@playwright/test": "^1.19.1",
"@storybook/addon-actions": "^6.4.22",
"@storybook/addon-essentials": "^6.4.22",
"@storybook/addon-links": "^6.4.22",
Expand Down Expand Up @@ -107,6 +108,7 @@
"babel-plugin-import": "^1.13.5",
"buffer": "^6.0.3",
"clean-webpack-plugin": "^4.0.0",
"complete-randomer": "^1.9.1",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.1",
Expand All @@ -127,8 +129,10 @@
"postcss": "^8.4.13",
"postcss-cli": "^9.1.0",
"postcss-loader": "^6.2.1",
"pptr-testing-library": "^0.7.0",
"prettier": "^2.6.2",
"process": "^0.11.10",
"puppeteer": "^13.3.2",
"resolve-url-loader": "^5.0.0",
"sass": "^1.51.0",
"sass-loader": "^12.6.0",
Expand Down
112 changes: 112 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import type { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "@playwright/test";

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: "./tests/e2e",
/* Maximum time one test can run for. */
timeout: 30 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 5000,
},
/* 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: process.env.CI ? "github" : "list",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
// actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
//
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
// Not working because (electron relate dbut same issue):
// - https://github.com/microsoft/playwright/issues/8208
// - https://github.com/microsoft/playwright/issues/12774
// - https://github.com/microsoft/playwright/issues/12125
//
// trace: "on",
// video: "on",
// screenshot: "on",
},

/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
},
},

// {
// 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: {
// channel: "msedge",
// },
// },
// {
// name: "Google Chrome",
// use: {
// channel: "chrome",
// },
// },
],

/* Folder for test artifacts such as screenshots, videos, traces, etc. */
outputDir: "test-results/",

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// port: 3000,
// },
};

export default config;
2 changes: 1 addition & 1 deletion src/app/screens/connectors/NewWallet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import TextField from "@components/form/TextField";
import ConnectorForm from "@components/ConnectorForm";

const walletCreateUrl =
process.env.WALLET_CREATE_URL || "https://getalby.com/api/users";
process.env.WALLET_CREATE_URL || "https://app.regtest.getalby.com/api/users";

export default function NewWallet() {
const [lndHubData, setLndHubData] = useState({
Expand Down
Loading

0 comments on commit 49ebeca

Please sign in to comment.