update test

elastic · Oct 22, 2024 · 10ea0e3 · 10ea0e3
1 parent 33762b9
commit 10ea0e3
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 21 deletions.
diff --git a/...servability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx b/...servability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx
@@ -7,32 +7,85 @@
 
 import { screen } from '@testing-library/react';
 import React from 'react';
-
-import { buildSlo } from '../../../../data/slo/slo';
 import { render } from '../../../../utils/test_helper';
+import { DEFAULT_BURN_RATE_WINDOWS } from '../../hooks/use_fetch_burn_rate_windows';
 import { BurnRateStatus } from './burn_rate_status';
 
-describe('BurnRate', () => {
-  it("displays '--' when burn rate is 'undefined'", async () => {
-    const slo = buildSlo();
+describe('BurnRateStatus', () => {
+  it('displays loading spinner when burn rates are being fetched', async () => {
     render(
-      <BurnRateStatus slo={slo} threshold={14.4} longBurnRate={undefined} isLoading={false} />
+      <BurnRateStatus
+        isLoading={true}
+        shortWindowBurnRate={0}
+        longWindowBurnRate={0}
+        selectedWindow={DEFAULT_BURN_RATE_WINDOWS[0]}
+      />
     );
 
-    expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('--');
+    expect(screen.queryByTestId('loadingSpinner')).toBeDefined();
   });
 
-  it("displays the burn rate value when not 'undefined'", async () => {
-    const slo = buildSlo();
-    render(<BurnRateStatus slo={slo} threshold={14.4} longBurnRate={3.4} isLoading={false} />);
+  it("displays the 'breached' status", async () => {
+    render(
+      <BurnRateStatus
+        isLoading={false}
+        shortWindowBurnRate={18.45}
+        longWindowBurnRate={22.32}
+        selectedWindow={DEFAULT_BURN_RATE_WINDOWS[0]}
+      />
+    );
 
-    expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('3.4x');
+    expect(screen.queryByTestId('title')).toHaveTextContent('Breached');
+    expect(screen.queryByTestId('description')).toHaveTextContent(
+      'The 1h burn rate is 22.32x and the 5m burn rate is 18.45x.'
+    );
   });
 
-  it("displays the burn rate value when '0'", async () => {
-    const slo = buildSlo();
-    render(<BurnRateStatus slo={slo} threshold={14.4} longBurnRate={0} isLoading={false} />);
+  it("displays the 'recovering' status", async () => {
+    render(
+      <BurnRateStatus
+        isLoading={false}
+        shortWindowBurnRate={1.2}
+        longWindowBurnRate={22.32}
+        selectedWindow={DEFAULT_BURN_RATE_WINDOWS[0]}
+      />
+    );
+
+    expect(screen.queryByTestId('title')).toHaveTextContent('Recovering');
+    expect(screen.queryByTestId('description')).toHaveTextContent(
+      'The 1h burn rate is 22.32x and the 5m burn rate is 1.2x.'
+    );
+  });
 
-    expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('0x');
+  it("displays the 'Increasing' status", async () => {
+    render(
+      <BurnRateStatus
+        isLoading={false}
+        shortWindowBurnRate={18.45}
+        longWindowBurnRate={1.32}
+        selectedWindow={DEFAULT_BURN_RATE_WINDOWS[0]}
+      />
+    );
+
+    expect(screen.queryByTestId('title')).toHaveTextContent('Increasing');
+    expect(screen.queryByTestId('description')).toHaveTextContent(
+      'The 1h burn rate is 1.32x and the 5m burn rate is 18.45x.'
+    );
+  });
+
+  it("displays the 'Acceptable' status", async () => {
+    render(
+      <BurnRateStatus
+        isLoading={false}
+        shortWindowBurnRate={1.45}
+        longWindowBurnRate={2.32}
+        selectedWindow={DEFAULT_BURN_RATE_WINDOWS[0]}
+      />
+    );
+
+    expect(screen.queryByTestId('title')).toHaveTextContent('Acceptable value');
+    expect(screen.queryByTestId('description')).toHaveTextContent(
+      'The 1h burn rate is 2.32x and the 5m burn rate is 1.45x.'
+    );
   });
 });
diff --git a/...rvability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx b/...rvability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx
@@ -39,21 +39,21 @@ export function BurnRateStatus({
   const color = getColor(status);
 
   if (isLoading) {
-    return <EuiLoadingSpinner size="m" />;
+    return <EuiLoadingSpinner size="m" data-test-subj="loadingSpinner" />;
   }
 
   return (
     <EuiPanel color={color} hasShadow={false}>
       <EuiFlexGroup justifyContent="spaceBetween" direction="column" style={{ minHeight: '100%' }}>
         <EuiFlexGroup direction="column" gutterSize="xs">
           <EuiFlexItem>
-            <EuiText color="default" size="m">
+            <EuiText color="default" size="m" data-test-subj="title">
               <h5>{getTitle(status)}</h5>
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiText color="subdued" size="s">
-              {getSubtitle(shortWindowBurnRate, longWindowBurnRate, selectedWindow)}
+            <EuiText color="subdued" size="s" data-test-subj="description">
+              {getDescription(shortWindowBurnRate, longWindowBurnRate, selectedWindow)}
             </EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -66,7 +66,7 @@ export function BurnRateStatus({
               titleSize="s"
               textAlign="right"
               isLoading={isLoading}
-              data-test-subj="burnRateThreshold"
+              data-test-subj="threshold"
               description={
                 <EuiTextColor color="default">
                   <span>
@@ -129,7 +129,7 @@ function getTitle(status: Status): string {
   }
 }
 
-function getSubtitle(
+function getDescription(
   shortWindowBurnRate: number,
   longWindowBurnRate: number,
   selectedWindow: BurnRateWindow