Visual diff tests: error states (#14707)

* 3 error states captured

* Assertion expecters

* Attempt to stabilize datacenters

ui/mirage/common.js

@@ -1,6 +1,8 @@
 import faker from 'nomad-ui/mirage/faker';
 import { provide } from './utils';
 
+faker.seed(1);
+
 // Realistically, resource reservations have a low cardinality
 const CPU_RESERVATIONS = [250, 500, 1000, 2000, 2500, 4000];
 const MEMORY_RESERVATIONS = [256, 512, 1024, 2048, 4096, 8192];
@@ -17,7 +19,9 @@ export const DATACENTERS = provide(
 );
 
 export const HOSTS = provide(100, () => {
-  const ip = faker.random.boolean() ? faker.internet.ip() : `[${faker.internet.ipv6()}]`;
+  const ip = faker.random.boolean()
+    ? faker.internet.ip()
+    : `[${faker.internet.ipv6()}]`;
   return `${ip}:${faker.random.number({ min: 4000, max: 4999 })}`;
 });
 
@@ -29,7 +33,8 @@ export function generateResources(options = {}) {
       CpuShares: options.CPU || faker.helpers.randomize(CPU_RESERVATIONS),
     },
     Memory: {
-      MemoryMB: options.MemoryMB || faker.helpers.randomize(MEMORY_RESERVATIONS),
+      MemoryMB:
+        options.MemoryMB || faker.helpers.randomize(MEMORY_RESERVATIONS),
     },
     Disk: {
       DiskMB: options.DiskMB || faker.helpers.randomize(DISK_RESERVATIONS),
@@ -39,8 +44,12 @@ export function generateResources(options = {}) {
   };
 
   if (faker.random.boolean()) {
-    const higherMemoryReservations = MEMORY_RESERVATIONS.filter(mb => mb > resources.Memory.MemoryMB);
+    const higherMemoryReservations = MEMORY_RESERVATIONS.filter(
-    resources.Memory.MemoryMaxMB = faker.helpers.randomize(higherMemoryReservations) || resources.Memory.MemoryMB + 1;
+      (mb) => mb > resources.Memory.MemoryMB
+    );
+    resources.Memory.MemoryMaxMB =
+      faker.helpers.randomize(higherMemoryReservations) ||
+      resources.Memory.MemoryMB + 1;
   } else {
     resources.Memory.MemoryMaxMB = 0;
   }
@@ -96,6 +105,8 @@ export function generatePorts(options = {}) {
       Label: faker.hacker.noun(),
       Value: faker.random.number({ min: 5000, max: 60000 }),
       To: faker.random.number({ min: 5000, max: 60000 }),
-      HostIP: faker.random.boolean() ? faker.internet.ip() : faker.internet.ipv6(),
+      HostIP: faker.random.boolean()
+        ? faker.internet.ip()
+        : faker.internet.ipv6(),
     }));
 }

ui/tests/acceptance/application-errors-test.js

@@ -6,12 +6,15 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import ClientsList from 'nomad-ui/tests/pages/clients/list';
 import JobsList from 'nomad-ui/tests/pages/jobs/list';
 import Job from 'nomad-ui/tests/pages/jobs/detail';
+import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 module('Acceptance | application errors ', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
   hooks.beforeEach(function () {
+    faker.seed(1);
     server.create('agent');
     server.create('node');
     server.create('job');
@@ -23,6 +26,7 @@ module('Acceptance | application errors ', function (hooks) {
     server.pretender.get('/v1/nodes', () => [500, {}, null]);
     await ClientsList.visit();
     await a11yAudit(assert);
+    await percySnapshot(assert);
   });
 
   test('transitioning away from an error page resets the global error', async function (assert) {
@@ -39,6 +43,7 @@ module('Acceptance | application errors ', function (hooks) {
   });
 
   test('the 403 error page links to the ACL tokens page', async function (assert) {
+    assert.expect(3);
     const job = server.db.jobs[0];
 
     server.pretender.get(`/v1/job/${job.id}`, () => [403, {}, null]);
@@ -47,6 +52,7 @@ module('Acceptance | application errors ', function (hooks) {
 
     assert.ok(Job.error.isPresent, 'Error message is shown');
     assert.equal(Job.error.title, 'Not Authorized', 'Error message is for 403');
+    await percySnapshot(assert);
 
     await Job.error.seekHelp();
     assert.equal(
@@ -57,6 +63,7 @@ module('Acceptance | application errors ', function (hooks) {
   });
 
   test('the no leader error state gets its own error message', async function (assert) {
+    assert.expect(2);
     server.pretender.get('/v1/jobs', () => [500, {}, 'No cluster leader']);
 
     await JobsList.visit();
@@ -67,6 +74,7 @@ module('Acceptance | application errors ', function (hooks) {
       'No Cluster Leader',
       'The error is specifically for the lack of a cluster leader'
     );
+    await percySnapshot(assert);
   });
 
   test('error pages include links to the jobs and clients pages', async function (assert) {