foo.e2e-spec.ts

    fit('should show a placeholder when no groups exist', () => {
      ngApimock.selectScenario('teacher-groups', 'empty');
      page.navigateTo();

      page.sleep(60000);
      expect(page.chooseExistingGroups.animation).toBeDisplayed();
      expect(page.chooseExistingGroups.pointers).toBeDisplayed();
    });

groups.json

{
  "expression": "/teacher/groups",
  "method": "GET",
  "name": "teacher-groups",
  "responses": {
    "default": {
      "default": true,
      "isArray": true,
      "data": [
        {
          "id": "foo",
          "mine": true,
          "name": "Foo",
          "stream": {
            "id": "6_vwo",
            "level": "vwo",
            "year": "6",
            "subtitle": [
              {
                "mediaType": "text",
                "text": {
                  "mimeType": "text/plain",
                  "contents": "6-vwo"
                }
              }
            ]
          },
          "teachers": [
            {
              "id": "lorem",
              "fullName": "Lorem Ipsum"
            }
          ]
        },
        {
          "id": "bar",
          "mine": false,
          "name": "Bar",
          "stream": {
            "id": "1-havo_vwo",
            "level": "havo/vwo",
            "year": "1",
            "subtitle": [
              {
                "mediaType": "text",
                "text": {
                  "mimeType": "text/plain",
                  "contents": "1-havo/vwo"
                }
              }
            ]
          },
          "teachers": [
            {
              "id": "ipsum",
              "fullName": "Ipsum Lorem"
            }
          ]
        },
        {
          "id": "foobar",
          "mine": false,
          "name": "Foo Bar",
          "stream": {
            "id": "1-havo_vwo",
            "level": "havo/vwo",
            "year": "1",
            "subtitle": [
              {
                "mediaType": "text",
                "text": {
                  "mimeType": "text/plain",
                  "contents": "1-havo/vwo"
                }
              }
            ]
          },
          "teachers": [
            {
              "id": "ipsum",
              "fullName": "Ipsum Lorem"
            },
            {
              "id": "lorem",
              "fullName": "Lorem Ipsum"
            }
          ]
        }
      ]
    },
    "empty": {
      "isArray": true,
      "data": []
    }
  }
}

protractor.conf.js

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter'),
      matchers = require('../test/e2e/matchers');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      // args: ['--headless', '--disable-gpu', '--window-size=1024,768']
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  ngApimockOpts: {
    angularVersion: 6,
    hybrid: false
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));

    // Load ngApimock
    global['ngApimock'] = require('../.tmp/ngApimock/protractor.mock.js');
    beforeEach(() => global['ngApimock'].setAllScenariosToDefault());

    // Set role cookie
    browser.get(browser.baseUrl);
    browser.manage().addCookie({
      name: 'userrole',
      value: browser.params.role === 'student' ? 'MA==' : 'MQ=='
    });

    // Workaround: set cookie VO-Method that normally comes from Nginx
    if (browser.baseUrl.includes('localhost')) {
      browser.manage().addCookie({
        name: 'vo-method',
        value: 'lorem'
      });
    }

    // Clear logs with messages from before we set the cookie
    browser.manage().logs().get('browser');

    // Add custom matchers
    beforeEach(() => jasmine.addMatchers(matchers));
  }
};