Skip to content

Commit f2b91e3

Browse files
bartvenemanbartveneman
authored
chore: increase test coverage for design-tokens page (#33)
1 parent 11bc58b commit f2b91e3

File tree

8 files changed

+120
-35
lines changed

8 files changed

+120
-35
lines changed

‎scripts/analyze-css-coverage.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,9 @@ if (showUncovered !== 'none') {
131131
const NUM_TRAILING_LINES = NUM_LEADING_LINES
132132
let terminal_width = process.stdout.columns || 80
133133
let line_number = (num: number, covered: boolean = true) =>
134-
`${num.toString().padStart(5, ' ')} ${covered ? '│' : '☓'} `
134+
`${num.toString().padStart(5, ' ')} ${covered ? '│' : '━'} `
135135

136-
for (let sheet of result.coverage_per_stylesheet) {
136+
for (let sheet of result.coverage_per_stylesheet.sort((a, b) => a.line_coverage_ratio - b.line_coverage_ratio)) {
137137
if (
138138
(sheet.line_coverage_ratio !== 1 && showUncovered === 'all') ||
139139
(minFileLineCoverage !== undefined &&
@@ -147,7 +147,7 @@ if (showUncovered !== 'none') {
147147
console.log(
148148
`Coverage: ${(sheet.line_coverage_ratio * 100).toFixed(2)}%, ${sheet.covered_lines}/${sheet.total_lines} lines covered`
149149
)
150-
if (minFileLineCoverage) {
150+
if (minFileLineCoverage && minFileLineCoverage !== 0 && sheet.line_coverage_ratio < minFileLineCoverage) {
151151
let lines_to_cover = minFileLineCoverage * sheet.total_lines - sheet.covered_lines
152152
console.log(
153153
`💡 Cover ${Math.ceil(lines_to_cover)} more lines to meet the file threshold of ${minFileLineCoverage * 100}%`

‎src/lib/components/code-quality/CodeQuality.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<div class="stat">
3131
<dt class="stat-name">{name}</dt>
3232
<dd
33+
data-testid="{name.toLowerCase()}-score"
3334
class={[
3435
'stat-value',
3536
{

‎src/routes/(public)/blog/[slug]/spec.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,20 @@ test('does SEO well', async ({ page }) => {
99
await expect.soft(page).toHaveH1()
1010

1111
// Has a date
12-
await expect.soft(page.locator('time').first()).toHaveAttribute(
13-
'datetime',
14-
'2022-11-09T00:00:00.000Z'
15-
)
12+
await expect.soft(page.locator('time').first()).toHaveAttribute('datetime', '2022-11-09T00:00:00.000Z')
1613
await expect.soft(page.locator('time').first()).toHaveText('9 November 2022')
1714
})
1815

1916
test('has link to blog index', async ({ page }) => {
20-
await page.goto('/blog/prettify-css-online', { waitUntil: 'domcontentloaded' })
17+
// testing this blog post specifically because it contains lots of markdown stuff which
18+
// increases chances of catching any rendering issues and increases CSS code coverage.
19+
await page.goto('/blog/css-day-2023-takeaways', { waitUntil: 'domcontentloaded' })
2120
let backLink = page.getByText('Back to blog')
2221

2322
await expect(backLink).toHaveAttribute('href', '/blog')
2423
await backLink.click()
2524

26-
await page.waitForNavigation({
27-
url: '**/blog'
28-
})
25+
await page.waitForURL('**/blog')
2926
})
3027

3128
test('Show 404 when blog post not found', async ({ page }) => {

‎src/routes/(public)/css-code-quality/spec.ts‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,47 @@ test.describe('interaction', () => {
2424
// Verify that Report is shown
2525
await expect.soft(page.getByTestId('css-quality-report')).toBeVisible()
2626
await expect.soft(page).toHaveURL('/css-code-quality?url=example.com&prettify=1')
27+
28+
// Shows top-level numbers
29+
await expect.soft(page.getByTestId('maintainability-score')).toBeVisible()
30+
await expect.soft(page.getByTestId('maintainability-score')).toBeVisible()
31+
await expect.soft(page.getByTestId('maintainability-score')).toBeVisible()
2732
})
2833

2934
test('analyzes raw input', async ({ page }) => {
3035
await page.getByRole('tab', { name: 'Analyze CSS input' }).click()
3136

37+
// Construct some big gnarly CSS so we trip some rules
38+
const MOCK_CSS = `
39+
@import url("test.css");
40+
@import url("test.css");
41+
@import url("test.css");
42+
@import url("test.css");
43+
@import url("test.css");
44+
45+
h1 {
46+
color: red;
47+
font-size: 1em;
48+
49+
${Array.from({ length: 1000 })
50+
.fill(0)
51+
.map((_, i) => `padding: 0px ${i}px;`)
52+
.join('')}
53+
}
54+
`
55+
3256
// Fill in some CSS
33-
await page.getByLabel('CSS to analyze').fill(`h1{color:red;font-size:1em;}`)
57+
await page.getByLabel('CSS to analyze').fill(MOCK_CSS)
3458
await page.getByRole('button', { name: 'Analyze CSS' }).click()
3559

3660
// Verify that Report is shown
3761
await expect(page.getByTestId('css-quality-report')).toBeVisible()
3862
await expect.soft(page).toHaveURL('/css-code-quality')
63+
64+
// Shows top-level numbers
65+
await expect.soft(page.getByTestId('maintainability-score')).toBeVisible()
66+
await expect.soft(page.getByTestId('maintainability-score')).toBeVisible()
67+
await expect.soft(page.getByTestId('maintainability-score')).toBeVisible()
3968
})
4069

4170
test('filters by selected category', async ({ page }) => {
@@ -91,4 +120,4 @@ test.describe('URL preloading', () => {
91120

92121
await expect.soft(page).toHaveURL('/css-code-quality')
93122
})
94-
})
123+
})

‎src/routes/(public)/design-tokens/nav.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,4 @@ export const nav = [
2020
{ id: 'animation-durations', title: 'Animation durations' },
2121
{ id: 'animation-functions', title: 'Animation functions' },
2222
{ id: 'units', title: 'Units' }
23-
]
23+
]

‎src/routes/(public)/design-tokens/spec.ts‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,38 @@ test('does SEO well', async ({ page }) => {
1919

2020
test.describe('navigation', () => {
2121
test.beforeEach(async ({ page }) => {
22+
// Try to cover as many sections of the design tokens page as possible
23+
// to increase chances of catching any rendering issues and increase
24+
// CSS code coverage.
25+
const MOCK_CSS = `
26+
@font-face {
27+
font-family: 'MyFont';
28+
src: url('myfont.woff2') format('woff2');
29+
font-weight: normal;
30+
font-style: normal;
31+
not-a-descriptor: warning;
32+
}
33+
34+
body {
35+
color: #f00;
36+
background: linear-gradient(to right, red, blue);
37+
height: 100haha;
38+
39+
&:hover {
40+
font-size: 16px;
41+
}
42+
}
43+
44+
button {
45+
font-family: 'Arial', sans-serif;
46+
font-size: 14px;
47+
line-height: 1.5;
48+
border-radius: 4px;
49+
tranition: color 0.3s ease-in-out;
50+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
51+
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
52+
}
53+
`
2254
await page.route('**/api/get-css*', async (route) => {
2355
await route.fulfill({
2456
status: 200,
@@ -29,7 +61,7 @@ test.describe('navigation', () => {
2961
media: undefined,
3062
rel: 'stylesheet',
3163
type: 'link',
32-
css: 'body { color: red; &:hover { font-size: 16px; } }'
64+
css: MOCK_CSS
3365
}
3466
] satisfies CSSOrigin[]
3567
})

‎src/routes/(public)/get-css/+page.svelte‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,16 @@
121121

122122
<Container>
123123
<div class="output">
124+
{#if status === STATUS.ERROR || status === STATUS.REMOTE_ERROR}
125+
<p class="error" data-testid="error-message">
126+
{#if status === STATUS.ERROR}
127+
Something went wrong
128+
{:else if status === STATUS.REMOTE_ERROR}
129+
{errorMessage}
130+
{/if}
131+
</p>
132+
{/if}
133+
124134
<header>
125135
<Label for="scraped-css">Scraped CSS</Label>
126136
{#if status === STATUS.DONE}
@@ -138,36 +148,44 @@
138148
{/if}
139149
</div>
140150
</div>
141-
142-
{#if status === STATUS.ERROR || status === STATUS.REMOTE_ERROR}
143-
<p class="error">
144-
{#if status === STATUS.ERROR}
145-
Something went wrong
146-
{:else if status === STATUS.REMOTE_ERROR}
147-
{errorMessage}
148-
{/if}
149-
</p>
150-
{/if}
151151
</Container>
152152

153153
<Container size="md">
154154
<Markdown>
155-
<p>This CSS scraper loads the HTML of your website and goes through all the <code>&lt;link&gt;</code> and <code>&lt;style&gt;</code> tags to (recursively) find CSS.</p>
155+
<p>
156+
This CSS scraper loads the HTML of your website and goes through all the <code>&lt;link&gt;</code> and
157+
<code>&lt;style&gt;</code> tags to (recursively) find CSS.
158+
</p>
156159

157160
<ol>
158161
<li>Load the HTML for the URL you fill in</li>
159162
<li>Find all <code>&lt;link rel="stylesheet"&gt;</code> tags and load the CSS from the <code>href</code> URL</li>
160163
<li>Find all <code>&lt;style&gt;</code> tags and extract the CSS from it's contents</li>
161-
<li>Find all CSS <code>@import</code> statements in the CSS we just loaded and load the CSS from the <code>@import</code>'s URL</li>
162-
<li>Go through all the DOM elements that have a non-empty <code>style="&hellip;"</code> attribute. Create a CSS Ruleset for each DOM node and add it to 1 single origin that contains all inline styles.</li>
164+
<li>
165+
Find all CSS <code>@import</code> statements in the CSS we just loaded and load the CSS from the
166+
<code>@import</code>'s URL
167+
</li>
168+
<li>
169+
Go through all the DOM elements that have a non-empty <code>style="&hellip;"</code> attribute. Create a CSS Ruleset
170+
for each DOM node and add it to 1 single origin that contains all inline styles.
171+
</li>
163172
<li>Combine all the CSS</li>
164173
</ol>
165174

166-
<p>Once it's on the page here you can inspect each separate CSS origin in the Network Panel. From there you can see what we found and where it originated from. It also shows the <code>media</code> type in case of a <code>&lt;link&gt;</code> tag, as well as the <code>rel="&hellip;"</code>. For all origins it shows the total filesize.</p>
175+
<p>
176+
Once it's on the page here you can inspect each separate CSS origin in the Network Panel. From there you can see
177+
what we found and where it originated from. It also shows the <code>media</code> type in case of a
178+
<code>&lt;link&gt;</code>
179+
tag, as well as the <code>rel="&hellip;"</code>. For all origins it shows the total filesize.
180+
</p>
167181

168-
<hr>
182+
<hr />
169183

170-
<p>If you want to learn more about CSS scraping you can read it in our blog post <a href="/blog/ways-to-scrape-css">3 ways to scrape CSS from a website</a>. Here we explain the possible angles and the pros and cons of each approach.</p>
184+
<p>
185+
If you want to learn more about CSS scraping you can read it in our blog post <a href="/blog/ways-to-scrape-css"
186+
>3 ways to scrape CSS from a website</a
187+
>. Here we explain the possible angles and the pros and cons of each approach.
188+
</p>
171189
</Markdown>
172190
</Container>
173191

‎src/routes/(public)/get-css/spec.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,7 @@ test('pre-fills the page when coming from another page', async ({ page }) => {
7575
})
7676

7777
// Now navigate to the get-css page
78-
await page
79-
.getByRole('navigation', { name: 'Primary' })
80-
.getByRole('link', { name: 'CSS Scraper' })
81-
.click()
78+
await page.getByRole('navigation', { name: 'Primary' }).getByRole('link', { name: 'CSS Scraper' }).click()
8279
await expect.soft(page).toHaveURL('/get-css?url=example.com&prettify=1')
8380
await expect.soft(page.getByLabel('URL to crawl')).toHaveValue('example.com')
8481
await expect.soft(page.getByTestId('pre-css')).toHaveText(css_fixture)
@@ -104,3 +101,14 @@ test.describe('offline', () => {
104101
await expect(page.getByTestId('offline-message')).not.toBeVisible()
105102
})
106103
})
104+
105+
test('errors on an invalid URL', async ({ page }) => {
106+
await page.goto('/get-css', { waitUntil: 'domcontentloaded' })
107+
await expect(page).toBeHydrated()
108+
109+
// Fill in a URL and submit
110+
await page.getByLabel('URL').fill('not-a-valid-url')
111+
await page.getByRole('button', { name: 'Crawl URL' }).click()
112+
113+
await expect.soft(page.getByTestId('error-message')).toBeVisible()
114+
})

0 commit comments

Comments
 (0)