Mirage and acceptance tests

ui/app/components/job-version.js

@@ -116,6 +116,14 @@ export default class JobVersion extends Component {
   async saveTag(event) {
     event.preventDefault();
     try {
+      if (!this.editableTag.name) {
+        this.notifications.add({
+          title: 'Error Tagging Job Version',
+          message: 'Tag name is required',
+          color: 'critical',
+        });
+        return;
+      }
       const savedTag = await this.editableTag.save();
       this.version.taggedVersion = savedTag;
       this.version.taggedVersion.setProperties({
@@ -154,7 +162,6 @@ export default class JobVersion extends Component {
         title: 'Job Version Un-Tagged',
         color: 'success',
       });
-      // this.version.set('taggedVersion', null);
       this.version.taggedVersion = null;
       this.initializeEditableTag();
       this.isEditing = false;

ui/app/serializers/version-tag.js

@@ -12,11 +12,7 @@ export default class VersionTagSerializer extends ApplicationSerializer {
 
   serialize(snapshot, options) {
     const hash = super.serialize(snapshot, options);
-    hash.Version = hash.VersionNumber; // TODO: delete versionNumber and jobName?
+    hash.Version = hash.VersionNumber;
     return hash;
   }
-
-  // normalize(typeHash, hash) {
-  //   return super.normalize(typeHash, hash);
-  // }
 }

ui/app/templates/components/job-version.hbs

@@ -4,7 +4,7 @@
 ~}}
 
 <section class="job-version">
-  <div class="boxed-section {{if this.version.taggedVersion "tagged"}}">
+  <div class="boxed-section {{if this.version.taggedVersion "tagged"}}" data-test-tagged-version={{if this.version.taggedVersion "true" "false"}}>
     <header class="boxed-section-head is-light inline-definitions">
       Version #{{this.version.number}}
       <span class="bumper-left pair is-faded">
@@ -41,6 +41,7 @@
         <form class="tag-options" autocomplete="off" {{on "submit" (action "saveTag")}}>
           {{! template-lint-disable no-down-event-binding }}
           <Hds::Form::TextInput::Field
+            data-test-tag-name-input
             @label="Tag Name"
             placeholder="Tag Name"
             @value={{this.editableTag.name}}
@@ -50,17 +51,18 @@
             autofocus
           />
           <Hds::Form::TextInput::Field
+            data-test-tag-description-input
             @label="Tag Description"
             placeholder="Tag Description"
             @value={{this.editableTag.description}}
             {{on "input" (action (mut this.editableTag.description) value="target.value") }}
             {{on "keydown" (action this.handleKeydown)}}
           />
           {{! template-lint-enable no-down-event-binding }}
-          <Hds::Button type="submit" @text="Save" @color="primary" @size="small" @isInline={{true}} {{on "click" this.saveTag}} />
+          <Hds::Button data-test-tag-save-button type="submit" @text="Save" @color="primary" @size="small" @isInline={{true}} {{on "click" this.saveTag}} />
           <Hds::Button @text="Cancel" @color="secondary" @size="small" @isInline={{true}} {{on "click" (action "cancelEditTag")}} />
           {{#if this.version.taggedVersion}}
-            <Hds::Button @text="Delete" @color="critical" @size="small" @isInline={{true}} {{on "click" (action "deleteTag")}} />
+            <Hds::Button data-test-tag-delete-button @text="Delete" @color="critical" @size="small" @isInline={{true}} {{on "click" (action "deleteTag")}} />
           {{/if}}
         </form>
 

ui/mirage/config.js

@@ -457,6 +457,31 @@ export default function () {
     return this.serialize(jobVersions.where({ jobId: params.id }));
   });
 
+  this.post(
+    '/job/:id/versions/:version/tag',
+    function ({ jobVersions }, { params }) {
+      // Create a new version tag
+      const tag = server.create('version-tag', {
+        jobVersion: jobVersions.findBy({
+          jobId: params.id,
+          version: params.version,
+        }),
+        name: params.name,
+        description: params.description,
+      });
+      return this.serialize(tag);
+    }
+  );
+
+  this.delete(
+    '/job/:id/versions/:version/tag',
+    function ({ jobVersions }, { params }) {
+      return this.serialize(
+        jobVersions.findBy({ jobId: params.id, version: params.version })
+      );
+    }
+  );
+
   this.get('/job/:id/deployments', function ({ deployments }, { params }) {
     return this.serialize(deployments.where({ jobId: params.id }));
   });

ui/mirage/factories/job-version.js

@@ -31,6 +31,9 @@ export default Factory.extend({
   // Directive to restrict any related deployments from having a status other than 'running'
   activeDeployment: false,
 
+  // version tags
+  taggedVersion: null,
+
   afterCreate(version, server) {
     const args = [
       'deployment',

ui/mirage/scenarios/default.js

@@ -341,6 +341,42 @@ function smallCluster(server) {
 
   //#endregion Active Deployment
 
+  // #region Version Tags
+  const versionTaggedJob = server.create('job', {
+    name: 'version-tag-job',
+    id: 'version-tag-job',
+    namespaceId: 'default',
+    noDeployments: true,
+  });
+
+  server.create('job-version', {
+    job: versionTaggedJob,
+    namespace: 'default',
+    version: 0,
+  });
+
+  server.create('job-version', {
+    job: versionTaggedJob,
+    namespace: 'default',
+    version: 1,
+    taggedVersion: {
+      Name: 'burrito',
+      Description: 'A delicious version',
+    },
+  });
+
+  server.create('job-version', {
+    job: versionTaggedJob,
+    namespace: 'default',
+    version: 2,
+    taggedVersion: {
+      Name: 'enchilada',
+      Description: 'A version with just a hint of spice',
+    },
+  });
+
+  // #endregion Version Tags
+
   server.create('job', {
     name: 'hcl-definition-job',
     id: 'display-hcl',

ui/tests/acceptance/job-versions-test.js

@@ -5,15 +5,15 @@
 
 /* eslint-disable qunit/require-expect */
 /* eslint-disable qunit/no-conditional-assertions */
-import { currentURL } from '@ember/test-helpers';
+import { currentURL, click, typeIn } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import Versions from 'nomad-ui/tests/pages/jobs/job/versions';
 import Layout from 'nomad-ui/tests/pages/layout';
 import moment from 'moment';
-
+import percySnapshot from '@percy/ember';
 let job;
 let namespace;
 let versions;
@@ -30,6 +30,21 @@ module('Acceptance | job versions', function (hooks) {
     job = server.create('job', {
       namespaceId: namespace.id,
       createAllocations: false,
+      noDeployments: true,
+    });
+
+    // Create some versions
+    server.create('job-version', {
+      job: job,
+      version: 0,
+    });
+    server.create('job-version', {
+      job: job,
+      version: 1,
+      taggedVersion: {
+        Name: 'test-tag',
+        Description: 'A tag with a brief description',
+      },
     });
     versions = server.db.jobVersions.where({ jobId: job.id });
 
@@ -170,6 +185,124 @@ module('Acceptance | job versions', function (hooks) {
     assert.ok(Versions.error.isPresent, 'Error message is shown');
     assert.equal(Versions.error.title, 'Not Found', 'Error message is for 404');
   });
+
+  test('version tags are displayed', async function (assert) {
+    // Both a tagged version and an untagged version are present
+    assert.dom('[data-test-tagged-version="true"]').exists();
+    assert.dom('[data-test-tagged-version="false"]').exists();
+
+    // The tagged version has a button indicating a tag name and description
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-button-primary')
+      .hasText('test-tag');
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-description')
+      .hasText('A tag with a brief description');
+
+    // The untagged version has no tag button or description
+    assert
+      .dom('[data-test-tagged-version="false"] .tag-button-primary')
+      .doesNotExist();
+    assert
+      .dom('[data-test-tagged-version="false"] .tag-description')
+      .hasText('', 'Tag description is empty');
+
+    await percySnapshot(assert);
+  });
+
+  test('existing version tags can be edited', async function (assert) {
+    // Clicking the tag button puts it into edit mode
+    assert
+      .dom('[data-test-tagged-version="true"] .boxed-section-foot')
+      .doesNotHaveClass('editing');
+    await click('[data-test-tagged-version="true"] .tag-button-primary');
+    assert
+      .dom('[data-test-tagged-version="true"] .boxed-section-foot')
+      .hasClass('editing');
+
+    // equivalent of backspacing existing
+    document.querySelector('[data-test-tag-name-input]').value = '';
+    document.querySelector('[data-test-tag-description-input]').value = '';
+
+    await typeIn(
+      '[data-test-tagged-version="true"] [data-test-tag-name-input]',
+      'new-tag'
+    );
+    await typeIn(
+      '[data-test-tagged-version="true"] [data-test-tag-description-input]',
+      'new-description'
+    );
+
+    // Clicking the save button commits the changes
+    await click(
+      '[data-test-tagged-version="true"] [data-test-tag-save-button]'
+    );
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-button-primary')
+      .hasText('new-tag');
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-description')
+      .hasText('new-description');
+
+    assert
+      .dom('.flash-message.alert.alert-success')
+      .exists('Shows a success toast notification on edit.');
+
+    // Tag can subsequently be deleted
+    await click('[data-test-tagged-version="true"] .tag-button-primary');
+    await click(
+      '[data-test-tagged-version="true"] [data-test-tag-delete-button]'
+    );
+    assert.dom('[data-test-tagged-version="true"]').doesNotExist();
+  });
+
+  test('new version tags can be created', async function (assert) {
+    // Clicking the tag button puts it into edit mode
+    assert
+      .dom('[data-test-tagged-version="false"] .boxed-section-foot')
+      .doesNotHaveClass('editing');
+    await click('[data-test-tagged-version="false"] .tag-button-secondary');
+    assert
+      .dom('[data-test-tagged-version="false"] .boxed-section-foot')
+      .hasClass('editing');
+
+    assert
+      .dom('[data-test-tagged-version="false"] [data-test-tag-delete-button]')
+      .doesNotExist();
+
+    // Clicking the save button commits the changes
+    await click(
+      '[data-test-tagged-version="false"] [data-test-tag-save-button]'
+    );
+
+    assert
+      .dom('.flash-message.alert.alert-critical')
+      .exists('Shows an error toast notification without a tag name.');
+
+    await typeIn(
+      '[data-test-tagged-version="false"] [data-test-tag-name-input]',
+      'new-tag'
+    );
+    await typeIn(
+      '[data-test-tagged-version="false"] [data-test-tag-description-input]',
+      'new-description'
+    );
+
+    // Clicking the save button commits the changes
+    await click(
+      '[data-test-tagged-version="false"] [data-test-tag-save-button]'
+    );
+
+    assert
+      .dom('[data-test-tagged-version="false"]')
+      .doesNotExist('Both versions now have tags');
+
+    assert
+      .dom('.flash-message.alert.alert-success')
+      .exists('Shows a success toast notification on edit.');
+
+    await percySnapshot(assert);
+  });
 });
 
 module('Acceptance | job versions (with client token)', function (hooks) {