Improved admin-x tests framework (#23571)

no ref
- centralized vitest config and test setup for apps using
admin-x-framework/shade
- improved msw implementation

Author: 9larsons

apps/admin-x-framework/src/test/README.md

@@ -0,0 +1,182 @@
+import {HttpResponse, http} from 'msw';
+import {setupServer} from 'msw/node';
+
+/**
+ * Common Ghost API response fixtures
+ */
+export const fixtures = {
+    // Global data fixtures
+    config: {
+        version: '5.x',
+        environment: 'testing',
+        database: 'mysql8',
+        mail: 'SMTP',
+        labs: {},
+        clientExtensions: {},
+        enableDeveloperExperiments: true,
+        stripeDirect: false
+    },
+
+    settings: {
+        title: 'Test Site',
+        description: 'A test Ghost site',
+        logo: null,
+        cover_image: null,
+        icon: null,
+        accent_color: '#FF1A75',
+        locale: 'en',
+        timezone: 'Etc/UTC',
+        codeinjection_head: null,
+        codeinjection_foot: null,
+        navigation: [],
+        secondary_navigation: []
+    },
+
+    site: {
+        title: 'Test Site',
+        url: 'http://localhost:3000',
+        version: '5.x'
+    },
+
+    user: {
+        id: '1',
+        name: 'Test User',
+        slug: 'test-user',
+        email: '[email protected]',
+        profile_image: null,
+        cover_image: null,
+        bio: null,
+        website: null,
+        location: null,
+        facebook: null,
+        twitter: null,
+        accessibility: null,
+        status: 'active',
+        meta_title: null,
+        meta_description: null,
+        tour: null,
+        last_seen: '2024-01-01T00:00:00.000Z',
+        created_at: '2024-01-01T00:00:00.000Z',
+        updated_at: '2024-01-01T00:00:00.000Z',
+        roles: [{
+            id: '1',
+            name: 'Administrator',
+            description: 'Administrators',
+            created_at: '2024-01-01T00:00:00.000Z',
+            updated_at: '2024-01-01T00:00:00.000Z'
+        }]
+    },
+
+    // Links fixtures
+    linksBulkSuccess: {
+        bulk: {
+            action: 'updateLink',
+            meta: {
+                stats: {successful: 1, unsuccessful: 0},
+                errors: [],
+                unsuccessfulData: []
+            }
+        }
+    },
+
+    // Stats fixtures (from our previous work)
+    memberCountHistory: {
+        stats: [
+            {date: '2024-01-01', paid: 100, free: 500, comped: 10, paid_subscribed: 5, paid_canceled: 2},
+            {date: '2024-01-02', paid: 102, free: 505, comped: 10, paid_subscribed: 3, paid_canceled: 1}
+        ],
+        meta: {totals: {paid: 102, free: 505, comped: 10}}
+    },
+
+    mrrHistory: {
+        stats: [
+            {date: '2024-01-01', mrr: 1000, currency: 'USD'},
+            {date: '2024-01-02', mrr: 1020, currency: 'USD'}
+        ],
+        meta: {totals: {mrr: 1020}}
+    }
+};
+
+/**
+ * Common Ghost API handlers
+ */
+export const handlers = {
+    // Global data handlers
+    browseConfig: http.get('/ghost/api/admin/config/', () => {
+        return HttpResponse.json(fixtures.config);
+    }),
+
+    browseSettings: http.get('/ghost/api/admin/settings/', () => {
+        return HttpResponse.json({settings: [fixtures.settings]});
+    }),
+
+    browseSite: http.get('/ghost/api/admin/site/', () => {
+        return HttpResponse.json({site: fixtures.site});
+    }),
+
+    browseMe: http.get('/ghost/api/admin/users/me/', () => {
+        return HttpResponse.json({users: [fixtures.user]});
+    }),
+
+    // Links handlers
+    updateLinksBulk: http.put('/ghost/api/admin/links/bulk/', () => {
+        return HttpResponse.json(fixtures.linksBulkSuccess);
+    }),
+
+    // Stats handlers
+    browseMemberCountHistory: http.get('/ghost/api/admin/stats/member_count/', () => {
+        return HttpResponse.json(fixtures.memberCountHistory);
+    }),
+
+    browseMrrHistory: http.get('/ghost/api/admin/stats/mrr/', () => {
+        return HttpResponse.json(fixtures.mrrHistory);
+    })
+};
+
+/**
+ * Creates an MSW server with common Ghost API handlers
+ */
+export function createMswServer(additionalHandlers: Array<ReturnType<typeof http.get | typeof http.post | typeof http.put | typeof http.delete>> = []) {
+    return setupServer(
+        ...Object.values(handlers),
+        ...additionalHandlers
+    );
+}
+
+/**
+ * Sets up MSW server for testing with common lifecycle management
+ */
+export function setupMswServer(additionalHandlers: Array<ReturnType<typeof http.get | typeof http.post | typeof http.put | typeof http.delete>> = []) {
+    const server = createMswServer(additionalHandlers);
+
+    beforeAll(() => server.listen());
+    afterEach(() => {
+        server.resetHandlers();
+    });
+    afterAll(() => server.close());
+
+    return server;
+}
+
+/**
+ * Helper to create custom handlers that override defaults
+ */
+export function createHandler(method: 'get' | 'post' | 'put' | 'delete', path: string, response: Record<string, unknown> | Array<unknown>, status = 200) {
+    const httpMethod = http[method];
+    return httpMethod(path, () => {
+        if (status >= 400) {
+            return new HttpResponse(null, {status});
+        }
+        return HttpResponse.json(response);
+    });
+}
+
+/**
+ * Helper to create error handlers
+ */
+export function createErrorHandler(method: 'get' | 'post' | 'put' | 'delete', path: string, status = 500) {
+    const httpMethod = http[method];
+    return httpMethod(path, () => {
+        return new HttpResponse(null, {status});
+    });
+} 

apps/admin-x-framework/src/test/msw-utils.ts

@@ -3,6 +3,8 @@
  * Import and call these functions in your app's test setup file.
  */
 
+import {setupConsoleFiltering} from './test-utils';
+
 /**
  * Sets up common mocks required for shade components in tests.
  * Call this in your app's test setup file.
@@ -29,22 +31,36 @@ export function setupShadeMocks() {
         unobserve() {}
         disconnect() {}
     }
+    
+    Object.defineProperty(window, 'ResizeObserver', {
+        writable: true,
+        value: ResizeObserverMock
+    });
 
-    global.ResizeObserver = ResizeObserverMock;
-
-    // Mock getBoundingClientRect - provides fake dimensions for DOM elements
-    // This prevents chart warnings and helps with layout calculations in tests
-    const mockGetBoundingClientRect = () => ({
-        width: 500,
-        height: 500,
+    // Mock getBoundingClientRect - required for positioning calculations
+    Element.prototype.getBoundingClientRect = () => ({
+        width: 0,
+        height: 0,
         top: 0,
         left: 0,
-        right: 500,
-        bottom: 500,
+        bottom: 0,
+        right: 0,
         x: 0,
         y: 0,
         toJSON: () => {}
     });
+}
 
-    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+/**
+ * Sets up console filtering for common warnings that can't be fixed.
+ * This is separate from setupShadeMocks so apps can choose which to use.
+ */
+export function setupConsoleFilters() {
+    return setupConsoleFiltering({
+        suppressReactWarnings: true,
+        suppressChartWarnings: true,
+        suppressMessages: [
+            'Encountered two children with the same key'
+        ]
+    });
 }