Skip to content

Commit 125aa20

Browse files
kleinfreundkleinfreund
committed
chore: simplify types in test.each
1 parent 23b611d commit 125aa20

File tree

2 files changed

+27
-33
lines changed

2 files changed

+27
-33
lines changed

‎src/ColorPicker.test.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { beforeAll, beforeEach, describe, test, expect, vi } from 'vitest'
22
import { shallowMount, flushPromises, ComponentMountingOptions } from '@vue/test-utils'
33

44
import ColorPicker from './ColorPicker.vue'
5-
import { ColorPickerProps } from './types.js'
5+
import { ColorChangeDetail, ColorPickerProps } from './types.js'
66

77
type MountingOptions = ComponentMountingOptions<ColorPickerProps> & {
88
// Overrides the props in `ComponentMountingOptions` to be more accurate.
@@ -31,7 +31,7 @@ describe('ColorPicker', () => {
3131
expect(wrapper.html()).toBeTruthy()
3232
})
3333

34-
test.each([
34+
test.each<ColorPickerProps>([
3535
{},
3636
{
3737
color: '#ffffffff',
@@ -65,7 +65,7 @@ describe('ColorPicker', () => {
6565
color: 'hsl(0, 0%, 100%, 1)',
6666
alphaChannel: 'hide',
6767
},
68-
] as const)('initializes color space and thumb correctly with default color value', (props: ColorPickerProps) => {
68+
])('initializes color space and thumb correctly with default color value', (props) => {
6969
const wrapper = createWrapper({
7070
props: {
7171
defaultFormat: 'hex',
@@ -115,7 +115,7 @@ describe('ColorPicker', () => {
115115
})
116116

117117
describe('props & attributes', () => {
118-
test.each([
118+
test.each<[ColorPickerProps, string]>([
119119
[
120120
{ color: '#f00' },
121121
'#f00',
@@ -132,7 +132,7 @@ describe('ColorPicker', () => {
132132
{ color: { h: 180, w: 33, b: 50, a: 1 } },
133133
'#548080ff',
134134
],
135-
] as const)('mounts correctly with a valid color prop', async (props: ColorPickerProps, expectedHexInputValue) => {
135+
])('mounts correctly with a valid color prop', async (props, expectedHexInputValue) => {
136136
const wrapper = createWrapper({
137137
props: {
138138
defaultFormat: 'hex',
@@ -172,7 +172,7 @@ describe('ColorPicker', () => {
172172
expect(input.value).toBe('#ffffffff')
173173
})
174174

175-
test.each([
175+
test.each<[ColorPickerProps, string[]]>([
176176
[
177177
{ defaultFormat: undefined },
178178
['H', 'S', 'L'],
@@ -193,7 +193,7 @@ describe('ColorPicker', () => {
193193
{ defaultFormat: 'rgb' },
194194
['R', 'G', 'B'],
195195
],
196-
] as const)('sets active color format to “%s” when providing default format prop', (props: ColorPickerProps, expectedLabels) => {
196+
])('sets active color format to “%s” when providing default format prop', (props, expectedLabels) => {
197197
const wrapper = createWrapper({ props })
198198

199199
const inputGroupMarkup = wrapper.find('.vacp-color-input-group').html()
@@ -261,10 +261,10 @@ describe('ColorPicker', () => {
261261
}
262262
})
263263

264-
test.each([
264+
test.each<[ColorPickerProps, boolean, string]>([
265265
[{ alphaChannel: 'show' }, true, 'hsl(180 0% 100% / 1)'],
266266
[{ alphaChannel: 'hide' }, false, 'hsl(180 0% 100%)'],
267-
] as const)('shows/hides correct elements when setting alphaChannel', async (props: ColorPickerProps, isElementVisible, expectedCssColor) => {
267+
])('shows/hides correct elements when setting alphaChannel', async (props, isElementVisible, expectedCssColor) => {
268268
const id = 'test-color-picker'
269269
const wrapper = createWrapper({
270270
attachTo: document.body,
@@ -525,7 +525,7 @@ describe('ColorPicker', () => {
525525
})
526526
})
527527

528-
test.each([
528+
test.each<[ColorPickerProps, string]>([
529529
[
530530
{ defaultFormat: 'rgb', alphaChannel: 'show' },
531531
'rgb(255 255 255 / 1)',
@@ -546,7 +546,7 @@ describe('ColorPicker', () => {
546546
{ defaultFormat: 'hex', alphaChannel: 'hide' },
547547
'#ffffff',
548548
],
549-
] as const)('copy button copies %s format as %s', async (props: ColorPickerProps, cssColor) => {
549+
])('copy button copies %s format as %s', async (props, cssColor) => {
550550
vi.spyOn(global.navigator.clipboard, 'writeText').mockImplementation(vi.fn(() => Promise.resolve()))
551551

552552
const wrapper = createWrapper({ props })
@@ -580,7 +580,7 @@ describe('ColorPicker', () => {
580580
})
581581

582582
describe('color value inputs', () => {
583-
test.each([
583+
test.each<[ColorPickerProps, string, string]>([
584584
[
585585
{ id: 'color-picker', defaultFormat: 'rgb' },
586586
'r',
@@ -596,7 +596,7 @@ describe('ColorPicker', () => {
596596
'b',
597597
'25.%',
598598
],
599-
] as const)('updating a color input with an invalid value does not update the internal color data', async (props: ColorPickerProps, channel, channelValue) => {
599+
])('updating a color input with an invalid value does not update the internal color data', async (props, channel, channelValue) => {
600600
const wrapper = createWrapper({ props })
601601

602602
const input = wrapper.find<HTMLInputElement>(`#${props.id}-color-${props.defaultFormat}-${channel}`)
@@ -630,7 +630,7 @@ describe('ColorPicker', () => {
630630
expect(emittedColorChangeEvents).toBe(undefined)
631631
})
632632

633-
test.each([
633+
test.each<[ColorPickerProps, string, string]>([
634634
[
635635
{ id: 'color-picker', defaultFormat: 'rgb' },
636636
'r',
@@ -646,7 +646,7 @@ describe('ColorPicker', () => {
646646
'b',
647647
'25.5%',
648648
],
649-
] as const)('updating a %s color input with a valid value updates the internal color data', async (props: ColorPickerProps, channel, channelValue) => {
649+
])('updating a %s color input with a valid value updates the internal color data', async (props, channel, channelValue) => {
650650
const wrapper = createWrapper({ props })
651651

652652
const input = wrapper.find<HTMLInputElement>(`#${props.id}-color-${props.defaultFormat}-${channel}`)
@@ -681,7 +681,7 @@ describe('ColorPicker', () => {
681681
})
682682

683683
describe('color-change event', () => {
684-
test.each([
684+
test.each<[ColorPickerProps, ColorChangeDetail]>([
685685
[
686686
{ color: '#ff99aacc', defaultFormat: 'hsl', alphaChannel: 'show' },
687687
{
@@ -799,7 +799,7 @@ describe('ColorPicker', () => {
799799
},
800800
},
801801
],
802-
] as const)('emits correct data', async (props: ColorPickerProps, expectedData) => {
802+
])('emits correct data', async (props, expectedData) => {
803803
const wrapper = createWrapper({ props })
804804

805805
await wrapper.setProps({ color: props.color })
@@ -812,7 +812,7 @@ describe('ColorPicker', () => {
812812
})
813813

814814
describe('color inputs', () => {
815-
test.each([
815+
test.each<[ColorPickerProps, string]>([
816816
[
817817
{ color: '#12345678', alphaChannel: 'show' },
818818
'#12345678',
@@ -845,7 +845,7 @@ describe('ColorPicker', () => {
845845
{ color: '#123', alphaChannel: 'hide' },
846846
'#123',
847847
],
848-
] as const)('shows expected color for hex colors', async (props: ColorPickerProps, expectedHexColor) => {
848+
])('shows expected color for hex colors', async (props, expectedHexColor) => {
849849
const wrapper = createWrapper({
850850
props: {
851851
defaultFormat: 'hex',

‎src/utilities/formatAsCssColor.test.ts

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import { describe, test, expect } from 'vitest'
22

33
import { formatAsCssColor } from './formatAsCssColor.js'
4-
import {
5-
ColorPairHex,
6-
ColorPairHsl,
7-
ColorPairHwb,
8-
ColorPairRgb,
9-
} from '../types.js'
104

115
describe('formatAsCssColor', () => {
12-
test.each([
6+
test.each<[...Parameters<typeof formatAsCssColor>, string]>([
137
[{ color: '#fff', format: 'hex' }, false, '#fff'],
148
[{ color: '#FFF', format: 'hex' }, false, '#FFF'],
159
[{ color: '#000', format: 'hex' }, false, '#000'],
@@ -19,29 +13,29 @@ describe('formatAsCssColor', () => {
1913
[{ color: '#112233', format: 'hex' }, true, '#112233'],
2014
[{ color: '#123a', format: 'hex' }, true, '#123'],
2115
[{ color: '#123', format: 'hex' }, true, '#123'],
22-
] as [ColorPairHex, boolean, string][])('works for HEX colors', (pair, excludeAlphaChannel, cssColorString) => {
16+
])('works for HEX colors', (pair, excludeAlphaChannel, cssColorString) => {
2317
expect(formatAsCssColor(pair, excludeAlphaChannel)).toEqual(cssColorString)
2418
})
2519

26-
test.each([
20+
test.each<[...Parameters<typeof formatAsCssColor>, string]>([
2721
[{ color: { h: 360, s: 100, l: 50, a: 1 }, format: 'hsl' }, false, 'hsl(360 100% 50% / 1)'],
2822
[{ color: { h: 270, s: 100, l: 50, a: 1 }, format: 'hsl' }, false, 'hsl(270 100% 50% / 1)'],
2923
[{ color: { h: 360, s: 100, l: 50, a: 1 }, format: 'hsl' }, true, 'hsl(360 100% 50%)'],
3024
[{ color: { h: 270, s: 100, l: 50, a: 1 }, format: 'hsl' }, true, 'hsl(270 100% 50%)'],
31-
] as [ColorPairHsl, boolean, string][])('works for HSL colors', (pair, excludeAlphaChannel, cssColorString) => {
25+
])('works for HSL colors', (pair, excludeAlphaChannel, cssColorString) => {
3226
expect(formatAsCssColor(pair, excludeAlphaChannel)).toEqual(cssColorString)
3327
})
3428

35-
test.each([
29+
test.each<[...Parameters<typeof formatAsCssColor>, string]>([
3630
[{ color: { h: 360, w: 100, b: 100, a: 1 }, format: 'hwb' }, false, 'hwb(360 100% 100% / 1)'],
3731
[{ color: { h: 270, w: 100, b: 100, a: 1 }, format: 'hwb' }, false, 'hwb(270 100% 100% / 1)'],
3832
[{ color: { h: 360, w: 100, b: 100, a: 1 }, format: 'hwb' }, true, 'hwb(360 100% 100%)'],
3933
[{ color: { h: 270, w: 100, b: 100, a: 1 }, format: 'hwb' }, true, 'hwb(270 100% 100%)'],
40-
] as [ColorPairHwb, boolean, string][])('works for HWB colors', (pair, excludeAlphaChannel, cssColorString) => {
34+
])('works for HWB colors', (pair, excludeAlphaChannel, cssColorString) => {
4135
expect(formatAsCssColor(pair, excludeAlphaChannel)).toEqual(cssColorString)
4236
})
4337

44-
test.each([
38+
test.each<[...Parameters<typeof formatAsCssColor>, string]>([
4539
[{ color: { r: 255, g: 255, b: 255, a: 1 }, format: 'rgb' }, false, 'rgb(255 255 255 / 1)'],
4640
[{ color: { r: 255, g: 0, b: 0, a: 1 }, format: 'rgb' }, false, 'rgb(255 0 0 / 1)'],
4741
[{ color: { r: 255, g: 255, b: 255, a: 1 }, format: 'rgb' }, true, 'rgb(255 255 255)'],
@@ -52,7 +46,7 @@ describe('formatAsCssColor', () => {
5246
[{ color: { r: 255, g: 0, b: 0, a: 0.333 }, format: 'rgb' }, false, 'rgb(255 0 0 / 0.33)'],
5347
[{ color: { r: 127.5, g: 127.5, b: 63.75, a: 1 }, format: 'rgb' }, false, 'rgb(127.5 127.5 63.75 / 1)'],
5448
[{ color: { r: 127.5, g: 191.25, b: 31.88, a: 1 }, format: 'rgb' }, false, 'rgb(127.5 191.25 31.88 / 1)'],
55-
] as [ColorPairRgb, boolean, string][])('works for RGB colors', (pair, excludeAlphaChannel, cssColorString) => {
49+
])('works for RGB colors', (pair, excludeAlphaChannel, cssColorString) => {
5650
expect(formatAsCssColor(pair, excludeAlphaChannel)).toEqual(cssColorString)
5751
})
5852
})

0 commit comments

Comments
 (0)