fix: error from disconnecting an already disconnected vm (#1413)

* fix: error from disconnecting an already disconnected vm

https://playground.lwcjs.org/projects/S_7PCquA7/3/edit

* fix: add tests for disconnecting rootVM

* fix: simplify test

packages/@lwc/engine/src/framework/vm.ts

@@ -182,7 +182,10 @@ function resetComponentStateWhenRemoved(vm: VM) {
 export function removeVM(vm: VM) {
     if (process.env.NODE_ENV !== 'production') {
         assert.isTrue(vm && 'cmpRoot' in vm, `${vm} is not a vm.`);
-        assert.isTrue(vm.state === VMState.connected, `${vm} must be inserted.`);
+        assert.isTrue(
+            vm.state === VMState.connected || vm.state === VMState.disconnected,
+            `${vm} must have been connected.`
+        );
     }
     resetComponentStateWhenRemoved(vm);
 }

packages/integration-karma/test/rendering/disconnecting-root-vm/index.spec.js

@@ -0,0 +1,20 @@
+import { createElement } from 'lwc';
+import ParentCmp from 'x/parent';
+
+describe('disconnecting root vm', () => {
+    it('should not throw an error when disconnecting an already disconnected child vm', function(done) {
+        const elm = createElement('x-parent', { is: ParentCmp });
+        elm.labels = ['label 1', 'label 2'];
+        document.body.appendChild(elm);
+
+        return Promise.resolve().then(() => {
+            elm.labels = [];
+            document.body.removeChild(elm);
+
+            setTimeout(() => {
+                expect(elm.getError()).toBe(null);
+                done();
+            });
+        });
+    });
+});

packages/integration-karma/test/rendering/disconnecting-root-vm/x/child/child.html

@@ -0,0 +1,3 @@
+<template>
+    {label}
+</template>

packages/integration-karma/test/rendering/disconnecting-root-vm/x/child/child.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ChildCmp extends LightningElement {
+    @api label;
+}

packages/integration-karma/test/rendering/disconnecting-root-vm/x/parent/parent.html

@@ -0,0 +1,5 @@
+<template>
+    <template for:each={labels} for:item="label">
+        <x-child key={label} label={label}></x-child>
+    </template>
+</template>

packages/integration-karma/test/rendering/disconnecting-root-vm/x/parent/parent.js

@@ -0,0 +1,14 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ParentCmp extends LightningElement {
+    @api labels = [];
+    _error = null;
+
+    @api getError() {
+        return this._error;
+    }
+
+    errorCallback(error) {
+        this._error = error;
+    }
+}