From dd95356ee316ef32538303713fca809ea62648fd Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Mon, 4 Nov 2019 14:45:03 +0000 Subject: [PATCH] Test output of `@mixin govuk-width-container` --- src/govuk/objects/width-container.test.js | 48 +++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/govuk/objects/width-container.test.js diff --git a/src/govuk/objects/width-container.test.js b/src/govuk/objects/width-container.test.js new file mode 100644 index 0000000000..cd8afdc431 --- /dev/null +++ b/src/govuk/objects/width-container.test.js @@ -0,0 +1,48 @@ +/* eslint-env jest */ + +const outdent = require('outdent') + +const { renderSass } = require('../../../lib/jest-helpers') + +const sassConfig = { + outputStyle: 'nested' +} + +describe('@mixin govuk-width-container', () => { + it('allows different widths to be specified using $width', async () => { + const sass = ` + @import "objects/width-container"; + + .app-width-container--wide { + @include govuk-width-container(1200); + } + ` + const results = await renderSass({ data: sass, ...sassConfig }) + + expect(results.css + .toString() + .trim()) + .toContain(outdent` + .app-width-container--wide { + max-width: 1200px; + margin: 0 15px; } + @supports (margin: max(calc(0px))) { + .app-width-container--wide { + margin-right: max(15px, calc(15px + env(safe-area-inset-right))); + margin-left: max(15px, calc(15px + env(safe-area-inset-left))); } } + @media (min-width: 40.0625em) { + .app-width-container--wide { + margin: 0 30px; } + @supports (margin: max(calc(0px))) { + .app-width-container--wide { + margin-right: max(30px, calc(15px + env(safe-area-inset-right))); + margin-left: max(30px, calc(15px + env(safe-area-inset-left))); } } } + @media (min-width: 1260px) { + .app-width-container--wide { + margin: 0 auto; } + @supports (margin: max(calc(0px))) { + .app-width-container--wide { + margin: 0 auto; } } } + `) + }) +})