[StackedPlots] Destroy programmatically created component instances (#4345)

src/plugins/plot/pluginSpec.js

@@ -37,7 +37,6 @@ describe("the plugin", function () {
     let openmct;
     let telemetryPromise;
     let telemetryPromiseResolve;
-    let cleanupFirst;
     let mockObjectPath;
     let telemetrylimitProvider;
 
@@ -77,7 +76,6 @@ describe("the plugin", function () {
                 'some-other-key': 'some-other-value 3'
             }
         ];
-        cleanupFirst = [];
 
         const timeSystem = {
             timeSystemKey: 'utc',
@@ -168,19 +166,13 @@ describe("the plugin", function () {
     });
 
     afterEach((done) => {
-        // Needs to be in a timeout because plots use a bunch of setTimeouts, some of which can resolve during or after
+        openmct.time.timeSystem('utc', {
-        // teardown, which causes problems
+            start: 0,
-        // This is hacky, we should find a better approach here.
+            end: 1
-        setTimeout(() => {
-            //Cleanup code that needs to happen before dom elements start being destroyed
-            cleanupFirst.forEach(cleanup => cleanup());
-            cleanupFirst = [];
-            document.body.removeChild(element);
-
-            configStore.deleteAll();
-
-            resetApplicationState(openmct).then(done).catch(done);
         });
+
+        configStore.deleteAll();
+        resetApplicationState(openmct).then(done).catch(done);
     });
 
     describe("the plot views", () => {
@@ -393,10 +385,6 @@ describe("the plugin", function () {
             plotView = plotViewProvider.view(testTelemetryObject, [testTelemetryObject]);
             plotView.show(child, true);
 
-            cleanupFirst.push(() => {
-                plotView.destroy();
-            });
-
             return Vue.nextTick();
         });
 
@@ -759,11 +747,6 @@ describe("the plugin", function () {
                 template: "<stacked-plot></stacked-plot>"
             });
 
-            cleanupFirst.push(() => {
-                component.$destroy();
-                component = undefined;
-            });
-
             return telemetryPromise
                 .then(Vue.nextTick())
                 .then(() => {

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import eventHelpers from '../lib/eventHelpers';
+
 import StackedPlotItem from './StackedPlotItem.vue';
 import ImageExporter from '../../../exporters/ImageExporter';
 
@@ -104,8 +104,6 @@ export default {
         this.destroy();
     },
     mounted() {
-        eventHelpers.extend(this);
-
         this.imageExporter = new ImageExporter(this.openmct);
 
         this.tickWidthMap = {};
@@ -120,7 +118,6 @@ export default {
             this.loading = loaded;
         },
         destroy() {
-            this.stopListening();
             this.composition.off('add', this.addChild);
             this.composition.off('remove', this.removeChild);
             this.composition.off('reorder', this.compositionReorder);

src/plugins/plot/stackedPlot/StackedPlotItem.vue

@@ -75,6 +75,11 @@ export default {
     mounted() {
         this.updateView();
     },
+    beforeDestroy() {
+        if (this.component) {
+            this.component.$destroy();
+        }
+    },
     methods: {
         updateComponentProp(prop, value) {
             if (this.component) {