CircleCI error your tests likely make requests to this 'baseUrl' and these tests will fail if you don't boot your server

Question

I am running an Angular 2+ app with integration testing using Cypress.io and CI using circleCI.

I riffed off of a tutorial provided here for setting up an Angular project with circleCI, but needed to add the cypress orbs as well to run Cypress. So I ended up with the following config.yml script:

version: 2.1
orbs:
  cypress: cypress-io/[email protected]
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: angular/ngcontainer
    steps:
      - checkout
      - run:
          name: Show current branch
          command: |
            echo ${CIRCLE_BRANCH}
            echo $fireBaseApiKey
      - restore_cache:
          keys:
            - v1-dependencies-{{checksum "package.json"}}
            - v1-dependencies-
      - run:
          name: Install local dependencies
          command: |
            npm install
      - save_cache:
          key: v1-dependencies-{{checksum "package.json"}}
          paths:
            - node_modules
      - run:
          name: Building
          command: npm run build
      - save_cache:
          key: v1-dist-{{ .Environment.CIRCLE_BRANCH}}-{{ .Environment.CIRCLE_SHA1}}
          paths:
            - dist
workflows:
  version: 2.1
  build:
    jobs:
      - build
      - cypress/install:
          requires:
            - build
          build: 'npm run build'
          context: fireBaseApiKey
      - cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          context: fireBaseApiKey

When circleCI kicks off, the first two jobs of the workflow are successful (build and cypress/install), but cypress/run produces the following error:

Cypress could not verify that the server set as your 'baseUrl' is running:

http://localhost:4200

Your tests likely make requests to this 'baseUrl' and these tests will fail if you don't boot your server.

Please start this server and then run Cypress again.

I'm guessing that I did not boot the server with the npm run build command.

I tried adding:

- run:
          name: start ng server
          command: ng serve

in the "build" job, but then the error was:

/bin/bash: ng: command not found

I tried to find a docker container on dockerhub that would execute ng commands and "angular/ngcontainer" seemed like a good candidate because using circleci/node:6.10-browsers as my docker image per the tutorial link also didn't recognize ng commands.

I guess I'm mostly just way out of my depth here and haven't been able to find an example of an Angular project that uses Cypress and runs CI on circleCI. Having such an example would probably go a long way in helping things make sense. Until then, does anyone have any recommendations for how I might execute a command like ng serve and do you suppose that would solve my server not booting error?

Update 3 Feb., 2019 19:34:

I added wait-on after looking into the cypress orb usage a little more per advice advice from a friend on the internet. Thus, my updated -cypress/run command reads:

...
- cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          wait-on: 'http://localhost:4200'
          context: fireBaseApiKey

This seems to wait for an 'http://localhost:4200' that never happens.

Answer 1

I think i can help with the ng command not found problem.

You need to install the angular cli in your dev dependencies:

npm install --save-dev @angular/cli@latest

Then after npm install runs in your script ng will exist so you can add your ng serve step to start your server.

Answer 2

While I don't think this will apply to you, this question did popup for me when I was googling my issue. So in case another person has similar issue, here is how I got it working.

To get some NPM packages to work in our environment, I needed to use our corporate proxy and set it via HTTP_PROXY and HTTPS_PROXY environment variables in my Jenkins Pipeline. After a bit of debugging, noticed that cypress was trying to do something with the proxy. Once I set NO_PROXY = localhost cypress connected, success!

Answer 3

There were actually a few issues here:

1. It seems I needed to use http-get instead of http. So: wait-on: 'http-get://localhost:4200'
2. I was still having some issues with my environment variables, which were asked and answered here.

So, the final config file ended up looking like:

version: 2.1
orbs:
  cypress: cypress-io/[email protected]
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: circleci/node:9.6.1-browsers
    environment:
      circleCiApiKey: fireBaseApiKey
    steps:
      - checkout
      - run:
          name: Show current branch
          command: |
            echo ${CIRCLE_BRANCH}
            ls -larth
            echo $fireBaseApiKey
            cat src/app/api-keys.ts
            sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts
            cat src/app/api-keys.ts
      - restore_cache:
          keys:
            - v1-dependencies-{{checksum "package.json"}}
            - v1-dependencies-
      - run:
          name: Install local dependencies
          command: |
            npm install
      - save_cache:
          key: v1-dependencies-{{checksum "package.json"}}
          paths:
            - node_modules
      - run:
          name: Building
          command: npm run build
      - save_cache:
          key: v1-dist-{{ .Environment.CIRCLE_BRANCH}}-{{ .Environment.CIRCLE_SHA1}}
          paths:
            - dist
workflows:
  version: 2.1
  build:
    jobs:
      - build
      - cypress/install:
          requires:
            - build
          build: 'npm run build'
      - cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          store_artifacts: true
          wait-on: 'http-get://localhost:4200'

With the api-key.ts file referenced in the sed statement looking like:

export var masterFirebaseConfig = {
    apiKey: "circleCiApiKey",
    authDomain: "dataJitsu.firebaseapp.com",
    databaseURL: "https://datajitsu.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "495992924984"
  };

export var masterStripeConfig = {
  publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
  secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
  publicApiKey: "",
  secretApiKey: ""
};