Repository: apache/superset
File: superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.test.jsx (JavaScript)

Code before:
            parentComponent={mockLayout.present.CHART_ID}
          />
        </Provider>,
      );
      // Wait for styles to update
      await new Promise(resolve => setTimeout(resolve, 100));
    });

    const updatedContainer = screen.getByTestId(
      'dashboard-component-chart-holder',
    );
    const updatedParent = updatedContainer.parentElement;
    // Check that width is no longer 248px
    expect(updatedParent).not.toHaveStyle('width: 248px');
  });

  test('shouldFocusMarkdown returns true when clicking inside markdown container', async () => {
    await setup({ editMode: true });

    const markdownContainer = screen.getByTestId(
      'dashboard-component-chart-holder',
    );

    await act(async () => {
      await userEvent.click(markdownContainer);
    });

    expect(await screen.findByRole('textbox')).toBeInTheDocument();
  });

  test('shouldFocusMarkdown returns false when clicking outside markdown container', async () => {
    await setup({ editMode: true });

    const markdownContainer = screen.getByTestId(
      'dashboard-component-chart-holder',
    );

    await act(async () => {
      await userEvent.click(markdownContainer);
    });

    expect(await screen.findByRole('textbox')).toBeInTheDocument();

    await act(async () => {
      await userEvent.click(document.body);
      await new Promise(resolve => setTimeout(resolve, 50));
    });

    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
  });


Review comment (suggestion):
Now do we need act? awaiting userEvent should be enough, i was trying to get rid of `act` with the previous review 😄 

Code after:
            {...props}
            parentComponent={mockLayout.present.CHART_ID}
          />
        </Provider>,
      );
      // Wait for styles to update
      await new Promise(resolve => setTimeout(resolve, 100));
    });

    const updatedContainer = screen.getByTestId(
      'dashboard-component-chart-holder',
    );
    const updatedParent = updatedContainer.parentElement;
    // Check that width is no longer 248px
    expect(updatedParent).not.toHaveStyle('width: 248px');
  });

  test('shouldFocusMarkdown returns true when clicking inside markdown container', async () => {
    await setup({ editMode: true });

    const markdownContainer = screen.getByTestId(
      'dashboard-component-chart-holder',
    );

    userEvent.click(markdownContainer);

    expect(await screen.findByRole('textbox')).toBeInTheDocument();
  });

  test('shouldFocusMarkdown returns false when clicking outside markdown container', async () => {
    await setup({ editMode: true });

    const markdownContainer = screen.getByTestId(
      'dashboard-component-chart-holder',
    );

    userEvent.click(markdownContainer);

    expect(await screen.findByRole('textbox')).toBeInTheDocument();

    userEvent.click(document.body);
    await new Promise(resolve => setTimeout(resolve, 50));

    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
  });

  test('shouldFocusMarkdown keeps focus when clicking on menu items', async () => {
    await setup({ editMode: true });

    const markdownContainer = screen.getByTestId(
      'dashboard-component-chart-holder',