Skip to content

Commit

Permalink
E2E integration (#269)
Browse files Browse the repository at this point in the history
Adds playwright dev dependency, folders, and tests to support end-to-end tests.
Add http-server as a dev dependency and use for playwright.
katedev21 authored Nov 7, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent e419da0 commit 0e62cef
Showing 7 changed files with 323 additions and 15 deletions.
8 changes: 8 additions & 0 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
@@ -30,3 +30,11 @@ jobs:
- run: npm run lint
- run: npm run build
- run: npm test
- run: npm run e2e-ci
- name: Upload E2E Test Report
uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -15,3 +15,6 @@ data-scripts/*.pyc
*.ntvs*
*.njsproj
*.sln
/test-results/
/playwright-report/
/playwright/.cache/
20 changes: 20 additions & 0 deletions e2e/ward-leaders-home.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { test, expect } from '@playwright/test'

test('homepage has "Philly Ward Leaders" as the page title and clicking "Get started" navigates to "/leaders/democratic"', async ({ page }) => {
await page.goto('localhost:8080')

// Expect a title "to contain" a substring.
await expect(page).toHaveTitle('Philly Ward Leaders')

// create a locator
const getStarted = page.getByText('Get started')

// Expect an attribute "to be strictly equal" to the value.
await expect(getStarted).toHaveAttribute('href', '/leaders')

// Click the get started link.
await getStarted.click()

// Expects the URL to contain /leaders/democratic
await expect(page).toHaveURL(/.*leaders\/democratic/)
})
159 changes: 159 additions & 0 deletions package-lock.json

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

9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -7,8 +7,11 @@
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"test": "npm run lint && jest",
"lint": "standard --plugin html '**/*.{js,vue}'"
"test": "jest --testPathIgnorePatterns ./e2e",
"lint": "standard --plugin html '**/*.{js,vue}'",
"e2e": "playwright test",
"e2e-ci": "playwright install --with-deps && playwright test",
"serve-http": "http-server ./public -p 8080"
},
"dependencies": {
"@mapbox/leaflet-pip": "^1.1.0",
@@ -31,6 +34,7 @@
"vuex": "^2.4.0"
},
"devDependencies": {
"@playwright/test": "^1.27.1",
"@vue/test-utils": "^1.3.0",
"autoprefixer": "^9.8.8",
"babel-core": "^6.0.0",
@@ -44,6 +48,7 @@
"css-loader": "^1.0.1",
"eslint-plugin-html": "^3.2.2",
"file-loader": "^1.1.11",
"http-server": "^14.1.1",
"imports-loader": "^0.7.1",
"jest": "^21.2.1",
"jest-serializer-vue": "^0.2.0",
114 changes: 114 additions & 0 deletions playwright.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
// @ts-check
const { devices } = require('@playwright/test')

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

/**
* @see https://playwright.dev/docs/test-configuration
* @type {import('@playwright/test').PlaywrightTestConfig}
*/
const config = {
testDir: './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
},
/* 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 ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
webServer: {
command: 'npm run serve-http',
url: 'http://localhost:8080',
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI
},
/* 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:8080',

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

/* 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,
// },
}

module.exports = config
25 changes: 12 additions & 13 deletions tests/app.spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Buefy from 'buefy'
@@ -16,14 +16,14 @@ describe('App', () => {
}
})

const wrapper = shallow(App, {
const wrapper = shallowMount(App, {
mocks: { $store },
stubs: ['router-view']
})

const indicator = wrapper.find(Buefy.Loading)
const isActive = indicator.hasProp('active', false)
expect(isActive).toBe(true)
const indicator = wrapper.findComponent(Buefy.Loading)

expect(indicator.props('active')).toBe(false)
})

test('Shows loading indicator when there are pending requests', () => {
@@ -35,14 +35,13 @@ describe('App', () => {
}
})

const wrapper = shallow(App, {
const wrapper = shallowMount(App, {
mocks: { $store },
stubs: ['router-view']
})

const indicator = wrapper.find(Buefy.Loading)
const isActive = indicator.hasProp('active', true)
expect(isActive).toBe(true)
const indicator = wrapper.findComponent(Buefy.Loading)
expect(indicator.props('active')).toBe(true)
})

test('Shows notifications', () => {
@@ -55,12 +54,12 @@ describe('App', () => {
}
})

const wrapper = shallow(App, {
const wrapper = shallowMount(App, {
mocks: { $store },
stubs: ['router-view']
})

const notifications = wrapper.findAll(Notification)
const notifications = wrapper.findAllComponents(Notification)
expect(notifications.length).toBe(2)
})

@@ -77,12 +76,12 @@ describe('App', () => {
}
})

const wrapper = shallow(App, {
const wrapper = shallowMount(App, {
mocks: { $store },
stubs: ['router-view']
})

const notification = wrapper.find(Notification)
const notification = wrapper.findComponent(Notification)
notification.vm.$emit('dismiss')
expect(removeNotification).toBeCalled()
})

0 comments on commit 0e62cef

Please sign in to comment.