@morscherlab/mint-sdk 1.2.0-beta.7 → 1.2.0-beta.9

package/src/__tests__/components/WellPlate.interaction.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import {
   nextClickedWellSelection,
   useWellPlateInteraction,
@@ -41,6 +42,14 @@ function dragEvent(data: Record<string, string> = {}): DragEvent {
   } as unknown as DragEvent
 }
 
+function keyEvent(key: string, altKey = true): KeyboardEvent {
+  return {
+    key,
+    altKey,
+    preventDefault: vi.fn(),
+  } as unknown as KeyboardEvent
+}
+
 function createInteraction(overrides: Partial<Parameters<typeof useWellPlateInteraction>[0]> = {}) {
   const emitted: Record<string, unknown[]> = {}
   const selected = { value: [] as string[] }
@@ -168,4 +177,54 @@ describe('WellPlate interaction helpers', () => {
       ['A1', 'A2', 'B1', 'B2'],
     ])
   })
+
+  it('moves a well with the keyboard pick-up/drop chord in drag mode', async () => {
+    const { emitted, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+    const source = well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' })
+    const target = well({ id: 'B2', row: 1, col: 1 })
+
+    interaction.handleWellMoveKeydown(source, keyEvent('Enter'))
+    expect(interaction.dragSourceWell.value).toBe('A1')
+
+    interaction.handleWellMoveKeydown(target, keyEvent('Enter'))
+
+    expect(emitted.move).toEqual([['A1', 'B2']])
+    expect(interaction.dragSourceWell.value).toBeNull()
+
+    await nextTick()
+    expect(interaction.moveAnnouncement.value).toBe('Well A1 moved to B2.')
+  })
+
+  it('cancels a keyboard pick-up with Escape and refuses empty wells', () => {
+    const { emitted, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+
+    interaction.handleWellMoveKeydown(well({ id: 'A2', row: 0, col: 1 }), keyEvent('Enter'))
+    expect(interaction.dragSourceWell.value).toBeNull()
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Enter'),
+    )
+    expect(interaction.dragSourceWell.value).toBe('A1')
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Escape', false),
+    )
+    expect(interaction.dragSourceWell.value).toBeNull()
+    expect(emitted.move).toBeUndefined()
+  })
+
+  it('ignores the move chord outside drag selection mode', () => {
+    const { interaction } = createInteraction()
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Enter'),
+    )
+
+    expect(interaction.dragSourceWell.value).toBeNull()
+  })
 })

package/src/__tests__/composables/useDropdownState.test.ts

@@ -14,7 +14,7 @@ function mountHarness(options: UseDropdownStateOptions = {}) {
       state = useDropdownState(options)
       return state
     },
-    template: '<div ref="rootRef" class="dropdown-root"><button class="inside">Inside</button></div>',
+    template: '<div ref="rootRef" class="dropdown-root"><button ref="triggerRef" class="trigger">Trigger</button><button class="inside">Inside</button></div>',
   }), { attachTo: document.body })
 
   if (!state) {
@@ -78,6 +78,63 @@ describe('useDropdownState', () => {
     wrapper.unmount()
   })
 
+  it('returns focus to the trigger only when asked', async () => {
+    const { wrapper, state } = mountHarness()
+    const trigger = wrapper.get<HTMLButtonElement>('.trigger').element
+    const inside = wrapper.get<HTMLButtonElement>('.inside').element
+
+    state.open()
+    inside.focus()
+    state.close()
+    await nextTick()
+    expect(document.activeElement).toBe(inside)
+
+    state.open()
+    inside.focus()
+    state.close(true)
+    await nextTick()
+    expect(document.activeElement).toBe(trigger)
+
+    wrapper.unmount()
+  })
+
+  it('returns focus to the trigger when Escape closes the dropdown', async () => {
+    const { wrapper, state } = mountHarness()
+    const trigger = wrapper.get<HTMLButtonElement>('.trigger').element
+
+    state.open()
+    wrapper.get<HTMLButtonElement>('.inside').element.focus()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(state.isOpen.value).toBe(false)
+    expect(document.activeElement).toBe(trigger)
+
+    wrapper.unmount()
+  })
+
+  it('closes on scroll and resize only when closeOnScroll is set', async () => {
+    const plain = mountHarness()
+    plain.state.open()
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+    expect(plain.state.isOpen.value).toBe(true)
+    plain.wrapper.unmount()
+
+    const scrolling = mountHarness({ closeOnScroll: true })
+    scrolling.state.open()
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+    expect(scrolling.state.isOpen.value).toBe(false)
+
+    scrolling.state.open()
+    window.dispatchEvent(new Event('resize'))
+    await nextTick()
+    expect(scrolling.state.isOpen.value).toBe(false)
+    scrolling.wrapper.unmount()
+  })
+
   it('can opt out of outside-click and Escape closing', async () => {
     const { wrapper, state } = mountHarness({
       closeOnOutsideClick: false,

package/src/__tests__/composables/useListReorder.test.ts

@@ -0,0 +1,145 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+import {
+  reorderList,
+  useListReorder,
+  useReorderAnnouncer,
+  type ListReorderMove,
+} from '../../composables/useListReorder'
+
+interface Row { id: string; name: string }
+
+function mountHarness(onReorder: (move: ListReorderMove<Row>) => void, disabled = false) {
+  const items = ref<Row[]>([
+    { id: 'a', name: 'Alpha' },
+    { id: 'b', name: 'Beta' },
+    { id: 'c', name: 'Gamma' },
+  ])
+
+  const wrapper = mount(defineComponent({
+    setup() {
+      const reorder = useListReorder<Row>({
+        items: () => items.value,
+        getId: (row) => row.id,
+        getLabel: (row) => row.name,
+        disabled: () => disabled,
+        itemNoun: 'Row',
+        onReorder,
+      })
+      return { items, ...reorder }
+    },
+    template: `
+      <ul>
+        <li v-for="(row, index) in items" :key="row.id" :data-id="row.id"
+            @keydown="onKeydown($event, row, index)"
+            @dragstart="onDragStart($event, row, index)"
+            @dragover="onDragOver($event, row, index)"
+            @drop="onDrop($event, row, index)">{{ row.name }}</li>
+      </ul>
+      <p class="announcement">{{ announcement }}</p>
+    `,
+  }), { attachTo: document.body })
+
+  return { wrapper, items }
+}
+
+describe('reorderList', () => {
+  it('returns a copy with the item moved, leaving the source untouched', () => {
+    const source = ['a', 'b', 'c']
+
+    expect(reorderList(source, 0, 2)).toEqual(['b', 'c', 'a'])
+    expect(source).toEqual(['a', 'b', 'c'])
+  })
+})
+
+describe('useReorderAnnouncer', () => {
+  it('publishes messages and re-announces an identical message', async () => {
+    const { announcement, announce } = useReorderAnnouncer()
+
+    announce('Alpha moved.')
+    await nextTick()
+    expect(announcement.value).toBe('Alpha moved.')
+
+    announce('Alpha moved.')
+    expect(announcement.value).toBe('')
+    await nextTick()
+    expect(announcement.value).toBe('Alpha moved.')
+  })
+})
+
+describe('useListReorder', () => {
+  it('moves an item one position later on Alt+ArrowDown and announces it', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(onReorder).toHaveBeenCalledTimes(1)
+    const move = onReorder.mock.calls[0][0] as ListReorderMove<Row>
+    expect(move.fromIndex).toBe(0)
+    expect(move.toIndex).toBe(1)
+    expect(move.source).toBe('keyboard')
+    expect(move.items.map(row => row.id)).toEqual(['b', 'a', 'c'])
+
+    await nextTick()
+    expect(wrapper.get('.announcement').text()).toBe('Alpha moved to position 2 of 3.')
+
+    wrapper.unmount()
+  })
+
+  it('moves an item one position earlier on Alt+ArrowUp and Alt+ArrowLeft', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    await wrapper.get('[data-id="c"]').trigger('keydown', { key: 'ArrowUp', altKey: true })
+    await wrapper.get('[data-id="c"]').trigger('keydown', { key: 'ArrowLeft', altKey: true })
+
+    expect(onReorder.mock.calls.map(call => (call[0] as ListReorderMove<Row>).toIndex)).toEqual([1, 1])
+
+    wrapper.unmount()
+  })
+
+  it('ignores arrow keys without Alt and moves past either end', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowUp', altKey: true })
+    await wrapper.get('[data-id="c"]').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(onReorder).not.toHaveBeenCalled()
+
+    wrapper.unmount()
+  })
+
+  it('reorders through a drag and clears its drag state', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    const dataTransfer = { effectAllowed: '', dropEffect: '', setData: vi.fn() }
+    await wrapper.get('[data-id="a"]').trigger('dragstart', { dataTransfer })
+    await wrapper.get('[data-id="c"]').trigger('dragover', { dataTransfer })
+    await wrapper.get('[data-id="c"]').trigger('drop', { dataTransfer })
+
+    const move = onReorder.mock.calls[0][0] as ListReorderMove<Row>
+    expect(move).toMatchObject({ fromIndex: 0, toIndex: 2, source: 'drag' })
+    expect(move.items.map(row => row.id)).toEqual(['b', 'c', 'a'])
+    expect(dataTransfer.setData).toHaveBeenCalledWith('text/plain', 'a')
+
+    wrapper.unmount()
+  })
+
+  it('blocks every reorder while disabled', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder, true)
+
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowDown', altKey: true })
+    await wrapper.get('[data-id="a"]').trigger('dragstart', { dataTransfer: { setData: vi.fn() } })
+    await wrapper.get('[data-id="b"]').trigger('drop', { dataTransfer: { setData: vi.fn() } })
+
+    expect(onReorder).not.toHaveBeenCalled()
+
+    wrapper.unmount()
+  })
+})

package/src/__tests__/composables/useRequestSyncState.test.ts

@@ -89,4 +89,144 @@ describe('useRequestSyncState', () => {
     expect(state.lastSavedAt.value).toBeNull()
     expect(state.lastRunAt.value).toBeNull()
   })
+
+  describe('stale-response guard', () => {
+    function deferred<T>() {
+      let resolve!: (value: T) => void
+      let reject!: (reason: unknown) => void
+      const promise = new Promise<T>((res, rej) => {
+        resolve = res
+        reject = rej
+      })
+      return { promise, resolve, reject }
+    }
+
+    it('lets only the newest run own loading', async () => {
+      const state = useRequestSyncState()
+      const first = deferred<string>()
+      const second = deferred<string>()
+
+      const firstRun = state.run(() => first.promise, { success: 'load' })
+      const secondRun = state.run(() => second.promise, { success: 'load' })
+
+      first.resolve('stale')
+      await expect(firstRun).resolves.toBe('stale')
+      expect(state.loading.value).toBe(true)
+
+      second.resolve('fresh')
+      await expect(secondRun).resolves.toBe('fresh')
+      expect(state.loading.value).toBe(false)
+    })
+
+    it('does not let a stale success move the sync timestamps', async () => {
+      const state = useRequestSyncState()
+      const first = deferred<string>()
+      const second = deferred<string>()
+
+      const firstRun = state.run(() => first.promise, { success: 'save' })
+      const secondRun = state.run(() => second.promise, { success: 'load' })
+
+      first.resolve('stale')
+      await firstRun
+      expect(state.lastSavedAt.value).toBeNull()
+
+      second.resolve('fresh')
+      await secondRun
+      expect(state.lastLoadedAt.value).toBeInstanceOf(Date)
+      expect(state.lastSavedAt.value).toBeNull()
+    })
+
+    it('does not let a stale failure write the error, but still rejects its caller', async () => {
+      const state = useRequestSyncState()
+      const first = deferred<string>()
+      const second = deferred<string>()
+
+      const firstRun = state.run(() => first.promise, { errorMessage: 'first failed' })
+      const secondRun = state.run(() => second.promise, { success: 'load' })
+
+      first.reject(new Error('stale failure'))
+      await expect(firstRun).rejects.toThrow('stale failure')
+      expect(state.error.value).toBeNull()
+
+      second.resolve('fresh')
+      await secondRun
+      expect(state.error.value).toBeNull()
+      expect(state.loading.value).toBe(false)
+    })
+
+    it('aborts the superseded run signal by default', async () => {
+      const state = useRequestSyncState()
+      const first = deferred<string>()
+      const second = deferred<string>()
+      let firstSignal: AbortSignal | undefined
+
+      const firstRun = state.run((signal) => {
+        firstSignal = signal
+        return first.promise
+      })
+      expect(firstSignal?.aborted).toBe(false)
+
+      const secondRun = state.run(() => second.promise)
+      expect(firstSignal?.aborted).toBe(true)
+
+      first.resolve('stale')
+      second.resolve('fresh')
+      await Promise.all([firstRun, secondRun])
+    })
+
+    it('leaves the previous signal alone when abortPrevious is false', async () => {
+      const state = useRequestSyncState()
+      const first = deferred<string>()
+      const second = deferred<string>()
+      let firstSignal: AbortSignal | undefined
+
+      const firstRun = state.run((signal) => {
+        firstSignal = signal
+        return first.promise
+      })
+      const secondRun = state.run(() => second.promise, { abortPrevious: false })
+
+      expect(firstSignal?.aborted).toBe(false)
+      first.resolve('stale')
+      second.resolve('fresh')
+      await Promise.all([firstRun, secondRun])
+    })
+
+    it('forwards a caller signal onto the operation signal', async () => {
+      const state = useRequestSyncState()
+      const caller = new AbortController()
+      const pending = deferred<string>()
+      let operationSignal: AbortSignal | undefined
+
+      const run = state.run((signal) => {
+        operationSignal = signal
+        return pending.promise
+      }, { signal: caller.signal })
+
+      caller.abort()
+      expect(operationSignal?.aborted).toBe(true)
+
+      pending.resolve('done')
+      await run
+    })
+
+    it('cancel() aborts the in-flight run and drops loading', async () => {
+      const state = useRequestSyncState()
+      const pending = deferred<string>()
+      let operationSignal: AbortSignal | undefined
+
+      const run = state.run((signal) => {
+        operationSignal = signal
+        return pending.promise
+      }, { success: 'load' })
+
+      state.cancel()
+      expect(operationSignal?.aborted).toBe(true)
+      expect(state.loading.value).toBe(false)
+
+      pending.resolve('too late')
+      await expect(run).resolves.toBe('too late')
+      expect(state.lastLoadedAt.value).toBeNull()
+    })
+  })
 })

package/src/__tests__/stores/settings.test.ts

@@ -1,6 +1,12 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
-import { useSettingsStore } from '../../stores/settings'
+import { nextTick } from 'vue'
+import {
+  paletteCssVariables,
+  tableDensityToSize,
+  tryUseSettingsStore,
+  useSettingsStore,
+} from '../../stores/settings'
 
 function mockMatchMedia(matches = false) {
   Object.defineProperty(window, 'matchMedia', {
@@ -46,6 +52,8 @@ describe('useSettingsStore', () => {
     setActivePinia(createPinia())
     installLocalStorage()
     document.documentElement.classList.remove('dark')
+    document.documentElement.removeAttribute('style')
+    delete document.documentElement.dataset.density
     mockMatchMedia(false)
   })
 
@@ -75,4 +83,66 @@ describe('useSettingsStore', () => {
       tableDensity: 'compact',
     }))
   })
+
+  describe('palette and density DOM sync', () => {
+    it('writes no palette overrides for the default palette', () => {
+      const settings = useSettingsStore()
+      settings.initialize()
+
+      expect(paletteCssVariables('default')).toEqual({})
+      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
+    })
+
+    it('applies the stored palette hues to html on initialize', () => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'viridis' }))
+
+      const settings = useSettingsStore()
+      settings.initialize()
+
+      const style = document.documentElement.style
+      expect(style.getPropertyValue('--color-primary')).toBe('hsl(280 84% 67%)')
+      expect(style.getPropertyValue('--color-primary-hover')).toBe('hsl(280 75% 59%)')
+      expect(style.getPropertyValue('--color-cta')).toBe('hsl(80 95% 53%)')
+    })
+
+    it('re-applies the overrides when the palette changes and clears them on default', async () => {
+      const settings = useSettingsStore()
+      settings.initialize()
+
+      settings.colorPalette = 'pastel'
+      await nextTick()
+      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('hsl(200 84% 67%)')
+
+      settings.colorPalette = 'default'
+      await nextTick()
+      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
+      expect(document.documentElement.style.getPropertyValue('--color-primary-soft')).toBe('')
+    })
+
+    it('mirrors the table density onto html[data-density]', async () => {
+      const settings = useSettingsStore()
+      settings.initialize()
+      expect(document.documentElement.dataset.density).toBe('normal')
+
+      settings.tableDensity = 'compact'
+      await nextTick()
+      expect(document.documentElement.dataset.density).toBe('compact')
+    })
+
+    it('maps each density onto a table size', () => {
+      const settings = useSettingsStore()
+      settings.initialize()
+
+      expect(tableDensityToSize('compact')).toBe('sm')
+      expect(tableDensityToSize('normal')).toBe('md')
+      expect(tableDensityToSize('comfortable')).toBe('lg')
+
+      settings.tableDensity = 'comfortable'
+      expect(settings.getTableSize()).toBe('lg')
+    })
+  })
+
+  it('exposes the store through tryUseSettingsStore when Pinia is active', () => {
+    expect(tryUseSettingsStore()).not.toBeNull()
+  })
 })

package/src/__tests__/styles/cssTokens.test.ts

@@ -0,0 +1,131 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { dirname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const srcRoot = resolve(here, '../..')
+const stylesDir = join(srcRoot, 'styles')
+const variablesCss = readFileSync(join(stylesDir, 'variables.css'), 'utf-8')
+
+/**
+ * Custom properties that are legitimately *not* declared in variables.css:
+ * they are set at runtime (inline `:style` bindings, JS-built names) or are
+ * component-local knobs declared in the same stylesheet that consumes them.
+ * Anything else must be a canonical token from variables.css.
+ */
+const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([
+  // Names assembled in JS (`--grp-${i}`) — the literal prefix is what the
+  // scanner sees in a template string.
+  '--grp-',
+])
+
+const SOURCE_EXTENSIONS = ['.vue', '.css', '.ts']
+const IGNORED_DIRS = new Set(['__tests__', 'generated-ui', 'node_modules'])
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) {
+      if (!IGNORED_DIRS.has(entry)) walk(full, out)
+    } else if (SOURCE_EXTENSIONS.some((ext) => entry.endsWith(ext))) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+const sourceFiles = walk(srcRoot)
+
+function declaredIn(text: string): Set<string> {
+  const names = new Set<string>()
+  // `--foo: value` declarations, in CSS blocks and in JS style objects.
+  for (const m of text.matchAll(/(--[A-Za-z0-9_-]+)\s*:/g)) names.add(m[1])
+  // setProperty('--foo', …) / `'--foo'` keys in style bindings.
+  for (const m of text.matchAll(/['"`](--[A-Za-z0-9_-]+)['"`]/g)) names.add(m[1])
+  return names
+}
+
+const canonicalTokens = declaredIn(variablesCss)
+
+// Component-local custom properties: declared in a stylesheet or set from an
+// inline `:style` binding in the SFC that owns it. They are legitimate, they
+// just are not part of the global token set.
+const componentLocalProperties = new Set<string>()
+for (const file of sourceFiles) {
+  for (const name of declaredIn(readFileSync(file, 'utf-8'))) {
+    componentLocalProperties.add(name)
+  }
+}
+
+interface Usage {
+  file: string
+  token: string
+}
+
+const usages: Usage[] = []
+for (const file of sourceFiles) {
+  const text = readFileSync(file, 'utf-8')
+  for (const m of text.matchAll(/var\(\s*(--[A-Za-z0-9_-]+)/g)) {
+    usages.push({ file, token: m[1] })
+  }
+}
+
+describe('CSS custom properties', () => {
+  it('scans a meaningful number of var() references', () => {
+    expect(usages.length).toBeGreaterThan(500)
+    expect(canonicalTokens.size).toBeGreaterThan(70)
+  })
+
+  it('only references custom properties that are actually defined', () => {
+    const undefinedUsages = usages.filter(({ token }) => {
+      if (canonicalTokens.has(token)) return false
+      if (RUNTIME_PROPERTY_ALLOWLIST.has(token)) return false
+      return !componentLocalProperties.has(token)
+    })
+
+    const report = [
+      ...new Set(
+        undefinedUsages.map(
+          ({ file, token }) => `${token} (${relative(srcRoot, file)})`,
+        ),
+      ),
+    ].sort()
+
+    expect(report).toEqual([])
+  })
+
+  it('does not use the platform-only --color-bg-*/--color-text-*/--color-border aliases', () => {
+    const platformOnly = /^--color-(bg|text)-|^--color-border$/
+    const offenders = [
+      ...new Set(
+        usages
+          .filter(({ token }) => platformOnly.test(token))
+          .map(({ file, token }) => `${token} (${relative(srcRoot, file)})`),
+      ),
+    ].sort()
+
+    expect(offenders).toEqual([])
+  })
+
+  it('aggregates every component stylesheet in styles/index.css', () => {
+    const index = readFileSync(join(stylesDir, 'index.css'), 'utf-8')
+    const imported = new Set(
+      [...index.matchAll(/@import\s+'\.\/components\/([^']+)'/g)].map((m) => m[1]),
+    )
+    const onDisk = readdirSync(join(stylesDir, 'components')).filter((f) =>
+      f.endsWith('.css'),
+    )
+    expect([...onDisk].filter((f) => !imported.has(f)).sort()).toEqual([])
+  })
+
+  it('does not re-import aggregated stylesheets from SFC <style> blocks', () => {
+    const offenders = sourceFiles
+      .filter((f) => f.endsWith('.vue'))
+      .filter((f) => /@import\s+['"][^'"]*styles\/components\//.test(readFileSync(f, 'utf-8')))
+      .map((f) => relative(srcRoot, f))
+      .sort()
+
+    expect(offenders).toEqual([])
+  })
+})