Skip to content

Commit

Permalink
Merge pull request #5313 from novuhq/draft-playwrite
Browse files Browse the repository at this point in the history
chore(web): the playwright e2e tests poc
  • Loading branch information
LetItRock authored Apr 15, 2024
2 parents 58f8ecf + dd26331 commit 28c469b
Show file tree
Hide file tree
Showing 27 changed files with 3,479 additions and 66 deletions.
4 changes: 3 additions & 1 deletion .cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,8 @@
"uuidv",
"Vonage",
"runtimes",
"cafebabe"
"cafebabe",
"limitbar",
],
"flagWords": [],
"patterns": [
Expand Down Expand Up @@ -683,6 +684,7 @@
"apps/api/src/.env.test",
"apps/ws/src/.env.test",
"apps/ws/src/.example.env",
"apps/web/playwright.config.ts",
".cspell.json",
"package.json",
"package-lock.json",
Expand Down
80 changes: 56 additions & 24 deletions .github/workflows/reusable-web-e2e.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ jobs:
# leaving the Dashboard hanging ...
# https://github.com/cypress-io/github-action/issues/48
fail-fast: false
matrix:
# run 5 copies of the current job in parallel
containers: [1, 2, 3, 4, 5]
total: [5]

# The type of runner that the job will run on
runs-on: ubuntu-latest
Expand Down Expand Up @@ -104,8 +108,7 @@ jobs:
- run: |
echo "BROWSER_PATH=$(which chrome)" >> $GITHUB_ENV
- name: Cypress run EE e2e
if: ${{ steps.setup.outputs.has_token == 'true' && inputs.ee }}
- name: Cypress run e2e
uses: cypress-io/github-action@v6
env:
NODE_ENV: test
Expand All @@ -117,35 +120,64 @@ jobs:
with:
working-directory: apps/web
browser: "${{ env.BROWSER_PATH }}"
record: false
record: true
parallel: true
install: false
parallel: false
config-file: cypress.config.ts
spec: "cypress/tests/**/*.spec-ee.{js,jsx,ts,tsx}"
spec: |
cypress/tests/**/*.spec.ts
${{ steps.setup.outputs.has_token == 'true' && inputs.ee && 'cypress/tests/**/*.spec-ee.ts' }}
- name: Cypress run e2e
uses: cypress-io/github-action@v6
env:
NODE_ENV: test
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_WEB_KEY }}
CYPRESS_GITHUB_USER_EMAIL: ${{ secrets.CYPRESS_GITHUB_USER_EMAIL }}
CYPRESS_GITHUB_USER_PASSWORD: ${{ secrets.CYPRESS_GITHUB_USER_PASSWORD }}
CYPRESS_IS_CI: true
- name: Playwright Install
working-directory: apps/web
run: pnpm playwright:install

- name: Run Playwright tests
working-directory: apps/web
run: pnpm playwright:test --shard=${{ matrix.containers }}/${{ matrix.total }}

- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
working-directory: apps/web
browser: "${{ env.BROWSER_PATH }}"
record: false
parallel: false
install: false
config-file: cypress.config.ts
spec: "cypress/tests/**/*.spec.{js,jsx,ts,tsx}"
name: blob-report-${{ matrix.containers }}
path: apps/web/blob-report
retention-days: 1

- uses: actions/upload-artifact@v3
if: failure()
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: cypress-screenshots
name: cypress-screenshots-${{ matrix.containers }}
path: apps/web/cypress/screenshots
retention-days: 30

merge-reports:
# Merge reports after playwright-tests, even if some shards have failed
if: ${{ !cancelled() }}
needs: [e2e_web]

runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20.8.1

- name: Download blob reports from GitHub Actions Artifacts
uses: actions/download-artifact@v4
with:
path: all-blob-reports
pattern: blob-report-*
merge-multiple: true

- name: Merge into HTML Report
run: npx playwright merge-reports --reporter html ./all-blob-reports

- name: Upload HTML report
uses: actions/upload-artifact@v4
with:
name: html-report--attempt-${{ github.run_attempt }}
path: playwright-report
retention-days: 14

component_web:
if: "!contains(github.event.head_commit.message, 'ci skip')"
Expand Down
3 changes: 3 additions & 0 deletions apps/web/.env.playwirght.test
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
NODE_ENV=test
MONGODB_URL=mongodb://127.0.0.1:27017/novu-test
API_URL=http://127.0.0.1:1336
2 changes: 1 addition & 1 deletion apps/web/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ module.exports = {
env: {
'cypress/globals': true,
},
ignorePatterns: ['craco.config.js', 'cypress/*', '**/styled-system/**/*'],
ignorePatterns: ['craco.config.js', 'cypress/*', '**/styled-system/**/*', 'tests/*'],
extends: ['plugin:cypress/recommended', '../../.eslintrc.js'],
plugins: ['cypress', 'react-hooks'],
parserOptions: {
Expand Down
6 changes: 5 additions & 1 deletion apps/web/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,8 @@ cypress/screenshots

## Panda
styled-system
styled-system-studio
styled-system-studio
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
6 changes: 5 additions & 1 deletion apps/web/cypress/tests/activity-graph.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
describe('Activity page', function () {
/**
* The tests from this file were moved to the corresponding Playwright file apps/web/tests/activity-graph.spec.ts.
* @deprecated
*/
describe.skip('Activity page', function () {
beforeEach(function () {
// @ts-expect-error
cy.initializeSession()
Expand Down
6 changes: 5 additions & 1 deletion apps/web/cypress/tests/digest-playground.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
describe('Digest Playground Workflow Page', function () {
/**
* The tests from this file were moved to the corresponding Playwright file apps/web/tests/digest-playground.spec.ts.
* @deprecated
*/
describe.skip('Digest Playground Workflow Page', function () {
beforeEach(function () {
cy.initializeSession({ noTemplates: true }).as('session');
});
Expand Down
6 changes: 5 additions & 1 deletion apps/web/cypress/tests/integrations-list-modal.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ Cypress.on('window:before:load', (win) => {
win.isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
});

describe('Integrations List Modal', function () {
/**
* The tests from this file were moved to the corresponding Playwright file apps/web/tests/integrations-list-modal.spec.ts.
* @deprecated
*/
describe.skip('Integrations List Modal', function () {
let session: any;

beforeEach(function () {
Expand Down
6 changes: 5 additions & 1 deletion apps/web/cypress/tests/integrations-list-page.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ Cypress.on('window:before:load', (win) => {
win.isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
});

describe('Integrations List Page', function () {
/**
* The tests from this file were moved to the corresponding Playwright file apps/web/tests/integrations-list-page.spec.ts.
* @deprecated
*/
describe.skip('Integrations List Page', function () {
let session: any;

beforeEach(function () {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { addAndEditChannel, clickWorkflow, dragAndDrop, editChannel, fillBasicNotificationDetails, goBack } from '.';

describe('Workflow Editor - Main Functionality', function () {
/**
* The tests from this file were moved to the corresponding Playwright file apps/web/tests/main-functionality.spec.ts.
* @deprecated
*/
describe.skip('Workflow Editor - Main Functionality', function () {
beforeEach(function () {
cy.initializeSession().as('session');
});
Expand Down
6 changes: 5 additions & 1 deletion apps/web/cypress/tests/start-from-scratch-tour.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
describe('Start from scratch tour hints', function () {
/**
* The tests from this file were moved to the corresponding Playwright file apps/web/tests/start-from-scratch-tour.spec.ts.
* @deprecated
*/
describe.skip('Start from scratch tour hints', function () {
beforeEach(function () {
cy.initializeSession({ showOnBoardingTour: true }).as('session');
});
Expand Down
9 changes: 8 additions & 1 deletion apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.24.1",
"private": true,
"scripts": {
"start": "pnpm panda --watch & cross-env PORT=4200 react-app-rewired start",
"start": "pnpm panda --watch & cross-env NODE_OPTIONS=--max_old_space_size=8192 PORT=4200 react-app-rewired start",
"prebuild": "rimraf build",
"build": "pnpm panda && cross-env NODE_OPTIONS=--max_old_space_size=4096 GENERATE_SOURCEMAP=false react-app-rewired --max_old_space_size=4096 build",
"precommit": "lint-staged",
Expand All @@ -19,6 +19,12 @@
"cypress:install": "cypress install",
"cypress:open": "cross-env NODE_ENV=test cypress open",
"cypress:run:components": "cross-env NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=test cypress run --component",
"playwright:install": "playwright install --with-deps",
"playwright:test": "playwright test",
"playwright:test-ui": "playwright test --ui",
"playwright:codegen": "playwright codegen",
"playwright:show-report": "npx playwright show-report",
"playwright:merge-report": "playwright merge-reports --reporter html",
"start:api": "cd ../../ && pnpm start:api:test",
"storybook": "storybook dev -p 6006 -s public",
"build-storybook": "storybook build -s public",
Expand Down Expand Up @@ -137,6 +143,7 @@
"@novu/dal": "^0.24.1",
"@novu/testing": "^0.24.1",
"@pandacss/dev": "^0.34.0",
"@playwright/test": "^1.42.1",
"@storybook/addon-actions": "^7.4.2",
"@storybook/addon-essentials": "^7.4.2",
"@storybook/addon-links": "^7.4.2",
Expand Down
2 changes: 1 addition & 1 deletion apps/web/panda.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default defineConfig({

// Recommended by panda maintainer due to potential bug with nesting styled-system in src
importMap: 'styled-system',

// Enables JSX util generation!
jsxFramework: 'react',
});
87 changes: 87 additions & 0 deletions apps/web/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { defineConfig, devices } from '@playwright/test';
import dotenv from 'dotenv';
import path from 'path';

dotenv.config({ path: path.resolve(__dirname, '.env.playwirght.test') });

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

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* 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 ? 4 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: process.env.CI ? 'blob' : 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://127.0.0.1:4200',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
timeout: 60_000,
/* 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: { ...devices['Desktop Edge'], channel: 'msedge' },
* },
* {
* name: 'Google Chrome',
* use: { ...devices['Desktop Chrome'], channel: 'chrome' },
* },
*/
],

/* Run your local dev server before starting the tests */
/*
* webServer: {
* command: 'npm run start',
* url: 'http://127.0.0.1:3000',
* reuseExistingServer: !process.env.CI,
* },
*/
});
25 changes: 25 additions & 0 deletions apps/web/tests/activity-graph.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { test, expect } from '@playwright/test';

import { getByTestId, initializeSession } from './utils.ts/browser';
import { createNotifications } from './utils.ts/plugins';

let session;

test.beforeEach(async ({ context }) => {
session = await initializeSession(context);
await createNotifications({
identifier: session.templates[0].triggers[0].identifier,
token: session.token,
count: 25,
organizationId: session.organization._id,
environmentId: session.environment._id,
});
});

test('should be able to add a new channel', async ({ page }) => {
await page.goto('/activities');
await expect(page).toHaveURL(/\/activities/);

const addChannelButton = getByTestId(page, 'activity-stats-weekly-sent');
await expect(addChannelButton).toContainText('25');
});
Loading

0 comments on commit 28c469b

Please sign in to comment.