fix(workflow): Convert projectsDashboard tests to RTL (#34210)

Convert projectsDashboard tests to RTL.

FIXES WOR-1823

static/app/views/projectsDashboard/projectCard.tsx

@@ -182,7 +182,7 @@ class ProjectCard extends Component<Props> {
               )}
             </SummaryLinks>
           </CardHeader>
-          <ChartContainer>
+          <ChartContainer data-test-id="chart-container">
             {stats ? (
               <Chart
                 firstEvent={hasFirstEvent}

tests/js/spec/views/projectsDashboard/noProjectMessage.spec.jsx

@@ -1,7 +1,4 @@
-import {Component} from 'react';
-
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {act} from 'sentry-test/reactTestingLibrary';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import ConfigStore from 'sentry/stores/configStore';
@@ -9,114 +6,80 @@ import ProjectsStore from 'sentry/stores/projectsStore';
 
 describe('NoProjectMessage', function () {
   beforeEach(function () {
-    act(() => ProjectsStore.reset());
+    ProjectsStore.reset();
   });
 
   const org = TestStubs.Organization();
 
   it('renders', async function () {
-    const project1 = TestStubs.Project();
-    const project2 = TestStubs.Project();
     const organization = TestStubs.Organization({slug: 'org-slug'});
+    const childrenMock = jest.fn().mockReturnValue(null);
     delete organization.projects;
-    act(() => ProjectsStore.loadInitialData([project1, project2]));
-    const wrapper = mountWithTheme(
-      <NoProjectMessage organization={organization}>{null}</NoProjectMessage>
+    ProjectsStore.loadInitialData([]);
+
+    render(
+      <NoProjectMessage organization={organization}>{childrenMock}</NoProjectMessage>
     );
-    expect(wrapper.prop('children')).toBe(null);
-    expect(wrapper.find('NoProjectMessage').exists()).toBe(true);
+
+    expect(childrenMock).not.toHaveBeenCalled();
+    expect(screen.getByText('Remain Calm')).toBeInTheDocument();
   });
 
   it('shows "Create Project" button when there are no projects', function () {
-    act(() => ProjectsStore.loadInitialData([]));
-    const wrapper = mountWithTheme(<NoProjectMessage organization={org} />);
-    expect(
-      wrapper.find('Button[to="/organizations/org-slug/projects/new/"]')
-    ).toHaveLength(1);
+    ProjectsStore.loadInitialData([]);
+
+    render(<NoProjectMessage organization={org} />);
+
+    expect(screen.getByRole('button', {name: 'Create project'})).toBeInTheDocument();
   });
 
   it('"Create Project" is disabled when no access to `project:write`', function () {
-    act(() => ProjectsStore.loadInitialData([]));
-    const wrapper = mountWithTheme(
-      <NoProjectMessage organization={TestStubs.Organization({access: []})} />
-    );
-    expect(
-      wrapper.find('Button[to="/organizations/org-slug/projects/new/"]').prop('disabled')
-    ).toBe(true);
+    ProjectsStore.loadInitialData([]);
+
+    render(<NoProjectMessage organization={TestStubs.Organization({access: []})} />);
+
+    expect(screen.getByRole('button', {name: 'Create project'})).toBeDisabled();
   });
 
   it('has no "Join a Team" button when projects are missing', function () {
-    const wrapper = mountWithTheme(<NoProjectMessage organization={org} />);
-    expect(wrapper.find('Button[to="/settings/org-slug/teams/"]')).toHaveLength(0);
+    ProjectsStore.loadInitialData([]);
+
+    render(<NoProjectMessage organization={org} />);
+
+    expect(screen.queryByRole('button', {name: 'Join a Team'})).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Create project'})).toBeInTheDocument();
   });
 
   it('has a "Join a Team" button when no projects but org has projects', function () {
-    act(() => ProjectsStore.loadInitialData([TestStubs.Project({hasAccess: false})]));
-    const wrapper = mountWithTheme(<NoProjectMessage organization={org} />);
-    expect(wrapper.find('Button[to="/settings/org-slug/teams/"]')).toHaveLength(1);
+    ProjectsStore.loadInitialData([TestStubs.Project({hasAccess: false})]);
+
+    render(<NoProjectMessage organization={org} />);
+
+    expect(screen.getByRole('button', {name: 'Join a Team'})).toBeInTheDocument();
   });
 
   it('has a disabled "Join a Team" button if no access to `team:read`', function () {
-    act(() => ProjectsStore.loadInitialData([TestStubs.Project({hasAccess: false})]));
-    const wrapper = mountWithTheme(
-      <NoProjectMessage organization={{...org, access: []}} />
-    );
-    expect(wrapper.find('Button[to="/settings/org-slug/teams/"]').prop('disabled')).toBe(
-      true
-    );
+    ProjectsStore.loadInitialData([TestStubs.Project({hasAccess: false})]);
+
+    render(<NoProjectMessage organization={{...org, access: []}} />);
+
+    expect(screen.getByRole('button', {name: 'Join a Team'})).toBeDisabled();
   });
 
   it('shows empty message to superusers that are not members', function () {
-    act(() =>
-      ProjectsStore.loadInitialData([
-        TestStubs.Project({hasAccess: true, isMember: false}),
-      ])
-    );
+    ProjectsStore.loadInitialData([
+      TestStubs.Project({hasAccess: true, isMember: false}),
+    ]);
     ConfigStore.config.user = {isSuperuser: true};
-    const wrapper = mountWithTheme(
+
+    render(
       <NoProjectMessage organization={org} superuserNeedsToBeProjectMember>
         {null}
       </NoProjectMessage>
     );
-    expect(wrapper.find('HelpMessage')).toHaveLength(1);
-  });
 
-  it('does not remount when the projects store loads', async function () {
-    const mount = jest.fn();
-    const unmount = jest.fn();
-    class MockComponent extends Component {
-      componentWillMount() {
-        mount();
-      }
-      componentWillUnmount() {
-        unmount();
-      }
-      render() {
-        return <div>children</div>;
-      }
-    }
-
-    const project1 = TestStubs.Project();
-    const project2 = TestStubs.Project();
-    const organization = TestStubs.Organization({slug: 'org-slug'});
-    delete organization.projects;
-    const wrapper = mountWithTheme(
-      <NoProjectMessage organization={organization}>
-        <MockComponent />
-      </NoProjectMessage>
-    );
-
-    // verify MockComponent is mounted once
-    expect(mount).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('NoProjectMessage')).toHaveLength(1);
-    act(() => ProjectsStore.loadInitialData([project1, project2]));
-    // await for trigger from projects store to resolve
-    await tick();
-    wrapper.update();
-
-    // verify MockComponent is not unmounted and is still mounted once
-    expect(unmount).toHaveBeenCalledTimes(0);
-    expect(mount).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('NoProjectMessage')).toHaveLength(1);
+    expect(
+      screen.getByText('You need at least one project to use this view')
+    ).toBeInTheDocument();
   });
 });

tests/js/spec/views/projectsDashboard/projectCard.spec.jsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {render, screen, within} from 'sentry-test/reactTestingLibrary';
 
 import {ProjectCard} from 'sentry/views/projectsDashboard/projectCard';
 
@@ -6,10 +6,8 @@ import {ProjectCard} from 'sentry/views/projectsDashboard/projectCard';
 jest.unmock('lodash/debounce');
 
 describe('ProjectCard', function () {
-  let wrapper;
-
-  beforeEach(function () {
-    wrapper = mountWithTheme(
+  const createWrapper = () =>
+    render(
       <ProjectCard
         organization={TestStubs.Organization()}
         project={TestStubs.Project({
@@ -26,14 +24,14 @@ describe('ProjectCard', function () {
         params={{orgId: 'org-slug'}}
       />
     );
-  });
 
   afterEach(function () {
     MockApiClient.clearMockResponses();
   });
 
   it('renders', function () {
-    expect(wrapper).toSnapshot();
+    const {container} = createWrapper();
+    expect(container).toSnapshot();
   });
 
   it('renders latest 2 deploys', function () {
@@ -52,7 +50,7 @@ describe('ProjectCard', function () {
       },
     };
 
-    wrapper = mountWithTheme(
+    render(
       <ProjectCard
         organization={TestStubs.Organization()}
         project={TestStubs.Project({
@@ -67,25 +65,27 @@ describe('ProjectCard', function () {
       />
     );
 
-    expect(wrapper.find('Deploy')).toHaveLength(2);
-    expect(wrapper.find('NoDeploys')).toHaveLength(0);
-    expect(wrapper.find('Environment[children="beta"]')).toHaveLength(1);
-    expect(wrapper.find('Environment[children="production"]')).toHaveLength(1);
-    expect(wrapper.find('Environment[children="staging"]')).toHaveLength(0);
+    expect(screen.queryByRole('button', {name: 'Track Deploys'})).not.toBeInTheDocument();
+    expect(screen.getByText('beta')).toBeInTheDocument();
+    expect(screen.getByText('production')).toBeInTheDocument();
+    expect(screen.queryByText('staging')).not.toBeInTheDocument();
   });
 
   it('renders empty state if no deploys', function () {
-    expect(wrapper.find('NoDeploys')).toHaveLength(1);
+    createWrapper();
+
+    expect(screen.getByRole('button', {name: 'Track Deploys'})).toBeInTheDocument();
   });
 
   it('renders with platform', function () {
-    expect(wrapper.find('PlatformList')).toHaveLength(1);
-    const icons = wrapper.find('StyledPlatformIcon');
-    expect(icons.first().prop('platform')).toBe('javascript');
+    createWrapper();
+
+    expect(screen.getByRole('img')).toBeInTheDocument();
+    expect(screen.getByTestId('platform-icon-javascript')).toBeInTheDocument();
   });
 
   it('renders header link for errors', function () {
-    wrapper = mountWithTheme(
+    render(
       <ProjectCard
         organization={TestStubs.Organization()}
         project={TestStubs.Project({
@@ -99,17 +99,15 @@ describe('ProjectCard', function () {
       />
     );
 
-    const total = wrapper.find('a[data-test-id="project-errors"]');
-    expect(total).toHaveLength(1);
-    expect(total.text()).toContain('Errors: 6');
+    expect(screen.getByTestId('project-errors')).toBeInTheDocument();
+    expect(screen.getByText('Errors: 6')).toBeInTheDocument();
 
     // No transacions as the feature isn't set.
-    const transactions = wrapper.find('a[data-test-id="project-transactions"]');
-    expect(transactions).toHaveLength(0);
+    expect(screen.queryByTestId('project-transactions')).not.toBeInTheDocument();
   });
 
   it('renders header link for transactions', function () {
-    wrapper = mountWithTheme(
+    render(
       <ProjectCard
         organization={TestStubs.Organization({features: ['performance-view']})}
         project={TestStubs.Project({
@@ -127,16 +125,13 @@ describe('ProjectCard', function () {
       />
     );
 
-    const total = wrapper.find('a[data-test-id="project-errors"]');
-    expect(total).toHaveLength(1);
-
-    const transactions = wrapper.find('a[data-test-id="project-transactions"]');
-    expect(transactions).toHaveLength(1);
-    expect(transactions.text()).toContain('Transactions: 8');
+    expect(screen.getByTestId('project-errors')).toBeInTheDocument();
+    expect(screen.getByTestId('project-transactions')).toBeInTheDocument();
+    expect(screen.getByText('Transactions: 8')).toBeInTheDocument();
   });
 
   it('renders loading placeholder card if there are no stats', function () {
-    wrapper = mountWithTheme(
+    render(
       <ProjectCard
         organization={TestStubs.Organization()}
         project={TestStubs.Project()}
@@ -144,6 +139,7 @@ describe('ProjectCard', function () {
       />
     );
 
-    expect(wrapper.find('Placeholder')).toHaveLength(1);
+    const chartContainer = screen.getByTestId('chart-container');
+    expect(within(chartContainer).getByTestId('loading-placeholder')).toBeInTheDocument();
   });
 });