Jsdom: HTML5 फॉर्म सत्यापन

मैं सहमत हूं कि यह अच्छा होगा और महत्वपूर्ण है। हालाँकि, यह काफी उपक्रम होने वाला है।

इसके लिए सबसे बड़ी जरूरत एक ठोस परीक्षण सूट है। यदि आप Contributing.md दिशा-निर्देशों में देखते हैं, तो कुछ संकेत हैं कि उन्हें कहाँ खोजा जाए, या इसे विफल करने के लिए, कौन सी मेलिंग सूची पूछनी है। यदि आप उन्हें खोद सकते हैं, तो मुझे लगता है कि इसे लागू करने के लिए हमारे पास एक शॉट है, खासकर जब आप एच 5 एफ को शुरुआती बिंदु के रूप में उपयोग करके इंगित करते हैं।

वास्तविक कार्यान्वयन का एकमात्र अन्य महत्वपूर्ण हिस्सा यह है कि हमारे पास DOM स्तर 3 से परे चीजों को लागू करने के लिए उचित "स्तर 4" या "एचटीएमएल 5" फ़ोल्डर नहीं है। लेकिन यह कुछ ऐसा है जिसकी हमें थोड़ी देर के लिए आवश्यकता है, इसलिए मैं कोशिश करूंगा उस पर जल्दी पहुंचने के लिए।

: +1: यह एक बड़ी विशेषता होगी।

अभी मैं jsdom सेटअप के बाद https://github.com/hyperform/hyperform को पॉलीफिल के रूप में जोड़ रहा हूं। यह बहुत अच्छा काम करता है।

वाह! मैं हाइपरफॉर्म का लेखक हूं। और भाग्य के रूप में, मैं एक परीक्षण वातावरण स्थापित करने के लिए पहले से ही JSDom का उपयोग करता हूं।

वह हिस्सा जो JSDom अनुरक्षकों के लिए दिलचस्प हो सकता है: मैंने JSDom के अंदर हाइपरफॉर्म का उपयोग करने के साथ-साथ, उपयुक्त वेब प्लेटफ़ॉर्म परीक्षणों को कवर करने के लिए भी खेला:

$ git diff test/web-platform-tests/create-jsdom.js
diff --git a/test/web-platform-tests/create-jsdom.js b/test/web-platform-tests/create-jsdom.js
index 7009df7..9edcb16 100644
--- a/test/web-platform-tests/create-jsdom.js
+++ b/test/web-platform-tests/create-jsdom.js
@@ -1,5 +1,6 @@
 "use strict";
 const jsdom = require("../..");
+const hyperform = require("hyperform");
 const nodeResolverPromise = require("../util").nodeResolverPromise;

 const globalPool = { maxSockets: 6 };
@@ -35,6 +36,9 @@ module.exports = (urlPrefix, testPath) => {

   return created
   .then(window => {
+    global.window = window;
+    global.document = window.document;
+    hyperform(window);
     return new Promise((resolve, reject) => {
       const errors = [];

और test/web-platform-tests/index.js में "html/semantics/forms/constraints/*.html" परीक्षणों में असम्बद्धता।

दुर्भाग्य से मुझे हरे रंग में बदलने के लिए केवल कुछ परीक्षण मामले मिले। लेकिन अगर आप JSDom में हाइपरफॉर्म की विशेषताओं को जोड़ने में रुचि रखते हैं, तो मैं कुछ और काम करूंगा

ए) उन परीक्षणों को पास करने के लिए, और
बी) हाइपरफॉर्म का एक संस्करण या कॉन्फ़िगरेशन प्रदान करना, जिसमें उच्च स्तरीय एपीआई शामिल नहीं है

एफडब्ल्यूआईडब्ल्यू, मुझे इसमें काफी दिलचस्पी है; मैं एक वू घटक पर काम कर रहा हूं जो एक JSON स्कीमा के आधार पर एक फॉर्म प्रस्तुत करता है, और जमा करने पर सत्यापन स्थिति उत्पन्न करने के लिए वैधता API पर निर्भर करता है। मेरे यूनिट परीक्षण जेस्ट के साथ चलाए जाते हैं (जो हुड के नीचे जेएसडीओएम का उपयोग करता है), और अभी तक मैं इस हिस्से का परीक्षण करने में असमर्थ हूं।

@ बोल्डविन अगर मेरे मामले के बारे में आपके पास कोई सुझाव है, तो मैं इसे सहर्ष स्वीकार करूंगा। हो सकता है कि मैं इसे लागू करने में भी कुछ मदद दे सकूं, अगर शुरू करने के लिए कुछ मार्गदर्शन दिया जाए :)

संपादित करें: मैंने नीचे @EricHenry के समाधान का उपयोग किया, और यह काम कर गया। मुझे बस checkValidity को HTMLInputElement , HTMLSelectElement , और HTMLTextAreaElement के लिए भी सेट करना था (और वास्तव में HTMLFormElement के साथ बेला करने की आवश्यकता नहीं थी

जेस्ट और एंजाइम का उपयोग करते हुए रिएक्ट घटकों का परीक्षण करते समय इस समस्या वाले किसी भी व्यक्ति के लिए मैं @fernandopasik और @Boldewyn द्वारा उल्लिखित हाइपरफॉर्म पैकेज का उपयोग करके JSDOM को पॉलीफिल करने में सक्षम था।

अपनी परीक्षण फ़ाइल में आप हाइपरफॉर्म स्थापित करने के बाद निम्न कार्य कर सकते हैं।

import * as hyperform from 'hyperform';

var global = global;

const defineValidity = {
  get() {
    return hyperform.ValidityState(this);
  },
  configurable: true
};

global.HTMLFormElement.prototype.checkValidity = function() {
  return hyperform.checkValidity(this);
};

Object.defineProperty(global.HTMLFormElement.prototype, 'validity', defineValidity);
Object.defineProperty(global.HTMLInputElement.prototype, 'validity', defineValidity);
Object.defineProperty(global.HTMLSelectElement.prototype, 'validity', defineValidity);
Object.defineProperty(global.HTMLTextAreaElement.prototype, 'validity', defineValidity);

आप किसी भी अन्य HTMLElements के लिए उसी विधि का अनुसरण कर सकते हैं जिसे आपको संशोधित करने की आवश्यकता हो सकती है या कोई अन्य विशेषता जिसे आपको पॉलीफ़िल करने की आवश्यकता है।

पीआर #2142 बिना किसी पॉलीफिल के पूर्ण बाधा एपीआई लागू करता है

जेस्ट डॉक्स मॉकिंग विधियों का सुझाव देता है जिन्हें JSDOM में लागू नहीं किया गया है । मुझे लगता है कि परीक्षणों के कारण आपके पर्यावरण को प्रदूषित करने की तुलना में यह एक क्लीनर समाधान है।

मेरे विशिष्ट मामले में, मुझे एक फॉर्म को सत्यापित करने और फिर एक निश्चित वर्ग की उपस्थिति के लिए फॉर्म के classList का निरीक्षण करने की आवश्यकता थी, जिसकी उपस्थिति मुझे फॉर्म की वैधता के बारे में सूचित करेगी।

मेरा समाधान फॉर्म के गुणों का मज़ाक उड़ाना था, उदाहरण के लिए classList संपत्ति के लिए $ DOMTokenList के मूल कार्यान्वयन का मज़ाक उड़ाना

beforeAll(() => {
    window.DOMTokenList = jest.fn().mockImplementation(() => {
        return {
            list: [],
            remove: jest.fn().mockImplementation(function (item) {
                const idx = this.list.indexOf(item);

                if (idx > -1) {
                    this.list.splice(idx, 1)
                }
            }),
            add: jest.fn().mockImplementation(function (item) {
                this.list.push(item);
            }),
            contains: jest.fn().mockImplementation(function (item) {
                return this.list.indexOf(item) > -1;
            })
        };
    });
})

तब मैंने इवेंट हैंडलर को गुण पास करने के लिए इसका इस्तेमाल किया। मैं event.currentTarget.form . के साथ सबमिट बटन से अपने प्रतिक्रिया घटक में फॉर्म तक पहुंचने में सक्षम हूं

let mockClassList = new DOMTokenList();

submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => false,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    })

यह मुझे फॉर्म की वैधता को गलत और सत्य पर सेट करने की अनुमति देता है, और हर बार was-validated वर्ग की उपस्थिति के लिए mockClassList का निरीक्षण करता है

    submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => false,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    });

    expect(mockClassList.contains('was-validated')).toBeTruthy();

    submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => true,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    });

    expect(mockClassList.contains('was-validated')).toBeFalsy();

एफवाईआई: मैं इसके लिए एंजाइम के उथले प्रतिपादन का उपयोग कर रहा हूं, माउंट इस समाधान के साथ काम नहीं कर रहा है। हालांकि, मुझे लगता है कि जेएसडीओएम में लागू नहीं किए गए तरीकों का मजाक उड़ाने के लिए अन्य सुझाव, जब विधि को सीधे परीक्षण फ़ाइल विवरण में निष्पादित किया जाता है, तो बस माउंट प्रतिपादन के साथ काम कर सकता है

मुझे input.validity की समस्या है जो मेरे लिए j [email protected] में उपलब्ध नहीं है।

// EditableInput.js:
this.inputElement = React.createRef();
...
const input = this.inputElement.current;
console.error('input.validity: ', input.validity);

// EditableInput.test.js run outcome:
    console.error src/components/Form/Input/EditableInput.js:47
      input.validity:  undefined

// yarn.lock:
jsdom@^11.5.1:
  version "11.12.0"
  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==

मैं देखता हूं कि जिस संस्करण को यह तय किया जाना चाहिए था वह 11.8.0 है क्योंकि इसे जारी किया गया था जिस दिन पीआर वैधता पूर्णांक के साथ विलय कर दिया गया था। क्या मैं कुछ भूल रहा हूँ?