add a bunch of tests (#10)

* add a bunch of tests

* tweaks

Author: bartveneman

src/decuplicate.ts

@@ -6,11 +6,11 @@ import type { Coverage, Range } from './parse-coverage.ts'
  * - if a duplicate stylesheet enters the room, we add it's ranges to the existing stylesheet's ranges
  * - only bytes of deduplicated stylesheets are counted
  */
-export function deduplicate_entries(entries: Coverage[]): Map<NonNullable<Coverage['text']>, Pick<Coverage, 'ranges' | 'url'>> {
+export function deduplicate_entries(entries: Coverage[]): Map<Coverage['text'], Pick<Coverage, 'ranges' | 'url'>> {
 	let checked_stylesheets = new Map<string, { url: string; ranges: Range[] }>()
 
 	for (let entry of entries) {
-		let text = entry.text || ''
+		let text = entry.text
 		if (checked_stylesheets.has(text)) {
 			let sheet = checked_stylesheets.get(text)!
 			let ranges = sheet.ranges

src/filter-entries.ts

@@ -11,7 +11,6 @@ export function filter_coverage(coverage: Coverage[], parse_html?: Parser): Cove
 	let result = []
 
 	for (let entry of coverage) {
-		if (!entry.text) continue
 		let extension = ext(entry.url).toLowerCase()
 		if (extension === 'js') continue
 

src/index.test.ts

@@ -29,7 +29,7 @@ test.describe('from <style> tag', () => {
 					</body>
 				</html>
 			`
-		coverage = await generate_coverage(html)
+		coverage = (await generate_coverage(html)) as Coverage[]
 	})
 
 	test('counts totals', () => {
@@ -86,7 +86,7 @@ test.describe('from <link rel="stylesheet">', () => {
 					</body>
 				</html>
 			`
-		coverage = await generate_coverage(html, { link_css: css })
+		coverage = (await generate_coverage(html, { link_css: css })) as Coverage[]
 	})
 
 	test('counts totals', () => {

src/kitchen-sink.test.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test'
+import { calculate_coverage } from '.'
+import { DOMParser } from 'linkedom'
+
+function parse_html(html: string) {
+	return new DOMParser().parseFromString(html, 'text/html')
+}
+
+test('proejctw wallace Container', () => {
+	const coverage = [
+		{
+			url: 'http://localhost:4173/_app/immutable/assets/Container.n-2BXq6O.css',
+			text: '.container.svelte-1ginl5v{margin-inline:auto;padding-inline:var(--space-2)}@media (min-width: 44rem){.container.svelte-1ginl5v{padding-inline:var(--space-4)}}@media (min-width: 66rem){.container.svelte-1ginl5v{padding-inline:var(--space-8)}}.size-auto.svelte-1ginl5v{max-width:120rem}.size-sm.svelte-1ginl5v{max-width:28rem}.size-md.svelte-1ginl5v{max-width:32rem}.size-lg.svelte-1ginl5v{max-width:36rem}.size-xl.svelte-1ginl5v{max-width:48rem}.size-2xl.svelte-1ginl5v{max-width:64rem}.size-3xl.svelte-1ginl5v{max-width:80rem}\n',
+			ranges: [
+				{ start: 0, end: 75 },
+				{ start: 82, end: 157 },
+				{ start: 165, end: 240 },
+				{ start: 241, end: 284 },
+				{ start: 485, end: 526 },
+			],
+		},
+	]
+	let result = calculate_coverage(coverage, parse_html)
+	let sheet = result.coverage_per_stylesheet.at(0)!
+
+	expect.soft(sheet.total_lines).toBe(44)
+	expect.soft(sheet.chunks).toHaveLength(3)
+
+	let [chunk1, chunk2, chunk3] = sheet.chunks
+
+	expect.soft(chunk1?.start_line).toEqual(1)
+	expect.soft(chunk1?.end_line).toEqual(21)
+	expect.soft(chunk1?.total_lines).toEqual(21)
+
+	expect.soft(chunk2?.start_line).toEqual(22)
+	expect.soft(chunk2?.end_line).toEqual(40)
+	expect.soft(chunk2?.total_lines).toEqual(19)
+
+	expect.soft(chunk3?.start_line).toEqual(41)
+	expect.soft(chunk3?.end_line).toEqual(44)
+	expect.soft(chunk3?.total_lines).toEqual(4)
+})

src/parse-coverage.test.ts

@@ -23,7 +23,7 @@ test('parses valid JSON', () => {
 	])
 })
 
-test('allows entries without text', () => {
+test('does not allow entries without text', () => {
 	let input = `
 	[
 		{
@@ -35,12 +35,7 @@ test('allows entries without text', () => {
 	]
 	`
 	let result = parse_coverage(input)
-	expect(result).toEqual([
-		{
-			url: 'example.com',
-			ranges: [{ start: 0, end: 13 }],
-		},
-	])
+	expect(result).toEqual([])
 })
 
 test('returns empty array for invalid JSON', () => {

src/parse-coverage.ts

@@ -1,31 +1,22 @@
 import * as v from 'valibot'
 
-export type Range = {
-	start: number
-	end: number
-}
+let RangeSchema = v.object({
+	start: v.number(),
+	end: v.number(),
+})
 
-export type Coverage = {
-	url: string
-	text?: string
-	ranges: Range[]
-}
+export type Range = v.InferInput<typeof RangeSchema>
+
+let CoverageSchema = v.object({
+	text: v.string(),
+	url: v.string(),
+	ranges: v.array(RangeSchema),
+})
 
-let CoverageSchema = v.array(
-	v.object({
-		text: v.optional(v.string()),
-		url: v.string(),
-		ranges: v.array(
-			v.object({
-				start: v.number(),
-				end: v.number(),
-			}),
-		),
-	}),
-)
+export type Coverage = v.InferInput<typeof CoverageSchema>
 
 export function is_valid_coverage(input: unknown): boolean {
-	let result = v.safeParse(CoverageSchema, input)
+	let result = v.safeParse(v.array(CoverageSchema), input)
 	return result.success
 }
 

src/prettify.test.ts

@@ -54,3 +54,21 @@ test('atrule prettification', () => {
 	]
 	expect(prettify(entries)).toEqual(prettified)
 })
+
+test('prettify url()', () => {
+	let entries = [
+		{
+			url: 'example.com',
+			text: `a{ background-image: "example.com/test.gif"; background-image: url('example.com/test.jpg'); background-image: url("example.com/test.png"); }`,
+			ranges: [{ start: 0, end: 140 }],
+		},
+	]
+	let prettified = [
+		{
+			url: 'example.com',
+			text: `a {\n\tbackground-image: "example.com/test.gif";\n\tbackground-image: url("example.com/test.jpg");\n\tbackground-image: url("example.com/test.png");\n}`,
+			ranges: [{ start: 0, end: 151 - 7 }],
+		},
+	]
+	expect(prettify(entries)).toEqual(prettified)
+})

src/prettify.ts

@@ -5,9 +5,6 @@ import { tokenize, tokenTypes } from 'css-tree/tokenizer'
 
 export function prettify(coverage: Coverage[]): Coverage[] {
 	return coverage.map(({ url, text, ranges }) => {
-		if (!text) {
-			return { url, text, ranges }
-		}
 		let formatted = format(text)
 		let irrelevant_tokens: Set<number> = new Set([
 			tokenTypes.EOF,
@@ -40,11 +37,6 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 			if (irrelevant_tokens.has(type)) return
 			index++
 
-			// format-css changes the Url token to a Function,String,RightParenthesis token sequence
-			if (type === tokenTypes.Url) {
-				index += 2
-			}
-
 			let range_index = is_in_range(start, end)
 			if (range_index !== -1) {
 				ext_ranges[range_index]!.tokens.push(index)
@@ -57,12 +49,6 @@ export function prettify(coverage: Coverage[]): Coverage[] {
 		tokenize(formatted, (type, start, end) => {
 			if (irrelevant_tokens.has(type)) return
 			index++
-
-			// format-css changes the Url token to a Function,String,RightParenthesis token sequence
-			if (type === tokenTypes.Url) {
-				index += 2
-			}
-
 			new_tokens.set(index, { start, end })
 		})