Bump preact from 10.9.0 to 10.10.0 (#18143)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

app/javascript/listings/__tests__/ListingTagsField.test.jsx

@@ -79,17 +79,25 @@ describe('<ListingTagsField />', () => {
   });
 
   it('should show new selected tags', async () => {
-    const { getByLabelText, getByText, getByRole } = renderResult;
+    const { getByLabelText, getByRole } = renderResult;
 
     // New selected tags are expected to be shown
     const input = getByLabelText('Tags');
     input.focus();
 
-    await waitFor(() => expect(getByText('Top tags')).toBeInTheDocument());
+    // Make sure default state has loaded
+    await waitFor(() =>
+      expect(getByRole('group', { name: 'tag1' })).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(getByRole('option', { name: '# remote' })).toBeInTheDocument(),
+    );
 
     userEvent.click(getByRole('option', { name: '# remote' }));
 
     // It should now be added to the list of selected items
+
     await waitFor(() =>
       expect(getByRole('group', { name: 'remote' })).toBeInTheDocument(),
     );

app/javascript/modCenter/__tests__/moderationArticles.test.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import { render, fireEvent, waitFor } from '@testing-library/preact';
 import { ModerationArticles } from '../moderationArticles';
+import '@testing-library/jest-dom';
 
 const getTestArticles = () => {
   const articles = [
@@ -107,11 +108,10 @@ describe('<ModerationArticles />', () => {
     // We need the iframe to load first before checking for the modal having been loaded.
     await findByTestId(`mod-iframe-${expectedArticleId}`);
 
-    const flagUserModal = document.querySelector(
-      '[data-testid="flag-user-modal"]',
+    await waitFor(() =>
+      expect(getByTestId('flag-user-modal')).toBeInTheDocument(),
     );
-
-    expect(flagUserModal).not.toBeNull();
+    const flagUserModal = getByTestId('flag-user-modal');
 
     const actualArticleId = Number(
       flagUserModal.getElementsByTagName('input')[0].dataset.reactableId,

app/javascript/onboarding/__tests__/Onboarding.test.jsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { render } from '@testing-library/preact';
+import { render, waitFor } from '@testing-library/preact';
 import { axe } from 'jest-axe';
 import fetch from 'jest-fetch-mock';
 import '@testing-library/jest-dom';
@@ -65,6 +65,8 @@ describe('<Onboarding />', () => {
     // click to next step
     const nextButton = await findByText(/continue/i);
 
+    await waitFor(() => expect(nextButton).not.toHaveAttribute('disabled'));
+
     fetch.mockResponse(fakeEmptyResponse);
     nextButton.click();
 
@@ -82,12 +84,8 @@ describe('<Onboarding />', () => {
   });
 
   it("should skip the step when 'Skip for now' is clicked", async () => {
-    const {
-      getByTestId,
-      getByText,
-      findByText,
-      findByTestId,
-    } = renderOnboarding();
+    const { getByTestId, getByText, findByText, findByTestId } =
+      renderOnboarding();
     getByTestId('onboarding-intro-slide');
 
     fetch.mockResponseOnce({});
@@ -98,6 +96,7 @@ describe('<Onboarding />', () => {
 
     // click to next step
     const nextButton = await findByText(/continue/i);
+    await waitFor(() => expect(nextButton).not.toHaveAttribute('disabled'));
 
     fetch.mockResponse(fakeEmptyResponse);
     nextButton.click();
@@ -118,12 +117,8 @@ describe('<Onboarding />', () => {
   });
 
   it('should redirect the users to the correct steps every time', async () => {
-    const {
-      getByTestId,
-      getByText,
-      findByText,
-      findByTestId,
-    } = renderOnboarding();
+    const { getByTestId, getByText, findByText, findByTestId } =
+      renderOnboarding();
     getByTestId('onboarding-intro-slide');
 
     fetch.mockResponseOnce({});
@@ -134,6 +129,7 @@ describe('<Onboarding />', () => {
 
     // click to next step
     let nextButton = await findByText(/continue/i);
+    await waitFor(() => expect(nextButton).not.toHaveAttribute('disabled'));
 
     fetch.mockResponse(fakeEmptyResponse);
     nextButton.click();

app/javascript/onboarding/components/__tests__/IntroSlide.test.jsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { render } from '@testing-library/preact';
+import { render, waitFor } from '@testing-library/preact';
 import fetch from 'jest-fetch-mock';
 import '@testing-library/jest-dom';
 import { axe } from 'jest-axe';
@@ -97,6 +97,6 @@ describe('IntroSlide', () => {
     termsCheckbox.click();
 
     const nextButton = await findByText(/continue/i);
-    expect(nextButton).not.toBeDisabled();
+    await waitFor(() => expect(nextButton).not.toBeDisabled());
   });
 });

package.json

@@ -136,7 +136,7 @@
     "postcss-cssnext": "^3.1.0",
     "postcss-smart-import": "^0.7.6",
     "postscribe": "^2.0.8",
-    "preact": "^10.9.0",
+    "preact": "^10.10.0",
     "prop-types": "^15.8.1",
     "rails-erb-loader": "^5.5.2",
     "react-colorful": "^5.5.1",

yarn.lock

@@ -13384,10 +13384,10 @@ postscribe@^2.0.8:
   dependencies:
     prescribe ">=1.1.2"
 
-preact@^10.9.0:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.9.0.tgz#69b282b26926b66481c9ae3450cf68610fee29ff"
-  integrity sha512-jO6/OvCRL+OT8gst/+Q2ir7dMybZAX8ioP02Zmzh3BkQMHLyqZSujvxbUriXvHi8qmhcHKC2Gwbog6Kt+YTh+Q==
+preact@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.0.tgz#7434750a24b59dae1957d95dc0aa47a4a8e9a180"
+  integrity sha512-fszkg1iJJjq68I4lI8ZsmBiaoQiQHbxf1lNq+72EmC/mZOsFF5zn3k1yv9QGoFgIXzgsdSKtYymLJsrJPoamjQ==
 
 prelude-ls@^1.2.1:
   version "1.2.1"