fix(datepicker): docs & console

ovh · Nov 28, 2024 · d068035 · d068035
1 parent 7bbfdd1
commit d068035
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 17 deletions.
diff --git a/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx b/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx
@@ -236,12 +236,9 @@ export class OdsDatepicker {
       // Triggered either by user selection or `setDate` instance method call
       this.inputElement.addEventListener('changeDate', (event: Event) => {
         const newDate: Date = (event as CustomEvent).detail.date;
-        // console.log('changeDate', (event as CustomEvent).detail, newDate, this.value);
         const formattedNewDate = formatDate(newDate, this.format);
 
         const previousValue = this.value;
-        // console.log('changeDate newDate', newDate instanceof Date ? newDate.toISOString() : newDate);
-        // console.log('changeDate previousValue', previousValue instanceof Date ? previousValue.toISOString() : previousValue);
         this.value = newDate ?? null;
         this.onValueChange(formattedNewDate, previousValue);
       });

diff --git a/packages/ods/src/components/datepicker/tests/rendering/ods-datepicker.spec.ts b/packages/ods/src/components/datepicker/tests/rendering/ods-datepicker.spec.ts
@@ -4,12 +4,6 @@ import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';
 import { OdsDatepicker } from '../../src';
 
-// @ts-ignore for test purposes
-global.MutationObserver = jest.fn(() => ({
-  disconnect: jest.fn(),
-  observe: jest.fn(),
-}));
-
 describe('ods-datepicker rendering', () => {
   let page: SpecPage;
   let root: HTMLElement | undefined;

diff --git a/packages/storybook/stories/components/datepicker/datepicker.stories.ts b/packages/storybook/stories/components/datepicker/datepicker.stories.ts
@@ -17,16 +17,16 @@ export const Demo: StoryObj = {
     const validityStateTemplate = html`<br>
     <div id="validity-state-datepicker" style="display: grid; row-gap: 5px;"></div>
     <script>
-      (() => {
+      (async() => {
           const divValidityState = document.querySelector('#validity-state-datepicker');
           const datepicker = document.querySelector('.my-datepicker');
-          console.log('datepicker', datepicker)
-          setTimeout(async() => await renderValidityState(), 0);
+          await customElements.whenDefined('ods-datepicker');
+          await renderValidityState();
           datepicker.addEventListener('odsChange', () => {
-            setTimeout(async() => await renderValidityState(), 0);
+            await renderValidityState();
           })
           async function renderValidityState() {
-            const validity = await datepicker?.getValidity()
+            const validity = await datepicker.getValidity()
             divValidityState.innerHTML = '';
             for (let key in validity) {
               divValidityState.innerHTML += "<div>" + key + ": " + validity[key] + "</div>";
@@ -175,6 +175,7 @@ export const Demo: StoryObj = {
         type: { summary: 'boolean' },
       },
       control: 'boolean',
+      description: 'Toggle this to see the component validityState',
     },
   }),
   args: {
@@ -325,9 +326,9 @@ export const ValidityState: StoryObj = {
   (async() => {
       const divValidityState = document.querySelector('#validity-state-demo');
       const datepicker = document.querySelector('#datepicker-validity-state-demo');
-      setTimeout(async() => { await renderValidityState() }, 0)
-      datepicker.addEventListener('odsChange', () => {
-        setTimeout(async() => { await renderValidityState() }, 0)
+      await renderValidityState();
+      datepicker.addEventListener('odsChange', async() => {
+        await renderValidityState();
       })
       async function renderValidityState() {
         const validity = await datepicker.getValidity();