Skip to content

Commit 00cc3c0

Browse files
author
Quentin Ménoret
authored
Add a few tests on the generated html (#41)
* add a few tests on the generated html * update snapshots * fix package.json * switch to husky 4
1 parent 0dd9a9b commit 00cc3c0

File tree

6 files changed

+3987
-274
lines changed

6 files changed

+3987
-274
lines changed

‎babel.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// babel.config.js
2+
module.exports = {
3+
presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
4+
}

‎extension/github/__snapshots__/add-code-tour.test.ts.snap

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`buildSection renders properly the section when the next and previous URLs are not defined 1`] = `
4+
<div
5+
class="dl-doctolib-code-tour-comment"
6+
style="
7+
padding: 14px;
8+
margin: 14px;
9+
border: 1px lightgrey solid;
10+
background-color: white;
11+
border-radius: 1em;
12+
font-family: sans-serif;
13+
"
14+
>
15+
<p
16+
style="display: flex; align-items: center;"
17+
>
18+
<img
19+
src="extension-url/code-tour.png"
20+
style="height: 2em; margin-right: 1em;"
21+
/>
22+
<b>
23+
CodeTour
24+
</b>
25+
<span>
26+
Step 2 of 0 (The code tour title)
27+
</span>
28+
<hr />
29+
</p>
30+
<span>
31+
<p>
32+
code tour description
33+
</p>
34+
</span>
35+
<br />
36+
<a
37+
class="btn btn-primary disabled"
38+
href=""
39+
style="margin-top: 10px; margin-right: 5px;"
40+
>
41+
Previous
42+
</a>
43+
<a
44+
class="btn btn-primary disabled"
45+
href=""
46+
style="margin-top: 10px; margin-right: 5px;"
47+
>
48+
Next
49+
</a>
50+
</div>
51+
`;
52+
53+
exports[`buildSection renders properly the whole section 1`] = `
54+
<div
55+
class="dl-doctolib-code-tour-comment"
56+
style="
57+
padding: 14px;
58+
margin: 14px;
59+
border: 1px lightgrey solid;
60+
background-color: white;
61+
border-radius: 1em;
62+
font-family: sans-serif;
63+
"
64+
>
65+
<p
66+
style="display: flex; align-items: center;"
67+
>
68+
<img
69+
src="extension-url/code-tour.png"
70+
style="height: 2em; margin-right: 1em;"
71+
/>
72+
<b>
73+
CodeTour
74+
</b>
75+
<span>
76+
Step 2 of 0 (The code tour title)
77+
</span>
78+
<hr />
79+
</p>
80+
<span>
81+
<p>
82+
code tour description
83+
</p>
84+
</span>
85+
<br />
86+
<a
87+
class="btn btn-primary"
88+
href="the/next/url?with=params"
89+
style="margin-top: 10px; margin-right: 5px;"
90+
>
91+
Previous
92+
</a>
93+
<a
94+
class="btn btn-primary"
95+
href="the/next/url?with=params"
96+
style="margin-top: 10px; margin-right: 5px;"
97+
>
98+
Next
99+
</a>
100+
</div>
101+
`;
102+
103+
exports[`buildTitleRow renders properly the code tour header 1`] = `
104+
<p
105+
style="display: flex; align-items: center;"
106+
>
107+
<img
108+
src="extension-url/code-tour.png"
109+
style="height: 2em; margin-right: 1em;"
110+
/>
111+
<b>
112+
CodeTour
113+
</b>
114+
<span>
115+
Step 2 of 0 (The code tour title)
116+
</span>
117+
<hr />
118+
</p>
119+
`;
120+
121+
exports[`getParent returns the line of the file for a file step 1`] = `
122+
<div
123+
class="blob-code"
124+
id="LC42"
125+
>
126+
127+
128+
</div>
129+
`;
130+
131+
exports[`getParent returns the top of the file for step with no file associated 1`] = `
132+
<div
133+
class="repository-content"
134+
>
135+
136+
137+
</div>
138+
`;

‎extension/github/add-code-tour.test.ts

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { buildSection, buildTitleRow, getParent } from './add-code-tour'
2+
3+
global.chrome = {
4+
// @ts-expect-error mocking the chrome API in tests
5+
extension: {
6+
getURL: (element) => `extension-url/${element}`,
7+
},
8+
}
9+
10+
describe(buildTitleRow, () => {
11+
it('renders properly the code tour header', () => {
12+
expect(
13+
buildTitleRow(
14+
{
15+
description: 'code tour description',
16+
line: 42,
17+
file: '/package.json',
18+
nextUrl: 'the/next/url?with=params',
19+
previousUrl: 'the/next/url?with=params',
20+
tour: {
21+
title: 'The code tour title',
22+
step: 3,
23+
steps: [],
24+
ref: 'alongcommitid',
25+
repository: 'doctolib/code-tours-github',
26+
},
27+
},
28+
1,
29+
),
30+
).toMatchSnapshot()
31+
})
32+
})
33+
34+
describe(buildSection, () => {
35+
it('renders properly the whole section', () => {
36+
expect(
37+
buildSection(
38+
{
39+
description: 'code tour description',
40+
line: 42,
41+
file: '/package.json',
42+
nextUrl: 'the/next/url?with=params',
43+
previousUrl: 'the/next/url?with=params',
44+
tour: {
45+
title: 'The code tour title',
46+
step: 3,
47+
steps: [],
48+
ref: 'alongcommitid',
49+
repository: 'doctolib/code-tours-github',
50+
},
51+
},
52+
1,
53+
),
54+
).toMatchSnapshot()
55+
})
56+
57+
it('renders properly the section when the next and previous URLs are not defined', () => {
58+
expect(
59+
buildSection(
60+
{
61+
description: 'code tour description',
62+
line: 42,
63+
file: '/package.json',
64+
tour: {
65+
title: 'The code tour title',
66+
step: 3,
67+
steps: [],
68+
ref: 'alongcommitid',
69+
repository: 'doctolib/code-tours-github',
70+
},
71+
},
72+
1,
73+
),
74+
).toMatchSnapshot()
75+
})
76+
})
77+
78+
describe(getParent, () => {
79+
it('returns the line of the file for a file step', () => {
80+
document.body.innerHTML = `
81+
<div id="LC42" class="blob-code" />
82+
`
83+
expect(
84+
getParent({
85+
description: 'code tour description',
86+
line: 42,
87+
file: '/package.json',
88+
tour: {
89+
title: 'The code tour title',
90+
step: 3,
91+
steps: [],
92+
ref: 'alongcommitid',
93+
repository: 'doctolib/code-tours-github',
94+
},
95+
}),
96+
).toMatchSnapshot()
97+
})
98+
99+
it('returns the top of the file for step with no file associated', () => {
100+
document.body.innerHTML = `
101+
<div class="repository-content"/>
102+
`
103+
expect(
104+
getParent({
105+
description: 'code tour description',
106+
directory: 'the directory',
107+
tour: {
108+
title: 'The code tour title',
109+
step: 3,
110+
steps: [],
111+
ref: 'alongcommitid',
112+
repository: 'doctolib/code-tours-github',
113+
},
114+
}),
115+
).toMatchSnapshot()
116+
})
117+
})

‎extension/github/add-code-tour.ts

+24-19
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function buttonTo(text: string, url?: string): Element {
2424
return button
2525
}
2626

27-
function getParent(currentStep: EnhancedCodeTourStep) {
27+
export function getParent(currentStep: EnhancedCodeTourStep): Element | null {
2828
if ('file' in currentStep) {
2929
const currentLine = currentStep.line
3030
return document.querySelector(`#LC${currentLine}.blob-code`)
@@ -36,7 +36,7 @@ function formatAndSanitizeDescription(rawText: string): string {
3636
return filterXSS(converter.makeHtml(rawText))
3737
}
3838

39-
function buildTitleRow(currentStep: EnhancedCodeTourStep, stepNumber: number) {
39+
export function buildTitleRow(currentStep: EnhancedCodeTourStep, stepNumber: number): HTMLParagraphElement {
4040
const titleRow = document.createElement('p')
4141
titleRow.setAttribute('style', 'display: flex; align-items: center;')
4242

@@ -58,23 +58,7 @@ function buildTitleRow(currentStep: EnhancedCodeTourStep, stepNumber: number) {
5858
return titleRow
5959
}
6060

61-
export async function addCodeTour(): Promise<void> {
62-
const sheet = document.createElement('style')
63-
sheet.innerHTML = `
64-
pre {
65-
border: 1px black solid;
66-
padding: 1em;
67-
}
68-
`
69-
document.body.prepend(sheet)
70-
71-
const searchParams = new URLSearchParams(window.location.search)
72-
const name = searchParams.get('code-tour')
73-
const step = parseInt(searchParams.get('step') ?? '', 10) || 0
74-
75-
if (!name) return
76-
77-
const currentStep = await getStep(name, step)
61+
export function buildSection(currentStep: EnhancedCodeTourStep, step: number): HTMLDivElement {
7862
const currentDescription = formatAndSanitizeDescription(currentStep.description)
7963

8064
const previousButton = buttonTo('Previous', currentStep.previousUrl)
@@ -103,6 +87,27 @@ export async function addCodeTour(): Promise<void> {
10387
font-family: sans-serif;
10488
`,
10589
)
90+
return section
91+
}
92+
93+
export async function addCodeTour(): Promise<void> {
94+
const sheet = document.createElement('style')
95+
sheet.innerHTML = `
96+
pre {
97+
border: 1px black solid;
98+
padding: 1em;
99+
}
100+
`
101+
document.body.prepend(sheet)
102+
103+
const searchParams = new URLSearchParams(window.location.search)
104+
const name = searchParams.get('code-tour')
105+
const step = parseInt(searchParams.get('step') ?? '', 10) || 0
106+
107+
if (!name) return
108+
109+
const currentStep = await getStep(name, step)
110+
const section = buildSection(currentStep, step)
106111

107112
const parent = getParent(currentStep)
108113
if (!parent) return

‎package.json

+10-2
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,32 @@
44
"scripts": {
55
"build": "webpack --config webpack.config.js && cp manifest.json code-tour.png built/",
66
"package": "(cd built ; zip -r ../extension.zip .)",
7-
"clean": "rimraf built"
7+
"clean": "rimraf built",
8+
"test": "jest",
9+
"test:watch": "jest --watch"
810
},
911
"dependencies": {
1012
"showdown": "^1.9.1",
1113
"showdown-prettify": "^1.3.0",
1214
"xss": "^1.0.8"
1315
},
1416
"devDependencies": {
17+
"@babel/core": "^7.12.13",
18+
"@babel/preset-env": "^7.12.13",
19+
"@babel/preset-typescript": "^7.12.13",
1520
"@types/chrome": "^0.0.129",
21+
"@types/jest": "^26.0.20",
1622
"@types/showdown": "^1.9.3",
1723
"@typescript-eslint/eslint-plugin": "^4.15.0",
1824
"@typescript-eslint/parser": "^4.15.0",
25+
"babel-jest": "^26.6.3",
1926
"eslint": "^7.19.0",
2027
"eslint-config-airbnb-base": "^14.2.1",
2128
"eslint-config-prettier": "^7.2.0",
2229
"eslint-plugin-import": "^2.22.1",
2330
"eslint-plugin-prettier": "^3.3.1",
24-
"husky": "^5.0.9",
31+
"husky": "4",
32+
"jest": "^26.6.3",
2533
"lint-staged": "^10.5.4",
2634
"prettier": "^2.2.1",
2735
"rimraf": "^3.0.2",

0 commit comments

Comments
 (0)