Browse Source

chore(dashboards): Add basic spec for `AutoSizedText` (#76995)

This component is really hard to test because 

1. There's no `ResizeObserver` in a Jest environment, so there's no way
to trigger the actual logic that auto-sizes the text
2. Emotion doesn't inject any CSS styles into the render environment, so
there's no way to actually verify the behaviour

This might have been a good candidate for a snapshot test, but even that
would probably be flaky, since this kind of converging iteration has
finicky results.

I thought it'd at least be good to have a spec that verifies that the
children render, as a start.
George Gritsouk 6 months ago
parent
commit
b19090c909

+ 19 - 0
static/app/views/dashboards/widgetCard/autoSizedTest.spec.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {AutoSizedText} from './autoSizedText';
+
+describe('AutoSizedText', () => {
+  it('renders the children', () => {
+    render(
+      <Container>
+        <AutoSizedText>Hello</AutoSizedText>
+      </Container>
+    );
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+});
+
+const Container = styled('div')``;

+ 11 - 0
static/app/views/dashboards/widgetCard/autoSizedText.tsx

@@ -21,6 +21,17 @@ export function AutoSizedText({children}: Props) {
       return undefined;
     }
 
+    if (!window.ResizeObserver) {
+      // `ResizeObserver` is missing in a test environment. In this case,
+      // run one iteration of the resize behaviour so a test can at least
+      // verify that the component doesn't crash.
+      const childDimensions = getElementDimensions(childElement);
+      const parentDimensions = getElementDimensions(parentElement);
+
+      adjustFontSize(childDimensions, parentDimensions);
+      return undefined;
+    }
+
     // On component first mount, register a `ResizeObserver` on the containing element. The handler fires
     // on component mount, and every time the element changes size after that
     const observer = new ResizeObserver(entries => {