test: additional tests for ssr (salesforce#1953)

ravijayaramappa · pmdartus · web-flow · commit 67bbf0f9b18a · 2020-07-01T10:26:25.000-07:00
* test: additional tests for ssr

if:true and if:false

* test: tests for if directive with slots

* test: test for lwc:dynamic

* test: test that lwc:dom directive is ignored for ssr

* test(engine-server): update tests

* test: breakdown tests into individual test cases

Co-authored-by: Pierre-Marie Dartus &lt;p.dartus@salesforce.com&gt;
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/expected.html
@@ -0,0 +1,38 @@
+<x-if-conditional-slot-content>
+  <template shadow-root>
+    <div class="active-if-blocks">
+      <x-conditional-slot-content>
+        <template shadow-root>
+          <x-slotted>
+            <template shadow-root><slot></slot></template>
+            Testing if:true
+            <x-child>
+              <template shadow-root><slot></slot></template>
+              Should be slotted when true === true
+            </x-child>
+          </x-slotted>
+          <x-slotted>
+            <template shadow-root><slot></slot></template>
+            Testing if:false
+            <x-child>
+              <template shadow-root><slot></slot></template>
+              Should be slotted when false === false
+            </x-child>
+          </x-slotted>
+        </template>
+      </x-conditional-slot-content>
+    </div>
+    <div class="inactive-if-blocks">
+      <x-conditional-slot-content>
+        <template shadow-root>
+          <x-slotted>
+            <template shadow-root><slot></slot></template>
+          </x-slotted>
+          <x-slotted>
+            <template shadow-root><slot></slot></template>
+          </x-slotted>
+        </template>
+      </x-conditional-slot-content>
+    </div>
+  </template>
+</x-if-conditional-slot-content>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/child/child.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/child/child.html
@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/child/child.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/child/child.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Child extends LightningElement {
+
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/conditionalSlotContent/conditionalSlotContent.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/conditionalSlotContent/conditionalSlotContent.html
@@ -0,0 +1,15 @@
+<!-- The slot content passed to x-slotted component is controlled by a if:* directive-->
+<template>
+    <x-slotted>
+        <template if:true={activatetruepath}>
+            Testing if:true
+            <x-child>Should be slotted when {activatetruepath} === true</x-child>
+        </template>
+    </x-slotted>
+    <x-slotted>
+        <template if:false={activatefalsepath}>
+            Testing if:false
+            <x-child>Should be slotted when {activatefalsepath} === false</x-child>
+        </template>
+    </x-slotted>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/conditionalSlotContent/conditionalSlotContent.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/conditionalSlotContent/conditionalSlotContent.js
@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ConditionalSlotContent extends LightningElement {
+    @api
+    activatefalsepath;
+
+    @api
+    activatetruepath;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/if-conditional-slot-content/if-conditional-slot-content.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/if-conditional-slot-content/if-conditional-slot-content.html
@@ -0,0 +1,11 @@
+<template>
+    <div class="active-if-blocks">
+       <x-conditional-slot-content activatetruepath={trueFlag} activatefalsepath={falseFlag}>
+       </x-conditional-slot-content>
+    </div>
+
+    <div class="inactive-if-blocks">
+        <x-conditional-slot-content activatetruepath={falseFlag} activatefalsepath={trueFlag}>
+        </x-conditional-slot-content>
+    </div>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/if-conditional-slot-content/if-conditional-slot-content.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/if-conditional-slot-content/if-conditional-slot-content.js
@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {
+    falseFlag = false;
+    trueFlag = true;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/slotted/slotted.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/slotted/slotted.html
@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/slotted/slotted.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/modules/x/slotted/slotted.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Slotted extends LightningElement {
+
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/expected.html
@@ -0,0 +1,43 @@
+<x-if-conditional-slot>
+  <template shadow-root>
+    <div class="active-if-blocks">
+      <x-parent>
+        <template shadow-root>
+          <x-slotted>
+            <template shadow-root>
+              Should be active when true === true
+              <slot name="trueslot"></slot>
+              Should be active when false === false
+              <slot name="falseslot"></slot>
+            </template>
+            <x-child slot="trueslot" class="slotted-child">
+              <template shadow-root><slot></slot></template>
+              Testing if:true
+            </x-child>
+            <x-child slot="falseslot" class="slotted-child">
+              <template shadow-root><slot></slot></template>
+              Testing if:false
+            </x-child>
+          </x-slotted>
+        </template>
+      </x-parent>
+    </div>
+    <div class="inactive-if-blocks">
+      <x-parent>
+        <template shadow-root>
+          <x-slotted>
+            <template shadow-root></template>
+            <x-child slot="trueslot" class="slotted-child">
+              <template shadow-root><slot></slot></template>
+              Testing if:true
+            </x-child>
+            <x-child slot="falseslot" class="slotted-child">
+              <template shadow-root><slot></slot></template>
+              Testing if:false
+            </x-child>
+          </x-slotted>
+        </template>
+      </x-parent>
+    </div>
+  </template>
+</x-if-conditional-slot>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/child/child.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/child/child.html
@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/child/child.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/child/child.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Child extends LightningElement {
+
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/if-conditional-slot/if-conditional-slot.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/if-conditional-slot/if-conditional-slot.html
@@ -0,0 +1,11 @@
+<template>
+    <div class="active-if-blocks">
+        <x-parent activatetruepath={trueFlag} activatefalsepath={falseFlag}>
+        </x-parent>
+    </div>
+
+    <div class="inactive-if-blocks">
+        <x-parent activatetruepath={falseFlag} activatefalsepath={trueFlag}>
+        </x-parent>
+    </div>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/if-conditional-slot/if-conditional-slot.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/if-conditional-slot/if-conditional-slot.js
@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {
+    falseFlag = false;
+    trueFlag = true;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/parent/parent.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/parent/parent.html
@@ -0,0 +1,7 @@
+<!-- The x-conditionally-slotted component's <slot> element is controlled by a if:* directive-->
+<template>
+    <x-slotted activatetruepath={activatetruepath} activatefalsepath={activatefalsepath}>
+        <x-child slot="trueslot" class="slotted-child">Testing if:true</x-child>
+        <x-child slot="falseslot" class="slotted-child">Testing if:false</x-child>
+    </x-slotted>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/parent/parent.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/parent/parent.js
@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Parent extends LightningElement {
+    @api
+    activatefalsepath;
+
+    @api
+    activatetruepath;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/slotted/slotted.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/slotted/slotted.html
@@ -0,0 +1,10 @@
+<template>
+    <template if:true={activatetruepath}>
+        Should be active when {activatetruepath} === true
+        <slot name="trueslot"></slot>
+    </template>
+    <template if:false={activatefalsepath}>
+        Should be active when {activatefalsepath} === false
+        <slot name="falseslot"></slot>
+    </template>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/slotted/slotted.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/modules/x/slotted/slotted.js
@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ConditionallySlotted extends LightningElement {
+    @api
+    activatefalsepath;
+
+    @api
+    activatetruepath;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/expected.html
@@ -0,0 +1,25 @@
+<x-if-custom-element-child>
+  <template shadow-root>
+    <div class="active-if-blocks">
+      <x-custom-element-child>
+        <template shadow-root>
+          <x-child>
+            <template shadow-root>
+              Custom element child x-child-test-false
+            </template>
+          </x-child>
+          <x-child>
+            <template shadow-root>
+              Custom element child x-child-test-true
+            </template>
+          </x-child>
+        </template>
+      </x-custom-element-child>
+    </div>
+    <div class="inactive-if-blocks">
+      <x-custom-element-child>
+        <template shadow-root></template>
+      </x-custom-element-child>
+    </div>
+  </template>
+</x-if-custom-element-child>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/child/child.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/child/child.html
@@ -0,0 +1,3 @@
+<template>
+    Custom element child {label}
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/child/child.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/child/child.js
@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Child extends LightningElement {
+    @api
+    label;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/customElementChild/customElementChild.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/customElementChild/customElementChild.html
@@ -0,0 +1,8 @@
+<template>
+    <template if:false={activatefalsepath}>
+        <x-child label="x-child-test-false"></x-child>
+    </template>
+    <template if:true={activatetruepath}>
+        <x-child label="x-child-test-true"></x-child>
+    </template>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/customElementChild/customElementChild.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/customElementChild/customElementChild.js
@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class CustomElementChild extends LightningElement {
+    @api
+    activatefalsepath;
+
+    @api
+    activatetruepath;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/if-custom-element-child/if-custom-element-child.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/if-custom-element-child/if-custom-element-child.html
@@ -0,0 +1,11 @@
+<template>
+    <div class="active-if-blocks">
+        <x-custom-element-child activatetruepath={trueFlag} activatefalsepath={falseFlag}>
+        </x-custom-element-child>
+    </div>
+
+    <div class="inactive-if-blocks">
+        <x-custom-element-child activatetruepath={falseFlag} activatefalsepath={trueFlag}>
+        </x-custom-element-child>
+    </div>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/if-custom-element-child/if-custom-element-child.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/modules/x/if-custom-element-child/if-custom-element-child.js
@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {
+    falseFlag = false;
+    trueFlag = true;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/expected.html
@@ -0,0 +1,15 @@
+<x-if-element-child>
+  <template shadow-root>
+    <div class="active-if-blocks">
+      <x-element-child>
+        <template shadow-root>
+          <div class="div-false"></div>
+          <div class="div-true"></div>
+        </template>
+      </x-element-child>
+    </div>
+    <div class="inactive-if-blocks">
+      <x-element-child><template shadow-root></template></x-element-child>
+    </div>
+  </template>
+</x-if-element-child>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/elementChild/elementChild.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/elementChild/elementChild.html
@@ -0,0 +1,8 @@
+<template>
+    <template if:false={activatefalsepath}>
+        <div class="div-false"></div>
+    </template>
+    <template if:true={activatetruepath}>
+        <div class="div-true"></div>
+    </template>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/elementChild/elementChild.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/elementChild/elementChild.js
@@ -0,0 +1,10 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ElementChild extends LightningElement {
+    @api
+    activatefalsepath;
+
+    @api
+    activatetruepath;
+
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/if-element-child/if-element-child.html b/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/if-element-child/if-element-child.html
@@ -0,0 +1,11 @@
+<template>
+    <div class="active-if-blocks">
+        <x-element-child activatetruepath={trueFlag} activatefalsepath={falseFlag}>
+        </x-element-child>
+    </div>
+
+    <div class="inactive-if-blocks">
+        <x-element-child activatetruepath={falseFlag} activatefalsepath={trueFlag}>
+        </x-element-child>
+    </div>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/if-element-child/if-element-child.js b/packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/modules/x/if-element-child/if-element-child.js
@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {
+    falseFlag = false;
+    trueFlag = true;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/expected.html
@@ -0,0 +1,3 @@
+<x-lwc-dom-manual>
+  <template shadow-root><div></div></template>
+</x-lwc-dom-manual>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/modules/x/lwc-dom-manual/lwc-dom-manual.html b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/modules/x/lwc-dom-manual/lwc-dom-manual.html
@@ -0,0 +1,3 @@
+<template>
+    <div lwc:dom="manual"></div>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/modules/x/lwc-dom-manual/lwc-dom-manual.js b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/modules/x/lwc-dom-manual/lwc-dom-manual.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/expected.html
@@ -0,0 +1,5 @@
+<x-lwc-dynamic>
+  <template shadow-root>
+    <x-lazy><template shadow-root>Test dynamic component!</template></x-lazy>
+  </template>
+</x-lwc-dynamic>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/lwc-dynamic/lwc-dynamic.html b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/lwc-dynamic/lwc-dynamic.html
@@ -0,0 +1,3 @@
+<template>
+    <x-lazy lwc:dynamic={customCtor}></x-lazy>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/lwc-dynamic/lwc-dynamic.js b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/lwc-dynamic/lwc-dynamic.js
@@ -0,0 +1,6 @@
+import { LightningElement, track } from 'lwc';
+import Test from 'x/test';
+
+export default class DynamicCtor extends LightningElement {
+    @track customCtor = Test;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/test/test.html b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/test/test.html
@@ -0,0 +1,3 @@
+<template>
+    Test dynamic component!
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/test/test.js b/packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/modules/x/test/test.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <slot></slot>`
	`3`	`+</template>`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +import { LightningElement } from 'lwc';
++
 +export default class Child extends LightningElement {
++
 +}