Skip to content

Commit 534aeaf

Browse files
colinrotherham36degrees
colinrotherham
and
36degrees
committed
Add unit tests for grid mixins from GOV.UK Frontend
See: alphagov/govuk-frontend#1090 Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
1 parent 15dc675 commit 534aeaf

File tree

5 files changed

+321
-0
lines changed

5 files changed

+321
-0
lines changed

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.test.*

‎jest.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ module.exports = {
1515
: 1, // Use only 1x browser window when headless
1616

1717
projects: [
18+
{
19+
displayName: 'JavaScript unit tests',
20+
testMatch: [
21+
'**/*.unit.test.{js,mjs}',
22+
23+
// Exclude integration tests
24+
'!<rootDir>/tests/integration/**'
25+
]
26+
},
1827
{
1928
displayName: 'JavaScript behaviour tests',
2029
testEnvironment: 'jsdom',

‎package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"jest-environment-jsdom": "^29.7.0",
5959
"jest-puppeteer": "^11.0.0",
6060
"nunjucks": "^3.2.4",
61+
"outdent": "^0.8.0",
6162
"plugin-error": "^2.0.1",
6263
"postcss": "^8.5.2",
6364
"postcss-markdown": "^1.3.0",

‎packages/core/tools/grid.unit.test.js

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
const outdent = require('outdent')
2+
const { compileStringAsync } = require('sass-embedded')
3+
4+
describe('grid system', () => {
5+
const sassImports = `
6+
@import "core/settings/globals";
7+
@import "core/settings/spacing";
8+
9+
@import "core/tools/grid";
10+
@import "core/tools/exports";
11+
@import "core/tools/sass-mq";
12+
`
13+
14+
describe('govuk-grid-width function', () => {
15+
it('outputs the specified key value from the map of widths', async () => {
16+
const sass = `
17+
${sassImports}
18+
19+
.foo {
20+
content: govuk-grid-width(one-quarter);
21+
}
22+
`
23+
24+
const results = await compileStringAsync(sass, {
25+
loadPaths: ['packages']
26+
})
27+
28+
expect(results.css).toBe(
29+
outdent`
30+
.foo {
31+
content: 25%;
32+
}
33+
`
34+
)
35+
})
36+
37+
it('throws an error that the specified key does not exist in the map of widths', async () => {
38+
const sass = `
39+
${sassImports}
40+
41+
$value: govuk-grid-width(seven-fifths);
42+
`
43+
44+
await expect(
45+
compileStringAsync(sass, {
46+
loadPaths: ['packages']
47+
})
48+
).rejects.toThrow('Unknown grid width `seven-fifths`')
49+
})
50+
})
51+
52+
describe('@govuk-grid-row mixin', () => {
53+
it('outputs default defined styles for .nhsuk-grid-row class', async () => {
54+
const sass = `
55+
${sassImports}
56+
57+
@import "core/tools/mixins";
58+
59+
@include govuk-grid-row;
60+
`
61+
62+
const results = await compileStringAsync(sass, {
63+
loadPaths: ['packages']
64+
})
65+
66+
expect(results.css).toBe(outdent`
67+
.nhsuk-grid-row {
68+
margin-right: -16px;
69+
margin-left: -16px;
70+
}
71+
.nhsuk-grid-row::after {
72+
clear: both;
73+
content: \"\";
74+
display: block;
75+
}
76+
`)
77+
})
78+
79+
it('outputs styles for the specified class', async () => {
80+
const sass = `
81+
${sassImports}
82+
83+
@import "core/tools/mixins";
84+
85+
@include govuk-grid-row("app-grid-row");
86+
`
87+
88+
const results = await compileStringAsync(sass, {
89+
loadPaths: ['packages']
90+
})
91+
92+
expect(results.css).toBe(outdent`
93+
.app-grid-row {
94+
margin-right: -16px;
95+
margin-left: -16px;
96+
}
97+
.app-grid-row::after {
98+
clear: both;
99+
content: \"\";
100+
display: block;
101+
}
102+
`)
103+
})
104+
})
105+
106+
describe('@govuk-grid-column mixin', () => {
107+
it('outputs the CSS required for a column in the grid', async () => {
108+
const sass = `
109+
${sassImports}
110+
111+
.nhsuk-grid-column-full {
112+
@include govuk-grid-column($class: false);
113+
}
114+
`
115+
116+
const results = await compileStringAsync(sass, {
117+
loadPaths: ['packages']
118+
})
119+
120+
expect(results.css).toBe(outdent`
121+
.nhsuk-grid-column-full {
122+
box-sizing: border-box;
123+
width: 100%;
124+
padding: 0 16px;
125+
}
126+
@media (min-width: 46.25em) {
127+
.nhsuk-grid-column-full {
128+
width: 100%;
129+
float: left;
130+
}
131+
}
132+
`)
133+
})
134+
135+
it('allows different widths to be specified using $width', async () => {
136+
const sass = `
137+
${sassImports}
138+
139+
.nhsuk-grid-column-two-thirds {
140+
@include govuk-grid-column(two-thirds, $class: false);
141+
}
142+
`
143+
144+
const results = await compileStringAsync(sass, {
145+
loadPaths: ['packages']
146+
})
147+
148+
expect(results.css).toBe(outdent`
149+
.nhsuk-grid-column-two-thirds {
150+
box-sizing: border-box;
151+
width: 100%;
152+
padding: 0 16px;
153+
}
154+
@media (min-width: 46.25em) {
155+
.nhsuk-grid-column-two-thirds {
156+
width: 66.6666666667%;
157+
float: left;
158+
}
159+
}
160+
`)
161+
})
162+
163+
it('allows predefined breakpoints to be specified using $at', async () => {
164+
const sass = `
165+
${sassImports}
166+
167+
.nhsuk-grid-column-one-quarter-at-desktop {
168+
@include govuk-grid-column(one-quarter, $at: desktop, $class: false);
169+
}
170+
`
171+
172+
const results = await compileStringAsync(sass, {
173+
loadPaths: ['packages']
174+
})
175+
176+
expect(results.css).toBe(outdent`
177+
.nhsuk-grid-column-one-quarter-at-desktop {
178+
box-sizing: border-box;
179+
padding: 0 16px;
180+
}
181+
@media (min-width: 61.25em) {
182+
.nhsuk-grid-column-one-quarter-at-desktop {
183+
width: 25%;
184+
float: left;
185+
}
186+
}
187+
`)
188+
})
189+
190+
it('allows custom breakpoints to be specified using $at', async () => {
191+
const sass = `
192+
${sassImports}
193+
194+
.nhsuk-grid-column-one-quarter-at-500px {
195+
@include govuk-grid-column(one-quarter, $at: 500px, $class: false);
196+
}
197+
`
198+
199+
const results = await compileStringAsync(sass, {
200+
loadPaths: ['packages']
201+
})
202+
203+
expect(results.css).toBe(outdent`
204+
.nhsuk-grid-column-one-quarter-at-500px {
205+
box-sizing: border-box;
206+
width: 100%;
207+
padding: 0 16px;
208+
}
209+
@media (min-width: 31.25em) {
210+
.nhsuk-grid-column-one-quarter-at-500px {
211+
width: 25%;
212+
float: left;
213+
}
214+
}
215+
`)
216+
})
217+
218+
it('allows columns to float right using $float: right', async () => {
219+
const sass = `
220+
${sassImports}
221+
222+
.nhsuk-grid-column-one-half-right {
223+
@include govuk-grid-column(one-half, $float: right, $class: false);
224+
}
225+
`
226+
227+
const results = await compileStringAsync(sass, {
228+
loadPaths: ['packages']
229+
})
230+
231+
expect(results.css).toBe(outdent`
232+
.nhsuk-grid-column-one-half-right {
233+
box-sizing: border-box;
234+
width: 100%;
235+
padding: 0 16px;
236+
}
237+
@media (min-width: 46.25em) {
238+
.nhsuk-grid-column-one-half-right {
239+
width: 50%;
240+
float: right;
241+
}
242+
}
243+
`)
244+
})
245+
246+
it('includes the class name by default (deprecated)', async () => {
247+
const sass = `
248+
${sassImports}
249+
250+
@include govuk-grid-column();
251+
`
252+
253+
const results = await compileStringAsync(sass, {
254+
loadPaths: ['packages']
255+
})
256+
257+
expect(results.css).toBe(outdent`
258+
.nhsuk-grid-column-full {
259+
box-sizing: border-box;
260+
width: 100%;
261+
padding: 0 16px;
262+
}
263+
@media (min-width: 46.25em) {
264+
.nhsuk-grid-column-full {
265+
width: 100%;
266+
float: left;
267+
}
268+
}
269+
`)
270+
})
271+
272+
it('allows the class name to be overridden (deprecated)', async () => {
273+
const sass = `
274+
${sassImports}
275+
276+
@include govuk-grid-column(three-quarters, $class: "large-column");
277+
`
278+
279+
const results = await compileStringAsync(sass, {
280+
loadPaths: ['packages']
281+
})
282+
283+
expect(results.css).toBe(outdent`
284+
.large-column-three-quarters {
285+
box-sizing: border-box;
286+
width: 100%;
287+
padding: 0 16px;
288+
}
289+
@media (min-width: 46.25em) {
290+
.large-column-three-quarters {
291+
width: 75%;
292+
float: left;
293+
}
294+
}
295+
`)
296+
})
297+
})
298+
})
299+
300+
/**
301+
* @import { Options } from 'sass-embedded'
302+
*/

0 commit comments

Comments
 (0)