From bfb2b8e6591891b529d5cf0f8757ff8b7080e004 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Mon, 17 Apr 2023 11:22:40 -0400
Subject: [PATCH] fix: change class name behaviour to limit snapshot diffs

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../__snapshots__/status-bar.test.tsx.snap     | 18 +++++++++---------
 .../status-bar/status-bar.module.scss          |  5 +----
 .../components/status-bar/status-bar.test.tsx  |  3 +--
 .../components/status-bar/status-bar.tsx       |  6 +++++-
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap b/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap
index 8931fed442..c244b6ccf0 100644
--- a/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap
+++ b/packages/core/src/renderer/components/status-bar/__snapshots__/status-bar.test.tsx.snap
@@ -838,7 +838,7 @@ exports[`<StatusBar /> when an extension is enabled specifying the side the elem
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -1166,7 +1166,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -1452,7 +1452,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -1738,7 +1738,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -2024,7 +2024,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -2310,7 +2310,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -2596,7 +2596,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -2882,7 +2882,7 @@ exports[`<StatusBar /> when an extension is enabled with an invalid data type, (
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
@@ -3168,7 +3168,7 @@ exports[`<StatusBar /> when an extension is enabled with no status items renders
         </div>
       </div>
       <div
-        class="StatusBar status-default"
+        class="StatusBar"
         data-testid="status-bar"
       >
         <div
diff --git a/packages/core/src/renderer/components/status-bar/status-bar.module.scss b/packages/core/src/renderer/components/status-bar/status-bar.module.scss
index b1558726c7..65b1e2e968 100644
--- a/packages/core/src/renderer/components/status-bar/status-bar.module.scss
+++ b/packages/core/src/renderer/components/status-bar/status-bar.module.scss
@@ -13,10 +13,7 @@
 
   display: inline-grid;
   grid-template-columns: 1fr 1fr;
-
-  &.status-default {
-    background-color: var(--colorInfo);
-  }
+  background-color: var(--colorInfo);
 
   &.status-warning {
     background-color: var(--colorWarning);
diff --git a/packages/core/src/renderer/components/status-bar/status-bar.test.tsx b/packages/core/src/renderer/components/status-bar/status-bar.test.tsx
index b6b9bbf21e..79ca2b4ecc 100644
--- a/packages/core/src/renderer/components/status-bar/status-bar.test.tsx
+++ b/packages/core/src/renderer/components/status-bar/status-bar.test.tsx
@@ -4,7 +4,6 @@
  */
 
 import React from "react";
-import "@testing-library/jest-dom/extend-expect";
 import type { ApplicationBuilder } from "../test-utils/get-application-builder";
 import { getApplicationBuilder } from "../test-utils/get-application-builder";
 import setStatusBarStatusInjectable from "./set-status-bar-status.injectable";
@@ -155,7 +154,7 @@ describe("<StatusBar />", () => {
   });
 
   it("has the default status by default", () => {
-    expect([...result.getByTestId("status-bar").classList]).toContain("status-default");
+    expect([...result.getByTestId("status-bar").classList]).toEqual(["StatusBar"]);
   });
 
   describe.each([
diff --git a/packages/core/src/renderer/components/status-bar/status-bar.tsx b/packages/core/src/renderer/components/status-bar/status-bar.tsx
index f926c83d2e..4ccd445245 100644
--- a/packages/core/src/renderer/components/status-bar/status-bar.tsx
+++ b/packages/core/src/renderer/components/status-bar/status-bar.tsx
@@ -27,9 +27,13 @@ const NonInjectedStatusBar = observer(({
   status,
 }: Dependencies & StatusBarProps) => {
   const { left, right } = items.get();
+  const barStatus = status.get();
+  const barStyle = barStatus === "default"
+    ? undefined
+    : styles[`status-${barStatus}`];
 
   return (
-    <div className={cssNames(styles.StatusBar, styles[`status-${status.get()}`])} data-testid="status-bar">
+    <div className={cssNames(styles.StatusBar, barStyle)} data-testid="status-bar">
       <div className={styles.leftSide} data-testid="status-bar-left">
         {left.map((Item, index) => (
           <div