fix(phone-number): improves tests for countries order

ovh · Feb 17, 2025 · 0557735 · 0557735
1 parent 8583f62
commit 0557735
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/packages/ods/src/components/phone-number/src/controller/ods-phone-number.ts b/packages/ods/src/components/phone-number/src/controller/ods-phone-number.ts
@@ -161,7 +161,6 @@ async function updateInternals(internals: ElementInternals, value: string | null
   }
 }
 
-
 export {
   type TranslatedCountryMap,
   formatPhoneNumber,

diff --git a/packages/ods/src/components/phone-number/tests/rendering/ods-phone-number.e2e.ts b/packages/ods/src/components/phone-number/tests/rendering/ods-phone-number.e2e.ts
@@ -22,9 +22,10 @@ describe('ods-phone-number rendering', () => {
     return page.evaluate(() => {
       const options = document.querySelector('ods-phone-number')
         ?.shadowRoot?.querySelector('ods-select')
-        ?.shadowRoot?.querySelectorAll<HTMLElement>('option');
-
-      return Array.from(options || []).map((option) => option.getAttribute('data-name')!);
+        ?.shadowRoot?.querySelectorAll<HTMLElement>('.option');
+      return Array.from(options || []).map((option) => {
+        return option.children[1].innerHTML!;
+      });
     });
   }
 
@@ -79,14 +80,21 @@ describe('ods-phone-number rendering', () => {
   });
 
   it('should render the web component with countries in the right order', async() => {
-    await setup('<ods-phone-number locale="en" countries=\'["fr", "be"]\'></ods-phone-number>');
+    await setup('<ods-phone-number countries=\'[ "fr","gq", "gb"]\'></ods-phone-number>');
+    const selectElement = await page.find('ods-phone-number >>> ods-select');
+    await selectElement.click();
+    await page.waitForChanges();
     const countriesNames = await getCountriesNames();
 
-    expect(countriesNames.sort()).toEqual(['Belgium', 'France', null]);
+    expect(countriesNames).toEqual(['Equatorial Guinea (+240)', 'France (+33)', 'United Kingdom of Great Britain and Northern Ireland (+44)']);
+
     await el.setAttribute('locale', 'fr');
     await page.waitForChanges();
+    await selectElement.click();
+    await selectElement.click();
+    await page.waitForChanges();
     const countriesNamesLocaleChanged = await getCountriesNames();
-    expect(countriesNamesLocaleChanged.sort()).toEqual(['Belgique', 'France', null]);
+    expect(countriesNamesLocaleChanged).toEqual(['France (+33)', 'Guinée équatoriale (+240)', 'Royaume-Uni (+44)']);
 
   });
 

diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.tsx b/packages/ods/src/components/select/src/components/ods-select/ods-select.tsx
@@ -199,7 +199,7 @@ export class OdsSelect implements OdsFormElement {
         this.select?.sync(); // get updated options
         this.select?.setValue(currentValue); // set the value back
       }
-      
+
       for (const mutation of mutations) {
         // When observing is-required, the inner element validity is not yet up-to-date
         // so we observe the element required attribute instead
@@ -338,7 +338,7 @@ export class OdsSelect implements OdsFormElement {
       plugins: plugin,
       render: template,
       selectOnTab: true,
-      sortField: this.sortBy && [{field: this.sortBy}],
+      sortField: this.sortBy && [{ field: this.sortBy }],
     });
 
     this.bindSelectControl();
-Original file line number
+Diff line change
@@ Expand Up @@
       }
     }
     export {
       type TranslatedCountryMap,
       formatPhoneNumber,
@@ Expand Down @@