Test for similarProducts LWC (trailheadapps#204)

* creation of the similarProducts test

* creation of the similarProduct test

* update to comments

* Update similarProducts.js-meta.xml

The API version was changed to v48 as I was getting a v49 error - but can now be changed back.

* update to package.json to include the eslint prettier config

* update to test data

* update to include comments and feedback

* removed extra template conditional statement and updated test

force-app/main/default/lwc/similarProducts/__tests__/data/getRecord.json

@@ -0,0 +1,12 @@
+{
+    "apiName": "Product__c",
+    "childRelationships": {},
+    "eTag": "846fdcd21a53214d447e578adbe263c6",
+    "fields": {
+        "Product_Family__c": {
+            "displayValue": null,
+            "value": "[email protected]"
+        }
+    },
+    "id": "0031700000pHcf8AAC"
+}

force-app/main/default/lwc/similarProducts/__tests__/data/similarProducts.json

@@ -0,0 +1,35 @@
+[
+    {
+        "Id": "a033B00000381hVQAQ",
+        "Name": "VOLT X1",
+        "MSRP__c": 1200,
+        "Description__c": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "Category__c": "Commuter",
+        "Level__c": "Beginner",
+        "Picture_URL__c": "https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/voltx1.jpg",
+        "Material__c": "Aluminum",
+        "$serId$": 1602
+    },
+    {
+        "Id": "a033B00000381hWQAQ",
+        "Name": "VOLT X2",
+        "MSRP__c": 1400,
+        "Description__c": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "Category__c": "Commuter",
+        "Level__c": "Beginner",
+        "Picture_URL__c": "https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/voltx2.jpg",
+        "Material__c": "Aluminum",
+        "$serId$": 1603
+    },
+    {
+        "Id": "a033B00000381hXQAQ",
+        "Name": "VOLT X3",
+        "MSRP__c": 1800,
+        "Description__c": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "Category__c": "Commuter",
+        "Level__c": "Beginner",
+        "Picture_URL__c": "https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/voltx3.jpg",
+        "Material__c": "Aluminum",
+        "$serId$": 1604
+    }
+]

force-app/main/default/lwc/similarProducts/__tests__/data/similarProductsWithoutData.json

@@ -0,0 +1 @@
+[]

force-app/main/default/lwc/similarProducts/__tests__/similarProducts.test.js

@@ -0,0 +1,142 @@
+import { createElement } from 'lwc';
+import SimilarProducts from 'c/similarProducts';
+import {
+    registerLdsTestWireAdapter,
+    registerApexTestWireAdapter
+} from '@salesforce/sfdx-lwc-jest';
+import { getRecord } from 'lightning/uiRecordApi';
+import getSimilarProducts from '@salesforce/apex/ProductController.getSimilarProducts';
+
+// Mock realistic data for the getRecord adapter
+const mockGetRecord = require('./data/getRecord.json');
+
+// Mock realistic data for the getSimilarProducts adapter
+const mockSimilarProducts = require('./data/similarProducts.json');
+
+// Mock empty data for the getSimilarProducts adapter
+const mockSimilarProductsWithoutData = require('./data/similarProductsWithoutData.json');
+
+// Mock realistic data for the public properties
+const mockRecordId = '0031700000pHcf8AAC';
+const mockFamilyId = '0069500000pGbk8DDC';
+const mockWireErrorMessage = 'Error retrieving records';
+
+//Expected Wire Input
+const WIRE_INPUT = {
+    fields: [
+        {
+            fieldApiName: 'Product_Family__c',
+            objectApiName: 'Product__c'
+        }
+    ],
+    recordId: '0031700000pHcf8AAC'
+};
+
+// Register as an LDS wire adapter. Some tests verify the provisioned values trigger desired behavior.
+const getRecordAdapter = registerLdsTestWireAdapter(getRecord);
+
+// Register as Apex wire adapter. Some tests verify that provisioned values trigger desired behavior.
+const getSimilarProductsListAdapter = registerApexTestWireAdapter(
+    getSimilarProducts
+);
+
+describe('c-similar-products', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('displays a list of product tiles when the Apex wire adapter returns data', () => {
+        const element = createElement('c-similar-products', {
+            is: SimilarProducts
+        });
+        element.recordId = mockRecordId;
+        element.familyId = mockFamilyId;
+        document.body.appendChild(element);
+
+        // Emit data from getRecord adapter
+        getRecordAdapter.emit(mockGetRecord);
+
+        // Emit Data from the Apex wire adapter.
+        getSimilarProductsListAdapter.emit(mockSimilarProducts);
+
+        // Return a promise to wait for any asynchronous DOM updates. Jest
+        // will automatically wait for the Promise chain to complete before
+        // ending the test and fail the test if the promise rejects.
+        return Promise.resolve().then(() => {
+            // Check the wire parameters are correct
+            expect(getRecordAdapter.getLastConfig()).toEqual(WIRE_INPUT);
+            // Select elements for validation
+            const productListItemEl = element.shadowRoot.querySelectorAll(
+                'c-product-list-item'
+            );
+            expect(productListItemEl.length).toBe(mockSimilarProducts.length);
+            expect(productListItemEl[0].product).toStrictEqual(
+                mockSimilarProducts[0]
+            );
+        });
+    });
+
+    it('displays a placeholder when no similar products are returned', () => {
+        const element = createElement('c-similar-products', {
+            is: SimilarProducts
+        });
+        element.recordId = mockRecordId;
+        element.familyId = mockFamilyId;
+        document.body.appendChild(element);
+
+        // Emit data from getRecord adapter
+        getRecordAdapter.emit(mockGetRecord);
+
+        // Emit an empty array from the Apex wire adapter.
+        getSimilarProductsListAdapter.emit(mockSimilarProductsWithoutData);
+
+        // Return a promise to wait for any asynchronous DOM updates. Jest
+        // will automatically wait for the Promise chain to complete before
+        // ending the test and fail the test if the promise rejects.
+        return Promise.resolve().then(() => {
+            // Check the wire parameters are correct
+            expect(getRecordAdapter.getLastConfig()).toEqual(WIRE_INPUT);
+            // Select elements for validation
+            const placeholderEl = element.shadowRoot.querySelector(
+                'c-placeholder'
+            );
+            expect(placeholderEl).not.toBeNull();
+        });
+    });
+
+    it('displays an error panel when the Apex wire adapter returns an error', () => {
+        const element = createElement('c-similar-products', {
+            is: SimilarProducts
+        });
+        element.recordId = mockRecordId;
+        element.familyId = mockFamilyId;
+        document.body.appendChild(element);
+
+        // Emit data from getRecord adapter
+        getRecordAdapter.emit(mockGetRecord);
+
+        // Emit an error from the Apex wire adapter.
+        getSimilarProductsListAdapter.error(mockWireErrorMessage);
+
+        // Return a promise to wait for any asynchronous DOM updates. Jest
+        // will automatically wait for the Promise chain to complete before
+        // ending the test and fail the test if the promise rejects.
+
+        return Promise.resolve().then(() => {
+            // Check the wire parameters are correct
+            expect(getRecordAdapter.getLastConfig()).toEqual(WIRE_INPUT);
+            // Select elements for validation
+            const errorPanelEl = element.shadowRoot.querySelector(
+                'c-error-panel'
+            );
+            expect(errorPanelEl).not.toBeNull();
+            expect(errorPanelEl.errors[0].body).toBe(mockWireErrorMessage);
+            expect(errorPanelEl.friendlyMessage).toBe(
+                'An error has occurred while retrieving similar products'
+            );
+        });
+    });
+});

force-app/main/default/lwc/similarProducts/similarProducts.html

@@ -2,16 +2,11 @@
     <lightning-card title="Similar Products" icon-name="standard:link">
         <div class="slds-m-horizontal_medium">
             <template if:true={similarProducts.data}>
-                <template if:true={similarProducts.data}>
-                    <template
-                        for:each={similarProducts.data}
-                        for:item="product"
-                    >
-                        <c-product-list-item
-                            key={product.Id}
-                            product={product}
-                        ></c-product-list-item>
-                    </template>
+                <template for:each={similarProducts.data} for:item="product">
+                    <c-product-list-item
+                        key={product.Id}
+                        product={product}
+                    ></c-product-list-item>
                 </template>
                 <template if:false={similarProducts.data.length}>
                     <c-placeholder