Update unit test for Rules

src/views/Rules.vue

@@ -76,6 +76,7 @@ rules:{{rules}}</code></pre>
       </pre>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .container {
   max-width: 1024px;
@@ -109,33 +110,41 @@ export default {
     };
   },
   methods: {
-    ...mapActions("rules", ["getAll"]),
-    checkGroup(rule_group) {
+    ...mapActions("rules", [actions.getAll]),
+    fetchData() {
+      this[actions.getAll]()
+        .then(() => {
+          this.rules = this.getRules;
+          this.answers = this.getAnswers;
+          this.rule_groups = this.getRuleGroups;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    checkGroup(rule_group = {}) {
       // cheking that rules and groups apply
       // returns true if all/any rules apply, depending on logic property
 
       console.log("Group:");
-      console.log(rule_group?.logic);
+      console.log(rule_group.logic);
 
-      const areDependentGroupsValid = rule_group?.rule_group_ids
-        ? rule_group?.rule_group_ids.every((group_id) =>
-            this.checkGroup(this.rule_groups[group_id])
-          )
-        : true;
+      const areDependentGroupsValid = rule_group.rule_group_ids?.every(
+        (group_id) => this.checkGroup(this.rule_groups[group_id])
+      );
 
       return (
         areDependentGroupsValid &&
-        (rule_group?.logic === "all"
-          ? rule_group?.rule_ids.every((rule_id) =>
+        (rule_group.logic === "all"
+          ? rule_group.rule_ids?.every((rule_id) =>
               this.checkRule(this.rules[rule_id])
             )
-          : rule_group?.rule_ids.some((rule_id) =>
+          : rule_group.rule_ids?.some((rule_id) =>
               this.checkRule(this.rules[rule_id])
             ))
       );
     },
-
-    checkRule(rule) {
+    checkRule(rule = {}) {
       // cheking that a rule applies
       // returns if combination of expected answer, operation and user answer is true
 
@@ -159,11 +168,7 @@ export default {
     },
   },
   created() {
-    this[actions.getAll]().then(() => {
-      this.rule_groups = this.getRuleGroups;
-      this.answers = this.getAnswers;
-      this.rules = this.getRules;
-    });
+    this.fetchData();
   },
 };
 </script>

tests/unit/rules.spec.js

@@ -1,76 +1,93 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
 import Rules from "@/views/Rules.vue";
+import actions from "@/store/actions_types";
 
-const mockAnswers = {
-  C: "abcdefghijklmnopqrstuvwxyz",
-  A: "x",
-  B: "Y",
-  D: "foo bar",
-};
-
-const mockRules = {
-  1: {
-    expected_answer: "z",
-    operation: "contains",
-    question_id: "C",
-  },
-  2: {
-    expected_answer: "",
-    operation: "is",
-    question_id: "A",
-  },
-  3: {
-    expected_answer: "y",
-    operation: "is not",
-    question_id: "B",
-  },
-  4: {
-    expected_answer: "1",
-    operation: "is",
-    question_id: "D",
-  },
-};
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
-const mockRuleGroups = {
-  1: {
-    logic: "all",
-    rule_ids: [1, 4],
-    rule_group_ids: [2],
-  },
-  2: {
-    logic: "any",
-    rule_ids: [2, 3, 4],
-    rule_group_ids: [],
-  },
+const createStore = () => {
+  return new Vuex.Store({
+    modules: {
+      rules: {
+        namespaced: true,
+        state: {
+          rule_groups: {
+            1: {
+              logic: "all",
+              rule_ids: [1, 4],
+              rule_group_ids: [2],
+            },
+            2: {
+              logic: "any",
+              rule_ids: [2, 3],
+              rule_group_ids: [],
+            },
+          },
+          answers: {
+            C: "abcdefghijklmnopqrstuvwxyz",
+            A: "x",
+            B: "Y",
+            D: "foo bar",
+          },
+          rules: {
+            1: {
+              expected_answer: "z",
+              operation: "contains",
+              question_id: "C",
+            },
+            2: {
+              expected_answer: "x",
+              operation: "is",
+              question_id: "A",
+            },
+            3: {
+              expected_answer: "y",
+              operation: "is not",
+              question_id: "B",
+            },
+            4: {
+              expected_answer: "1",
+              operation: "is",
+              question_id: "D",
+            },
+          },
+        },
+        getters: {
+          getRuleGroups: (state) => state.rule_groups,
+          getAnswers: (state) => state.answers,
+          getRules: (state) => state.rules,
+        },
+        actions: {
+          [actions.getAll]: jest.fn(() => Promise.resolve()),
+        },
+      },
+    },
+  });
 };
 
 describe("Rules", () => {
+  let store;
+  let wrapper;
+
+  beforeEach(async () => {
+    store = createStore();
+    wrapper = shallowMount(Rules, { store, localVue });
+    await wrapper.vm.fetchData();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it("should return false for a rule group with 'all' logic if at least one rule is invalid", () => {
-    const wrapper = shallowMount(Rules, {
-      data() {
-        return {
-          answers: mockAnswers,
-          rules: mockRules,
-          rule_groups: mockRuleGroups,
-        };
-      },
-    });
-    const ruleGroup = wrapper.vm.rule_groups[1];
+    const ruleGroup = wrapper.vm.getRuleGroups[1];
     const result = wrapper.vm.checkGroup(ruleGroup);
     expect(result).toBe(false);
   });
 
   it("should return true for a rule group with 'any' logic if at least one rule is valid", () => {
-    const wrapper = shallowMount(Rules, {
-      data() {
-        return {
-          answers: mockAnswers,
-          rules: mockRules,
-          rule_groups: mockRuleGroups,
-        };
-      },
-    });
-    const ruleGroup = wrapper.vm.rule_groups[2];
+    const ruleGroup = wrapper.vm.getRuleGroups[2];
     const result = wrapper.vm.checkGroup(ruleGroup);
     expect(result).toBe(true);
   });