From af664c1dbe827185cc3c2bcb6a04fd3b83c5ce60 Mon Sep 17 00:00:00 2001
From: vincentbpro <89356961+vincentbpro@users.noreply.github.com>
Date: Thu, 24 Feb 2022 17:16:31 +0100
Subject: [PATCH] test(dark-mode): updated tests for ProfilePage

---
 .../src/pages/ProfilePage/tests/index.test.js | 98 ++++++++++++++++++-
 1 file changed, 94 insertions(+), 4 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
index e93404ac27..61466fa452 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
@@ -2,9 +2,13 @@ import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { lightTheme } from '@strapi/design-system';
 import ProfilePage from '../index';
 import server from './utils/server';
+import ThemeToggleProvider from '../../../components/ThemeToggleProvider';
+import Theme from '../../../components/Theme';
+
+window.matchMedia = jest.fn(() => false);
 
 jest.mock('../../../components/LocalesProvider/useLocalesProvider', () => () => ({
   changeLocale: () => {},
@@ -31,9 +35,11 @@ const client = new QueryClient({
 const App = (
   <QueryClientProvider client={client}>
     <IntlProvider messages={{}} textComponent="span" locale="en">
-      <ThemeProvider theme={lightTheme}>
-        <ProfilePage />
-      </ThemeProvider>
+      <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <Theme>
+          <ProfilePage />
+        </Theme>
+      </ThemeToggleProvider>
     </IntlProvider>
   </QueryClientProvider>
 );
@@ -1327,6 +1333,90 @@ describe('ADMIN | Pages | Profile page', () => {
                           </div>
                         </div>
                       </div>
+                      <div
+                        class="c20"
+                      >
+                        <div
+                          class=""
+                        >
+                          <div>
+                            <div
+                              class="c36"
+                            >
+                              <span
+                                class="c37"
+                                for="select-2"
+                                id="select-2-label"
+                              >
+                                Interface mode
+                              </span>
+                              <div
+                                class="c38 c39"
+                              >
+                                <button
+                                  aria-describedby="select-2-hint"
+                                  aria-disabled="false"
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="select-2-label select-2-content"
+                                  class="c40"
+                                  id="select-2"
+                                  type="button"
+                                />
+                                <div
+                                  class="c41 c42"
+                                >
+                                  <div
+                                    class="c38"
+                                  >
+                                    <div
+                                      class="c43"
+                                    >
+                                      <span
+                                        class="c44"
+                                        id="select-2-content"
+                                      >
+                                        Light mode
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="c38"
+                                  >
+                                    <button
+                                      aria-hidden="true"
+                                      class="c46 c45 c47"
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      <svg
+                                        fill="none"
+                                        height="1em"
+                                        viewBox="0 0 14 8"
+                                        width="1em"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          clip-rule="evenodd"
+                                          d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                                          fill="#32324D"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                              <p
+                                class="c48"
+                                id="select-2-hint"
+                              >
+                                Displays your interface in the chosen mode.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>