Fix containerClassName not being updated by updateDefaults

Maronato · May 7, 2020 · 24df318 · 24df318
1 parent 01ea53b
commit 24df318
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 2 deletions.
diff --git a/src/components/VtToastContainer.vue b/src/components/VtToastContainer.vue
@@ -4,7 +4,7 @@
       <Transition
         :transition="defaults.transition"
         :transition-duration="defaults.transitionDuration"
-        :class="getClasses(pos)"
+        :class="getClasses(pos).concat(defaults.containerClassName)"
       >
         <Toast
           v-for="toast in getPositionToasts(pos)"
@@ -149,7 +149,7 @@ export default Vue.extend({
     },
     getClasses(position: POSITION) {
       const classes = [`${VT_NAMESPACE}__container`, position];
-      return classes.concat(this.containerClassName);
+      return classes;
     }
   }
 });

diff --git a/tests/unit/components/VtToastContainer.spec.ts b/tests/unit/components/VtToastContainer.spec.ts
@@ -354,6 +354,21 @@ describe("VtToastContainer", () => {
       expect(spySetup).toHaveBeenCalledWith(container);
       expect(vm.defaults.container).toBe(container);
     });
+    it("applies new containerClassName", async () => {
+      const { containerWrapper } = loadPlugin({ timeout: 1000 });
+      const vm = (containerWrapper.vm as unknown) as {
+        updateDefaults(update: PluginOptions): void;
+        defaults: PluginOptions;
+      };
+      expect(vm.defaults.containerClassName).toEqual([]);
+      expect(containerWrapper.find(".my-class").exists()).toBeFalsy();
+      expect(containerWrapper.element).toMatchSnapshot();
+      vm.updateDefaults({ containerClassName: "my-class" });
+      await containerWrapper.vm.$nextTick();
+      expect(vm.defaults.containerClassName).toBe("my-class");
+      expect(containerWrapper.find(".my-class").exists()).toBeTruthy();
+      expect(containerWrapper.element).toMatchSnapshot();
+    });
   });
   describe("updateToast", () => {
     it("updates existing toast", () => {

diff --git a/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap b/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap
@@ -69,3 +69,73 @@ exports[`VtToastContainer snapshots with default value 1`] = `
   </div>
 </div>
 `;
+
+exports[`VtToastContainer updateDefaults applies new containerClassName 1`] = `
+<div>
+  <div>
+    <div
+      class="Vue-Toastification__container top-left"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container top-center"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container top-right"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container bottom-left"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container bottom-center"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container bottom-right"
+    />
+  </div>
+</div>
+`;
+
+exports[`VtToastContainer updateDefaults applies new containerClassName 2`] = `
+<div>
+  <div>
+    <div
+      class="Vue-Toastification__container top-left my-class"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container top-center my-class"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container top-right my-class"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container bottom-left my-class"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container bottom-center my-class"
+    />
+  </div>
+  <div>
+    <div
+      class="Vue-Toastification__container bottom-right my-class"
+    />
+  </div>
+</div>
+`;