add tests for some mutations

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -124,8 +124,8 @@ function AppCore() {
                 </a>
 
                 <button
-                  onClick={() => deletePostMutation.client.mutate({ params: { id: post.id } })}
-                  // disabled={deletePostMutation.client.isMutating() > 0}
+                  onClick={() => deletePostMutation.client.mutate({ params: { id: post.id } }).catch(() => {})}
+                  disabled={deletePostMutation.client.isMutating({ params: { id: post.id } }) > 0}
                 >
                   Delete
                 </button>

examples/vite/tests/Render.test.tsx

@@ -33,3 +33,42 @@ test('Loads next page when clicked', async () => {
   await loadBtn.click();
   await expect.element(getByText('Load next page')).not.toBeInTheDocument();
 });
+
+test('Deletes posts immediately on clicking delete button', async () => {
+  const { getByText } = render(<App />);
+
+  const el = getByText('1 - 10 Tips for Better Time Management');
+
+  await expect.element(el).toBeInTheDocument();
+  await getByText('Delete').nth(1).click();
+
+  await expect.element(el).not.toBeInTheDocument();
+});
+
+test('Deletes deletes but reverts the deletion after server fails', async () => {
+  const { getByText } = render(<App />);
+
+  const el = getByText('0 - Exploring the Future of AI');
+
+  await expect.element(el).toBeInTheDocument();
+  await getByText('Delete').nth(0).click();
+
+  await expect.element(el).not.toBeInTheDocument();
+
+  await expect.element(el, { timeout: 4000 }).toBeInTheDocument();
+  await expect.element(getByText('Error deleting post')).toBeInTheDocument();
+});
+
+test('Posts deleted in other tabs are synced', async () => {
+  const { getByText } = render(<App />);
+
+  const el = getByText('1 - 10 Tips for Better Time Management');
+
+  await expect.element(el).toBeInTheDocument();
+
+  // Simulate delete in another tab and send sync message
+  await fetch(`${baseUrl}/posts/1`, { method: 'DELETE' });
+  new BroadcastChannel('react-query-builder-tags').postMessage({ type: 'invalidate', data: [{ type: 'posts' }] });
+
+  await expect.element(el).not.toBeInTheDocument();
+});

packages/react-query-builder/src/builder/QueryBuilder.ts

@@ -93,7 +93,7 @@ export class QueryBuilder<
   ): QueryBuilder<TVars, TData, TError, TKey, TTags, TFlags | 'withClient'> {
     let syncChannel: BroadcastChannel | undefined = undefined;
 
-    if (syncTagsWithOtherTabs) {
+    if (syncTagsWithOtherTabs && typeof BroadcastChannel !== 'undefined') {
       syncChannel = new BroadcastChannel('react-query-builder-tags');
       syncChannel.addEventListener('message', (event) => {
         const { type, data } = event.data;

packages/react-query-builder/src/builder/QueryBuilderFrozen.ts

@@ -277,14 +277,18 @@ export class QueryBuilderFrozen<
     vars,
     filters,
   ) => {
+    const baseKey = this.preprocessVars(this.mergeVars([this.config.vars, vars]));
+
     return {
       mutationKey: this.getMutationKey(),
       ...filters,
       predicate: (m) => {
         if (filters?.predicate && !filters.predicate(m)) return false;
         if (vars == null) return true;
         if (!m.state.variables) return false;
-        return areKeysEqual([m.state.variables], [vars], this.config.queryKeySanitizer);
+
+        const curKey = this.preprocessVars(this.mergeVars([this.config.vars, m.state.variables]));
+        return areKeysEqual([curKey], [baseKey], this.config.queryKeySanitizer);
       },
     };
   };