diff --git a/web/src/components/SpanDetail/__tests__/Http.test.tsx b/web/src/components/SpanDetail/__tests__/Http.test.tsx
index c6e2c22475..417f2c712a 100644
--- a/web/src/components/SpanDetail/__tests__/Http.test.tsx
+++ b/web/src/components/SpanDetail/__tests__/Http.test.tsx
@@ -1,16 +1,21 @@
 import {render} from '@testing-library/react';
-import Request from '../components/Http/Request';
+import Http from '../components/Http/Http';
+import {TestingModels} from '../../../utils/TestingModels';
 
-test('Request', () => {
+test('Http', () => {
   const {getAllByTestId} = render(
-    <Request
-      attributeList={[
-        {key: 'http.user_agent', value: 'iPhone'},
-        {key: 'http.request_content_length', value: '3024'},
-        {key: 'http.not', value: 'nothing'},
-        {key: 'http.host', value: 'google.com'},
+    <Http
+      testId={TestingModels.testId}
+      resultId={TestingModels.resultId}
+      onCreateAssertion={jest.fn()}
+      assertionsResultList={[
+        {
+          assertion: TestingModels.assertion,
+          assertionResultList: [TestingModels.spanAssertionResult],
+        },
       ]}
+      span={TestingModels.span}
     />
   );
-  expect(getAllByTestId('assertion-check-property').length).toBe(3);
+  expect(getAllByTestId('assertion-check-property').length).toBe(1);
 });
diff --git a/web/src/components/TestCard/__tests__/TestCard.test.tsx b/web/src/components/TestCard/__tests__/TestCard.test.tsx
index 9b97d0e8fd..cebc75f050 100644
--- a/web/src/components/TestCard/__tests__/TestCard.test.tsx
+++ b/web/src/components/TestCard/__tests__/TestCard.test.tsx
@@ -3,11 +3,6 @@ import {ReduxWrapperProvider} from '../../../redux/ReduxWrapperProvider';
 import {TestingModels} from '../../../utils/TestingModels';
 import TestCard from '../TestCard';
 
-const mouseEvent = new MouseEvent('click', {
-  bubbles: true,
-  cancelable: true,
-});
-
 test('TestCard', async () => {
   const onDelete = jest.fn();
   const onRunTest = jest.fn();
@@ -18,9 +13,7 @@ test('TestCard', async () => {
       <TestCard onDelete={onDelete} onRunTest={onRunTest} test={TestingModels.test} onClick={onClick} />
     </ReduxWrapperProvider>
   );
-  fireEvent(getByTestId('test-card'), mouseEvent);
-  fireEvent(getByTestId('test-run-button'), mouseEvent);
-  fireEvent(getByTestId(`test-actions-button-${TestingModels.test.testId}`), mouseEvent);
+  fireEvent(getByTestId(`test-actions-button-${TestingModels.test.testId}`), TestingModels.mouseEvent);
   await waitFor(() => getByTestId('delete'));
   expect(container).toMatchSnapshot();
 });
diff --git a/web/src/components/TestCard/__tests__/__snapshots__/TestCard.test.tsx.snap b/web/src/components/TestCard/__tests__/__snapshots__/TestCard.test.tsx.snap
index b4cff284f1..75357510c3 100644
--- a/web/src/components/TestCard/__tests__/__snapshots__/TestCard.test.tsx.snap
+++ b/web/src/components/TestCard/__tests__/__snapshots__/TestCard.test.tsx.snap
@@ -3,86 +3,21 @@
 exports[`TestCard 1`] = `
 <div>
   <div
-    class="sc-bdvvtL CSceT"
-    data-cy="test-card"
+    class="sc-jrQzAO guQEPO"
   >
-    <span
-      aria-label="right"
-      class="anticon anticon-right"
-      role="img"
-    >
-      <svg
-        aria-hidden="true"
-        data-icon="right"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-        />
-      </svg>
-    </span>
-    <div
-      class="sc-gsDKAQ iwigcB"
-    >
-      <span
-        class="ant-typography sc-hKwDye gbtLIw"
-      >
-        
-      </span>
-    </div>
-    <div
-      class="sc-gsDKAQ iwigcB"
-    >
-      <span
-        class="ant-typography sc-eCImPb"
-      >
-        GET
-      </span>
-    </div>
-    <div
-      class="sc-gsDKAQ iwigcB"
-      data-cy="test-url-2309ei30"
-    >
-      <span
-        class="ant-typography sc-eCImPb"
-      >
-        
-      </span>
-    </div>
-    <div
-      class="sc-gsDKAQ iwigcB"
-    />
     <div
-      class="sc-dkPtRN eWbiec"
-    >
-      <button
-        ant-click-animating-without-extra-node="false"
-        class="ant-btn ant-btn-primary ant-btn-background-ghost"
-        data-cy="test-run-button"
-        type="button"
-      >
-        <span>
-          Run Test
-        </span>
-      </button>
-    </div>
-    <span
-      class="ant-dropdown-trigger ant-dropdown-link ant-dropdown-open"
-      data-cy="test-actions-button-2309ei30"
+      class="sc-kDTinF iNqRfS"
     >
       <span
-        aria-label="more"
-        class="anticon anticon-more sc-jRQBWg"
+        aria-label="right"
+        class="anticon anticon-right"
+        data-cy="collapse-test"
         role="img"
-        style="font-size: 24px; color: rgb(154, 163, 171); cursor: pointer;"
+        tabindex="-1"
       >
         <svg
           aria-hidden="true"
-          data-icon="more"
+          data-icon="right"
           fill="currentColor"
           focusable="false"
           height="1em"
@@ -90,11 +25,80 @@ exports[`TestCard 1`] = `
           width="1em"
         >
           <path
-            d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
           />
         </svg>
       </span>
-    </span>
+      <div
+        class="sc-crHmcD dqqtkd"
+      >
+        <span
+          class="ant-typography sc-bqiRlB jCwMNy"
+        >
+          
+        </span>
+      </div>
+      <div
+        class="sc-crHmcD dqqtkd"
+      >
+        <span
+          class="ant-typography sc-ksdxgE"
+        >
+          GET
+        </span>
+      </div>
+      <div
+        class="sc-crHmcD dqqtkd"
+        data-cy="test-url-2309ei30"
+      >
+        <span
+          class="ant-typography sc-ksdxgE"
+        >
+          
+        </span>
+      </div>
+      <div
+        class="sc-crHmcD dqqtkd"
+      />
+      <div
+        class="sc-egiyK hbItou"
+      >
+        <button
+          class="ant-btn ant-btn-primary ant-btn-background-ghost"
+          data-cy="test-run-button-2309ei30"
+          type="button"
+        >
+          <span>
+            Run Test
+          </span>
+        </button>
+      </div>
+      <span
+        class="ant-dropdown-trigger ant-dropdown-link ant-dropdown-open"
+        data-cy="test-actions-button-2309ei30"
+      >
+        <span
+          aria-label="more"
+          class="anticon anticon-more sc-hBUSln"
+          role="img"
+          style="font-size: 24px; color: rgb(154, 163, 171); cursor: pointer;"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="more"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </div>
 </div>
 `;
diff --git a/web/src/components/TestCard/__tests__/useOnDeleteCallback.test.tsx b/web/src/components/TestCard/__tests__/useOnDeleteCallback.test.ts
similarity index 100%
rename from web/src/components/TestCard/__tests__/useOnDeleteCallback.test.tsx
rename to web/src/components/TestCard/__tests__/useOnDeleteCallback.test.ts
diff --git a/web/src/components/TestResults/__tests__/TestResults.test.tsx b/web/src/components/TestResults/__tests__/TestResults.test.tsx
index 7a9b546f3a..1c3ffb1c40 100644
--- a/web/src/components/TestResults/__tests__/TestResults.test.tsx
+++ b/web/src/components/TestResults/__tests__/TestResults.test.tsx
@@ -4,21 +4,17 @@ import {TestingModels} from '../../../utils/TestingModels';
 import {ReduxWrapperProvider} from '../../../redux/ReduxWrapperProvider';
 
 test('SpanAttributesTable', async () => {
-  const setMax = jest.fn();
   const onSpanSelected = jest.fn();
   const onPointerDown = jest.fn();
-  const setHeight = jest.fn();
+  const onHeaderClick = jest.fn();
   const {getByText} = render(
     <ReduxWrapperProvider>
       <TestResults
         result={TestingModels.testRunResult}
         visiblePortion={0}
-        max={0}
-        setMax={setMax}
         onSpanSelected={onSpanSelected}
-        height={100}
         onPointerDown={onPointerDown}
-        setHeight={setHeight}
+        onHeaderClick={onHeaderClick}
       />
     </ReduxWrapperProvider>
   );