From 2ec0d9e7e4f5164a01f4e97b066b9d9eebb22874 Mon Sep 17 00:00:00 2001 From: Stephan Chandler-Garcia <30474422+schandlergarcia@users.noreply.github.com> Date: Fri, 17 Jul 2020 10:02:16 -0700 Subject: [PATCH] Test for similarProducts LWC (#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 --- .../__tests__/data/getRecord.json | 12 ++ .../__tests__/data/similarProducts.json | 35 +++++ .../data/similarProductsWithoutData.json | 1 + .../__tests__/similarProducts.test.js | 142 ++++++++++++++++++ .../lwc/similarProducts/similarProducts.html | 15 +- 5 files changed, 195 insertions(+), 10 deletions(-) create mode 100644 force-app/main/default/lwc/similarProducts/__tests__/data/getRecord.json create mode 100644 force-app/main/default/lwc/similarProducts/__tests__/data/similarProducts.json create mode 100644 force-app/main/default/lwc/similarProducts/__tests__/data/similarProductsWithoutData.json create mode 100644 force-app/main/default/lwc/similarProducts/__tests__/similarProducts.test.js diff --git a/force-app/main/default/lwc/similarProducts/__tests__/data/getRecord.json b/force-app/main/default/lwc/similarProducts/__tests__/data/getRecord.json new file mode 100644 index 00000000..3b720f88 --- /dev/null +++ b/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": "amy@demo.net" + } + }, + "id": "0031700000pHcf8AAC" +} diff --git a/force-app/main/default/lwc/similarProducts/__tests__/data/similarProducts.json b/force-app/main/default/lwc/similarProducts/__tests__/data/similarProducts.json new file mode 100644 index 00000000..39c29e68 --- /dev/null +++ b/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 + } +] diff --git a/force-app/main/default/lwc/similarProducts/__tests__/data/similarProductsWithoutData.json b/force-app/main/default/lwc/similarProducts/__tests__/data/similarProductsWithoutData.json new file mode 100644 index 00000000..fe51488c --- /dev/null +++ b/force-app/main/default/lwc/similarProducts/__tests__/data/similarProductsWithoutData.json @@ -0,0 +1 @@ +[] diff --git a/force-app/main/default/lwc/similarProducts/__tests__/similarProducts.test.js b/force-app/main/default/lwc/similarProducts/__tests__/similarProducts.test.js new file mode 100644 index 00000000..776986c1 --- /dev/null +++ b/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' + ); + }); + }); +}); diff --git a/force-app/main/default/lwc/similarProducts/similarProducts.html b/force-app/main/default/lwc/similarProducts/similarProducts.html index c5cf0c29..c94179f9 100644 --- a/force-app/main/default/lwc/similarProducts/similarProducts.html +++ b/force-app/main/default/lwc/similarProducts/similarProducts.html @@ -2,16 +2,11 @@