feat(content-explorer): add story and visual regression for theming (#3889)

* feat(content-explorer): add story and visual regression for theming

* fix: update mock import path

Author: tjuanitas

src/elements/__mocks__/mockRequests.ts renamed to src/elements/common/__mocks__/mockRequests.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_HOSTNAME_API } from '../../constants';
+import { DEFAULT_HOSTNAME_API } from '../../../constants';
 
 const apiV2Path = `${DEFAULT_HOSTNAME_API}/2.0`;
 

src/elements/content-explorer/stories/__mocks__/mockRootFolder.ts renamed to src/elements/common/__mocks__/mockRootFolder.ts

@@ -1,4 +1,4 @@
-const mockSubFolder = {
+const mockSubfolder = {
     type: 'folder',
     id: '73426618530',
     etag: '3',
@@ -154,4 +154,4 @@ const mockSubFolder = {
     },
 };
 
-export default mockSubFolder;
+export default mockSubfolder;

src/elements/content-explorer/stories/__mocks__/mockSubFolder.ts renamed to src/elements/common/__mocks__/mockSubfolder.ts

@@ -1,6 +1,7 @@
 // @flow
 
 import ContentExplorer from '../ContentExplorer';
+import mockTheme from '../../common/__mocks__/mockTheme';
 
 export const basic = {};
 
@@ -25,6 +26,12 @@ export const withSidebar = {
     },
 };
 
+export const withTheming = {
+    args: {
+        theme: mockTheme,
+    },
+};
+
 export default {
     title: 'Elements/ContentExplorer',
     component: ContentExplorer,

src/elements/common/__mocks__/mockTheme.ts

@@ -2,8 +2,8 @@ import { http, HttpResponse } from 'msw';
 import { expect, userEvent, waitFor, within, screen } from '@storybook/test';
 
 import ContentExplorer from '../../ContentExplorer';
-import { mockEmptyRootFolder, mockRootFolder } from '../__mocks__/mockRootFolder';
-import mockSubFolder from '../__mocks__/mockSubFolder';
+import { mockEmptyRootFolder, mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
+import mockSubfolder from '../../../common/__mocks__/mockSubfolder';
 
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 
@@ -243,6 +243,16 @@ export const searchEmptyState = {
     },
 };
 
+export const withTheming = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            expect(await canvas.getByText('Preview Test Folder')).toBeInTheDocument();
+        });
+    },
+};
+
 export default {
     title: 'Elements/ContentExplorer/tests/ContentExplorer/visual',
     component: ContentExplorer,
@@ -258,7 +268,7 @@ export default {
                     return HttpResponse.json(mockRootFolder);
                 }),
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/73426618530`, () => {
-                    return HttpResponse.json(mockSubFolder);
+                    return HttpResponse.json(mockSubfolder);
                 }),
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/74729718131`, () => {
                     return HttpResponse.json(mockEmptyRootFolder);

src/elements/content-explorer/stories/ContentExplorer.stories.js

@@ -1,7 +1,7 @@
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { http, HttpResponse } from 'msw';
 import ContentPicker from '../../ContentPicker';
-import { mockRootFolder } from '../../../content-explorer/stories/__mocks__/mockRootFolder';
+import { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 

src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

@@ -5,7 +5,7 @@ import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { Notification } from '@box/blueprint-web';
 import { http, HttpResponse } from 'msw';
 
-import { mockEventRequest, mockFileRequest, mockUserRequest } from '../../../__mocks__/mockRequests';
+import { mockEventRequest, mockFileRequest, mockUserRequest } from '../../../common/__mocks__/mockRequests';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 
 import ContentPreview from '../../ContentPreview';

src/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

@@ -3,7 +3,7 @@ import { type StoryObj } from '@storybook/react';
 import { http, HttpResponse } from 'msw';
 import ContentSidebar from '../../ContentSidebar';
 import BoxAISidebar from '../../BoxAISidebar';
-import { mockFileRequest, mockUserRequest } from '../../../__mocks__/mockRequests';
+import { mockFileRequest, mockUserRequest } from '../../../common/__mocks__/mockRequests';
 
 const mockFeatures = {
     'boxai.sidebar.enabled': true,

src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -17,7 +17,7 @@ import {
     mockGlobalMetadataTemplates,
     mockMetadataInstances,
 } from '../__mocks__/MetadataSidebarRedesignedMocks';
-import { mockUserRequest } from '../../../__mocks__/mockRequests';
+import { mockUserRequest } from '../../../common/__mocks__/mockRequests';
 
 const token = global.TOKEN;