fix(breadcrumb): update test and events type

ovh · Jul 29, 2024 · 7a85f9f · 7a85f9f
1 parent e480193
commit 7a85f9f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 23 deletions.
diff --git a/.../ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.tsx b/.../ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.tsx
@@ -19,7 +19,7 @@ export class OdsBreadcrumbItem {
   @Prop({ reflect: true }) public rel?: HTMLAnchorElement['rel'];
   @Prop({ reflect: true }) public target?: HTMLAnchorElement['target'];
 
-  @Event() odsBreadcrumbItemClick!: EventEmitter<globalThis.Event>;
+  @Event() odsBreadcrumbItemClick!: EventEmitter<MouseEvent>;
   @Event() odsBreadcrumbItemExpand!: EventEmitter<void>;
 
   onExpandClick(e: Event): void {
@@ -29,7 +29,7 @@ export class OdsBreadcrumbItem {
     this.odsBreadcrumbItemExpand.emit();
   }
 
-  onLinkClick(e: globalThis.Event): void {
+  onLinkClick(e: MouseEvent): void {
     if (!this.isDisabled) {
       this.odsBreadcrumbItemClick.emit(e);
     }
@@ -39,14 +39,14 @@ export class OdsBreadcrumbItem {
     return (
       <Host class={{
         'ods-breadcrumb-item': true,
-        ['ods-breadcrumb-item--collapsed']: this.isCollapsed && !this.isExpandable,
+        'ods-breadcrumb-item--collapsed': this.isCollapsed && !this.isExpandable,
       }}>
         {
           this.isExpandable &&
           <ods-link
             href=""
             label="&hellip;"
-            onClick={ (e: globalThis.Event) => this.onExpandClick(e) }>
+            onClick={ (e: MouseEvent) => this.onExpandClick(e) }>
           </ods-link>
         }
 
@@ -61,7 +61,7 @@ export class OdsBreadcrumbItem {
               icon={ this.icon }
               isDisabled={ this.isDisabled }
               label={ this.label }
-              onClick={ (e: globalThis.Event) => this.onLinkClick(e) }
+              onClick={ (e: MouseEvent) => this.onLinkClick(e) }
               referrerpolicy={ this.referrerpolicy }
               rel={ this.rel }
               target={ this.target }>

diff --git a/packages/ods/src/components/breadcrumb/src/components/ods-breadcrumb/ods-breadcrumb.scss b/packages/ods/src/components/breadcrumb/src/components/ods-breadcrumb/ods-breadcrumb.scss
@@ -4,7 +4,7 @@ $breadcrumb-spacing: 8px;
   display: flex;
   flex-wrap: wrap;
   column-gap: $breadcrumb-spacing;
-  align-items: center;
+  align-items: baseline;
 
   ::slotted(ods-breadcrumb-item:not(:last-child)) {
     &::after {

diff --git a/packages/ods/src/components/breadcrumb/src/interfaces/events.ts b/packages/ods/src/components/breadcrumb/src/interfaces/events.ts
@@ -1,4 +1,4 @@
-type OdsBreadcrumbItemClickEvent = CustomEvent<Event>;
+type OdsBreadcrumbItemClickEvent = CustomEvent<MouseEvent>;
 type OdsBreadcrumbItemExpandEvent = CustomEvent<void>;
 
 export {

diff --git a/packages/ods/src/components/breadcrumb/tests/rendering/ods-breadcrumb-item.spec.ts b/packages/ods/src/components/breadcrumb/tests/rendering/ods-breadcrumb-item.spec.ts
@@ -48,11 +48,9 @@ describe('ods-breadcrumb-item rendering', () => {
 
   describe('isCollapsed', () => {
     it('should be reflected', async() => {
-      const dummyValue = 'dummy value';
-
-      await setup(`<ods-breadcrumb-item is-collapsed="${dummyValue}"></ods-breadcrumb-item>`);
+      await setup('<ods-breadcrumb-item is-collapsed></ods-breadcrumb-item>');
 
-      expect(root?.getAttribute('is-collapsed')).toBe(dummyValue);
+      expect(root?.getAttribute('is-collapsed')).toBe('');
     });
 
     it('should not be set by default', async() => {
@@ -64,11 +62,9 @@ describe('ods-breadcrumb-item rendering', () => {
 
   describe('isDisabled', () => {
     it('should be reflected', async() => {
-      const dummyValue = 'dummy value';
-
-      await setup(`<ods-breadcrumb-item is-disabled="${dummyValue}"></ods-breadcrumb-item>`);
+      await setup('<ods-breadcrumb-item is-disabled></ods-breadcrumb-item>');
 
-      expect(root?.getAttribute('is-disabled')).toBe(dummyValue);
+      expect(root?.getAttribute('is-disabled')).toBe('');
     });
 
     it('should not be set by default', async() => {
@@ -80,11 +76,9 @@ describe('ods-breadcrumb-item rendering', () => {
 
   describe('isExpandable', () => {
     it('should be reflected', async() => {
-      const dummyValue = 'dummy value';
-
-      await setup(`<ods-breadcrumb-item is-expandable="${dummyValue}"></ods-breadcrumb-item>`);
+      await setup('<ods-breadcrumb-item is-expandable></ods-breadcrumb-item>');
 
-      expect(root?.getAttribute('is-expandable')).toBe(dummyValue);
+      expect(root?.getAttribute('is-expandable')).toBe('');
     });
 
     it('should not be set by default', async() => {
@@ -96,11 +90,9 @@ describe('ods-breadcrumb-item rendering', () => {
 
   describe('isLast', () => {
     it('should be reflected', async() => {
-      const dummyValue = 'dummy value';
-
-      await setup(`<ods-breadcrumb-item is-last="${dummyValue}"></ods-breadcrumb-item>`);
+      await setup('<ods-breadcrumb-item is-last></ods-breadcrumb-item>');
 
-      expect(root?.getAttribute('is-last')).toBe(dummyValue);
+      expect(root?.getAttribute('is-last')).toBe('');
     });
 
     it('should not be set by default', async() => {