From 7ec0e863eedf9e84fc07d98fd6052ab928c55687 Mon Sep 17 00:00:00 2001 From: Giles Lavelle Date: Wed, 27 Apr 2022 13:49:39 +0100 Subject: [PATCH] Update tp-font-face to use Dart Sass (#811) --- jest.setup.js | 66 +++++++++++-------- packages/thumbprint-font-face/CHANGELOG.md | 5 ++ .../{test.js.snap => test.ts.snap} | 12 ++-- packages/thumbprint-font-face/package.json | 1 + .../thumbprint-font-face/{test.js => test.ts} | 18 +++-- yarn.lock | 9 +++ 6 files changed, 70 insertions(+), 41 deletions(-) rename packages/thumbprint-font-face/__snapshots__/{test.js.snap => test.ts.snap} (82%) rename packages/thumbprint-font-face/{test.js => test.ts} (66%) diff --git a/jest.setup.js b/jest.setup.js index dca3d5080..9719e25ee 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -11,36 +11,44 @@ beforeAll(() => { // Stub `window.scroll` since Jest will fail otherwise. This may change in the future. global.scroll = () => true; - // Mock `window.IntersectionObserver` using code from these two places: - // https://github.com/thebuilder/react-intersection-observer/blob/e31086c713615f3cfbe60eaa13491adcee3d41c2/src/test-utils.ts#L83 - // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom - Object.defineProperty(window, 'IntersectionObserver', { - writable: true, - value: jest.fn((cb, options) => { - const instance = { - thresholds: Array.isArray(options.threshold) - ? options.threshold - : [options.threshold], - root: options.root, - rootMargin: options.rootMargin, - time: Date.now(), - observe: jest.fn(element => { - instanceMap.set(element, instance); - observerMap.set(element, cb); - }), - unobserve: jest.fn(element => { - instanceMap.delete(element); - observerMap.delete(element); - }), - disconnect: jest.fn(), - }; - return instance; - }), - }); + // Some tests are run in the Jest `node` environment, where `window` is not defined, and these + // mocks are not needed. + if (typeof window !== 'undefined') { + // Mock `window.IntersectionObserver` using code from these two places: + // https://github.com/thebuilder/react-intersection-observer/blob/e31086c713615f3cfbe60eaa13491adcee3d41c2/src/test-utils.ts#L83 + // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom + Object.defineProperty(window, 'IntersectionObserver', { + writable: true, + value: jest.fn((cb, options) => { + const instance = { + thresholds: Array.isArray(options.threshold) + ? options.threshold + : [options.threshold], + root: options.root, + rootMargin: options.rootMargin, + time: Date.now(), + observe: jest.fn(element => { + instanceMap.set(element, instance); + observerMap.set(element, cb); + }), + unobserve: jest.fn(element => { + instanceMap.delete(element); + observerMap.delete(element); + }), + disconnect: jest.fn(), + }; + return instance; + }), + }); + } }); afterEach(() => { - window.IntersectionObserver.mockClear(); - instanceMap.clear(); - observerMap.clear(); + // Some tests are run in the Jest `node` environment, where `window` is not defined, and these + // mocks are not needed. + if (typeof window !== 'undefined') { + window.IntersectionObserver.mockClear(); + instanceMap.clear(); + observerMap.clear(); + } }); diff --git a/packages/thumbprint-font-face/CHANGELOG.md b/packages/thumbprint-font-face/CHANGELOG.md index 3ea44085b..4caa68718 100644 --- a/packages/thumbprint-font-face/CHANGELOG.md +++ b/packages/thumbprint-font-face/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Fixed + +- [Patch] Update to use Dart Sass. +- [Patch] Rewrite unit test in TypeScript. + ## 1.0.15 - 2020-07-14 ### Fixed diff --git a/packages/thumbprint-font-face/__snapshots__/test.js.snap b/packages/thumbprint-font-face/__snapshots__/test.ts.snap similarity index 82% rename from packages/thumbprint-font-face/__snapshots__/test.js.snap rename to packages/thumbprint-font-face/__snapshots__/test.ts.snap index 34a2dd6fd..8f8bbe652 100644 --- a/packages/thumbprint-font-face/__snapshots__/test.js.snap +++ b/packages/thumbprint-font-face/__snapshots__/test.ts.snap @@ -2,15 +2,15 @@ exports[`works if variable is provided 1`] = ` "@font-face { - font-family: 'Mark'; + font-family: \\"Mark\\"; font-weight: 400; font-display: swap; - src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff) format(\\"woff\\"); } - + src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff) format(\\"woff\\"); +} @font-face { - font-family: 'Mark'; + font-family: \\"Mark\\"; font-weight: 700; font-display: swap; - src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff) format(\\"woff\\"); } -" + src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff) format(\\"woff\\"); +}" `; diff --git a/packages/thumbprint-font-face/package.json b/packages/thumbprint-font-face/package.json index bc4a5e6ea..58b9fe889 100644 --- a/packages/thumbprint-font-face/package.json +++ b/packages/thumbprint-font-face/package.json @@ -28,6 +28,7 @@ }, "devDependencies": { "node-sass-tilde-importer": "2.0.0-alpha.1", + "sass": "^1.51.0", "tmp": "^0.1.0" } } diff --git a/packages/thumbprint-font-face/test.js b/packages/thumbprint-font-face/test.ts similarity index 66% rename from packages/thumbprint-font-face/test.js rename to packages/thumbprint-font-face/test.ts index a6e6ef875..63ad6669e 100644 --- a/packages/thumbprint-font-face/test.js +++ b/packages/thumbprint-font-face/test.ts @@ -1,7 +1,13 @@ -const sass = require('node-sass'); -const fs = require('fs'); -const importer = require('node-sass-tilde-importer'); -const tmp = require('tmp'); +/** + * dart-sass only runs in the Jest `node` environment. + * See: https://github.com/sass/dart-sass/issues/710 + * @jest-environment node + */ + +import sass, { LegacyImporter } from 'sass'; +import fs from 'fs'; +import importer from 'node-sass-tilde-importer'; +import tmp from 'tmp'; it('throws error if variable is not provided correctly', () => { let error = null; @@ -9,7 +15,7 @@ it('throws error if variable is not provided correctly', () => { try { sass.renderSync({ file: 'packages/thumbprint-font-face/_index.scss', - importer, + importer: importer as LegacyImporter<'sync'>, }).css.toString(); } catch (e) { error = e; @@ -32,7 +38,7 @@ it('works if variable is provided', () => { const css = sass .renderSync({ file: file.name, - importer, + importer: importer as LegacyImporter<'sync'>, }) .css.toString(); expect(css).toMatchSnapshot(); diff --git a/yarn.lock b/yarn.lock index 9a5dcbfdc..7f41717a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18678,6 +18678,15 @@ sass@^1.49.9: immutable "^4.0.0" source-map-js ">=0.6.2 <2.0.0" +sass@^1.51.0: + version "1.51.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.51.0.tgz#25ea36cf819581fe1fe8329e8c3a4eaaf70d2845" + integrity sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"