fix(js-client): replace real-API e2e tests with MSW integration tests

- Add MSW-based integration tests (tests/api/index.test.ts) using the
  preconditions pattern, covering query param serialization, relation
  resolution pipeline, pagination via HTTP headers, links map extraction,
  and client-side caching behaviour
- Trim e2e suite to 6 high-value smoke tests wrapped in describe.skipIf
  so they skip cleanly in CI when VITE_ACCESS_TOKEN is absent, fixing
  the external contributor CI failure
- Add msw as a devDependency to storyblok-js-client

Fixes WDX-307

Author: maoberlehner

packages/js-client/package.json

@@ -61,6 +61,7 @@
     "@vitest/coverage-v8": "^3.1.3",
     "@vitest/ui": "^3.1.3",
     "eslint": "^9.26.0",
+    "msw": "^2.10.2",
     "tsdown": "^0.20.3",
     "typescript": "5.8.3",
     "vite": "^7.0.6",

packages/js-client/tests/api/index.e2e.ts

@@ -1,147 +1,60 @@
 import StoryblokClient from 'storyblok-js-client';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-describe('StoryblokClient', () => {
+/**
+ * Smoke tests against the real Storyblok CDN API.
+ *
+ * These tests are intentionally minimal — they exist to catch real API
+ * regressions (e.g. auth, response shape changes, content structure) that
+ * MSW-based tests cannot detect.
+ *
+ * They are skipped automatically when VITE_ACCESS_TOKEN is not set, so
+ * they never block CI for external contributors. They run when a valid
+ * token is available (e.g. internal PRs or scheduled workflows).
+ *
+ * Required env vars (in .env.test):
+ *   VITE_ACCESS_TOKEN  — CDN access token
+ *   VITE_SPACE_ID      — numeric space ID
+ */
+describe.skipIf(!process.env.VITE_ACCESS_TOKEN)('StoryblokClient (smoke tests)', () => {
   let client: StoryblokClient;
 
   beforeEach(() => {
-    // Setup default mocks
     client = new StoryblokClient({
       accessToken: process.env.VITE_ACCESS_TOKEN,
       cache: { type: 'memory', clear: 'auto' },
     });
   });
-  // TODO: Uncomment when we have a valid token
-  /* if (process.env.VITE_OAUTH_TOKEN) {
-      describe('management API', () => {
-        const spaceId = process.env.VITE_SPACE_ID
-        describe('should return all spaces', async () => {
-          const StoryblokManagement = new StoryblokClient({
-            oauthToken: process.env.VITE_OAUTH_TOKEN,
-          })
-          const result = await StoryblokManagement.getAll(
-            `spaces/${spaceId}/stories`
-          )
-          expect(result.length).toBeGreaterThan(0)
-        })
-      })
-  } */
 
-  describe('get function', () => {
-    it('get(\'cdn/spaces/me\') should return the space information', async () => {
-      const { data } = await client.get('cdn/spaces/me');
-      expect(data.space.id).toBe(Number(process.env.VITE_SPACE_ID));
-    });
-
-    it('get(\'cdn/stories\') should return all stories', async () => {
-      const { data } = await client.get('cdn/stories');
-      expect(data.stories.length).toBeGreaterThan(0);
-    });
-
-    it('get(\'cdn/stories/testcontent-0\' should return the specific story', async () => {
-      const { data } = await client.get('cdn/stories/testcontent-0');
-      expect(data.story.slug).toBe('testcontent-0');
-    });
-
-    it('get(\'cdn/stories\' { starts_with: testcontent-0 } should return the specific story', async () => {
-      const { data } = await client.get('cdn/stories', {
-        starts_with: 'testcontent-0',
-      });
-      expect(data.stories.length).toBe(1);
-    });
-
-    it('get(\'cdn/stories/testcontent-draft\', { version: \'draft\' }) should return the specific story draft', async () => {
-      const { data } = await client.get('cdn/stories/testcontent-draft', {
-        version: 'draft',
-      });
-      expect(data.story.slug).toBe('testcontent-draft');
-    });
-
-    it('get(\'cdn/stories/testcontent-0\', { version: \'published\' }) should return the specific story published', async () => {
-      const { data } = await client.get('cdn/stories/testcontent-0', {
-        version: 'published',
-      });
-      expect(data.story.slug).toBe('testcontent-0');
-    });
-
-    it('cdn/stories/testcontent-0 should resolve author relations', async () => {
-      const { data } = await client.get('cdn/stories/testcontent-0', {
-        resolve_relations: 'root.author',
-      });
-
-      expect(data.story.content.author[0].slug).toBe('edgar-allan-poe');
-    });
-
-    it('get(\'cdn/stories\', { by_slugs: \'folder/*\' }) should return the specific story', async () => {
-      const { data } = await client.get('cdn/stories', {
-        by_slugs: 'folder/*',
-      });
-      expect(data.stories.length).toBeGreaterThan(0);
-    });
+  it('authenticates and returns space information', async () => {
+    const { data } = await client.get('cdn/spaces/me');
+    expect(data.space.id).toBe(Number(process.env.VITE_SPACE_ID));
   });
 
-  describe('getAll function', () => {
-    it('getAll(\'cdn/stories\') should return all stories', async () => {
-      const result = await client.getAll('cdn/stories', {});
-      expect(result.length).toBeGreaterThan(0);
-    });
-
-    it('getAll(\'cdn/stories\') should return all stories with filtered results', async () => {
-      const result = await client.getAll('cdn/stories', {
-        starts_with: 'testcontent-0',
-      });
-      expect(result.length).toBe(1);
-    });
-
-    it('getAll(\'cdn/stories\', filter_query: { __or: [{ category: { any_in_array: \'Category 1\' } }, { category: { any_in_array: \'Category 2\' } }]}) should return all stories with the specific filter applied', async () => {
-      const result = await client.getAll('cdn/stories', {
-        filter_query: {
-          __or: [
-            { category: { any_in_array: 'Category 1' } },
-            { category: { any_in_array: 'Category 2' } },
-          ],
-        },
-      });
-      expect(result.length).toBeGreaterThan(0);
-    });
-
-    it('getAll(\'cdn/stories\', {by_slugs: \'folder/*\'}) should return all stories with the specific filter applied', async () => {
-      const result = await client.getAll('cdn/stories', {
-        by_slugs: 'folder/*',
-      });
-      expect(result.length).toBeGreaterThan(0);
-    });
+  it('returns at least one published story', async () => {
+    const { data } = await client.get('cdn/stories');
+    expect(data.stories.length).toBeGreaterThan(0);
+  });
 
-    it('getAll(\'cdn/links\') should return all links', async () => {
-      const result = await client.getAll('cdn/links', {});
-      expect(result.length).toBeGreaterThan(0);
-    });
+  it('returns a specific story by slug', async () => {
+    const { data } = await client.get('cdn/stories/testcontent-0');
+    expect(data.story.slug).toBe('testcontent-0');
   });
 
-  describe('caching', () => {
-    it('get(\'cdn/spaces/me\') should not be cached', async () => {
-      const provider = client.cacheProvider();
-      await provider.flush();
-      await client.get('cdn/spaces/me');
-      expect(Object.values(provider.getAll()).length).toBe(0);
+  it('resolves relations against real content', async () => {
+    const { data } = await client.get('cdn/stories/testcontent-0', {
+      resolve_relations: 'root.author',
     });
+    expect(data.story.content.author[0].slug).toBe('edgar-allan-poe');
+  });
 
-    it('get(\'cdn/stories\') should be cached when is a published version', async () => {
-      const cacheVersion = client.cacheVersion();
-
-      await client.get('cdn/stories');
-
-      expect(cacheVersion).not.toBe(undefined);
-
-      const newCacheVersion = client.cacheVersion();
-
-      await client.get('cdn/stories');
-
-      expect(newCacheVersion).toBe(client.cacheVersion());
-
-      await client.get('cdn/stories');
+  it('returns stories matching a by_slugs wildcard', async () => {
+    const { data } = await client.get('cdn/stories', { by_slugs: 'folder/*' });
+    expect(data.stories.length).toBeGreaterThan(0);
+  });
 
-      expect(newCacheVersion).toBe(client.cacheVersion());
-    });
+  it('paginates through all stories with getAll', async () => {
+    const result = await client.getAll('cdn/stories', {});
+    expect(result.length).toBeGreaterThan(0);
   });
 });