diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx index 63417da86ebfb..c8241d6125e0b 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx @@ -58,12 +58,12 @@ const createProps = (overrides = {}) => ({ }); describe('ChartContainer', () => { - it('renders when vizType is line', () => { + test('renders when vizType is line', () => { const props = createProps(); expect(React.isValidElement()).toBe(true); }); - it('renders with alert banner', () => { + test('renders with alert banner', async () => { const props = createProps({ chartIsStale: true, chart: { chartStatus: 'rendered', queriesResponse: [{}] }, @@ -77,31 +77,35 @@ describe('ChartContainer', () => { }), ); render(, { useRedux: true }); - expect(screen.getByText('Your chart is not up to date')).toBeVisible(); + expect( + await screen.findByText('Your chart is not up to date'), + ).toBeVisible(); }); - it('doesnt render alert banner when no changes in control panel were made (chart is not stale)', () => { + test('doesnt render alert banner when no changes in control panel were made (chart is not stale)', async () => { const props = createProps({ chartIsStale: false, }); render(, { useRedux: true }); + expect(await screen.findByText(/cached/i)).toBeInTheDocument(); expect( screen.queryByText('Your chart is not up to date'), ).not.toBeInTheDocument(); }); - it('doesnt render alert banner when chart not created yet (no queries response)', () => { + test('doesnt render alert banner when chart not created yet (no queries response)', async () => { const props = createProps({ chartIsStale: true, chart: { queriesResponse: [] }, }); render(, { useRedux: true }); + expect(await screen.findByRole('timer')).toBeInTheDocument(); expect( screen.queryByText('Your chart is not up to date'), ).not.toBeInTheDocument(); }); - it('renders prompt to fill required controls when required control removed', () => { + test('renders prompt to fill required controls when required control removed', async () => { const props = createProps({ chartIsStale: true, chart: { chartStatus: 'rendered', queriesResponse: [{}] }, @@ -109,11 +113,11 @@ describe('ChartContainer', () => { }); render(, { useRedux: true }); expect( - screen.getByText('Required control values have been removed'), + await screen.findByText('Required control values have been removed'), ).toBeVisible(); }); - it('should render cached button and call expected actions', () => { + test('should render cached button and call expected actions', async () => { const setForceQuery = jest.fn(); const postChartFormData = jest.fn(); const updateQueryFormData = jest.fn(); @@ -126,7 +130,7 @@ describe('ChartContainer', () => { }); render(, { useRedux: true }); - const cached = screen.queryByText('Cached'); + const cached = await screen.findByText('Cached'); expect(cached).toBeInTheDocument(); userEvent.click(cached); @@ -135,7 +139,7 @@ describe('ChartContainer', () => { expect(updateQueryFormData).toHaveBeenCalledTimes(1); }); - it('should hide cached button', () => { + test('should hide cached button', async () => { const props = createProps({ chart: { chartStatus: 'rendered', @@ -143,6 +147,7 @@ describe('ChartContainer', () => { }, }); render(, { useRedux: true }); - expect(screen.queryByText('Cached')).not.toBeInTheDocument(); + expect(await screen.findByRole('timer')).toBeInTheDocument(); + expect(screen.queryByText(/cached/i)).not.toBeInTheDocument(); }); });