Add test

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

@@ -0,0 +1,75 @@
+import { createElement } from 'lwc';
+import MiscI18n from 'c/miscI18n';
+import USER_LOCALE from '@salesforce/i18n/locale';
+import USER_CURRENCY from '@salesforce/i18n/currency';
+
+describe('c-misc-i18n', () => {
+    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('component is initialized with correct variables', () => {
+        // Create initial element
+        const element = createElement('c-misc-i18n', {
+            is: MiscI18n
+        });
+        document.body.appendChild(element);
+
+        const userLocale = element.shadowRoot.querySelector('span.userLocale');
+        expect(userLocale).not.toBeNull();
+        expect(userLocale.textContent).toBe(USER_LOCALE);
+
+        const dateUserLocale = element.shadowRoot.querySelector(
+            'span.dateUserLocale'
+        );
+        expect(dateUserLocale).not.toBeNull();
+        expect(dateUserLocale.textContent).toBe(
+            new Intl.DateTimeFormat(USER_LOCALE).format(new Date())
+        );
+
+        const currencyUserLocale = element.shadowRoot.querySelector(
+            'span.currencyUserLocale'
+        );
+        expect(currencyUserLocale).not.toBeNull();
+        expect(currencyUserLocale.textContent).toBe(
+            new Intl.NumberFormat(USER_LOCALE, {
+                style: 'currency',
+                currency: USER_CURRENCY,
+                currencyDisplay: 'symbol'
+            }).format(100)
+        );
+
+        const dateJapanLocale = element.shadowRoot.querySelector(
+            'span.dateJapanLocale'
+        );
+        expect(dateJapanLocale).not.toBeNull();
+        expect(dateJapanLocale.textContent).toBe(
+            new Intl.DateTimeFormat('ja-JP').format(new Date())
+        );
+
+        const currencyJapanLocale = element.shadowRoot.querySelector(
+            'span.currencyJapanLocale'
+        );
+        expect(currencyJapanLocale).not.toBeNull();
+        expect(currencyJapanLocale.textContent).toBe(
+            new Intl.NumberFormat('ja-JP', {
+                style: 'currency',
+                currency: 'JPY',
+                currencyDisplay: 'symbol'
+            }).format(100)
+        );
+    });
+
+    it('is accessible', async () => {
+        const element = createElement('c-misc-i18n', {
+            is: MiscI18n
+        });
+
+        document.body.appendChild(element);
+
+        await expect(element).toBeAccessible();
+    });
+});

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

@@ -1,26 +1,33 @@
 <template>
     <lightning-card title="MiscI18n" icon-name="custom:custom19">
         <div class="slds-var-m-around_medium">
-            <p>User's locale:<b> {userLocale}</b></p>
             <p>
-                Today's date formatted with {userLocale}:<b>
-                    {dateUserLocale}</b
-                >
+                User's locale:
+                <span class="userLocale"><b>{userLocale}</b></span>
             </p>
             <p>
-                100 {userCurrency} formatted with {userLocale}:<b>
-                    {currencyUserLocale}</b
-                >
+                Today's date formatted with {userLocale}:
+                <span class="dateUserLocale">
+                    <b>{dateUserLocale}</b>
+                </span>
             </p>
             <p>
-                Today's date formatted with {japanLocale}:<b>
-                    {dateJapanLocale}</b
-                >
+                100 {userCurrency} formatted with {userLocale}:
+                <span class="currencyUserLocale">
+                    <b>{currencyUserLocale}</b>
+                </span>
             </p>
             <p>
-                100 {japanCurrency} formatted with {japanLocale}:<b>
-                    {currencyJapanLocale}</b
-                >
+                Today's date formatted with {japanLocale}:
+                <span class="dateJapanLocale">
+                    <b>{dateJapanLocale}</b>
+                </span>
+            </p>
+            <p>
+                100 {japanCurrency} formatted with {japanLocale}:
+                <span class="currencyJapanLocale">
+                    <b>{currencyJapanLocale}</b>
+                </span>
             </p>
         </div>
         <c-view-source source="lwc/miscI18n" slot="footer">