display all metric results in editor (#15031)

superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx

@@ -21,6 +21,9 @@ import { shallow } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import thunk from 'redux-thunk';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from 'spec/helpers/testing-library';
+
 import { Radio } from 'src/components/Radio';
 
 import Icon from 'src/components/Icon';
@@ -56,6 +59,10 @@ describe('DatasourceEditor', () => {
     inst = wrapper.instance();
   });
 
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
   it('is valid', () => {
     expect(React.isValidElement(el)).toBe(true);
   });
@@ -209,3 +216,21 @@ describe('DatasourceEditor', () => {
     isFeatureEnabledMock.mockRestore();
   });
 });
+
+describe('DatasourceEditor RTL', () => {
+  it('properly renders the metric information', async () => {
+    render(<DatasourceEditor {...props} />, { useRedux: true });
+    const metricButton = screen.getByTestId('collection-tab-Metrics');
+    userEvent.click(metricButton);
+    const expandToggle = await screen.findAllByLabelText(/toggle expand/i);
+    userEvent.click(expandToggle[0]);
+    const certificationDetails = await screen.findByPlaceholderText(
+      /certification details/i,
+    );
+    expect(certificationDetails.value).toEqual('foo');
+    const warningMarkdown = await await screen.findByPlaceholderText(
+      /certified by/i,
+    );
+    expect(warningMarkdown.value).toEqual('someone');
+  });
+});