Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(WEBRTC-366): testing workflow #143

Merged
merged 15 commits into from
Feb 12, 2021
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 107 additions & 18 deletions .github/workflows/webrtc-test-release.yml
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
name: '@telnyx/webrtc Test release'

on:
pull_request:
paths:
- 'packages/js/**'

jobs:
build:
unit-tests:
name: Test release

runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
with:
Expand All @@ -27,24 +23,117 @@ jobs:
- name: Install package dependencies
working-directory: packages/js
run: npm ci --ignore-scripts
- name: Build
working-directory: packages/js
run: npm run build
- name: Test
working-directory: packages/js
run: npm test
env:
CI: true
- name: Install React Storybook
working-directory: packages/js/examples/react-audio-widgets
run: npm ci
env:
CI: true
- name: Link React Storybook with SDK
working-directory: packages/js/examples/react-audio-widgets
run: npm run setup
env:
CI: true

cypress-run-chrome:
runs-on: ubuntu-16.04
# let's make sure our tests pass on Chrome browser
name: E2E on Chrome
steps:
- uses: actions/checkout@v1
- uses: cypress-io/github-action@v2
- name: Use Node.js 11.x
uses: actions/setup-node@v1
with:
node-version: '11.x'
- name: Install shared dependencies
run: npm ci
- name: Install package dependencies
working-directory: packages/js/examples/react-audio-widgets
run: npm ci --ignore-scripts
- name: Test Chrome
working-directory: packages/js/examples/react-audio-widgets
run: npm run cypress:ci:chrome
env:
CI: true
with:
browser: chrome
headless: true
env: STORYBOOK_USERNAME=${{ secrets.NPM_CI_STORYBOOK_USERNAME }},STORYBOOK_PASSWORD=${{ secrets.NPM_CI_STORYBOOK_PASSWORD }},STORYBOOK_DESTINATION=${{ secrets.NPM_CI_STORYBOOK_DESTINATION }}

cypress-run-firefox:
runs-on: ubuntu-latest
name: E2E on Firefox
container:
image: cypress/browsers:node12.16.1-chrome80-ff73
options: --user 1001
steps:
- uses: actions/checkout@v1
- uses: cypress-io/github-action@v2
- name: Test Firefox
working-directory: packages/js/examples/react-audio-widgets
run: npm run cypress:ci:chrome
env:
CI: true
with:
browser: firefox
headless: true
env: STORYBOOK_USERNAME=${{ secrets.NPM_CI_STORYBOOK_USERNAME }},STORYBOOK_PASSWORD=${{ secrets.NPM_CI_STORYBOOK_PASSWORD }},STORYBOOK_DESTINATION=${{ secrets.NPM_CI_STORYBOOK_DESTINATION }}

cypress-run-edge:
runs-on: windows-latest
name: E2E on Edge
steps:
- uses: actions/checkout@v1
- uses: cypress-io/github-action@v2
- name: Test Edge
working-directory: packages/js/examples/react-audio-widgets
run: npm run cypress:ci:chrome
env:
CI: true
with:
browser: edge
headless: true
env: STORYBOOK_USERNAME=${{ secrets.NPM_CI_STORYBOOK_USERNAME }},STORYBOOK_PASSWORD=${{ secrets.NPM_CI_STORYBOOK_PASSWORD }},STORYBOOK_DESTINATION=${{ secrets.NPM_CI_STORYBOOK_DESTINATION }}
build:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like it could be consolidated with unit-tests

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to keep separated, I did 3 steps:

  • unit-test
  • e2e
  • build/release

name: Test release
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
# https://github.com/peter-evans/create-pull-request/issues/122
ref: 'main'
# https://github.com/release-it/release-it/issues/657#issuecomment-647848200
fetch-depth: 0
- name: Use Node.js 11.x
uses: actions/setup-node@v1
with:
node-version: '11.x'
- name: Install shared dependencies
run: npm ci
- name: Install package dependencies
working-directory: packages/js
run: npm ci --ignore-scripts
- name: Build
working-directory: packages/js
run: npm run build
- name: Release dry run
working-directory: packages/js
run: |
npm run release -- \
--dry-run \
--ci \
--no-git.tag \
--github.draft \
--no-npm.publish \
--no-npm.tag
env:
NPM_TOKEN: ${{ secrets.NPM_CI_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
# - name: Release dry run
# working-directory: packages/js
# run: |
# npm run release -- \
# --dry-run \
# --ci \
# --no-git.tag \
# --github.draft \
# --no-npm.publish \
# --no-npm.tag
# env:
# NPM_TOKEN: ${{ secrets.NPM_CI_TOKEN }}
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
3 changes: 3 additions & 0 deletions packages/js/examples/react-audio-widgets/.env.sample
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
STORYBOOK_USERNAME=
STORYBOOK_PASSWORD=
STORYBOOK_DESTINATION=
6 changes: 5 additions & 1 deletion packages/js/examples/react-audio-widgets/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@ node_modules
yarn-error.log
lib
coverage
.vscode
.vscode
cypress/integration/examples
cypress/videos/*
cypress/screenshots/*
.env
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ const AuthForm = () => {
/>
</fieldset>
<fieldset>
<label htmlFor='sip_username'>SIP password: </label>
<label htmlFor='sip_password'>SIP password: </label>
<input
id='sip_username'
id='sip_password'
name='password'
type='password'
value={state.password}
Expand Down
5 changes: 5 additions & 0 deletions packages/js/examples/react-audio-widgets/cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"viewportWidth": 1400,
"viewportHeight": 1000,
"baseUrl": "http://localhost:6006/"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/* eslint-disable no-unused-expressions */
/* eslint-disable no-undef */
describe('ClickToCall', () => {
beforeEach(() => {
cy.visit('/iframe.html?id=audio--click-to-call');
cy.window().should('have.property', 'appReady', true);
});

it('should make a call and hang up a call', () => {
cy.window()
.its('storyData')
.should((storyData) => {
// the story must expose some variables
expect(storyData).to.not.null;
expect(storyData.username).to.equal(Cypress.env('username'));
expect(storyData.password).to.equal(Cypress.env('password'));
expect(storyData.defaultDestination).to.equal(Cypress.env('destination'));
})
.then(() => {
// the test code
cy.get('[data-testid=btn-call]').click();
cy.get('[data-testid=state-call-registering]').should('exist');
cy.get('[data-testid=state-call-new]').should('exist');
cy.get('[data-testid=state-call-active]').should('exist');
cy.get('[data-testid=btn-end-call]').click();
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* eslint-disable no-unused-expressions */
/* eslint-disable no-undef */
describe('Webialer', () => {
beforeEach(() => {
cy.visit('/iframe.html?id=audio--web-dialer');
cy.window().should('have.property', 'appReady', true);
});

it('should make a call and hang up a call', () => {
cy.window()
.its('storyData')
.should((storyData) => {
// the story must expose some variables
expect(storyData).to.not.null;
expect(storyData.username).to.equal(Cypress.env('username'));
expect(storyData.password).to.equal(Cypress.env('password'));
expect(storyData.defaultDestination).to.equal(
Cypress.env('destination')
);
})
.then(() => {
// the test code
cy.get('[data-testid=webdialer]').click();
cy.get('[data-testid=input-destination]').clear();
cy.get('[data-testid=input-destination]').type(Cypress.env('destination'));
cy.get('[data-testid=btn-call]').click();
cy.get('[data-testid=state-call-new]').should('exist');
cy.get('[data-testid=state-call-requesting]').should('exist');
cy.get('[data-testid=state-call-active]').should('exist');
cy.get('[data-testid=btn-end-call]').click();
});
});
});
73 changes: 73 additions & 0 deletions packages/js/examples/react-audio-widgets/cypress/plugins/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
* @type {Cypress.PluginConfig}
*/
require('dotenv').config();

module.exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
//Using cypress with WebRTC https://github.com/cypress-io/cypress/issues/2704
if (browser.name === 'chrome' || browser.name === 'edge') {
launchOptions.args.push('--disable-gpu');
launchOptions.args.push('--no-sandbox');
launchOptions.args.push('--disable-setuid-sandbox');
launchOptions.args.push('--disable-dev-shm-usage');
launchOptions.args.push('--disable-features=VizDisplayCompositor');
launchOptions.args.push('--use-fake-ui-for-media-stream');
launchOptions.args.push('--use-fake-device-for-media-stream');
launchOptions.args.push('--allow-file-access-from-files');
launchOptions.args.push('--disable-translate');
//FIXME: added temporarily to fix this error INCOMPATIBLE_DESTINATION
launchOptions.args.push('--disable-features=WebRtcHideLocalIpsWithMdns');
}

if (browser.name === 'firefox') {
const firefoxUserPrefs = {
'media.navigator.streams.fake': true,
'media.navigator.permission.disabled': true,
'browser.cache.disk.enable': false,
'browser.cache.disk.capacity': 0,
'browser.cache.disk.smart_size.enabled': false,
'browser.cache.disk.smart_size.first_run': false,
'browser.sessionstore.resume_from_crash': false,
'browser.startup.page': 0,
'device.storage.enabled': false,
'media.gstreamer.enabled': false,
'browser.startup.homepage': 'about:blank',
'browser.startup.firstrunSkipsHomepage': false,
'extensions.update.enabled': false,
'app.update.enabled': false,
'network.http.use-cache': false,
'browser.shell.checkDefaultBrowser': false,
'media.peerconnection.ice.obfuscate_host_addresses': false, //FIXME: added temporarily to fix this error INCOMPATIBLE_DESTINATION
};
launchOptions.preferences = {
...launchOptions.preferences,
...firefoxUserPrefs,
};
}

return launchOptions;
});

// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
config.env.username = process.env.STORYBOOK_USERNAME;
config.env.password = process.env.STORYBOOK_PASSWORD;
config.env.destination = process.env.STORYBOOK_DESTINATION;

return config;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
import '@testing-library/cypress/add-commands';
20 changes: 20 additions & 0 deletions packages/js/examples/react-audio-widgets/cypress/support/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js 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 commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
Loading