What is the process for monkeypatching the `querySelector` implementations for individual elements and documents, and then reverting them back to their original states?

Question

What is the process for monkeypatching the `querySelector` implementations for individual elements and documents, and then reverting them back to their original states?

Creating a local testing environment requires the temporary override of querySelector. Despite knowing that monkeypatching is generally frowned upon, in this specific instance, the code will only be utilized locally by developers. The following snippet has been crafted to achieve this (it overrides querySelector to retrieve all selectors containing another substring named addonID):

  function maybeOverrideForTestStart(partialIDOfWidget, fullIDOfWidget) {
    if(!isLocal) return;
    const addonID = fullIDOfWidget.replace(partialIDOfWidget, "");
    Element.prototype.querySelectorTemp = Element.prototype.querySelector.bind(Element);
    
    Element.prototype.querySelector = function(selector) {
      const element = this.querySelectorTemp(selector);
      if (element) return element;
      if (addonID) {
        return this.querySelectorTemp(selector + addonID) || null;
      }
    };

  }
  function maybeOverrideForTestEnd() {
    if(!isLocal) return;
    Element.prototype.querySelector = Element.querySelectorTemp;
  }

The maybeOverrideForTestStart function is called at the start of testing, while maybeOverrideForTestEnd is called at the end. However, the setup does not seem to be functioning properly and the issue remains unclear. Errors like

someElement.querySelector is not a function

or

"Uncaught TypeError: Illegal invocation"

are being encountered.

An additional concern is whether this override impacts document.querySelector and document.body.querySelector as well, or is limited to someElement.querySelector.

Your assistance in resolving this matter would be highly appreciated. Thank you.

javascript monkeypatching queryselector defineproperty propertydescriptor

Answer 1

Answer №1

I propose renaming maybeOverrideForTestStart to patchQuerySelectors as its functionality also changes.

To successfully redefine/patch the modified implementations of querySelector (this needs to be done for both Document.prototype and Element.prototype) and to accurately restore each default state, it is essential to choose an approach utilizing the property descriptor of each prototypal querySelector. The function patches each modified version while also providing a function that reverts each setting back to its original state using Object.defineProperty.

// Applying the monkey patch.
const restoreDefaults = patchQuerySelectors(true, 'bar_123', 'foo');

console.log(
  'after patching ... ', {
  restoreDefaults,
  elementQuery: Element.prototype.querySelector,
  documentQuery: Document.prototype.querySelector,
});

// Utilizing the patched/modified versions of `querySelector`.
console.log(
  "document.querySelector('body') ...",
  document.querySelector('body'),
);
console.log(
  "document.body.querySelector('script') ...",
  document.body.querySelector('script'),
);

// Restoring each specific `querySelector` to its correct default.
restoreDefaults();

console.log(
  'after restoring ... ', {
  elementQuery: Element.prototype.querySelector,
  documentQuery: Document.prototype.querySelector,
});

// Using the restored versions of `querySelector`
console.log(
  "document.querySelector('body') ...",
  document.querySelector('body'),
);
console.log(
  "document.body.querySelector('script') ...",
  document.body.querySelector('script'),
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

<script>
// Ensuring proper implementation of the monkey patch.

function patchQuerySelectors(isLocal, partialIDOfWidget, fullIDOfWidget) {
  if (!isLocal) return;

  const addonID = fullIDOfWidget.replace(partialIDOfWidget, "");
  const {
    // Original/native implementation
    value: elementQuery,
    // Descriptor of the native implementation
    ...elementConfig
  } = Object.getOwnPropertyDescriptor(Element.prototype, 'querySelector');

  const {
    value: documentQuery,
    ...documentConfig
  } = Object.getOwnPropertyDescriptor(Document.prototype, 'querySelector');

  // Modified element specific `querySelector` implementation
  function modifiedElementQuery(selector) {

    // Apply the correct context to the original version
    const element = elementQuery.call(this, selector);

    if (element) {
      return element;
    }
    if (addonID) {
    // Apply the correct context to the original version
      return elementQuery.call(this, selector + addonID);
    }
  };
  // Modified document specific `querySelector` implementation
  function modifiedDocumentQuery(selector) {
    const element = documentQuery.call(this, selector);

    if (element) {
      return element;
    }
    if (addonID) {
      return documentQuery.call(this, selector + addonID);
    }
  };

  // Redefine the properties via the default descriptors and the newly assigned modified functions
  Object
    .defineProperty(Element.prototype, 'querySelector', {
      value: modifiedElementQuery,
      ...elementConfig
    });
  Object
    .defineProperty(Document.prototype, 'querySelector', {
      value: modifiedDocumentQuery,
      ...documentConfig
    });

  function restoreDefaults() {
    // Redefine/restore the properties via the default descriptors and the locally stored original `querySelector` implementations
    Object
      .defineProperty(Element.prototype, 'querySelector', {
        value: elementQuery,
        ...elementConfig,
      });
    Object
      .defineProperty(Document.prototype, 'querySelector', {
        value: documentQuery,
        ...documentConfig,
      });
  }
  return restoreDefaults;
}
</script>

Answer 2

I propose renaming maybeOverrideForTestStart to patchQuerySelectors as its functionality also changes.

To successfully redefine/patch the modified implementations of querySelector (this needs to be done for both Document.prototype and Element.prototype) and to accurately restore each default state, it is essential to choose an approach utilizing the property descriptor of each prototypal querySelector. The function patches each modified version while also providing a function that reverts each setting back to its original state using Object.defineProperty.

// Applying the monkey patch.
const restoreDefaults = patchQuerySelectors(true, 'bar_123', 'foo');

console.log(
  'after patching ... ', {
  restoreDefaults,
  elementQuery: Element.prototype.querySelector,
  documentQuery: Document.prototype.querySelector,
});

// Utilizing the patched/modified versions of `querySelector`.
console.log(
  "document.querySelector('body') ...",
  document.querySelector('body'),
);
console.log(
  "document.body.querySelector('script') ...",
  document.body.querySelector('script'),
);

// Restoring each specific `querySelector` to its correct default.
restoreDefaults();

console.log(
  'after restoring ... ', {
  elementQuery: Element.prototype.querySelector,
  documentQuery: Document.prototype.querySelector,
});

// Using the restored versions of `querySelector`
console.log(
  "document.querySelector('body') ...",
  document.querySelector('body'),
);
console.log(
  "document.body.querySelector('script') ...",
  document.body.querySelector('script'),
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

<script>
// Ensuring proper implementation of the monkey patch.

function patchQuerySelectors(isLocal, partialIDOfWidget, fullIDOfWidget) {
  if (!isLocal) return;

  const addonID = fullIDOfWidget.replace(partialIDOfWidget, "");
  const {
    // Original/native implementation
    value: elementQuery,
    // Descriptor of the native implementation
    ...elementConfig
  } = Object.getOwnPropertyDescriptor(Element.prototype, 'querySelector');

  const {
    value: documentQuery,
    ...documentConfig
  } = Object.getOwnPropertyDescriptor(Document.prototype, 'querySelector');

  // Modified element specific `querySelector` implementation
  function modifiedElementQuery(selector) {

    // Apply the correct context to the original version
    const element = elementQuery.call(this, selector);

    if (element) {
      return element;
    }
    if (addonID) {
    // Apply the correct context to the original version
      return elementQuery.call(this, selector + addonID);
    }
  };
  // Modified document specific `querySelector` implementation
  function modifiedDocumentQuery(selector) {
    const element = documentQuery.call(this, selector);

    if (element) {
      return element;
    }
    if (addonID) {
      return documentQuery.call(this, selector + addonID);
    }
  };

  // Redefine the properties via the default descriptors and the newly assigned modified functions
  Object
    .defineProperty(Element.prototype, 'querySelector', {
      value: modifiedElementQuery,
      ...elementConfig
    });
  Object
    .defineProperty(Document.prototype, 'querySelector', {
      value: modifiedDocumentQuery,
      ...documentConfig
    });

  function restoreDefaults() {
    // Redefine/restore the properties via the default descriptors and the locally stored original `querySelector` implementations
    Object
      .defineProperty(Element.prototype, 'querySelector', {
        value: elementQuery,
        ...elementConfig,
      });
    Object
      .defineProperty(Document.prototype, 'querySelector', {
        value: documentQuery,
        ...documentConfig,
      });
  }
  return restoreDefaults;
}
</script>

Answer 3

Answer №2

If you're uncertain about the necessity to use .bind() on the function, one alternative approach could be to store a reference to the original function in a constant variable like this:

const querySelector = Element.prototype.querySelector;

function maybeOverrideForTestStart(partialIDOfWidget, fullIDOfWidget) {
  // ....

  Element.prototype.querySelector = function (selector) {
    const element = querySelector(selector);
    if (element) return element;
    if (addonID) {
      return querySelectorTemp(selector + addonID) || null;
    }
  };
}

function maybeOverrideForTestEnd() {
  // ...
  Element.prototype.querySelector = querySelector;
}

Answer 4

If you're uncertain about the necessity to use .bind() on the function, one alternative approach could be to store a reference to the original function in a constant variable like this:

const querySelector = Element.prototype.querySelector;

function maybeOverrideForTestStart(partialIDOfWidget, fullIDOfWidget) {
  // ....

  Element.prototype.querySelector = function (selector) {
    const element = querySelector(selector);
    if (element) return element;
    if (addonID) {
      return querySelectorTemp(selector + addonID) || null;
    }
  };
}

function maybeOverrideForTestEnd() {
  // ...
  Element.prototype.querySelector = querySelector;
}

What is the process for monkeypatching the `querySelector` implementations for individual elements and documents, and then reverting them back to their original states?

Answer №1

Answer №2

Similar questions

Tips on sending an array to material-ui dataSource props

Basic jQuery request for JSON data

What is the best way to add form input to a variable without triggering a refresh?

Invoking a class method through a dynamic function call with the use of setTimeout

JS Equal Heights is a JavaScript plugin designed to ensure

Error: Attempting to access a property of an undefined value, please verify the key name is

Navigating to an ASPX page with details from a clicked event in FullCalendar - A step-by-step guide

Creating connections between variables and elements in nested ngRepeats in Angular

An efficient way to retrieve a value quickly?getValue:""

When the HTML and PHP code keeps running, the JavaScript text on the page updates itself

Select just one picture for emphasis

Is there a way to make $ajax pause until data is received, then store it in a variable?

Tips for maintaining the latest HTML, CSS, and JS files in Angular2/4 frontend hosted on IIS

HTML forms default values preset

Remove console.log and alert statements from minified files using uglifyjs-folder

Utilizing JavaScript Callbacks in HTML Image Tags

Executing a function when clearing an autocomplete textfield in Material-UI

transpile TypeScript code into ES6 rather than ES5

Could we confirm if this straightforward string is considered valid JSON data?

Sequencing numerous promises (managing callbacks)