Testing in Aurelia (2)

Best Practices
1

Hi, I’ve just had a test with Aurelia 2 thru the npx make aurelia command line and it looks great (simple-simply-great). I wonder if there is already a best pratices samples or some sample github project where could be found tips around e2e testing ?

Regards, and thanks a lot for your work around this new version.

2 Likes
2

As a wise man (read @zewa666 :slight_smile:) once told me, for e2e tests probably it is always a goo idea to rely on webdriver protocol. Refer to webdriver.io for more details.

Note that there is nothing special about writing e2e tests for Au2 apps. At the end it boils down to start the app, and then run your e2e tests. The tests are pretty much the app-framework agnostic.

1 Like
3

When running npx makes aurelia, if you choose “custom app”, you will get option to have basic cypress e2e setup.

The protractor (webdriver) e2e setup is not there yet, but we will add it eventually.

1 Like
4

I recently added e2e testing with jest and puppeteer. The key was npm install jest-environment-puppeteer. Below are the basics.

Package.json

...

"testRegex": [
      "\\.spec\\.js$",
      "\\.e2e\\.js$"
    ],
    "setupFiles": [
      "<rootDir>/test/jest-pretest.js"
    ],
    "testEnvironment": "jest-environment-puppeteer",

...

    "preset": "jest-puppeteer",
    "globalSetup": "jest-environment-puppeteer/setup",
    "globalTeardown": "jest-environment-puppeteer/teardown"
  }

app.e2e.js

// IMPORTANT: this test does not run correctly with WSL on Windows
// It **IS** fine on native linux and with a Windows command prompt

describe('describe Home page', () => {
  beforeAll(async () => {
    await page.goto('https://example.com, {waitUntil: 'domcontentloaded'});
  });

  it('should be titled "My Title"', async () => {
    await expect(page.title()).resolves.toMatch('My Title');
  });
});
2 Likes
5

Puppeteer is a great choice if you only care about Chrome. If FF and Safari is a thing for you perhaps also give https://github.com/microsoft/playwright a try. Same API more targets. Personally though I’d stick to webdriver based testing because as soon as you need to do mobile testing you’re on the safe side with Appium.

While E2E testing in general is unrelated to the target SUT, you can make use of some neat features of Aurelia in accessing the ViewModel from your tests. Here is an example doing that with Cypress. https://github.com/zewa666/enforted/blob/master/test/e2e/integration/six-rounds.ts#L25

Also here is a custom Puppeteer plugin to enable dispatching Aurelia Store actions from E2E tests https://github.com/zewa666/puppeteer-extra-plugin-aurelia-store

While these are Aurelia v1 specific similar will/should be possible with v2 as well.

3 Likes
6

Man, I wish had all these examples last week. Thank you!

1 Like
7

Thanks all, @Sayan751 remarks on agnostic context is really good and various solutions (from @huochunpeng, @smoore4moma and @zewa666) need to be looked at !
Thanks for your answers.

2 Likes
8

Excellent discussion!

We’re using cypress for e2e tests. Like some have said in this thread, testing is mostly framework agonistic.

The downside is that they’re is no instrumentation for Aurelia for cypress code coverage reports. I’d like to put something together, but I have no idea where to start. Does anyone have any suggestions?

1 Like
9

E2E coverage is bit confusing concept, as a e2e test in strict sense will encompass the UI as well as the backend services (in conventional sense). I am assuming by coverage report you mean only the UI part of it.

If my assumption is true then you can do it via integration tests. Writing integration tests in Au2 has become very easy, and it works with you typical setup of mocha/jasmine. Therefore your typical setup of coverage report generation also works. Check some example of integration tests here.

However, if you really do mean e2e coverage then I have to agree that to be a fascinating concept, and I would like to here more about it.

1 Like