From 2540d10927b2a0127d98cd1b3c6e09cc4292a6af Mon Sep 17 00:00:00 2001
From: Valery Bugakov <skymk1@gmail.com>
Date: Wed, 26 May 2021 22:32:29 +0800
Subject: [PATCH] web: mock `_.uniqueId()` in tests (#21391)

---
 .../shared/__snapshots__/codeHost.test.tsx.snap  |  6 +++---
 client/shared/dev/mockUniqueId.ts                |  7 +++++++
 .../src/nav/__snapshots__/NavLinks.test.tsx.snap | 16 ++++++++--------
 jest.config.base.js                              |  1 +
 4 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 client/shared/dev/mockUniqueId.ts

diff --git a/client/browser/src/shared/code-hosts/shared/__snapshots__/codeHost.test.tsx.snap b/client/browser/src/shared/code-hosts/shared/__snapshots__/codeHost.test.tsx.snap
index 7f021e38a8b3a..a394e8b146c6d 100644
--- a/client/browser/src/shared/code-hosts/shared/__snapshots__/codeHost.test.tsx.snap
+++ b/client/browser/src/shared/code-hosts/shared/__snapshots__/codeHost.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`codeHost handleCodeHost() Decorations decorates a diff code view 1`] = `
 <div
-  class="test test-6 sg-mounted"
+  class="test test-test-id sg-mounted"
   id="code"
 >
   <div
@@ -91,7 +91,7 @@ exports[`codeHost handleCodeHost() Decorations decorates a diff code view 1`] =
 
 exports[`codeHost handleCodeHost() Decorations decorates a diff code view 2`] = `
 <div
-  class="test test-6 sg-mounted"
+  class="test test-test-id sg-mounted"
   id="code"
 >
   <div
@@ -173,7 +173,7 @@ exports[`codeHost handleCodeHost() Decorations decorates a diff code view 2`] =
 
 exports[`codeHost handleCodeHost() Decorations decorates a diff code view 3`] = `
 <div
-  class="test test-6 sg-mounted"
+  class="test test-test-id sg-mounted"
   id="code"
 >
   <div
diff --git a/client/shared/dev/mockUniqueId.ts b/client/shared/dev/mockUniqueId.ts
new file mode 100644
index 0000000000000..875691b12b2d8
--- /dev/null
+++ b/client/shared/dev/mockUniqueId.ts
@@ -0,0 +1,7 @@
+// The value returned by the `_.uniqueId()` function depends on the number of previous calls
+// because it maintains an internal variable that increments on each call.
+// Mock `_.uniqueId()` to avoid updating snapshots once the sequence or number of tests using this helper changes.
+
+// The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables
+// eslint-disable-next-line unicorn/consistent-function-scoping
+jest.mock('lodash/uniqueId', () => (prefix = '') => `${prefix}test-id`)
diff --git a/client/web/src/nav/__snapshots__/NavLinks.test.tsx.snap b/client/web/src/nav/__snapshots__/NavLinks.test.tsx.snap
index 00183c9c64263..acf3efea00407 100644
--- a/client/web/src/nav/__snapshots__/NavLinks.test.tsx.snap
+++ b/client/web/src/nav/__snapshots__/NavLinks.test.tsx.snap
@@ -538,7 +538,7 @@ exports[`NavLinks authed Sourcegraph.com /foo 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-7"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -1328,7 +1328,7 @@ exports[`NavLinks authed Sourcegraph.com /search 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-8"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -2128,7 +2128,7 @@ exports[`NavLinks authed self-hosted /foo 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-5"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -2899,7 +2899,7 @@ exports[`NavLinks authed self-hosted /search 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-6"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -3439,7 +3439,7 @@ exports[`NavLinks unauthed Sourcegraph.com /foo 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-3"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -3776,7 +3776,7 @@ exports[`NavLinks unauthed Sourcegraph.com /search 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-4"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -4080,7 +4080,7 @@ exports[`NavLinks unauthed self-hosted /foo 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-1"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
@@ -4374,7 +4374,7 @@ exports[`NavLinks unauthed self-hosted /search 1`] = `
   >
     <span
       class="test-command-list-button command-list__popover-button btn btn-link"
-      id="command-list-popover-button-2"
+      id="command-list-popover-button-test-id"
       role="button"
     >
       <svg
diff --git a/jest.config.base.js b/jest.config.base.js
index 86c4a8b2c380c..292910c2bcbac 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -57,6 +57,7 @@ const config = {
     require.resolve('abort-controller/polyfill'),
     path.join(__dirname, 'client/shared/dev/fetch'),
     path.join(__dirname, 'client/shared/dev/setLinkComponentForTest.ts'),
+    path.join(__dirname, 'client/shared/dev/mockUniqueId.ts'),
     // Enzyme setup file
     path.join(__dirname, 'client/shared/dev/enzymeSetup.js'),
   ],