qlik-oss / after-work.js

[DEPRECATED] CLI for automated tests in web projects.

after-work.js is an unified test framework highly configurable through cli and configuration files allowing tests to be executed in the desired context.

Deprecated

after-work.js is deprecated. Here are some alternatives:

• Vitest: https://vitest.dev/
• Jest: https://jestjs.io/
• Ava: https://github.com/avajs/ava
• Testing-library: https://testing-library.com/
• Playwright: https://playwright.dev/
• Cypress: https://www.cypress.io/

Requirements

Default runner

• node: Node.js >= 12.x

Context dependent

• cdp (Chrome Debugging Protocol): Chrome > 61
• protractor (webdriver protocol): protractor 5.x + browser(s)
• puppeteer (High-level Headless Chrome Node API - experimental): puppeteer

Introduction

after-work.js aims to be a tool that facilitates the testing while development or restructuring code. Designed for test and provide fast feedback on changed code and added testcases.

To configure after-work.js you need to start with an analyse of the code.

• What context should it be executed in (Node.js, browser)
• What type of tests should be executed (unit, component, integration, e2e)
• Does the code have any dependencies to build or run (babel...)

Get started

Installation

Install the module using npm:

npm install --save-dev @after-work.js/aw

CLI entrypoint

after-work.js is CLI and consists of a command together with appropriate options Help is always available with the --help, -h option

npx aw -h
npx aw chrome -h
npx aw protractor -h
npx aw serve -h
npx aw puppeteer -h

Command	Description	Alias	Default	Experimental
node	Run tests in node.		x
cdp	Run tests in Chrome (chrome devtools protocol).	chrome
protractor	Run tests with Protractor.	ptor
serve	Serve files.
puppeteer	Run tests with Puppeteer.	puppet		x

---

All commands support passing a config file for all options.

npx aw -c ./path/to/aw.config.js

However, passing an option from command line will override the config file option.

npx aw -c ./path/to/aw.config.js --glob /path/that/overrides/glob/in/config/file

This enables easy debugging setup from modern editors for example Visual Studio Code

This will only run the current active file. And you don't have to worry about your tests timing out since after-work.js will automatically detect running a debugger and set the appropriate options accordingly.

Included Tools

The following tools are bundled into after-work.js:

• Mocha: an extensible testing framework for TDD or BDD.
• Chai: an assertion library used together with a JavaScript testing framework.
• Sinon: a framework for standalone test spies, stubs and mocks for JavaScript.
• Nyc: the Istanbul command line interface

Contributing

Please follow the instructions in CONTRIBUTING.md.

Publish to npm

1. npx lerna version --exact --no-push --no-git-tag-version --force-publish
2. Update all @after-work.js/* dependencies in the root package.json to match the new version
3. git commit -m "chore(release): publish vX.Y.Z"
4. git tag -a vX.Y.Z -m "vX.Y.Z"
5. npx lerna publish from-git
6. git push --follow-tags

after-work.js's Issues

Add chai-subset plugin by default

The ability to use the construct

expect(object).to.containSubset({ myproperty: "expected"})

is very handy when working with larger json structures where you like to check a set of nested properties but not necessarily all of them. Typical use case is to verify everything except volatile fields like request ids etc.
The chai plugin "chai-subset" implements this behaviour. It would be neat if this was enabled by default in afterwork.js.

import image in the project but failed in the unit testing

Description

in a react project, do the unit testing, but failed when I import an image in the project.

Steps to Reproduce

1. import a image in a project
   import cellLocked from '../../image/NR_Locked.png'; in a jsx file, such as selections.jsx
2. import that jsx file in a .spec.jsx
   import * as withSelections from '../selections';

Actual behavior

Environment

"@after-work.js/aw": "6.0.14",
"react": "^17.0.1",

Operating system

[ ] Windows
[x ] OSX
[ ] Linux

Versions

• Node.js: v15.6.0
• Webdriver:
• Operating system: MacOS 10.15.7
• [Other relevant versions]

Update to mocha 8.1.2+

Description

This version results in mocha.run() being undefined when run with yarn test:chrome.

Ideally, we should have the latest version of mocha, but the breakage happens between 8.1.1 and 8.1.2 and the diff can be seen here mochajs/mocha@v8.1.1...v8.1.2

Steps to Reproduce

1. In examples/index.html, change <script src="/node_modules/mocha/mocha.js"></script> to <script src="https://unpkg.com/[email protected]/mocha.js"></script>
2. Run npm run test:chrome / yarn test:chrome
3. Observe the mocha.run() stacktrace

Expected behavior

I expect the tests to run successfully

Actual behavior

λ yarn test:chrome
yarn run v1.22.4
$ aw chrome -c aw.config.js
Navigating to http://localhost:9677/examples/index.html
Loading http://localhost:9677/examples/main.js[chrome-exception] {
  timestamp: 1599203841792.681,
  exceptionDetails: {
    exceptionId: 1,
    text: 'Uncaught',
    lineNumber: 13,
    columnNumber: 12,
    url: 'http://localhost:9677/examples/main.js',
    stackTrace: { callFrames: [Array] },
    exception: {
      type: 'object',
      subtype: 'error',
      className: 'TypeError',
      description: 'TypeError: mocha.run is not a function\n' +
        '    at http://localhost:9677/examples/main.js:14:11\n' +
        '    at Object.execCb (http://localhost:9677/node_modules/requirejs/require.js:1696:33)\n' +
        '    at Module.check (http://localhost:9677/node_modules/requirejs/require.js:883:51)\n' +
        '    at Module.<anonymous> (http://localhost:9677/node_modules/requirejs/require.js:1139:34)\n' +
        '    at http://localhost:9677/node_modules/requirejs/require.js:134:23\n' +
        '    at http://localhost:9677/node_modules/requirejs/require.js:1189:21\n' +
        '    at each (http://localhost:9677/node_modules/requirejs/require.js:59:31)\n' +
        '    at Module.emit (http://localhost:9677/node_modules/requirejs/require.js:1188:17)\n' +
        '    at Module.check (http://localhost:9677/node_modules/requirejs/require.js:938:30)\n' +
        '    at Module.<anonymous> (http://localhost:9677/node_modules/requirejs/require.js:1139:34)',
      objectId: '{"injectedScriptId":2,"id":1}',
      preview: [Object]
    },
    executionContextId: 2
  }
}

Environment

Operating system

[ ] Windows
[x] OSX
[ ] Linux

Versions

• Node.js: v12.16.1
• Webdriver: 12.1.7
• Operating system: macOS 10.15.6

Add badges for CCI and greenkeeper to README.md

AW+React: step-by-step tutorial request

It would be nice to have step by step guide to get started with React and After-Work. What should i install and what configuration should i make to get started with AW 5.0.1?

CHROME_PATH must be set

Description

I am trying to follow the requirejs examples.

Steps to Reproduce

I am running the following command, which works nice locally, but not in CircleCI:

 "test:unit": "./node_modules/.bin/aw chrome --url test/unit/index.html --glob test/unit/*.spec.js",

I am getting the following

Promise Rejection:Error: The environment variable CHROME_PATH must be set to executable of a build of Chromium version 54.0 or later.
Success!

I have installed the following as devDependencies for the tests:

"devDependencies": {
    "after-work.js": "^4.0.1",
    "protractor": "^5.2.2",
    "webdriver-manager": "^12.0.6"
  },

Any ideas what I can do/doing wrong?

Environment

Operating system

[ ] Windows
[x] OSX
[ ] Linux

Versions

• Node.js: v8.9.4
• Webdriver: N/A, but
• Operating system: OSX resp. Linux (CircleCI)

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Testreporter missing links

Description

The issue is in the reporter. When a rendering test is failing you dont get links to the:
baseline and the diff, only to the screenshot taken in the test

Steps to Reproduce

1. Rendering-test failing
2. Go to reporter

Expected behavior

It should show the buttons/links to Screenshot, baseline and diff

Actual behavior

Only Screenshot link is visible.

Update package-lock.json for Greenkeeper PRs

Greenkeeper has been enabled for after-work.js and updates to the latest version for all dependencies, however the package-lock.json is not updated.

https://github.com/greenkeeperio/greenkeeper-lockfile

Breaking changes v5 -> v6

We have a bunch of repos failing to bump to the new major: https://github.com/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+org%3Aqlik-oss+archived%3Afalse+sort%3Aupdated-desc+after-work.js

Any CHANGELOG/migration available somewhere?

Docs not up to date - webdriver-manager

Description

https://github.com/qlik-oss/after-work.js/blob/master/docs/component.md describes ./node_modules/after-work.js/node_modules/.bin/webdriver-manager update to update webdriver, but this script actually does not exist.

Consolidate unit test runners

Have only one test runner for both the unit tests and coverage tests

Update doc as well

Test coverage of unit tests in browser environment

Currently after-work.js only supports test coverage for node.js process, but has been requests for adding support for coverage in browser environments as well.

Investigate if chrome dev tools is a possible solution, or if we need to add the functionality ourselves through istanbul and middleware.

after-work.js next

Enables file caching and compressing transformed files which yields blazing 🔥 fast reruns
Cache located under node_modules/.cache/@after-work.js/transform which follows same standards as for example babel. This also makes it possible for Circle CI to pick up the cache when executing the tests.

Reruns example

picasso.js

---

Enables snapshot testing via jest-snapshot
Enables automagically mocking features even for virtual dependencies
Handle multiple file extensions defaults to '.js', '.ts', '.jsx', '.scss', '.less', '.css'

You get all commands by installing @after-work.js/aw
If you only need the node runner you can do

npm i -D @after-work.js/cli @after-work.js/node

• Snapshot testing

• Transform file cache

• Automagic mocking by config

  • String mock
  • File mock
  • Virtual mock (external dependencies via for example webpack config)
  • Local mock (aw.mock(...))

• Lerna support

  • Automatically setup glob src

• Babel core

  • v6
  • v7

More details

Snapshot testing

import React from 'react';
import renderer from 'react-test-renderer';

import Button from '../src/button';

describe('button', () => {
  it('renders correctly', () => {
    const tree = renderer.create(<Button>Text</Button>).toJSON();
    expect(tree).toMatchSnapshot();
    const tree1 = renderer.create(<Button>Text1</Button>).toJSON();
    expect(tree1).toMatchSnapshot();
  });
  it('renders fancy', () => {
    const tree1 = renderer.create(<Button>fancy1</Button>).toJSON();
    expect(tree1).toMatchSnapshot();
  });
});

If you want to update your snapshots add --updateSnapshot or -u

npx aw -c aw.config.js -u

Mocks

mocks: [
    ['**/cdp/src/browser-shim.js', '{}'],
    ['*.{scss,less,css}', '{}'],
  ],,

You can also point to a mock file e.g

mocks: [
  ['foo.js', 'test/mock/foo.js'],
]

Debugging in vs code

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "NodeRunner",
      "program": "${workspaceRoot}/node_modules/@after-work.js/aw/src/index.js",
      "args": [
        "-c",
        "aw.config.js",
        "--glob",
        "${file}"
      ]
    }
  ]
}

requirejs: dependencies

Description

I am following the requirejs example.
All fine so far, but to get it up and running, I have to install the following dependencies:

• babel-core
• babel-plugin-istanbul

Expected behavior

The following command runs without having to install babel-core & babel-core-istanbul

test:unit": "./node_modules/.bin/aw chrome --url test/unit/index.html --glob test/unit/*.spec.js"

Actual behavior

I get an error that the deps are missing.
All works fine after installing them manually.

Environment

Operating system

[ ] Windows
[x] OSX
[x] Linux

Versions

• after-work.js: 4.0.1
• Node.js: 8.9.4
• Webdriver: N/A
• Operating system: MacOS / Linux (CircleCI)

Automated: Protex scan failed

A BlackDuck Protex scan failed on this repository.

Number of files needing identification: 7

If you are unsure how this process works, please contact trunk team on Slack.

Please prioritize and solve this as soon as possible. If the the files
has been identified already, you may ignore and close this issue.

Automated: Protex scan failed

A BlackDuck Protex scan failed on this repository.

Number of files needing identification: 7

If you are unsure how this process works, please contact trunk team on Slack.

No more automated issues will be created on this repository until this issue
is closed.

Please prioritize and solve this as soon as possible. If the files
has been identified already, you may ignore and close this issue.

aw protractor with multiCapabilities enabled fails with JSON.stringify error

Description

The idea is to use Protractor to start multiple browser sessions to run the test suite.
The browser sessions could be in parallel or in sequense.

But:
aw protractor with multiCapabilities enabled fails with JSON.stringify error:

[11:15:28] E/launcher - TypeError: Map#toJSON isn't generic
at String.toJSON (...\node_modules\core-js\library\modules_collection-to-json.js:6:38)
at Function.toJSON (...\node_modules\core-js\library\modules_ctx.js:18:15)
at JSON.stringify ()

Steps to Reproduce

1. Add multiCapabilities to aw.config.js

    multiCapabilities: [
      {
        name: 'desktop',
        browserName: 'chrome',
        chromeOptions: {
          args: [
            '--window-size=1024,768',
          ],
        },
      },
      {
        name: 'mobile',
        browserName: 'chrome',
        chromeOptions: {
          args: [
            '--window-size=375,667',
          ],
        },
      },
    ],

2. Run tests
3. ...

Expected behavior

Two browser sessions in parallel started by Protractor

Actual behavior

Error from Protractor:

[11:15:28] W/launcher - You have specified both capabilities and multiCapabilities. This will result in capabilities being ignored
[11:15:28] E/launcher - Map#toJSON isn't generic
[11:15:28] E/launcher - TypeError: Map#toJSON isn't generic
    at String.toJSON (...\node_modules\core-js\library\modules\_collection-to-json.js:6:38)
    at Function.toJSON (...\node_modules\core-js\library\modules\_ctx.js:18:15)
    at JSON.stringify (<anonymous>)
    at ChildProcess.target._send (internal/child_process.js:675:23)
    at ChildProcess.target.send (internal/child_process.js:586:19)
    at TaskRunner.run (...\node_modules\protractor\built\taskRunner.js:95:26)
    at createNextTaskRunner (...\node_modules\protractor\built\launcher.js:235:28)
    at helper.runFilenameOrFn_.then.then.then (...\node_modules\protractor\built\launcher.js:260:13)
    at _fulfilled (...\node_modules\q\q.js:834:54)
    at self.promiseDispatch.done (...\node_modules\q\q.js:863:30)
[11:15:28] E/launcher - Process exited with error code 199

Environment

Operating system

[ ] Windows 10

Versions

• Node.js: v8.11.4
• Webdriver: ChromeDriver 2.43
• Operating system: Windows 10
• [Other relevant versions]

Activate greenkeeper for after-work.js

Add protractor-timeline support in after-work.js

Update to use CircleCI 2.0

Missing git tags/releases since january (4.1)

Seems like something has gone wrong since 4.1+ in terms of releasing new versions.

Updating different parts of after-work separately breaks it.

Our CI tool bumped @after-work.js/cli and @after-work.js/node from 5.0.1 to 5.0.2 in two different PRs and then the tests would not run correctly.

When bumped together it worked fine, but I would not expect a patch release to require another package to be updated to work

With latest Mocha version it stringifys the screenshots to faulty names

Description

[Description of the issue]

Steps to Reproduce

1. [Step one]
   Run a rendering-tests that fail

Expected behavior

When in the reporter you should see a Baseline/Diff/Screenshot.

Actual behavior

Diff and expected screenshots gets the wrong name and path after that mocha have stringifyed it and the pics will not be displayed in the Reporter.

The data is wrong in both JSON and HTML part of the reporter.

Environment

Circle CI

Operating system

[ ] Windows
[X ] OSX
[X ] Linux

Versions

• Node.js: 8.9.0
• Webdriver: 2.37
• Operating system: Linux
• [Other relevant versions]

More info about the purpose and advantages

Description

Encountering after-work for the first time the first thing I want to know is how this tool facilitates my work. Especially, why I should choose after-work instead of e.g. writing a shell script executing the tests in desired order (unit, component, integration, end-to-end) – or using "established" tools like grunt and gulp (which might not even be a good comparison).

Investigate usage of contract testing

Investigate if contract testing functionality in after-work.js is used, if not lets remove it.