From 6a97d1230e3e7c1615d58c9304a13bdbd5e62b1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=87orlu?= <127687+muratcorlu@users.noreply.github.com> Date: Tue, 26 Jul 2022 13:33:02 +0200 Subject: [PATCH] refactor(tooltip): lint warnings are fixed (#170) --- src/components/tooltip/bl-tooltip.css | 4 +- src/components/tooltip/bl-tooltip.test.ts | 69 +++++++++++++++-------- src/components/tooltip/bl-tooltip.ts | 65 +++++++++++---------- 3 files changed, 84 insertions(+), 54 deletions(-) diff --git a/src/components/tooltip/bl-tooltip.css b/src/components/tooltip/bl-tooltip.css index 992c150d..907ef1dc 100644 --- a/src/components/tooltip/bl-tooltip.css +++ b/src/components/tooltip/bl-tooltip.css @@ -40,7 +40,7 @@ top: var(--bl-tooltip-arrow-top); bottom: var(--bl-tooltip-arrow-bottom); right: var(--bl-tooltip-arrow-right); - left: var(--bl-tooltip-arrow-left) + left: var(--bl-tooltip-arrow-left); } .visible { @@ -49,4 +49,4 @@ .hidden { --bl-tooltip-visibility: hidden; -} \ No newline at end of file +} diff --git a/src/components/tooltip/bl-tooltip.test.ts b/src/components/tooltip/bl-tooltip.test.ts index 3dac7a12..bd7ed49b 100644 --- a/src/components/tooltip/bl-tooltip.test.ts +++ b/src/components/tooltip/bl-tooltip.test.ts @@ -1,9 +1,8 @@ -import { assert, elementUpdated, expect, fixture, html,oneEvent } from '@open-wc/testing'; +import { assert, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing'; import { sendMouse } from '@web/test-runner-commands'; import BlTooltip from './bl-tooltip'; import type typeOfBlTooltip from './bl-tooltip'; - describe('bl-tooltip', () => { it('should be defined tooltip instance', () => { //when @@ -21,11 +20,11 @@ describe('bl-tooltip', () => { assert.shadowDom.equal( el, ` - -
+
@@ -43,8 +42,9 @@ describe('bl-tooltip', () => { it('should be rendered with slot', async () => { //when - const el = await fixture(html` - Tooltip Test `); + const el = await fixture(html` Tooltip Test + `); //then expect(el.shadowRoot?.querySelector('.trigger')).to.exist; @@ -52,10 +52,13 @@ describe('bl-tooltip', () => { expect(el.shadowRoot?.querySelector('.tooltip')).to.exist; }); - it('should be rendered with correct placement attribute', async () => { //when - const el = await fixture(html` Test Tooltip`); + const el = await fixture( + html` Test Tooltip` + ); //then expect(el.getAttribute('placement')).to.eq('top-end'); @@ -63,7 +66,11 @@ describe('bl-tooltip', () => { it('should be rendered with correct placement attribute when placement attribute was changed', async () => { //given - const el = await fixture(html` Test Tooltip`); + const el = await fixture( + html` Test Tooltip` + ); el.setAttribute('placement', 'right-start'); //when @@ -72,10 +79,14 @@ describe('bl-tooltip', () => { //then expect(el.getAttribute('placement')).to.eq('right-start'); }); - + it('should have `visible` class when mouse over of trigger', async () => { //given - const el = await fixture(html` Test Tooltip`); + const el = await fixture( + html` Test Tooltip` + ); const tooltip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement; const trigger = document.querySelector('button') as HTMLElement; const { x, y } = getMiddleOfElement(trigger); @@ -89,13 +100,17 @@ describe('bl-tooltip', () => { it('should not have `show` class when mouse leave of trigger', async () => { //given - const el = await fixture(html` Test Tooltip`); + const el = await fixture( + html` Test Tooltip` + ); const tooltip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement; const trigger = document.querySelector('button') as HTMLElement; const body = document.querySelector('body') as HTMLElement; - const { x:triggerX, y:triggerY } = getMiddleOfElement(trigger); - const { x:bodyX, y:bodyY } = getMiddleOfElement(body); + const { x: triggerX, y: triggerY } = getMiddleOfElement(trigger); + const { x: bodyX, y: bodyY } = getMiddleOfElement(body); //when await sendMouse({ type: 'move', position: [triggerX, triggerY] }); @@ -107,7 +122,11 @@ describe('bl-tooltip', () => { it('should fires bl-tooltip-show on mouse over', async () => { //given - const el = await fixture(html` Test Tooltip`); + const el = await fixture( + html` Test Tooltip` + ); const trigger = document.querySelector('button') as HTMLElement; const { x, y } = getMiddleOfElement(trigger); @@ -117,21 +136,25 @@ describe('bl-tooltip', () => { //then const ev = await oneEvent(el, 'bl-tooltip-show'); expect(ev).to.exist; - expect(ev.detail).to.be.equal('Show event fired!'); + expect(ev.detail).to.be.equal('Show event fired!'); }); it('should fires bl-tooltip-hide on mouse leave', async () => { //given - const el = await fixture(html` Test Tooltip`); + const el = await fixture( + html` Test Tooltip` + ); const trigger = document.querySelector('button') as HTMLElement; const body = document.querySelector('body') as HTMLElement; - const { x:triggerX, y:triggerY } = getMiddleOfElement(trigger); - const { x:bodyX, y:bodyY } = getMiddleOfElement(body); + const { x: triggerX, y: triggerY } = getMiddleOfElement(trigger); + const { x: bodyX, y: bodyY } = getMiddleOfElement(body); //when - await sendMouse({ type: 'move', position: [triggerX, triggerY]}); - setTimeout(() => { - sendMouse({ type: 'move', position: [bodyX, bodyY]}) + await sendMouse({ type: 'move', position: [triggerX, triggerY] }); + setTimeout(() => { + sendMouse({ type: 'move', position: [bodyX, bodyY] }); }); //then diff --git a/src/components/tooltip/bl-tooltip.ts b/src/components/tooltip/bl-tooltip.ts index 7f72e614..c58609af 100644 --- a/src/components/tooltip/bl-tooltip.ts +++ b/src/components/tooltip/bl-tooltip.ts @@ -20,7 +20,7 @@ export type Placement = | 'right' | 'right-end'; - /** +/** * @tag bl-tooltip * @summary Baklava Tooltip component * @@ -41,30 +41,32 @@ export default class BlTooltip extends LitElement { /** * Sets placement of the tooltip - */ + */ @property({ type: String }) placement: Placement = 'top'; @state() private _visible = false; - @state() private _position : Strategy = 'absolute'; - @state() private host : HTMLElement; + @state() private _position: Strategy = 'absolute'; + @state() private host: HTMLElement; /** - * Fires when hovering over a trigger - */ + * Fires when hovering over a trigger + */ @event('bl-tooltip-show') private onShow: EventDispatcher; /** - * Fires when leaving over from trigger - */ + * Fires when leaving over from trigger + */ @event('bl-tooltip-hide') private onHide: EventDispatcher; connectedCallback() { super.connectedCallback(); setTimeout(() => { - this.host = this.shadowRoot?.host as HTMLElement; - this._position = getComputedStyle(this.host).getPropertyValue('--bl-tooltip-position') as Strategy; + this.host = this.shadowRoot?.host as HTMLElement; + this._position = getComputedStyle(this.host).getPropertyValue( + '--bl-tooltip-position' + ) as Strategy; }); } @@ -72,10 +74,15 @@ export default class BlTooltip extends LitElement { computePosition(this.trigger, this.tooltip, { placement: this.placement, strategy: this._position, - middleware: [offset(8), shift({ padding: 5 }), flip(),arrow({ element: this.arrow,padding: 5})], + middleware: [ + offset(8), + shift({ padding: 5 }), + flip(), + arrow({ element: this.arrow, padding: 5 }), + ], }).then(({ x, y, placement, middlewareData }) => { const arrowX = middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : ' '; - const arrowY = middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : ' '; + const arrowY = middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : ' '; const arrowDirections = { top: 'bottom', right: 'left', @@ -85,13 +92,13 @@ export default class BlTooltip extends LitElement { const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowDirections; const arrowDirection = arrowDirections[tooltipPlacement]; - this.host.style.setProperty('--bl-tooltip-left',`${x}px`); - this.host.style.setProperty('--bl-tooltip-top',`${y}px`) - this.host.style.setProperty('--bl-tooltip-arrow-left',arrowX); - this.host.style.setProperty('--bl-tooltip-arrow-top',arrowY); - this.host.style.setProperty('--bl-tooltip-arrow-bottom','0'); - this.host.style.setProperty('--bl-tooltip-arrow-right','0'); - this.host.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`,'-4px'); + this.host.style.setProperty('--bl-tooltip-left', `${x}px`); + this.host.style.setProperty('--bl-tooltip-top', `${y}px`); + this.host.style.setProperty('--bl-tooltip-arrow-left', arrowX); + this.host.style.setProperty('--bl-tooltip-arrow-top', arrowY); + this.host.style.setProperty('--bl-tooltip-arrow-bottom', '0'); + this.host.style.setProperty('--bl-tooltip-arrow-right', '0'); + this.host.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`, '-4px'); }); } @@ -106,20 +113,20 @@ export default class BlTooltip extends LitElement { this.onHide('Hide event fired!'); } - render(): TemplateResult { + render(): TemplateResult { const classes = classMap({ - 'tooltip': true, - 'visible': this._visible, + tooltip: true, + visible: this._visible, }); - return html` - + @mouseover="${this.show}" + @mouseleave="${this.hide}" + > -
+
`; @@ -130,4 +137,4 @@ declare global { interface HTMLElementTagNameMap { 'bl-tooltip': BlTooltip; } -} \ No newline at end of file +}