Skip to content

Commit

Permalink
test: add e2e tests for 1st step of create colony flow
Browse files Browse the repository at this point in the history
  • Loading branch information
olgapod committed Oct 30, 2024
1 parent 5fbfbf9 commit 441424f
Show file tree
Hide file tree
Showing 18 changed files with 480 additions and 25 deletions.
7 changes: 7 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,13 @@ module.exports = {
jest: true,
},
},
{
files: ['playwright/**/*.ts'],
extends: 'plugin:playwright/recommended',
rules: {
'no-await-in-loop': 'off',
},
},
],
rules: {
// Using the typescript-eslint version for these
Expand Down
58 changes: 56 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
"docker:compose:all": "docker compose --file docker/colony-cdapp-dev-env-orchestration-all.yaml",
"dev": "npm run watch-amplify & npm run generate-notifications-dev-key && npm run docker:build:core && npm run docker:compose:core up -- --force-recreate -V",
"dev:all": "npm run generate-notifications-dev-key && npm run docker:build:all && npm run docker:compose:all up -- --force-recreate -V",
"lint": "eslint src --fix --ext ts,tsx --report-unused-disable-directives",
"lint:ci": "eslint src --ext ts,tsx --report-unused-disable-directives",
"lint": "eslint src playwright --fix --ext ts,tsx --report-unused-disable-directives",
"lint:ci": "eslint src playwright --ext ts,tsx --report-unused-disable-directives",
"stylelint:ci": "stylelint --allow-empty-input \"src/**/*.css\"",
"typecheck": "tsc --noEmit",
"frontend": "ulimit -n 2048 && vite",
Expand All @@ -39,9 +39,9 @@
"postinstall": "if [ -z \"$SKIP_HOOKS\" ]; then ./scripts/lambda-functions-dependencies.sh && scripts/generate-amplify-local-config.sh; fi",
"watch-amplify": "node scripts/watchAmplifyFiles",
"forward-time": "node scripts/forward-time",
"playwright:install": "npx playwright install --with-deps",
"playwright:run": "playwright test",
"playwright:watch": "playwright test --ui",
"e2e:install": "npx playwright install --with-deps",
"e2e": "playwright test --project=chromium",
"e2e:ui": "playwright test --ui",
"generate-notifications-dev-key": "node scripts/generate-local-notifications-key"
},
"repository": {
Expand Down Expand Up @@ -100,6 +100,7 @@
"compare-versions": "^6.1.0",
"cross-fetch": "^4.0.0",
"crypto-browserify": "^3.12.0",
"dotenv": "^16.4.5",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^8.57.0",
Expand All @@ -111,6 +112,7 @@
"eslint-plugin-jest": "^27.6.3",
"eslint-plugin-jsdoc": "^48.0.2",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-playwright": "^1.7.0",
"eslint-plugin-react": "^7.31.7",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
Expand Down
11 changes: 7 additions & 4 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { defineConfig, devices } from '@playwright/test';
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: './playwright/e2e',
/* 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 */
Expand All @@ -21,9 +23,10 @@ export default defineConfig({
baseURL: 'http://localhost:9091',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
trace: 'retain-on-failure',
},

// Needed for running tests against the app in development mode
timeout: !process.env.CI ? 90000 : undefined,
/* Configure projects for major browsers */
projects: [
{
Expand Down
17 changes: 14 additions & 3 deletions playwright/README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,18 @@ For more details on Playwright, you can visit the [Playwright documentation](htt
To install the necessary dependencies for Playwright, run the following command:

```bash
npm run playwright:install
npm run e2e:install
```

Setup and start your local dev environment following the root readme.md file instrutions (all BE services should be up and running).

```bash
npm run dev
```
Seed the test data

```bash
node scripts/create-data.js
```

## Running the Tests
Expand All @@ -18,15 +29,15 @@ To execute the Playwright tests, use one of the following commands:
Run all tests:

```bash
npm run playwright:run
npm run e2e
```

This will run all Playwright tests in the headless mode.

Run tests in watch mode:

```bash
npm run playwright:watch
npm run e2e:ui
```

This will launch Playwright's UI for running tests interactively, allowing you to watch and debug them in real time.
147 changes: 147 additions & 0 deletions playwright/e2e/create-colony.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import { expect, test } from '@playwright/test';

import { acceptCookieConsentBanner } from '../utils/common.ts';
import {
generateRandomString,
selectWalletAndUserProfile,
} from '../utils/create-colony.ts';
import { generateCreateColonyUrl } from '../utils/graphqlHelpers.ts';

test.describe('Create Colony flow', () => {
const colonyName = 'testcolonyname';

test.beforeEach(async ({ page }) => {
const colonyUrl = await generateCreateColonyUrl();

await page.goto(colonyUrl);

await selectWalletAndUserProfile(page);

await acceptCookieConsentBanner(page);
});
test.describe('Details step', () => {
test('Should render Details step correctly', async ({ page }) => {
// Heading of the step and form is shown
await Promise.all([
expect(
page
.getByTestId('onboarding-heading')
.filter({ hasText: /Welcome/i }),
).toBeVisible(),
expect(
page
.getByTestId('onboarding-subheading')
.filter({ hasText: /Let’s set up your Colony/i }),
).toBeVisible(),
expect(page.getByLabel(/colony name/i)).toBeVisible(),
expect(page.getByLabel(/custom colony URL/i)).toBeVisible(),
expect(page.getByRole('button', { name: /continue/i })).toBeVisible(),
]);
// Sidebar navigation and its components are visible
const sidebarNav = page.getByRole('navigation');

await Promise.all([
expect(sidebarNav.getByText(/create your new colony/i)).toBeVisible(),
expect(sidebarNav.getByText('Create', { exact: true })).toBeVisible(),
expect(sidebarNav.getByText('Details')).toBeVisible(),
expect(sidebarNav.getByText('Native Token')).toBeVisible(),
expect(sidebarNav.getByText('Confirmation')).toBeVisible(),
expect(sidebarNav.getByText('Complete')).toBeVisible(),
expect(
sidebarNav.getByRole('button', { name: 'Help & Feedback' }),
).toBeVisible(),
]);
});

test('Should accept a valid Colony Name and Custom URL and navigate to the next step', async ({
page,
}) => {
// continue button is disabled initially
await expect(
page.getByRole('button', { name: /continue/i }),
).toBeDisabled();

// Fill in colony name and custom URL
await page.getByLabel(/colony Name/i).fill(colonyName);
await page.getByLabel(/custom colony URL/i).fill(generateRandomString());

// Check if URL is available
await expect(page.getByText(/URL available/i)).toBeVisible();

// Click continue and verify navigation to the next step
await page.getByRole('button', { name: /continue/i }).click();
await expect(
page.getByRole('heading', { name: /creating a new native token/i }),
).toBeVisible();
});

test('Should show an error message when the Colony URL is already taken', async ({
page,
}) => {
// Mock the response for the 'CheckColonyNameExists' query
page.route('**/graphql', (route, request) => {
const postData = request.postDataJSON();

if (postData.operationName === 'CheckColonyNameExists') {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
data: {
getColonyByName: {
items: ['someColonyId'],
__typename: 'ModelColonyConnection',
},
},
}),
});
} else {
route.continue();
}
});

const colonyUrlField = page.getByLabel(/custom colony URL/i);

await colonyUrlField.fill('takenurl');

await page.getByLabel(/colony name/i).focus();

await expect(
page.getByText(/This colony URL is already taken/i),
).toBeVisible();
});

test('Should reject invalid colony name', async ({ page }) => {
// More than 20 characters
await page.getByLabel(/colony name/i).fill('A'.repeat(21));

await expect(page.getByTestId('form-error')).toBeVisible();
});

test("Should reject invalid custom colony URL's", async ({ page }) => {
await test.step('Invalid name', async () => {
await page.getByLabel(/custom colony URL/i).fill('invalid name');

await expect(page.getByTestId('form-error')).toBeVisible();
});

await test.step('Contains invalid character', async () => {
await page.getByLabel(/custom colony URL/i).fill('/invalid');

await expect(page.getByTestId('form-error')).toBeVisible();
});

await test.step('More than 20 characters', async () => {
await page.getByLabel(/custom colony URL/i).fill('a'.repeat(21));

await expect(page.getByTestId('form-error')).toBeVisible();
});

await test.step('Reserved keyword', async () => {
await page.getByLabel(/custom colony URL/i).fill('account');

await expect(page.getByTestId('form-error')).toBeVisible();
});
});
});
});
7 changes: 0 additions & 7 deletions playwright/e2e/example.spec.ts

This file was deleted.

22 changes: 22 additions & 0 deletions playwright/fixtures/colony.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export const validColonyNameFieldValues = [
'Valid Name', // Simple, valid name
'A', // Minimum valid length (1 character)
'A'.repeat(20), // Maximum valid length (20 characters)
];

export const invalidColonyNameFieldValues = [
'A'.repeat(21), // More than 20 characters
' VeryLongName123456789', // 21 characters after trimming
];

export const validColonyURLFieldValues = [
'ValidColony',
'test123',
'a'.repeat(20),
];
export const invalidColonyURLFieldValues = [
'invalid name',
'/invalid',
'a'.repeat(21),
'account', // Reserved keyword
];
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 441424f

Please sign in to comment.