Chore: Convert ShareLink tests to RTL (#55026)

* Convert ShareLink tests to RTL

* use findByRole instead of findByLabelText to be more robust

.betterer.results

@@ -65,9 +65,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/alerting/AlertRuleList.test.tsx:2998938420": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx:3716733755": [
-      [0, 35, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:145048794": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
@@ -3828,14 +3825,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
     ],
     "public/app/features/dashboard/components/ShareModal/ShareModal.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx

@@ -1,7 +1,9 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { getDefaultTimeRange } from '@grafana/data';
+import { BootData, getDefaultTimeRange } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { setEchoSrv, setTemplateSrv } from '@grafana/runtime';
 import config from 'app/core/config';
 
@@ -11,7 +13,7 @@ import { variableAdapters } from '../../../variables/adapters';
 import { createQueryVariableAdapter } from '../../../variables/query/adapter';
 import { DashboardModel, PanelModel } from '../../state';
 
-import { Props, ShareLink, State } from './ShareLink';
+import { Props, ShareLink } from './ShareLink';
 
 jest.mock('app/features/dashboard/services/TimeSrv', () => ({
   getTimeSrv: () => ({
@@ -65,42 +67,9 @@ jest.mock('@grafana/runtime', () => {
   };
 });
 
-interface ScenarioContext {
-  wrapper?: ShallowWrapper<Props, State, ShareLink>;
-  mount: (propOverrides?: Partial<Props>) => void;
-  setup: (fn: () => void) => void;
-}
-
-function shareLinkScenario(description: string, scenarioFn: (ctx: ScenarioContext) => void) {
-  describe(description, () => {
-    let setupFn: () => void;
-
-    const ctx: any = {
-      setup: (fn: any) => {
-        setupFn = fn;
-      },
-      mount: (propOverrides?: any) => {
-        const props: any = {
-          panel: undefined,
-          dashboard: { time: getDefaultTimeRange() },
-        };
-
-        Object.assign(props, propOverrides);
-        ctx.wrapper = shallow(<ShareLink {...props} />);
-      },
-    };
-
-    beforeEach(() => {
-      setUTCTimeZone();
-      setupFn();
-    });
-
-    scenarioFn(ctx);
-  });
-}
-
 describe('ShareModal', () => {
   let templateSrv = initTemplateSrv('key', []);
+  let props: Props;
 
   beforeAll(() => {
     setEchoSrv(new Echo());
@@ -108,106 +77,97 @@ describe('ShareModal', () => {
     setTemplateSrv(templateSrv);
   });
 
-  shareLinkScenario('shareUrl with current time range and panel', (ctx) => {
+  beforeEach(() => {
-    ctx.setup(() => {
+    setUTCTimeZone();
-      mockLocationHref('http://server/#!/test');
+    mockLocationHref('http://server/#!/test');
-      config.bootData = {
+    config.rendererAvailable = true;
-        user: {
+    config.bootData.user.orgId = 1;
-          orgId: 1,
+    props = {
-        },
+      panel: new PanelModel({ id: 22, options: {}, fieldConfig: { defaults: {}, overrides: [] } }),
-      } as any;
+      dashboard: new DashboardModel({ time: getDefaultTimeRange(), id: 1 }),
-      ctx.mount({
+    };
-        panel: new PanelModel({ id: 22, options: {}, fieldConfig: { defaults: {}, overrides: [] } }),
+  });
-      });
-    });
 
+  describe('with current time range and panel', () => {
     it('should generate share url absolute time', async () => {
-      await ctx.wrapper?.instance().buildUrl();
+      render(<ShareLink {...props} />);
-      const state = ctx.wrapper?.state();
+      expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-      expect(state?.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1&viewPanel=22');
+        'http://server/#!/test?from=1000&to=2000&orgId=1&viewPanel=22'
+      );
     });
 
     it('should generate render url', async () => {
       mockLocationHref('http://dashboards.grafana.com/d/abcdefghi/my-dash');
-      ctx.mount({
+      render(<ShareLink {...props} />);
-        panel: new PanelModel({ id: 22, options: {}, fieldConfig: { defaults: {}, overrides: [] } }),
-      });
 
-      await ctx.wrapper?.instance().buildUrl();
-      const state = ctx.wrapper?.state();
       const base = 'http://dashboards.grafana.com/render/d-solo/abcdefghi/my-dash';
       const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
-      expect(state?.imageUrl).toContain(base + params);
+      expect(
+        await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
+      ).toHaveAttribute('href', base + params);
     });
 
     it('should generate render url for scripted dashboard', async () => {
       mockLocationHref('http://dashboards.grafana.com/dashboard/script/my-dash.js');
-      ctx.mount({
+      render(<ShareLink {...props} />);
-        panel: new PanelModel({ id: 22, options: {}, fieldConfig: { defaults: {}, overrides: [] } }),
-      });
 
-      await ctx.wrapper?.instance().buildUrl();
-      const state = ctx.wrapper?.state();
       const base = 'http://dashboards.grafana.com/render/dashboard-solo/script/my-dash.js';
       const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
-      expect(state?.imageUrl).toContain(base + params);
+      expect(
+        await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
+      ).toHaveAttribute('href', base + params);
     });
 
     it('should remove panel id when no panel in scope', async () => {
-      ctx.mount({
+      props.panel = undefined;
-        panel: undefined,
+      render(<ShareLink {...props} />);
-      });
+      expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-
+        'http://server/#!/test?from=1000&to=2000&orgId=1'
-      await ctx.wrapper?.instance().buildUrl();
+      );
-      const state = ctx.wrapper?.state();
-      expect(state?.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1');
     });
 
     it('should add theme when specified', async () => {
-      ctx.wrapper?.setProps({ panel: undefined });
+      props.panel = undefined;
-      ctx.wrapper?.setState({ selectedTheme: 'light' });
+      render(<ShareLink {...props} />);
 
-      await ctx.wrapper?.instance().buildUrl();
+      await userEvent.click(screen.getByLabelText('Light'));
-      const state = ctx.wrapper?.state();
+      expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-      expect(state?.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1&theme=light');
+        'http://server/#!/test?from=1000&to=2000&orgId=1&theme=light'
+      );
     });
 
     it('should remove editPanel from image url when is first param in querystring', async () => {
       mockLocationHref('http://server/#!/test?editPanel=1');
-      ctx.mount({
+      render(<ShareLink {...props} />);
-        panel: new PanelModel({ id: 1, options: {}, fieldConfig: { defaults: {}, overrides: [] } }),
-      });
 
-      await ctx.wrapper?.instance().buildUrl();
+      const base = 'http://server/#!/test';
-      const state = ctx.wrapper?.state();
+      expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-      expect(state?.shareUrl).toContain('?editPanel=1&from=1000&to=2000&orgId=1');
+        base + '?editPanel=1&from=1000&to=2000&orgId=1'
-      expect(state?.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
+      );
+      expect(
+        await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
+      ).toHaveAttribute('href', base + '?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
     });
 
-    it('should shorten url', () => {
+    it('should shorten url', async () => {
-      mockLocationHref('http://server/#!/test');
+      render(<ShareLink {...props} />);
-      ctx.mount();
+
-      ctx.wrapper?.setState({ useShortUrl: true }, async () => {
+      await userEvent.click(await screen.findByLabelText('Shorten URL'));
-        await ctx.wrapper?.instance().buildUrl();
+      expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-        const state = ctx.wrapper?.state();
+        `http://localhost:3000/goto/${mockUid}`
-        expect(state?.shareUrl).toContain(`/goto/${mockUid}`);
+      );
-      });
     });
   });
 });
 
-describe('when default_home_dashboard_path is set in the grafana config', () => {
+describe('when appUrl is set in the grafana config', () => {
-  let originalBootData: any;
+  let originalBootData: BootData;
 
   beforeAll(() => {
     originalBootData = config.bootData;
     config.appUrl = 'http://dashboards.grafana.com/';
-
+    config.rendererAvailable = true;
-    config.bootData = {
+    config.bootData.user.orgId = 1;
-      user: {
-        orgId: 1,
-      },
-    } as any;
   });
 
   afterAll(() => {
@@ -217,16 +177,22 @@ describe('when default_home_dashboard_path is set in the grafana config', () =>
   it('should render the correct link', async () => {
     const mockDashboard = new DashboardModel({
       uid: 'mockDashboardUid',
+      id: 1,
     });
     const mockPanel = new PanelModel({
       id: 'mockPanelId',
     });
+    const props: Props = {
+      dashboard: mockDashboard,
+      panel: mockPanel,
+    };
     mockLocationHref('http://dashboards.grafana.com/?orgId=1');
-    const test: ShallowWrapper<Props, State, ShareLink> = shallow(
+    render(<ShareLink {...props} />);
-      <ShareLink dashboard={mockDashboard} panel={mockPanel} />
+
-    );
+    expect(
-    await test.instance().buildUrl();
+      await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
-    expect(test.state().imageUrl).toBe(
+    ).toHaveAttribute(
+      'href',
       `http://dashboards.grafana.com/render/d-solo/${mockDashboard.uid}?orgId=1&from=1000&to=2000&panelId=${mockPanel.id}&width=1000&height=500&tz=UTC`
     );
   });