如何使用 Jasmine 对 Knockout.js 订阅功能进行单元测试？

Question

I have a knockout viewmodel which has a few subscribe functions that update some default selections after it picks up a change to a parent selection.

But I'm not sure how to call the function and fake the dependencies in order to test it.

This code snippit is similar to the function but not the exact one. It's subscribed to SelectedParentOption observable and when it changes to checks through what's available and selects a new value.

        //When selection changes select default for remaining selection
        self.ServerModel.ProductModel.SelectedParentOption.subscribe(function () {
            // Loop through options returned by function checking for correct key
            self.availableOptions().forEach(function (option) {
                if (option.Key == 1)
                    // Assign default selection
                    self.ServerModel.ProductModel.SelectedChildOption(option);
            }
        });

This is the Jasmine unit test

        it("Selection set to default after change", function () {
        // Spy on available options to dictate what's available
        spyOn(testModel, 'availableOptions').and.returnValue(TestOptions);
        // Change selection
        ServerModel.ProductModel.SelectedParentOption(Option1);
        // Call function
        ServerModel.ProductModel.SelectedParentOption.subscribe();
        // Verify default was selected
        expect(ServerModel.ProductModel.SelectedChildOption()).toBe(ExpectedOption);
    });

Currently this changes the option but the subscribe code doesn't seem to get hit at all.

Answer 1

I don't really see anything wrong with your code, other that you don't need to call subscribe() after setting an observable's value; knockout does that for you. The subscribe method is used to register a function that handles a new value.

It's important to keep in mind however, that subscriptions won't be triggered if the observable is set to the same value as it already holds.

So in your case: if SelectedParentOption() === Option1 before your Change selection comment, no reset will occur. If you want to manually trigger it, you use valueHasMutated() (instead of where you used subscribe() )

Check out these (quick and dirty) tests.

Test 2 and 3 contradict each other; only 1 of them will pass. They describe different behavior:

• 2: only reset if the parent selection is actually changed
• 3: always reset when somebody sets parent selection, even if it's the same value it was before

I can imagine test 2 better describes what you're looking for, but if you want test 3 to pass, you can extend your observable to always notify its subscribers . Uncomment the comment in the ViewModel to see the difference.

 function ViewModel() { this.selectedParent = ko.observable(0)/*.extend({notify: 'always'})*/; this.children = [{ key: 0 }, { key: 1}, { key: 2 }]; this.selectedChild = ko.observable(null); this.selectedParent.subscribe(function() { this.selectedChild(this.children.find(function(child) { return child.key === 1; })); }, this) } describe('Subscription test', function() { var vm; beforeEach(function() { vm = new ViewModel(); }); it("should reset child selection to child 1 when parent changes", function() { expect(vm.selectedChild()).toBe(null); vm.selectedParent(1); expect(vm.selectedChild().key).toBe(1); }); it("should not reset child when re-setting the same parent selection", function() { vm.selectedParent(1); vm.selectedChild(vm.children[2]); expect(vm.selectedChild().key).toBe(2); // Same primitive, won't trigger the subscription vm.selectedParent(1); expect(vm.selectedChild().key).toBe(2); }); // To fix this test, uncomment .extend in selectedParent it("should always reset child when re-setting the same parent selection", function() { vm.selectedParent(1); vm.selectedChild(vm.children[2]); expect(vm.selectedChild().key).toBe(2); vm.selectedParent(1); expect(vm.selectedChild().key).toBe(1); }); it("should initialize without a selection", function() { expect(vm.selectedChild()).toBe(null); }); it("should set selections", function() { vm.selectedChild(vm.children[2]); expect(vm.selectedChild().key).toBe(2); }); });

 <script src="http://searls.github.io/jasmine-all/jasmine-all-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Answer 2

You should call .subscribe() before you change the observed value. It only detects changes after subscription has been set up. Try this instead:

// enable subscription ServerModel.ProductModel.SelectedParentOption.subscribe(); // Change selection ServerModel.ProductModel.SelectedParentOption(Option1); // Verify default was selected expect(ServerModel.ProductModel.SelectedChildOption()).toBe(ExpectedOption);