fix types

src/components/format-date/format-date.test.ts

@@ -4,7 +4,7 @@ import type SlFormatDate from './format-date';
 
 describe('<sl-format-date>', () => {
   describe('defaults ', () => {
-    let clock;
+    let clock: sinon.SinonFakeTimers;
 
     beforeEach(() => {
       // fake timer so `new Date()` can be tested
@@ -53,7 +53,7 @@ describe('<sl-format-date>', () => {
       it(`date has correct language format: ${setup.lang}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></sl-format-date>
+            <sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></sl-format-date>
           `
         );
         expect(el.shadowRoot?.textContent).to.equal(setup.result);
@@ -68,7 +68,7 @@ describe('<sl-format-date>', () => {
         const el = await fixture<SlFormatDate>(
           html`
             <sl-format-date
-              date="${new Date(new Date().getFullYear(), 0, 1)}"
+              .date="${new Date(new Date().getFullYear(), 0, 1)}"
               weekday="${weekdayFormat}"
             ></sl-format-date>
           `
@@ -88,7 +88,7 @@ describe('<sl-format-date>', () => {
       it(`date has correct era format: ${eraFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></sl-format-date>
+            <sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></sl-format-date>
           `
         );
 
@@ -103,10 +103,10 @@ describe('<sl-format-date>', () => {
   describe('year property', () => {
     const yearFormats = ['numeric', '2-digit'];
     yearFormats.forEach((yearFormat: 'numeric' | '2-digit') => {
-      it(`date has correct year format: ${yearFormats}`, async () => {
+      it(`date has correct year format: ${yearFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></sl-format-date>
+            <sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></sl-format-date>
           `
         );
 
@@ -121,10 +121,10 @@ describe('<sl-format-date>', () => {
   describe('month property', () => {
     const monthFormats = ['numeric', '2-digit', 'narrow', 'short', 'long'];
     monthFormats.forEach((monthFormat: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long') => {
-      it(`date has correct month format: ${monthFormats}`, async () => {
+      it(`date has correct month format: ${monthFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></sl-format-date>
+            <sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></sl-format-date>
           `
         );
 
@@ -139,10 +139,10 @@ describe('<sl-format-date>', () => {
   describe('day property', () => {
     const dayFormats = ['numeric', '2-digit'];
     dayFormats.forEach((dayFormat: 'numeric' | '2-digit') => {
-      it(`date has correct day format: ${dayFormats}`, async () => {
+      it(`date has correct day format: ${dayFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></sl-format-date>
+            <sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></sl-format-date>
           `
         );
 
@@ -157,10 +157,10 @@ describe('<sl-format-date>', () => {
   describe('hour property', () => {
     const hourFormats = ['numeric', '2-digit'];
     hourFormats.forEach((hourFormat: 'numeric' | '2-digit') => {
-      it(`date has correct hour format: ${hourFormats}`, async () => {
+      it(`date has correct hour format: ${hourFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></sl-format-date>
+            <sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></sl-format-date>
           `
         );
 
@@ -175,11 +175,11 @@ describe('<sl-format-date>', () => {
   describe('minute property', () => {
     const minuteFormats = ['numeric', '2-digit'];
     minuteFormats.forEach((minuteFormat: 'numeric' | '2-digit') => {
-      it(`date has correct minute format: ${minuteFormats}`, async () => {
+      it(`date has correct minute format: ${minuteFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
             <sl-format-date
-              date="${new Date(new Date().getFullYear(), 0, 1)}"
+              .date="${new Date(new Date().getFullYear(), 0, 1)}"
               minute="${minuteFormat}"
             ></sl-format-date>
           `
@@ -196,11 +196,11 @@ describe('<sl-format-date>', () => {
   describe('second property', () => {
     const secondFormats = ['numeric', '2-digit'];
     secondFormats.forEach((secondFormat: 'numeric' | '2-digit') => {
-      it(`date has correct second format: ${secondFormats}`, async () => {
+      it(`date has correct second format: ${secondFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
             <sl-format-date
-              date="${new Date(new Date().getFullYear(), 0, 1)}"
+              .date="${new Date(new Date().getFullYear(), 0, 1)}"
               second="${secondFormat}"
             ></sl-format-date>
           `
@@ -217,11 +217,11 @@ describe('<sl-format-date>', () => {
   describe('timeZoneName property', () => {
     const timeZoneNameFormats = ['short', 'long'];
     timeZoneNameFormats.forEach((timeZoneNameFormat: 'short' | 'long') => {
-      it(`date has correct timeZoneName format: ${timeZoneNameFormats}`, async () => {
+      it(`date has correct timeZoneName format: ${timeZoneNameFormat}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
             <sl-format-date
-              date="${new Date(new Date().getFullYear(), 0, 1)}"
+              .date="${new Date(new Date().getFullYear(), 0, 1)}"
               time-zone-name="${timeZoneNameFormat}"
             ></sl-format-date>
           `
@@ -241,7 +241,10 @@ describe('<sl-format-date>', () => {
       it(`date has correct timeZoneName format: ${timeZone}`, async () => {
         const el = await fixture<SlFormatDate>(
           html`
-            <sl-format-date date="${new Date(new Date().getFullYear(), 0, 1)}" time-zone="${timeZone}"></sl-format-date>
+            <sl-format-date
+              .date="${new Date(new Date().getFullYear(), 0, 1)}"
+              time-zone="${timeZone}"
+            ></sl-format-date>
           `
         );
 
@@ -260,8 +263,8 @@ describe('<sl-format-date>', () => {
         const el = await fixture<SlFormatDate>(
           html`
             <sl-format-date
-              date="${new Date(new Date().getFullYear(), 0, 1)}"
+              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              hour-format="${hourFormatValue}"
+              hour-format="${hourFormatValue as 'auto' | '12' | '24'}"
             ></sl-format-date>
           `
         );