Stabilizing percy snapshots with faker (#14551)

* First attempt at stabilizing percy snapshots with faker

* Tokens seed moved to before management token generation

* Faker seed only in token test

* moving seed after storage clear

* And again, but back to no faker seeding

* Isolated seed and temporary log

* Setting seed(1) wherever we're snapshotting, or before establishing cluster scenarios

* Deliberate noop to see if percy is stable

* Changelog entry

.changelog/14551.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Stabilizes visual regression tests
+```

ui/mirage/scenarios/default.js

@@ -2,6 +2,7 @@ import config from 'nomad-ui/config/environment';
 import * as topoScenarios from './topo';
 import * as sysbatchScenarios from './sysbatch';
 import { pickOne } from '../utils';
+import faker from 'nomad-ui/mirage/faker';
 
 const withNamespaces = getConfigValue('mirageWithNamespaces', false);
 const withTokens = getConfigValue('mirageWithTokens', true);
@@ -45,6 +46,7 @@ export default function (server) {
 // Scenarios
 
 function smallCluster(server) {
+  faker.seed(1);
   server.create('feature', { name: 'Dynamic Application Sizing' });
   server.createList('agent', 3, 'withConsulLink', 'withVaultLink');
   server.createList('node', 5);
@@ -183,6 +185,7 @@ function mediumCluster(server) {
 }
 
 function variableTestCluster(server) {
+  faker.seed(1);
   createTokens(server);
   createNamespaces(server);
   server.createList('agent', 3, 'withConsulLink', 'withVaultLink');
@@ -252,6 +255,7 @@ function variableTestCluster(server) {
 }
 
 function servicesTestCluster(server) {
+  faker.seed(1);
   server.create('feature', { name: 'Dynamic Application Sizing' });
   server.createList('agent', 3, 'withConsulLink', 'withVaultLink');
   server.createList('node', 5);

ui/tests/acceptance/clients-list-test.js

@@ -7,6 +7,7 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import pageSizeSelect from './behaviors/page-size-select';
 import ClientsList from 'nomad-ui/tests/pages/clients/list';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 module('Acceptance | clients list', function (hooks) {
   setupApplicationTest(hooks);
@@ -27,6 +28,7 @@ module('Acceptance | clients list', function (hooks) {
   });
 
   test('/clients should list one page of clients', async function (assert) {
+    faker.seed(1);
     // Make sure to make more nodes than 1 page to assert that pagination is working
     const nodesCount = ClientsList.pageSize + 1;
     server.createList('node', nodesCount);
@@ -209,6 +211,7 @@ module('Acceptance | clients list', function (hooks) {
   });
 
   test('when there are no clients, there is an empty message', async function (assert) {
+    faker.seed(1);
     server.createList('agent', 1);
 
     await ClientsList.visit();

ui/tests/acceptance/evaluations-test.js

@@ -19,6 +19,7 @@ import {
 } from 'ember-power-select/test-support/helpers';
 import { generateAcceptanceTestEvalMock } from '../../mirage/utils';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 const getStandardRes = () => [
   {
@@ -124,6 +125,8 @@ module('Acceptance | evaluations list', function (hooks) {
   });
 
   test('it renders an empty message if there are no evaluations rendered', async function (assert) {
+    faker.seed(1);
+
     await visit('/evaluations');
     assert.expect(2);
 
@@ -138,6 +141,7 @@ module('Acceptance | evaluations list', function (hooks) {
   });
 
   test('it renders a list of evaluations', async function (assert) {
+    faker.seed(1);
     assert.expect(3);
     server.get('/evaluations', function (_server, fakeRequest) {
       assert.deepEqual(
@@ -675,6 +679,7 @@ module('Acceptance | evaluations list', function (hooks) {
 
   module('evaluation detail', function () {
     test('clicking an evaluation opens the detail view', async function (assert) {
+      faker.seed(1);
       server.get('/evaluations', getStandardRes);
       server.get('/evaluation/:id', function (_, { queryParams, params }) {
         const expectedNamespaces = ['default', 'ted-lasso'];

ui/tests/acceptance/jobs-list-test.js

@@ -7,6 +7,7 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import pageSizeSelect from './behaviors/page-size-select';
 import JobsList from 'nomad-ui/tests/pages/jobs/list';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 let managementToken, clientToken;
 
@@ -38,6 +39,7 @@ module('Acceptance | jobs list', function (hooks) {
   });
 
   test('/jobs should list the first page of jobs sorted by modify index', async function (assert) {
+    faker.seed(1);
     const jobsCount = JobsList.pageSize + 1;
     server.createList('job', jobsCount, { createAllocations: false });
 
@@ -116,6 +118,7 @@ module('Acceptance | jobs list', function (hooks) {
   });
 
   test('when there are no jobs, there is an empty message', async function (assert) {
+    faker.seed(1);
     await JobsList.visit();
 
     await percySnapshot(assert);

ui/tests/acceptance/keyboard-test.js

@@ -13,6 +13,7 @@ import { setupMirage } from 'ember-cli-mirage/test-support';
 import Layout from 'nomad-ui/tests/pages/layout';
 import percySnapshot from '@percy/ember';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
+import faker from 'nomad-ui/mirage/faker';
 
 module('Acceptance | keyboard', function (hooks) {
   setupApplicationTest(hooks);
@@ -20,6 +21,7 @@ module('Acceptance | keyboard', function (hooks) {
 
   module('modal', function () {
     test('Opening and closing shortcuts modal with key commands', async function (assert) {
+      faker.seed(1);
       assert.expect(4);
       await visit('/');
       assert.notOk(Layout.keyboard.modalShown);

ui/tests/acceptance/servers-list-test.js

@@ -8,6 +8,7 @@ import { findLeader } from '../../mirage/config';
 import ServersList from 'nomad-ui/tests/pages/servers/list';
 import formatHost from 'nomad-ui/utils/format-host';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 const minimumSetup = () => {
   server.createList('node', 1);
@@ -34,6 +35,7 @@ module('Acceptance | servers list', function (hooks) {
   });
 
   test('/servers should list all servers', async function (assert) {
+    faker.seed(1);
     server.createList('node', 1);
     server.createList('agent', 10);
 

ui/tests/acceptance/token-test.js

@@ -10,12 +10,12 @@ import JobDetail from 'nomad-ui/tests/pages/jobs/detail';
 import ClientDetail from 'nomad-ui/tests/pages/clients/detail';
 import Layout from 'nomad-ui/tests/pages/layout';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 let job;
 let node;
 let managementToken;
 let clientToken;
-
 module('Acceptance | tokens', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
@@ -23,6 +23,7 @@ module('Acceptance | tokens', function (hooks) {
   hooks.beforeEach(function () {
     window.localStorage.clear();
     window.sessionStorage.clear();
+    faker.seed(1);
 
     server.create('agent');
     node = server.create('node');

ui/tests/acceptance/topology-test.js

@@ -14,6 +14,7 @@ import {
 } from 'nomad-ui/utils/units';
 import queryString from 'query-string';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 const sumResources = (list, dimension) =>
   list.reduce((agg, val) => agg + (get(val, dimension) || 0), 0);
@@ -37,6 +38,7 @@ module('Acceptance | topology', function (hooks) {
   });
 
   test('by default the info panel shows cluster aggregate stats', async function (assert) {
+    faker.seed(1);
     server.createList('node', 3);
     server.createList('allocation', 5);
 

ui/tests/acceptance/variables-test.js

@@ -18,6 +18,7 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import { allScenarios } from '../../mirage/scenarios/default';
 import cleanWhitespace from '../utils/clean-whitespace';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
 
 import Variables from 'nomad-ui/tests/pages/variables';
 import Layout from 'nomad-ui/tests/pages/layout';
@@ -29,6 +30,7 @@ module('Acceptance | variables', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
   hooks.beforeEach(async function () {
+    faker.seed(1);
     server.createList('variable', 3);
   });
 

ui/tests/acceptance/volumes-list-test.js

@@ -7,6 +7,8 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import pageSizeSelect from './behaviors/page-size-select';
 import VolumesList from 'nomad-ui/tests/pages/storage/volumes/list';
 import percySnapshot from '@percy/ember';
+import faker from 'nomad-ui/mirage/faker';
+
 const assignWriteAlloc = (volume, alloc) => {
   volume.writeAllocs.add(alloc);
   volume.allocations.add(alloc);
@@ -24,6 +26,7 @@ module('Acceptance | volumes list', function (hooks) {
   setupMirage(hooks);
 
   hooks.beforeEach(function () {
+    faker.seed(1);
     server.create('node');
     server.create('csi-plugin', { createVolumes: false });
     window.localStorage.clear();

ui/tests/integration/components/variable-form-test.js

@@ -11,6 +11,7 @@ import {
   selectChoose,
   clickTrigger,
 } from 'ember-power-select/test-support/helpers';
+import faker from 'nomad-ui/mirage/faker';
 
 module('Integration | Component | variable-form', function (hooks) {
   setupRenderingTest(hooks);
@@ -97,6 +98,7 @@ module('Integration | Component | variable-form', function (hooks) {
 
   module('editing and creating new key/value pairs', function () {
     test('it should allow each key/value row to toggle password visibility', async function (assert) {
+      faker.seed(1);
       this.set(
         'mockedModel',
         server.create('variable', {
@@ -343,6 +345,7 @@ module('Integration | Component | variable-form', function (hooks) {
     });
 
     test('Persists Key/Values table data to JSON', async function (assert) {
+      faker.seed(1);
       assert.expect(2);
       const keyValues = [
         { key: 'foo', value: '123' },