fix: translated button loading crash (#5896)

Author: idoshamun

packages/shared/src/components/Feed.spec.tsx

@@ -1172,15 +1172,14 @@ describe('Feed logged in', () => {
       'Off-topic or wrong tags',
     );
     fireEvent.click(irrelevantTagsBtn);
-    const submitBtn = await screen.findByText('Submit report');
+    const submitBtn = await screen.findByRole('button', {
+      name: 'Submit report',
+    });
     expect(submitBtn).toBeDisabled();
-    const javascriptElements = await screen.findAllByText('#javascript');
-    const javascriptBtn = javascriptElements.find(
-      (item) => item.tagName === 'BUTTON',
-    );
-    fireEvent.click(
-      getRequiredValue(javascriptBtn, 'Expected javascript report tag button'),
-    );
+    const javascriptBtn = await screen.findByRole('button', {
+      name: '#javascript',
+    });
+    fireEvent.click(javascriptBtn);
     expect(submitBtn).toBeEnabled();
     fireEvent.click(submitBtn);
 
@@ -1211,14 +1210,13 @@ describe('Feed logged in', () => {
       'Off-topic or wrong tags',
     );
     fireEvent.click(irrelevantTagsBtn);
-    const submitBtn = await screen.findByText('Submit report');
-    const javascriptElements = await screen.findAllByText('#javascript');
-    const javascriptBtn = javascriptElements.find(
-      (item) => item.tagName === 'BUTTON',
-    );
-    fireEvent.click(
-      getRequiredValue(javascriptBtn, 'Expected javascript report tag button'),
-    );
+    const submitBtn = await screen.findByRole('button', {
+      name: 'Submit report',
+    });
+    const javascriptBtn = await screen.findByRole('button', {
+      name: '#javascript',
+    });
+    fireEvent.click(javascriptBtn);
     expect(submitBtn).toBeEnabled();
 
     const brokenLinkBtn = await screen.findByText('Broken link');

packages/shared/src/components/buttons/Button.spec.tsx

@@ -119,6 +119,28 @@ describe('Button', () => {
     expect(await screen.findByTestId('buttonLoader')).toBeInTheDocument();
   });
 
+  it('keeps the same label wrapper when toggling loading', () => {
+    const { rerender } = render(
+      <Button variant={ButtonVariant.Primary}>Button</Button>,
+    );
+
+    const initialLabel = screen.getByRole('button').querySelector('.btn-label');
+
+    expect(initialLabel).toBeInTheDocument();
+    expect(initialLabel).not.toHaveClass('invisible');
+
+    rerender(
+      <Button variant={ButtonVariant.Primary} loading>
+        Button
+      </Button>,
+    );
+
+    const loadingLabel = screen.getByRole('button').querySelector('.btn-label');
+
+    expect(loadingLabel).toBe(initialLabel);
+    expect(loadingLabel).toHaveClass('invisible');
+  });
+
   it('should set aria-pressed when pressed is true', async () => {
     renderComponent({ children: 'Button', pressed: true });
     expect(await screen.findByRole('button')).toHaveAttribute(

packages/shared/src/components/buttons/Button.tsx

@@ -83,7 +83,8 @@ function ButtonComponent<TagName extends AllowedTags>(
   }: ButtonProps<TagName>,
   ref?: Ref<ButtonElementType<TagName>>,
 ): ReactElement {
-  const iconOnly = icon && isNullOrUndefined(children);
+  const hasChildren = !isNullOrUndefined(children);
+  const iconOnly = icon && !hasChildren;
   const getIconWithSize = useGetIconWithSize(
     size,
     iconOnly ?? false,
@@ -126,7 +127,11 @@ function ButtonComponent<TagName extends AllowedTags>(
           iconPosition,
         ) &&
         getIconWithSize(icon, iconSecondaryOnHover ? isHovering : false)}
-      {loading ? <span className="invisible">{children}</span> : children}
+      {hasChildren && (
+        <span className={classNames('btn-label', loading && 'invisible')}>
+          {children}
+        </span>
+      )}
       {icon &&
         iconPosition === ButtonIconPosition.Right &&
         getIconWithSize(icon, iconSecondaryOnHover ? isHovering : false)}

packages/shared/src/components/modals/user/CookieConsentModal.tsx

@@ -32,10 +32,8 @@ export const CookieConsentModal = ({
 }: CookieConsentModalProps): ReactElement => {
   const { onRequestClose } = modalProps;
 
-  const onAcceptPreferences = (e: React.FormEvent) => {
-    e.preventDefault();
-    // get the form
-    const formData = new FormData((e.target as HTMLInputElement).form);
+  const submitAcceptedPreferences = (form: HTMLFormElement) => {
+    const formData = new FormData(form);
     const formProps = Object.fromEntries(formData);
     const keys = Object.keys(formProps);
     const acceptedConsents = keys.filter(
@@ -47,6 +45,11 @@ export const CookieConsentModal = ({
       (option) => !acceptedConsents.includes(option),
     );
     onAcceptCookies(acceptedConsents, rejectedConsents);
+  };
+
+  const onAcceptPreferences = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    submitAcceptedPreferences(e.currentTarget);
 
     onRequestClose(null);
   };
@@ -61,6 +64,17 @@ export const CookieConsentModal = ({
     onRequestClose(e);
   };
 
+  const onSavePreferences = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const { form } = e.currentTarget;
+
+    if (!form) {
+      throw new Error('Cookie consent form is missing');
+    }
+
+    submitAcceptedPreferences(form);
+    onRequestClose(e);
+  };
+
   return (
     <Modal
       {...modalProps}
@@ -120,7 +134,7 @@ export const CookieConsentModal = ({
         <Button
           variant={ButtonVariant.Primary}
           size={ButtonSize.Small}
-          onClick={onAcceptPreferences}
+          onClick={onSavePreferences}
           form="consent_form"
           className="ml-auto"
           type="submit"

packages/shared/src/components/widgets/BestDiscussions.spec.tsx

@@ -45,7 +45,6 @@ it('should show number comments', async () => {
 
 it('should set feeling lucky link to the first post', async () => {
   renderComponent();
-  const el = await screen.findByText(`I'm feeling lucky`);
-  // eslint-disable-next-line testing-library/no-node-access
+  const el = await screen.findByRole('link', { name: `I'm feeling lucky` });
   expect(el).toHaveAttribute('href', defaultPosts[0].commentsPermalink);
 });

packages/shared/src/features/onboarding/steps/FunnelPricing/FunnelPricingV2.spec.tsx

@@ -240,18 +240,8 @@ const renderComponent = (props = {}, initialState: InitialState = {}) => {
 describe('FunnelPricingV2', () => {
   let dateMock: DateMock;
   const initialDate = new Date('2023-01-01T00:00:00Z');
-  const getProceedButton = (): HTMLElement => {
-    const proceedButton = screen
-      .getAllByText('Get my plan')
-      .filter((button) => button.tagName === 'BUTTON')
-      .at(0);
-
-    if (!proceedButton) {
-      throw new Error('Expected pricing CTA button');
-    }
-
-    return proceedButton;
-  };
+  const getProceedButton = (): HTMLElement =>
+    screen.getAllByRole('button', { name: 'Get my plan' })[0];
 
   const getMonthlyPlanRadio = (): HTMLElement => {
     const monthlyPlan = screen

packages/webapp/__tests__/PostPage.tsx

@@ -899,8 +899,8 @@ describe('downvote flow', () => {
 
   it('should prevent user to click block if no tags are selected', async () => {
     await prepareDownvote();
-    const block = await screen.findByText<HTMLButtonElement>('Block');
-    expect(block?.disabled).toBe(true);
+    const block = await screen.findByRole('button', { name: 'Block' });
+    expect(block.disabled).toBe(true);
   });
 
   it('should display the option to never see the selection again if close panel', async () => {

packages/webapp/components/banner/CookieBanner.spec.tsx

@@ -55,7 +55,7 @@ describe('CookieBanner outside GDPR', () => {
   it('should render just a single button to accept all when outside GDPR coverage', async () => {
     renderComponent();
     await nextTick();
-    const el = await screen.findByText('I understand');
+    const el = await screen.findByRole('button', { name: 'I understand' });
     expect(el.tagName).toBe('BUTTON');
   });
 
@@ -83,7 +83,7 @@ describe('CookieBanner outside GDPR', () => {
     renderComponent();
 
     await screen.findByTestId('cookie_content');
-    const button = await screen.findByText('I understand');
+    const button = await screen.findByRole('button', { name: 'I understand' });
     await act(() => fireEvent.click(button));
     await nextTick();
     const cookies = getCookies([GdprConsentKey.Necessary]);