open-nomad/ui/tests/integration/job-editor-test.js

import { assign } from '@ember/polyfills';
import { run } from '@ember/runloop';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { settled } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { create } from 'ember-cli-page-object';
import sinon from 'sinon';
import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
import { getCodeMirrorInstance } from 'nomad-ui/tests/helpers/codemirror';
import jobEditor from 'nomad-ui/tests/pages/components/job-editor';
import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';

const Editor = create(jobEditor());

module('Integration | Component | job-editor', function(hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function() {
    window.localStorage.clear();

    fragmentSerializerInitializer(this.owner);

    // Normally getCodeMirrorInstance is a registered test helper,
    // but those registered test helpers only work in acceptance tests.
    window._getCodeMirrorInstance = window.getCodeMirrorInstance;
    window.getCodeMirrorInstance = getCodeMirrorInstance(this.owner);

    this.store = this.owner.lookup('service:store');
    this.server = startMirage();

    // Required for placing allocations (a result of creating jobs)
    this.server.create('node');

    Editor.setContext(this);
  });

  hooks.afterEach(function() {
    this.server.shutdown();
    Editor.removeContext();
    window.getCodeMirrorInstance = window._getCodeMirrorInstance;
    delete window._getCodeMirrorInstance;
  });

  const newJobName = 'new-job';
  const newJobTaskGroupName = 'redis';
  const jsonJob = overrides => {
    return JSON.stringify(
      assign(
        {},
        {
          Name: newJobName,
          Namespace: 'default',
          Datacenters: ['dc1'],
          Priority: 50,
          TaskGroups: [
            {
              Name: newJobTaskGroupName,
              Tasks: [
                {
                  Name: 'redis',
                  Driver: 'docker',
                },
              ],
            },
          ],
        },
        overrides
      ),
      null,
      2
    );
  };

  const hclJob = () => `
  job "${newJobName}" {
    namespace = "default"
    datacenters = ["dc1"]

    task "${newJobTaskGroupName}" {
      driver = "docker"
    }
  }
  `;

  const commonTemplate = hbs`
    {{job-editor
      job=job
      context=context
      onSubmit=onSubmit}}
  `;

  const cancelableTemplate = hbs`
    {{job-editor
      job=job
      context=context
      cancelable=true
      onSubmit=onSubmit
      onCancel=onCancel}}
  `;

  const renderNewJob = (component, job) => () => {
    component.setProperties({ job, onSubmit: sinon.spy(), context: 'new' });
    component.render(commonTemplate);
    return settled();
  };

  const renderEditJob = (component, job) => () => {
    component.setProperties({ job, onSubmit: sinon.spy(), onCancel: sinon.spy(), context: 'edit' });
    component.render(cancelableTemplate);
  };

  const planJob = spec => () => {
    Editor.editor.fillIn(spec);
    return settled().then(() => {
      Editor.plan();
      return settled();
    });
  };

  test('the default state is an editor with an explanation popup', function(assert) {
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(() => {
        assert.ok(Editor.editorHelp.isPresent, 'Editor explanation popup is present');
        assert.ok(Editor.editor.isPresent, 'Editor is present');
      });
  });

  test('the explanation popup can be dismissed', function(assert) {
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(() => {
        Editor.editorHelp.dismiss();
        return settled();
      })
      .then(() => {
        assert.notOk(Editor.editorHelp.isPresent, 'Editor explanation popup is gone');
        assert.equal(
          window.localStorage.nomadMessageJobEditor,
          'false',
          'Dismissal is persisted in localStorage'
        );
      });
  });

  test('the explanation popup is not shown once the dismissal state is set in localStorage', function(assert) {
    window.localStorage.nomadMessageJobEditor = 'false';

    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(() => {
        assert.notOk(Editor.editorHelp.isPresent, 'Editor explanation popup is gone');
      });
  });

  test('submitting a json job skips the parse endpoint', function(assert) {
    const spec = jsonJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        const requests = this.server.pretender.handledRequests.mapBy('url');
        assert.notOk(requests.includes('/v1/jobs/parse'), 'JSON job spec is not parsed');
        assert.ok(
          requests.includes(`/v1/job/${newJobName}/plan`),
          'JSON job spec is still planned'
        );
      });
  });

  test('submitting an hcl job requires the parse endpoint', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        const requests = this.server.pretender.handledRequests.mapBy('url');
        assert.ok(requests.includes('/v1/jobs/parse'), 'HCL job spec is parsed first');
        assert.ok(requests.includes(`/v1/job/${newJobName}/plan`), 'HCL job spec is planned');
        assert.ok(
          requests.indexOf('/v1/jobs/parse') < requests.indexOf(`/v1/job/${newJobName}/plan`),
          'Parse comes before Plan'
        );
      });
  });

  test('when a job is successfully parsed and planned, the plan is shown to the user', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        assert.ok(Editor.planOutput, 'The plan is outputted');
        assert.notOk(Editor.editor.isPresent, 'The editor is replaced with the plan output');
        assert.ok(Editor.planHelp.isPresent, 'The plan explanation popup is shown');
      });
  });

  test('from the plan screen, the cancel button goes back to the editor with the job still in tact', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        Editor.cancel();
        return settled();
      })
      .then(() => {
        assert.ok(Editor.editor.isPresent, 'The editor is shown again');
        assert.equal(
          Editor.editor.contents,
          spec,
          'The spec that was planned is still in the editor'
        );
      });
  });

  test('when parse fails, the parse error message is shown', function(assert) {
    const spec = hclJob();
    const errorMessage = 'Parse Failed!! :o';

    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    this.server.pretender.post('/v1/jobs/parse', () => [400, {}, errorMessage]);

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        assert.notOk(Editor.planError.isPresent, 'Plan error is not shown');
        assert.notOk(Editor.runError.isPresent, 'Run error is not shown');

        assert.ok(Editor.parseError.isPresent, 'Parse error is shown');
        assert.equal(
          Editor.parseError.message,
          errorMessage,
          'The error message from the server is shown in the error in the UI'
        );
      });
  });

  test('when plan fails, the plan error message is shown', function(assert) {
    const spec = hclJob();
    const errorMessage = 'Plan Failed!! :o';

    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    this.server.pretender.post(`/v1/job/${newJobName}/plan`, () => [400, {}, errorMessage]);

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        assert.notOk(Editor.parseError.isPresent, 'Parse error is not shown');
        assert.notOk(Editor.runError.isPresent, 'Run error is not shown');

        assert.ok(Editor.planError.isPresent, 'Plan error is shown');
        assert.equal(
          Editor.planError.message,
          errorMessage,
          'The error message from the server is shown in the error in the UI'
        );
      });
  });

  test('when run fails, the run error message is shown', function(assert) {
    const spec = hclJob();
    const errorMessage = 'Run Failed!! :o';

    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    this.server.pretender.post('/v1/jobs', () => [400, {}, errorMessage]);

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        Editor.run();
        return settled();
      })
      .then(() => {
        assert.notOk(Editor.planError.isPresent, 'Plan error is not shown');
        assert.notOk(Editor.parseError.isPresent, 'Parse error is not shown');

        assert.ok(Editor.runError.isPresent, 'Run error is shown');
        assert.equal(
          Editor.runError.message,
          errorMessage,
          'The error message from the server is shown in the error in the UI'
        );
      });
  });

  test('when the scheduler dry-run has warnings, the warnings are shown to the user', function(assert) {
    const spec = jsonJob({ Unschedulable: true });
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        assert.ok(
          Editor.dryRunMessage.errored,
          'The scheduler dry-run message is in the warning state'
        );
        assert.notOk(
          Editor.dryRunMessage.succeeded,
          'The success message is not shown in addition to the warning message'
        );
        assert.ok(
          Editor.dryRunMessage.body.includes(newJobTaskGroupName),
          'The scheduler dry-run message includes the warning from send back by the API'
        );
      });
  });

  test('when the scheduler dry-run has no warnings, a success message is shown to the user', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        assert.ok(
          Editor.dryRunMessage.succeeded,
          'The scheduler dry-run message is in the success state'
        );
        assert.notOk(
          Editor.dryRunMessage.errored,
          'The warning message is not shown in addition to the success message'
        );
      });
  });

  test('when a job is submitted in the edit context, a POST request is made to the update job endpoint', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderEditJob(this, job))
      .then(planJob(spec))
      .then(() => {
        Editor.run();
      })
      .then(() => {
        const requests = this.server.pretender.handledRequests
          .filterBy('method', 'POST')
          .mapBy('url');
        assert.ok(requests.includes(`/v1/job/${newJobName}`), 'A request was made to job update');
        assert.notOk(requests.includes('/v1/jobs'), 'A request was not made to job create');
      });
  });

  test('when a job is submitted in the new context, a POST request is made to the create job endpoint', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        Editor.run();
      })
      .then(() => {
        const requests = this.server.pretender.handledRequests
          .filterBy('method', 'POST')
          .mapBy('url');
        assert.ok(requests.includes('/v1/jobs'), 'A request was made to job create');
        assert.notOk(
          requests.includes(`/v1/job/${newJobName}`),
          'A request was not made to job update'
        );
      });
  });

  test('when a job is successfully submitted, the onSubmit hook is called', function(assert) {
    const spec = hclJob();
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(planJob(spec))
      .then(() => {
        Editor.run();
        return settled();
      })
      .then(() => {
        assert.ok(
          this.get('onSubmit').calledWith(newJobName, 'default'),
          'The onSubmit hook was called with the correct arguments'
        );
      });
  });

  test('when the job-editor cancelable flag is false, there is no cancel button in the header', function(assert) {
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderNewJob(this, job))
      .then(() => {
        assert.notOk(Editor.cancelEditingIsAvailable, 'No way to cancel editing');
      });
  });

  test('when the job-editor cancelable flag is true, there is a cancel button in the header', function(assert) {
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderEditJob(this, job))
      .then(() => {
        assert.ok(Editor.cancelEditingIsAvailable, 'Cancel editing button exists');
      });
  });

  test('when the job-editor cancel button is clicked, the onCancel hook is called', function(assert) {
    let job;
    run(() => {
      job = this.store.createRecord('job');
    });

    return settled()
      .then(renderEditJob(this, job))
      .then(() => {
        Editor.cancelEditing();
      })
      .then(() => {
        assert.ok(this.get('onCancel').calledOnce, 'The onCancel hook was called');
      });
  });
});