generated from justintaddei/npm-ts-template
-
-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: updated tests, partial refactor
- Added new tests. - Removed snapshot based tests in favor of explicit assertions. - Partial refactor of wave.ts. More work is need to make it testable.
- Loading branch information
1 parent
31cf821
commit 5cc0bc8
Showing
20 changed files
with
197 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export type Vector = { | ||
x: number | ||
y: number | ||
} |
13 changes: 0 additions & 13 deletions
13
src/utils/__snapshots__/createContainerElement.test.ts.snap
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,23 @@ | ||
import { expect, test } from 'vitest' | ||
import { describe, expect, test } from 'vitest' | ||
import { createContainer } from './createContainerElement' | ||
|
||
test('createContainerElement returns a an element based on `tagName`', () => { | ||
expect(createContainer({} as CSSStyleDeclaration, 'div')).toMatchSnapshot() | ||
expect(createContainer({} as CSSStyleDeclaration, 'span')).toMatchSnapshot() | ||
describe('createContainerElement', () => { | ||
test('returns an element based on `tagName`', () => { | ||
expect(createContainer({} as CSSStyleDeclaration, 'div').tagName).toBe('DIV') | ||
expect(createContainer({} as CSSStyleDeclaration, 'span').tagName).toBe('SPAN') | ||
}) | ||
|
||
test('returns an element with the correct border radius', () => { | ||
const container = createContainer( | ||
{ | ||
borderTopLeftRadius: '10px', | ||
borderTopRightRadius: '20px', | ||
borderBottomLeftRadius: '30px', | ||
borderBottomRightRadius: '40px', | ||
} as CSSStyleDeclaration, | ||
'div' | ||
) | ||
|
||
expect(container.style.borderRadius).toBe('10px 20px 40px 30px') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,64 @@ | ||
import { expect, test } from 'vitest' | ||
import { describe, expect, test } from 'vitest' | ||
import type { IVWaveDirectiveOptions } from '../options' | ||
import { createWaveElement } from './createWaveElement' | ||
|
||
test('createWaveElement returns a <div>', () => { | ||
expect(createWaveElement(0, 0, 0, {} as IVWaveDirectiveOptions)).toMatchSnapshot() | ||
describe('createWaveElement', () => { | ||
test('returns a <div>', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 0, {} as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.tagName).toBe('DIV') | ||
}) | ||
|
||
test('returns a <div> with the correct position', () => { | ||
const waveElement = createWaveElement({ x: 10, y: 20 }, 0, {} as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.top).toBe('20px') | ||
expect(waveElement.style.left).toBe('10px') | ||
}) | ||
|
||
test('returns a <div> with the correct size', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 10, {} as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.width).toBe('10px') | ||
expect(waveElement.style.height).toBe('10px') | ||
}) | ||
|
||
test('returns a <div> with the correct background color', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 0, { color: 'red' } as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.background).toBe('red') | ||
}) | ||
|
||
test('returns a <div> with the correct border radius', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 0, { color: 'red' } as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.borderRadius).toBe('50%') | ||
}) | ||
|
||
test('returns a <div> with the correct opacity', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 0, { | ||
initialOpacity: 0.5, | ||
finalOpacity: 0.5, | ||
} as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.opacity).toBe('0.5') | ||
}) | ||
|
||
test('returns a <div> with the correct transform', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 0, { | ||
initialOpacity: 0.5, | ||
finalOpacity: 0.5, | ||
} as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.transform).toBe('translate(-50%,-50%) scale(0)') | ||
}) | ||
|
||
test('returns a <div> with the correct transition', () => { | ||
const waveElement = createWaveElement({ x: 0, y: 0 }, 0, { | ||
duration: 1, | ||
easing: 'ease-in', | ||
} as IVWaveDirectiveOptions) | ||
|
||
expect(waveElement.style.transition).toBe('transform 1s ease-in, opacity 1s ease-in') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,6 @@ | ||
export const getRelativePointer = ({ x, y }: PointerEvent, { top, left }: DOMRect) => ({ | ||
import type { Vector } from '../types' | ||
|
||
export const getRelativePointer = ({ x, y }: Vector, { top, left }: DOMRect): Vector => ({ | ||
x: x - left, | ||
y: y - top, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
import { triggerIsID } from './triggerIsID' | ||
|
||
export const markWaveBoundary = (el: HTMLElement, trigger: any) => { | ||
el.dataset.vWaveBoundary = triggerIsID(trigger) ? (trigger as string) : 'true' | ||
export const markWaveBoundary = (el: HTMLElement, trigger: string | boolean) => { | ||
el.dataset.vWaveBoundary = triggerIsID(trigger) ? trigger : 'true' | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { describe, expect, test, vi } from 'vitest' | ||
import { restoreParentElementStyles, saveParentElementStyles } from './parentElementStyles' | ||
|
||
describe('parentElementStyles', () => { | ||
test('saveParentElementStyles', () => { | ||
const el = document.createElement('div') | ||
el.style.position = 'static' | ||
|
||
saveParentElementStyles(el, window.getComputedStyle(el)) | ||
|
||
expect(el.style.position).toBe('relative') | ||
expect(el.dataset.originalPositionValue).toBe('static') | ||
}) | ||
|
||
test('restoreParentElementStyles', () => { | ||
const el = document.createElement('div') | ||
el.style.position = 'relative' | ||
el.dataset.originalPositionValue = 'static' | ||
|
||
restoreParentElementStyles(el) | ||
|
||
expect(el.style.position).toBe('static') | ||
expect(el.dataset.originalPositionValue).toBe(undefined) | ||
}) | ||
|
||
test.each` | ||
direction | ||
${'top'} | ||
${'left'} | ||
${'right'} | ||
${'bottom'} | ||
`('saveParentElementStyles warns when position is static and $direction is not auto', ({ direction }) => { | ||
const el = document.createElement('div') | ||
el.style.position = 'static' | ||
el.style[direction] = '10px' | ||
|
||
console.warn = vi.fn() | ||
|
||
saveParentElementStyles(el, window.getComputedStyle(el)) | ||
|
||
expect(console.warn).toHaveBeenCalledWith( | ||
'[v-wave]:', | ||
el, | ||
`You're using a \`static\` positioned element with a non-auto value (10px) for \`${direction}\`.`, | ||
"It's position will be changed to relative while displaying the wave which might cause the element to visually jump." | ||
) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
export const saveParentElementStyles = (el: HTMLElement, computedStyles: CSSStyleDeclaration) => { | ||
if (computedStyles.position === 'static') { | ||
;(['top', 'left', 'right', 'bottom'] as const).forEach((dir) => { | ||
if (computedStyles[dir] && computedStyles[dir] !== 'auto') | ||
console.warn( | ||
'[v-wave]:', | ||
el, | ||
`You're using a \`static\` positioned element with a non-auto value (${computedStyles[dir]}) for \`${dir}\`.`, | ||
"It's position will be changed to relative while displaying the wave which might cause the element to visually jump." | ||
) | ||
}) | ||
|
||
el.dataset.originalPositionValue = el.style.position | ||
el.style.position = 'relative' | ||
} | ||
} | ||
|
||
export const restoreParentElementStyles = (el: HTMLElement) => { | ||
el.style.position = el.dataset.originalPositionValue ?? '' | ||
delete el.dataset.originalPositionValue | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export const triggerIsID = (trigger: string | boolean) => typeof trigger === 'string' && trigger !== 'auto' | ||
export const triggerIsID = (trigger: string | boolean): trigger is string /* and not 'auto' */ => | ||
typeof trigger === 'string' && trigger !== 'auto' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters