Merge branch 'develop' into fix/CORL-2895-broken-image-preview

coralproject · Aug 25, 2023 · cc338ac · cc338ac
2 parents 55e4134 + ce7d87f
commit cc338ac
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css b/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css
@@ -2,6 +2,7 @@ $conversationModalHighlightBackground: $colors-teal-100;
 $conversationModalCommentText: var(--palette-text-500);
 .root {
   flex: 1;
+  padding: 0 var(--spacing-2);
 }
 
 .line {
@@ -42,6 +43,7 @@ $conversationModalCommentText: var(--palette-text-500);
 
 .rejectButton {
   height: fit-content;
+  margin-top: var(--spacing-1);
   &:disabled {
     background-color: var(--palette-error-500) !important;
     opacity: 1 !important;

diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css
@@ -26,7 +26,7 @@
 
 .refreshButtonIcon {
   padding-right: 0.2rem;
-  display: inline-block;
+  display: inline;
 }
 
 .refreshButtonIcon svg {
@@ -44,7 +44,7 @@
 }
 
 .closeButtonIcon {
-  display: inline-block;
+  display: inline;
 }
 
 .closeButtonIcon svg {

diff --git a/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx b/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx
@@ -1,6 +1,6 @@
-import { screen, within } from "@testing-library/react";
-import { pureMerge } from "coral-common/utils";
+import { screen, waitFor, within } from "@testing-library/react";
 
+import { pureMerge } from "coral-common/utils";
 import { GQLResolver } from "coral-framework/schema";
 import {
   createResolversStub,
@@ -44,7 +44,19 @@ async function createTestRenderer(
 
   customRenderAppWithContext(context);
 
-  const container = await screen.findByTestId("comments-allComments-log");
+  // it is usually best practice to use findByTestId
+  // for async work.
+  //
+  // source: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find
+  //
+  // however, for some special occasions, the test runner
+  // has a hard time and doing a .getByTestId is more
+  // performant. Since this cuts the `render username and body`
+  // test from 1.32s down to 795ms on my machine, I'm doing
+  // a waitFor + getByTestId here.
+  const container = await waitFor(() =>
+    screen.getByTestId("comments-allComments-log")
+  );
 
   return { container, context };
 }