ठीक से (इकाई) परीक्षण कैसे करें ओम/प्रतिक्रिया घटक?

Question

मैंने ओम/रिएक्ट घटकों का विकास किया है, लेकिन मुझे वास्तव में असहज महसूस होता है कि यूनिट परीक्षणों के साथ मेरे विकास को चलाने में सक्षम नहीं है। मैंने उन क्लॉजर्सक्रिप्ट प्रोजेक्ट को उन घटकों पर यूनिट परीक्षण चलाने के लिए सेट करने का प्रयास किया है, और अब तक उस बिंदु तक पहुंच गया है जहां मैं यूनिट परीक्षण लिखने और अपने घटकों को तुरंत चालू करने में सक्षम हूं। जो कुछ मैं याद कर रहा हूं वह यह सुनिश्चित करने की क्षमता है कि मेरे घटकों को कुछ घटनाओं पर ठीक से प्रतिक्रिया दें, उदा। onChange ताकि मैं उपयोगकर्ता इनपुट अनुकरण कर सकूं।

यहाँ अपने परीक्षण कोड है:

(defn simulate-click-event 
    "From https://github.com/levand/domina/blob/master/test/cljs/domina/test.cljs" 
    [el] 
    (let [document (.-document js/window)] 
    (cond 
    (.-click el) (.click el) 
    (.-createEvent document) (let [e (.createEvent document "MouseEvents")] 
           (.initMouseEvent e "click" true true 
               js/window 0 0 0 0 0 
               false false false false 0 nil) 
           (.dispatchEvent el e)) 
    :default (throw "Unable to simulate click event")))) 

(defn simulate-change-event 
    "From https://github.com/levand/domina/blob/master/test/cljs/domina/test.cljs" 
    [el] 
    (let [document (.-document js/window)] 
    (cond 
    (.-onChange el) (do (print "firing on change on " el) (.onChange el)) 
    (.-createEvent document) (let [e (.createEvent document "HTMLEvents")] 
           (print "firing " e " on change on " (.-id el)) 
           (.initEvent e "change" true true) 
           (.dispatchEvent el e)) 
    :default (throw "Unable to simulate change event")))) 

(def sink 
    "contains a channel that receives messages along with notification type" 
    (chan)) 

;; see http://yobriefca.se/blog/2014/06/04/publish-and-subscribe-with-core-dot-asyncs-pub-and-sub/ 
(def source 
    (pub sink #(:topic %))) 

(defn change-field! 
    [id value] 
    (let [el (sel1 (keyword (str "#" id)))] 
    (dommy/set-value! el value) 
    (simulate-change-event el) 
    )) 

(deftest ^:async password-confirmation 
    (testing "do not submit if passwords are not equal" 
    (let [subscription (chan)] 
     (sub source :user-registration subscription) 
     (om/root 
     (partial u/registration-view source sink) 
     nil 
     {:target (sel1 :#view)}) 

     (go 
     (let [m (<! subscription)] 
     (is (= :error (:state m))) 
     (done) 
     )) 

     (change-field! "userRequestedEmail" "foo@bar.com") 
     (change-field! "userRequestedPassword" "secret") 
     (change-field! "confirmPassword"  "nosecret") 

     (simulate-click-event (sel1 :#submitRegistration)) 
    ))) 

यह परीक्षण रन बल्कि इसलिए change-field! समारोह वास्तव में घटक की स्थिति में परिवर्तन नहीं करता विफल रहता है। यहाँ (का हिस्सा) घटक के कोड (माफ दोहराव ...) है:

(defn registration-view 
    "Registration form for users. 

    Submitting form triggers a request to server" 
    [source sink _ owner] 
    (reify 

    om/IInitState 
    (init-state [_] 
       {:userRequestedEmail "" 
       :userRequestedPassword "" 
       :confirmPassword ""} 
       ) 

    om/IRenderState 
    (render-state 
    [this state] 
    (dom/fieldset 
     nil 
     (dom/legend nil "User Registration") 
     (dom/div #js { :className "pure-control-group" } 

       (dom/label #js { :for "userRequestedEmail" } "EMail") 
       (dom/input #js { :id "userRequestedEmail" :type "text" :placeholder "Enter an e-mail" 
           :value (:userRequestedEmail state) 
           :onChange #(om/set-state! owner :userRequestedEmail (.. % -target -value))})) 

     (dom/div #js { :className "pure-control-group" } 
       (dom/label #js { :for "userRequestedPassword" } "Password") 
       (dom/input #js { :id "userRequestedPassword" :type "password" :placeholder "Enter password" 
           :value (:userRequestedPassword state) 
           :onChange #(om/set-state! owner :userRequestedPassword (.. % -target -value))})) 

     (dom/div #js { :className "pure-control-group" } 
       (dom/label #js { :for "confirmPassword" } "") 
       (dom/input #js { :id "confirmPassword" :type "password" :placeholder "Confirm password" 
           :value (:confirmPassword state) 
           :onChange #(om/set-state! owner :confirmPassword (.. % -target -value))})) 


     (dom/button #js {:type "submit" 
         :id "submitRegistration" 
         :className "pure-button pure-button-primary" 
         :onClick #(submit-registration state sink)} 
        "Register"))))) 

क्या मैं परीक्षण में निशान लगाकर देख सकते हैं कि घटक की स्थिति अपडेट नहीं किया गया है जब मैं गति प्रदान change घटना, हालांकि यह सही ढंग से ट्रिगर किया गया है। मुझे संदेह है कि इसे ओम/रिएक्ट काम करने के तरीके से करना है, डीओएम घटकों को लपेटना, लेकिन यह सुनिश्चित नहीं है कि इससे कैसे निपटें।

Answer 1

आप प्रतिक्रिया पुस्तकालयों से ReactTestUtils का उपयोग करके अपने घटकों में ईवेंट का मज़ाक उड़ा सकते हैं। मैं मोचा उपयोग कर रहा हूँ और कुछ इस तरह कर रही परिवर्तन की घटनाओं का परीक्षण करने के:

var comp = ReactTestUtils.renderIntoDocument(<Component />); 
var changingElement = ReactTestUtils.findRenderedDOMComponentWithClass(comp, 'el-class'); 
it ('calls myChangeMethod on change', function() { 
    ReactTestUtils.Simulate.change(changingElement); 
    assert(comp.myChangeEventMethod.called, true); 
}