[WIP] add cypress

[timdeschryver]

What:

Introduces cypress to run our e2e tests.

• cypress config and npm scripts are added
• protractor tests are rewritten
• data-testid attributes are added in the html to use in the tests, prettier also formatted these files

Need to clear out

• Is there a way to run the version build with npm run build:prod?
• If this is OK what are we going to do with protractor?
• Add to CI?

Issue number: N/A

[tomastrajan]

Could we prefix everything with cy: so that it is obvious that they belong together?

[timdeschryver]

Yes!

[tomastrajan]

@timdeschryver looks very cool! Can we also run it as a part of npm run ci ?

[timdeschryver]

@timdeschryver looks very cool! Can we also run it as a part of npm run ci ?

We definitely can, but wanted to hear your thoughts on this, as well as the bullet points under "Need to clear out".

[tomastrajan]

Hi Tim!
I would add this to run with npm run ci but also kept the protractor as is so people see example of both, we can document that a bit in README.md (like a small note that they should choose and use just one).

Also how should I understand

Is there a way to run the version build with npm run build:prod?
what is the version build?

[timdeschryver]

Is there a way to run the version build with npm run build:prod?

To build the app I tried using npm run build:prod but then the translations wouldn't come through because it searches the translations with

return new TranslateHttpLoader(
    http,
    `${environment.i18nPrefix}/assets/i18n/`,
    '.json'
  );

Thus it can't find the translations.

If I build the app with --deploy-url /angular-ngrx-material-starter/ --base-href /angular-ngrx-material-starter flags, I can't seem to run the app which is normal. The angular-ngrx-material-starter is needed for the github pages.

If you need more info, ask away.

[tomastrajan]

@timdeschryver could cypress be configured so it also run with the context path of /angular-ngrx-material-starter/ ?

Also...

I can't seem to run the app which is normal.

Can you please elaborate a bit more why this is the case?
I have no experience with cypress so maybe I am missing obvious things...

[timdeschryver]

This has nothing to do with Cypress but with "hosting" the application yourself.
For example with http-server or angular-http-server.

I'll take another look later to see if it's possible. In the past I wasn't succesful in finding a solution 😅

[tomastrajan]

This could work?

// cypress-server.js
const express = require('express');
const app = express();
app.use('/angular-ngrx-material-starter', express.static(__dirname + '/dist'));
app.listen(4200);

[timdeschryver]

I'll try it later today and keep you posted.

[timdeschryver]

You are a hero @tomastrajan 😄

[timdeschryver]

It should work with the last commit but I don't like it that we have to do the following in the cypress tests. Also I think this might crash the cy:open command.

cy.visit('/#about');

Another solution would be to not use the prod flag, or to change the localization paths if we're running the cypress ci tests. I think to do the latter we would have to introduce a new environment?

[tomastrajan]

We're using hash router strategy, also maybe `/#/about could work?

As for new env / config, I think it would make sense to define CI which doea prod build (angular.json configuration) and can have separate environment.ci.ts with no context paths which makes things easier, just have to think about running prod.build.on Travis CI so we can deploy app built.with context paths onto GH pages.

[timdeschryver]

/#/about works.

With giving it a second look with a fresh head I think we don't need a another env file. I didn't notice we were also hashing the router in dev mode. Our cypress tests runs fine in dev mode and prod mode, so I don't see a need to "complicate" things and add another config.

So I think all the things we needed to clear out are done:

• we are building our app in prod mode and using an express server to run the app
• we've added it to the ci
• we're going to use protractor and cypress side by side to give a good comparison

If you're OK with this setup I can add it to the README.

[tomastrajan]

@timdeschryver yes, I think it is great like this, please update the README.md and we can merge this :)

[singhcharanjit]

I added a new module, added new folder under i18n folder and also added TranslateModule.forChild() in imports of new module. Somehow it is not loading translation for new module.

What am I missing?