Open Time

Cette IA semble plutôt bien fonctionner avec le code, d’après ce que je vois passer sur le net, à la condition bien sûr d’être derrière prêt à vérifier et corriger ce qu’elle produit ; mais ça reste intéressant !

Ce matin j’ai voulu tester quelque chose de spécifique, alors j’ai pris une des fonctions Javascript présente dans Dotclear, fonction qui utilise jQuery et j’ai demandé à ChatGPT de me ré-écrire ladite fonction en javascript pur :

Rewrite this jquery function without using jquery…

Avec le code de la fonction :

dotclear.condSubmit = (chkboxes, target) => {
  const checkboxes = $(chkboxes);
  const submitButt = $(target);
  if (checkboxes === undefined || submitButt === undefined) {
    return;
  }

  // Set initial state
  submitButt.attr('disabled', !checkboxes.is(':checked'));
  if (checkboxes.is(':checked')) {
    submitButt.removeClass('disabled');
  } else {
    submitButt.addClass('disabled');
  }

  checkboxes.on('click', () => {
    // Update target state
    submitButt.attr('disabled', !checkboxes.is(':checked'));
    if (checkboxes.is(':checked')) {
      submitButt.removeClass('disabled');
    } else {
      submitButt.addClass('disabled');
    }
  });
};

Sa réponse est ci-dessous :

function condSubmit(chkboxes, target) {
  const checkboxes = document.querySelectorAll(chkboxes);
  const submitButt = document.querySelector(target);
  if (checkboxes === undefined || submitButt === undefined) {
    return;
  }

  // Set initial state
  submitButt.disabled = !checkboxes.some(checkbox => checkbox.checked);
  if (checkboxes.some(checkbox => checkbox.checked)) {
    submitButt.classList.remove('disabled');
  } else {
    submitButt.classList.add('disabled');
  }

  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click', () => {
      // Update target state
      submitButt.disabled = !checkboxes.some(checkbox => checkbox.checked);
      if (checkboxes.some(checkbox => checkbox.checked)) {
        submitButt.classList.remove('disabled');
      } else {
        submitButt.classList.add('disabled');
      }
    });
  });
}

Pas mal, même s’il y a quelques optimisations à faire — sur le code original aussi d’ailleurs, mais ça n’est pas le sujet du test et quelques erreurs à corriger.

En effet querySelectorAll() renvoie un objet NodeList sur lequel la méthode some() n’existe pas. Il faut passer par un Array.from() pour pouvoir le faire.

Par ailleurs querySelectorAll() ne renvoie pas undefined si la recherche n’aboutit pas, mais un objet NodeList vide et querySelector() renvoie null plutôt que undefined si la recherche n’aboutit pas. Il faut donc corriger le test qui permet de quitter la fonction si une des deux recherches n’aboutit pas.

Le code, une fois vérifié et corrigé ressemble plutôt à ça :

dotclear.condSubmit = (chkboxes, target) => {
  const checkboxes = Array.from(document.querySelectorAll(chkboxes));
  const submitButt = document.querySelector(target);
  if (checkboxes.length === 0 || submitButt === null) {
    return;
  }

  // Set initial state
  submitButt.disabled = !checkboxes.some((checkbox) => checkbox.checked);
  if (submitButt.disabled) {
    submitButt.classList.add('disabled');
  } else {
    submitButt.classList.remove('disabled');
  }

  checkboxes.forEach((checkbox) => {
    checkbox.addEventListener('click', () => {
      // Update target state
      submitButt.disabled = !checkboxes.some((checkbox) => checkbox.checked);
      if (submitButt.disabled) {
        submitButt.classList.add('disabled');
      } else {
        submitButt.classList.remove('disabled');
      }
    });
  });
};

Du coup je vais pousser cette modification, autant se passer de jQuery tant qu’on peut, sachant qu’il faudra tout de même prendre la précaution de vérifier que basculer de $(target) (par exemple) est bien équivalent à document.querySelector(target) dans le cadre où c’est utilisé car jQuery considère comme identifiant l’attribut name d’un élément HTML alors que Javascript pas. Dis autrement, il faut un id=value pour que ça fonctionne si la chaîne de sélection comporte un #value !

Conclusion, l’IA mâche bien le boulot, mais il faut un développeur derrière pour vérifier et corriger ce qui doit l’être !

PS : J’ai aussi vu passer un billet de blog (me souviens plus où mais ça n’est pas grave) où l’auteur explique s’en servir pour générer le code de tests unitaires ; peut-être quelque chose à tester aussi.