Merge pull request #191 from JoaoBrlt/master

feat: add options to ignore query params
linearlabs-workspace · Sep 19, 2023 · 7ae2a63 · 7ae2a63
2 parents e7b15b7 + 9e1a104
commit 7ae2a63
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 # IDE files
+.idea
 .vscode
 
 # dependencies

diff --git a/packages/mock-addon-docs/stories/docs/advanced-setup.stories.mdx b/packages/mock-addon-docs/stories/docs/advanced-setup.stories.mdx
@@ -20,12 +20,13 @@ You can set <strong>global configuration</strong> for the addon. Go to the `.sto
 
 
 
-| Property   | Description                                                                                 | Default |
-| ---------- | :------------------------------------------------------------------------------------------ | :------ |
-| `globalMockData` | An array of mock objects which will add in every story |   []    |
-| `refreshStoryOnUpdate`   |  This property re-renders the story if there's any data changes |  false |
-| `disableUsingOriginal`   |  This property disables the toggle (on/off) option to use the original endpoint |  false |
-| `disable`   |  This property disables the panel from all the stories |  false |
+| Property                 | Description                                                                    | Default |
+| ------------------------ | :----------------------------------------------------------------------------- | :------ |
+| `globalMockData`         | An array of mock objects which will add in every story                         | []      |
+| `ignoreQueryParams`      | Whether or not to ignore query parameters globally                             | false   |
+| `refreshStoryOnUpdate`   | This property re-renders the story if there's any data changes                 | false   |
+| `disableUsingOriginal`   | This property disables the toggle (on/off) option to use the original endpoint | false   |
+| `disable`                | This property disables the panel from all the stories                          | false   |
 
 
 ```js
@@ -39,6 +40,7 @@ export const parameters = {
       status: 201,
       response: {},
     }],
+    ignoreQueryParams: true, // Whether or not to ignore query parameters globally
     refreshStoryOnUpdate: true, // This property re-renders the story if there's any data changes
     disableUsingOriginal: false, // This property disables the toggle (on/off) option to use the original endpoint
     disable: true, // This property disables the panel from all the stories

diff --git a/packages/mock-addon/src/utils/faker.js b/packages/mock-addon/src/utils/faker.js
@@ -31,6 +31,7 @@ export class Faker {
         global.XMLHttpRequest = this.MockXhr;
 
         this.requestMap = {};
+        this.ignoreQueryParams = false;
     }
 
     getRequests = () => Object.values(this.requestMap);
@@ -51,6 +52,10 @@ export class Faker {
         });
     };
 
+    setIgnoreQueryParams = (value) => {
+        this.ignoreQueryParams = value;
+    };
+
     add = (request) => {
         const { path, searchParamKeys } = getNormalizedUrl(request.url);
         const key = this.getKey(path, searchParamKeys, request.method);
@@ -102,7 +107,7 @@ export class Faker {
             if (
                 match(requestPath)(path) &&
                 method == requestMethod &&
-                arrayEquals(searchParamKeys, requestSearchKeys) &&
+                this.matchQueryParams(searchParamKeys, requestSearchKeys) &&
                 !this.requestMap[key].skip
             ) {
                 return this.requestMap[key];
@@ -112,6 +117,13 @@ export class Faker {
         return null;
     };
 
+    matchQueryParams = (searchParams, requestSearchParams) => {
+        return (
+            this.ignoreQueryParams ||
+            arrayEquals(searchParams, requestSearchParams)
+        );
+    };
+
     mockFetch = (input, options) => {
         const request = new Request(input, options);
         const { url, method } = request;
@@ -237,6 +249,7 @@ export class Faker {
 
     restore = () => {
         this.requestMap = {};
+        this.ignoreQueryParams = false;
     };
 }
 

diff --git a/packages/mock-addon/src/utils/faker.test.js b/packages/mock-addon/src/utils/faker.test.js
@@ -200,15 +200,38 @@ describe('Faker - matchMock', () => {
             response: {},
             delay: 0,
         },
+        {
+            url: 'http://request3.com?foo=1&bar=2',
+            method: 'GET',
+            status: 200,
+            response: {},
+            delay: 0,
+        },
+        {
+            url: 'http://request4.com',
+            method: 'GET',
+            status: 200,
+            response: {},
+            delay: 0,
+            ignoreQueryParams: true,
+        },
+        {
+            url: 'http://request5.com?foo=1&bar=2',
+            method: 'GET',
+            status: 200,
+            response: {},
+            delay: 0,
+            ignoreQueryParams: true,
+        },
     ];
 
     const [faker, resetMock] = setupMockFaker();
 
-    beforeAll(() => {
+    beforeEach(() => {
         faker.makeInitialRequestMap(requests);
     });
 
-    afterAll(() => {
+    afterEach(() => {
         resetMock();
     });
 
@@ -230,6 +253,100 @@ describe('Faker - matchMock', () => {
         expect(actual.method).toEqual(requests[2].method);
         expect(actual.skip).toEqual(false);
     });
+
+    it('should return request if url and query parameters match', () => {
+        const actual = faker.matchMock(
+            'http://request3.com?foo=1&bar=2',
+            'GET'
+        );
+        expect(actual.url).toEqual(requests[3].url);
+        expect(actual.method).toEqual(requests[3].method);
+        expect(actual.skip).toEqual(false);
+    });
+
+    it('should return request if url and query parameters match with different order', () => {
+        const actual = faker.matchMock(
+            'http://request3.com?bar=2&foo=1',
+            'GET'
+        );
+        expect(actual.url).toEqual(requests[3].url);
+        expect(actual.method).toEqual(requests[3].method);
+        expect(actual.skip).toEqual(false);
+    });
+
+    it('should return null if unexpected query parameters are provided', () => {
+        const actual = faker.matchMock('http://request.com?foo=1', 'GET');
+        expect(actual).toBeNull();
+    });
+
+    it('should return null if query parameters are missing', () => {
+        const actual = faker.matchMock('http://request3.com?baz=1', 'GET');
+        expect(actual).toBeNull();
+    });
+
+    it('should return request if unexpected query parameters are provided but are globally ignored', () => {
+        faker.setIgnoreQueryParams(true);
+        const actual = faker.matchMock('http://request.com?foo=1', 'GET');
+        expect(actual.url).toEqual(requests[0].url);
+        expect(actual.method).toEqual(requests[0].method);
+        expect(actual.skip).toEqual(false);
+    });
+
+    it('should return request if query parameters are missing but are globally ignored', () => {
+        faker.setIgnoreQueryParams(true);
+        const actual = faker.matchMock('http://request3.com?baz=1', 'GET');
+        expect(actual.url).toEqual(requests[3].url);
+        expect(actual.method).toEqual(requests[3].method);
+        expect(actual.skip).toEqual(false);
+    });
+});
+
+describe('Faker - matchQueryParams', () => {
+    const [faker, resetMock] = setupMockFaker();
+
+    afterEach(() => {
+        resetMock();
+    });
+
+    it('should return true if query parameters match', () => {
+        const actual = faker.matchQueryParams(
+            ['foo', 'bar'],
+            ['foo', 'bar'],
+            false
+        );
+        expect(actual).toBe(true);
+    });
+
+    it('should return true if query parameters match with different order', () => {
+        const actual = faker.matchQueryParams(
+            ['foo', 'bar'],
+            ['bar', 'foo'],
+            false
+        );
+        expect(actual).toBe(true);
+    });
+
+    it('should return false if unexpected query parameters are provided', () => {
+        const actual = faker.matchQueryParams([], ['foo'], false);
+        expect(actual).toBe(false);
+    });
+
+    it('should return false if query parameters are missing', () => {
+        const actual = faker.matchQueryParams(['foo', 'bar'], ['baz'], false);
+        expect(actual).toBe(false);
+    });
+
+    it('should return true if unexpected query parameters are provided but are globally ignored', () => {
+        faker.setIgnoreQueryParams(true);
+        const actual = faker.matchQueryParams([], ['foo'], false);
+        expect(actual).toBe(true);
+    });
+
+    it('should return true if query parameters are missing but are globally ignored', () => {
+        faker.setIgnoreQueryParams(true);
+        const actual = faker.matchQueryParams([], ['foo'], false);
+        expect(actual).toBe(true);
+    });
 });
 
 describe('restore', () => {

diff --git a/packages/mock-addon/src/withRoundTrip.js b/packages/mock-addon/src/withRoundTrip.js
@@ -19,9 +19,14 @@ export const withRoundTrip = (storyFn, context) => {
         refreshStoryOnUpdate: false,
         globalMockData: [],
         disableUsingOriginal: false,
+        ignoreQueryParams: false,
     });
-    const { globalMockData, refreshStoryOnUpdate, disableUsingOriginal } =
-        mockAddonConfigs;
+    const {
+        globalMockData,
+        refreshStoryOnUpdate,
+        disableUsingOriginal,
+        ignoreQueryParams,
+    } = mockAddonConfigs;
     const data = [...globalMockData, ...paramData];
 
     /**
@@ -30,6 +35,7 @@ export const withRoundTrip = (storyFn, context) => {
      */
     if (INITIAL_MOUNT_STATE) {
         faker.makeInitialRequestMap(data);
+        faker.setIgnoreQueryParams(ignoreQueryParams);
 
         channel.emit(EVENTS.SEND, {
             mockData: faker.getRequests(),
@@ -59,10 +65,13 @@ export const withRoundTrip = (storyFn, context) => {
      */
     if (STORY_CHANGED_STATE) {
         faker.makeInitialRequestMap(data);
+        faker.setIgnoreQueryParams(ignoreQueryParams);
+
         channel.emit(EVENTS.SEND, {
             mockData: faker.getRequests(),
             disableUsingOriginal,
         });
+
         STORY_CHANGED_STATE = false;
     }
     return storyFn(context);