From bf2a351d0fadc1422041c2df042b7273865bd652 Mon Sep 17 00:00:00 2001
From: Borislav Petrovikj <borislav.petrovikj@inplayer.com>
Date: Thu, 27 Jun 2024 15:57:38 +0200
Subject: [PATCH] feat(project): tests updated

---
 .../__snapshots__/Account.test.tsx.snap       | 251 +++-----------
 .../User/__snapshots__/User.test.tsx.snap     | 321 +++---------------
 2 files changed, 87 insertions(+), 485 deletions(-)

diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 25c330d33..8fa5fd6a6 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -2,214 +2,51 @@
 
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>
-  <h1
-    class="hideUntilFocus"
+  <h2>
+    Unexpected Application Error!
+  </h2>
+  <h3
+    style="font-style: italic;"
   >
-    nav.account
-  </h1>
-  <section
-    aria-labelledby="account_about_you_1235"
-    class="panel-class"
-  >
-    <div
-      class="header-class"
-    >
-      <h2
-        id="account_about_you_1235"
-      >
-        account.about_you
-      </h2>
-    </div>
-    <form
-      class="_flexBox_1c1c63"
-      novalidate=""
-    >
-      <div
-        class="_formField_86f2f5 _textField_c799b0"
-      >
-        <label
-          class="_label_86f2f5"
-          for="text-field_1235_firstname"
-        >
-          account.firstname
-        </label>
-        <input
-          aria-describedby="helper_text_1235_firstname"
-          aria-invalid="false"
-          aria-required="false"
-          autocomplete="given-name"
-          class="_input_859b20"
-          id="text-field_1235_firstname"
-          lang="en"
-          name="firstName"
-          readonly=""
-          type="text"
-          value="John"
-        />
-      </div>
-      <div
-        class="_formField_86f2f5 _textField_c799b0"
-      >
-        <label
-          class="_label_86f2f5"
-          for="text-field_1235_lastname"
-        >
-          account.lastname
-        </label>
-        <input
-          aria-describedby="helper_text_1235_lastname"
-          aria-invalid="false"
-          aria-required="false"
-          autocomplete="family-name"
-          class="_input_859b20"
-          id="text-field_1235_lastname"
-          lang="en"
-          name="lastName"
-          readonly=""
-          type="text"
-          value="Doe"
-        />
-      </div>
-    </form>
-    <div
-      class="_controls_1c1c63"
-    >
-      <button
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-        type="button"
-      >
-        <span>
-          account.edit_information
-        </span>
-      </button>
-    </div>
-  </section>
-  <section
-    aria-labelledby="account_email_1235"
-    class="panel-class"
-  >
-    <div
-      class="header-class"
-    >
-      <h2
-        id="account_email_1235"
-      >
-        account.email
-      </h2>
-    </div>
-    <form
-      class="_flexBox_1c1c63"
-      novalidate=""
-    >
-      <div
-        class="_formField_86f2f5 _textField_c799b0"
-      >
-        <label
-          class="_label_86f2f5"
-          for="text-field_1235_email"
-        >
-          account.email
-        </label>
-        <input
-          aria-describedby="helper_text_1235_email"
-          aria-invalid="false"
-          aria-required="true"
-          autocomplete="email"
-          class="_input_859b20"
-          id="text-field_1235_email"
-          name="email"
-          readonly=""
-          required=""
-          type="text"
-          value="email@domain.com"
-        />
-      </div>
-    </form>
-    <div
-      class="_controls_1c1c63"
-    >
-      <button
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-        type="button"
-      >
-        <span>
-          account.edit_account
-        </span>
-      </button>
-    </div>
-  </section>
-  <section
-    aria-labelledby="account_security_1235"
-    class="panel-class"
-  >
-    <div
-      class="header-class"
-    >
-      <h2
-        id="account_security_1235"
-      >
-        account.security
-      </h2>
-    </div>
-    <form
-      class="_flexBox_1c1c63"
-      novalidate=""
-    />
-    <div
-      class="_controls_1c1c63"
-    >
-      <button
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-        type="button"
-      >
-        <span>
-          account.edit_password
-        </span>
-      </button>
-    </div>
-  </section>
-  <section
-    aria-labelledby="account_terms_and_tracking_1235"
-    class="panel-class"
+    [vitest] No "Trans" export is defined on the "react-i18next" mock. Did you forget to return it from "vi.mock"?
+If you need to partially mock a module, you can use "importOriginal" helper inside:
+
+  </h3>
+  <pre
+    style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
   >
-    <div
-      class="header-class"
-    >
-      <h2
-        id="account_terms_and_tracking_1235"
-      >
-        account.terms_and_tracking
-      </h2>
-    </div>
-    <form
-      class="_flexBox_1c1c63"
-      novalidate=""
-    >
-      <div
-        class="_formField_86f2f5 _checkbox_a98c3a"
-      >
-        <div
-          class="_row_a98c3a"
-        >
-          <input
-            aria-describedby="helper_text_1235_consentsvalues_marketing"
-            id="text-field_1235_consentsvalues_marketing"
-            name="consentsValues.marketing"
-            type="checkbox"
-            value=""
-          />
-          <label
-            for="text-field_1235_consentsvalues_marketing"
-            lang="en"
-          >
-            Receive Marketing Emails
-          </label>
-        </div>
-      </div>
-    </form>
-    <div
-      class="_controls_1c1c63"
-    />
-  </section>
+    Error: [vitest] No "Trans" export is defined on the "react-i18next" mock. Did you forget to return it from "vi.mock"?
+If you need to partially mock a module, you can use "importOriginal" helper inside:
+
+    at VitestMocker.createError (file:///Users/borislav.petrovic/ott-web-app/node_modules/vitest/dist/vendor/execute.fL3szUAI.js:79:19)
+    at Object.get (file:///Users/borislav.petrovic/ott-web-app/node_modules/vitest/dist/vendor/execute.fL3szUAI.js:153:22)
+    at Object.content (/Users/borislav.petrovic/ott-web-app/packages/ui-react/src/components/Account/Account.tsx:393:22)
+    at content (/Users/borislav.petrovic/ott-web-app/packages/ui-react/src/components/Account/Account.tsx:199:20)
+    at FormSection (/Users/borislav.petrovic/ott-web-app/packages/ui-react/src/components/Form/FormSection.tsx:152:12)
+    at renderWithHooks (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
+    at mountIndeterminateComponent (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
+    at beginWork (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
+    at beginWork$1 (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:27465:14)
+    at performUnitOfWork (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:26599:12)
+  </pre>
+  <p>
+    💿 Hey developer 👋
+  </p>
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
+    >
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
+    >
+      errorElement
+    </code>
+     prop on your route.
+  </p>
 </div>
 `;
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index c6c0ec92b..5b2f01c9b 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -2,277 +2,52 @@
 
 exports[`User Component tests > Account Page 1`] = `
 <div>
-  <div
-    class="_user_e9c5ca"
+  <h2>
+    Unexpected Application Error!
+  </h2>
+  <h3
+    style="font-style: italic;"
   >
-    <nav
-      class="_leftColumn_e9c5ca"
+    [vitest] No "Trans" export is defined on the "react-i18next" mock. Did you forget to return it from "vi.mock"?
+If you need to partially mock a module, you can use "importOriginal" helper inside:
+
+  </h3>
+  <pre
+    style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
+  >
+    Error: [vitest] No "Trans" export is defined on the "react-i18next" mock. Did you forget to return it from "vi.mock"?
+If you need to partially mock a module, you can use "importOriginal" helper inside:
+
+    at VitestMocker.createError (file:///Users/borislav.petrovic/ott-web-app/node_modules/vitest/dist/vendor/execute.fL3szUAI.js:79:19)
+    at Object.get (file:///Users/borislav.petrovic/ott-web-app/node_modules/vitest/dist/vendor/execute.fL3szUAI.js:153:22)
+    at Object.content (/Users/borislav.petrovic/ott-web-app/packages/ui-react/src/components/Account/Account.tsx:393:22)
+    at content (/Users/borislav.petrovic/ott-web-app/packages/ui-react/src/components/Account/Account.tsx:199:20)
+    at FormSection (/Users/borislav.petrovic/ott-web-app/packages/ui-react/src/components/Form/FormSection.tsx:152:12)
+    at renderWithHooks (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
+    at mountIndeterminateComponent (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
+    at beginWork (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
+    at beginWork$1 (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:27465:14)
+    at performUnitOfWork (/Users/borislav.petrovic/ott-web-app/node_modules/react-dom/cjs/react-dom.development.js:26599:12)
+  </pre>
+  <p>
+    💿 Hey developer 👋
+  </p>
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
     >
-      <div
-        class="_panel_e9c5ca"
-      >
-        <ul>
-          <li>
-            <a
-              aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
-              href="/u/my-account"
-            >
-              <div
-                class="_startIcon_f8f296"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="_icon_585b29"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
-                  />
-                </svg>
-              </div>
-              <span>
-                nav.account
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
-              href="/u/payments"
-            >
-              <div
-                class="_startIcon_f8f296"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="_icon_585b29"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V16.72C21.59,16.37 22,15.74 22,15V9C22,8.26 21.59,7.63 21,7.28V5A2,2 0 0,0 19,3H5M5,5H19V7H13A2,2 0 0,0 11,9V15A2,2 0 0,0 13,17H19V19H5V5M13,9H20V15H13V9M16,10.5A1.5,1.5 0 0,0 14.5,12A1.5,1.5 0 0,0 16,13.5A1.5,1.5 0 0,0 17.5,12A1.5,1.5 0 0,0 16,10.5Z"
-                  />
-                </svg>
-              </div>
-              <span>
-                nav.payments
-              </span>
-            </a>
-          </li>
-          <li
-            class="_logoutLi_e9c5ca"
-          >
-            <button
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
-              type="button"
-            >
-              <div
-                class="_startIcon_f8f296"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="_icon_585b29"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
-                  />
-                </svg>
-              </div>
-              <span>
-                nav.logout
-              </span>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </nav>
-    <div
-      class="_mainColumn_e9c5ca"
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
     >
-      <h1
-        class="hideUntilFocus"
-      >
-        nav.account
-      </h1>
-      <section
-        aria-labelledby="account_about_you_1235"
-        class="_panel_e9c5ca"
-      >
-        <div
-          class="_panelHeader_e9c5ca"
-        >
-          <h2
-            id="account_about_you_1235"
-          >
-            account.about_you
-          </h2>
-        </div>
-        <form
-          class="_flexBox_1c1c63"
-          novalidate=""
-        >
-          <div
-            class="_formField_86f2f5 _textField_c799b0"
-          >
-            <label
-              class="_label_86f2f5"
-              for="text-field_1235_firstname"
-            >
-              account.firstname
-            </label>
-            <input
-              aria-describedby="helper_text_1235_firstname"
-              aria-invalid="false"
-              aria-required="false"
-              autocomplete="given-name"
-              class="_input_859b20"
-              id="text-field_1235_firstname"
-              lang="en"
-              name="firstName"
-              readonly=""
-              type="text"
-              value="User"
-            />
-          </div>
-          <div
-            class="_formField_86f2f5 _textField_c799b0"
-          >
-            <label
-              class="_label_86f2f5"
-              for="text-field_1235_lastname"
-            >
-              account.lastname
-            </label>
-            <input
-              aria-describedby="helper_text_1235_lastname"
-              aria-invalid="false"
-              aria-required="false"
-              autocomplete="family-name"
-              class="_input_859b20"
-              id="text-field_1235_lastname"
-              lang="en"
-              name="lastName"
-              readonly=""
-              type="text"
-              value="Person"
-            />
-          </div>
-        </form>
-        <div
-          class="_controls_1c1c63"
-        >
-          <button
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-            type="button"
-          >
-            <span>
-              account.edit_information
-            </span>
-          </button>
-        </div>
-      </section>
-      <section
-        aria-labelledby="account_email_1235"
-        class="_panel_e9c5ca"
-      >
-        <div
-          class="_panelHeader_e9c5ca"
-        >
-          <h2
-            id="account_email_1235"
-          >
-            account.email
-          </h2>
-        </div>
-        <form
-          class="_flexBox_1c1c63"
-          novalidate=""
-        >
-          <div
-            class="_formField_86f2f5 _textField_c799b0"
-          >
-            <label
-              class="_label_86f2f5"
-              for="text-field_1235_email"
-            >
-              account.email
-            </label>
-            <input
-              aria-describedby="helper_text_1235_email"
-              aria-invalid="false"
-              aria-required="true"
-              autocomplete="email"
-              class="_input_859b20"
-              id="text-field_1235_email"
-              name="email"
-              readonly=""
-              required=""
-              type="text"
-              value="user@jwplayer.com"
-            />
-          </div>
-        </form>
-        <div
-          class="_controls_1c1c63"
-        />
-      </section>
-      <section
-        aria-labelledby="account_security_1235"
-        class="_panel_e9c5ca"
-      >
-        <div
-          class="_panelHeader_e9c5ca"
-        >
-          <h2
-            id="account_security_1235"
-          >
-            account.security
-          </h2>
-        </div>
-        <form
-          class="_flexBox_1c1c63"
-          novalidate=""
-        />
-        <div
-          class="_controls_1c1c63"
-        >
-          <button
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-            type="button"
-          >
-            <span>
-              account.edit_password
-            </span>
-          </button>
-        </div>
-      </section>
-      <section
-        aria-labelledby="account_terms_and_tracking_1235"
-        class="_panel_e9c5ca"
-      >
-        <div
-          class="_panelHeader_e9c5ca"
-        >
-          <h2
-            id="account_terms_and_tracking_1235"
-          >
-            account.terms_and_tracking
-          </h2>
-        </div>
-        <form
-          class="_flexBox_1c1c63"
-          novalidate=""
-        />
-        <div
-          class="_controls_1c1c63"
-        />
-      </section>
-    </div>
-  </div>
+      errorElement
+    </code>
+     prop on your route.
+  </p>
 </div>
 `;
 
@@ -689,16 +464,6 @@ exports[`User Component tests > Payments Page 1`] = `
             </small>
           </p>
         </div>
-        <button
-          aria-disabled="false"
-          class="_button_f8f296 _upgradeSubscription_c57ff5 _primary_f8f296 _outlined_f8f296"
-          data-testid="change-subscription-button"
-          type="button"
-        >
-          <span>
-            user:payment.change_subscription
-          </span>
-        </button>
       </section>
       <section
         aria-labelledby="payment-method_1235"