test: inject actual styles in jest (#214)

* test: inject actual styles in jest

* fix: remove rollup plugin virtual

bin/buildStylesForJest.js

@@ -0,0 +1,23 @@
+import { buildStyles } from './buildStyles.js'
+import { writeFile } from './fs.js'
+import mkdirp from 'mkdirp'
+import path from 'path'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+
+// Build a file containing the CSS just for Jest, because I can't figure out any better way to do this
+async function main () {
+  const styles = buildStyles()
+  const targetDir = path.join(__dirname, '../node_modules/.cache/emoji-picker-element')
+  await mkdirp(targetDir)
+  await writeFile(
+    path.join(targetDir, 'styles.js'),
+    `const styles = ${JSON.stringify(styles)}; module.exports = styles;`,
+    'utf8'
+  )
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})

config/jest.setup.js

@@ -4,6 +4,7 @@ import FDBKeyRange from 'fake-indexeddb/build/FDBKeyRange'
 import { Crypto } from '@peculiar/webcrypto'
 import { ResizeObserver } from 'd2l-resize-aware/resize-observer-module.js'
 import { deleteDatabase } from '../src/database/databaseLifecycle'
+import styles from '../node_modules/.cache/emoji-picker-element/styles.js'
 
 if (!global.performance) {
   global.performance = {}
@@ -25,13 +26,11 @@ global.ResizeObserver = ResizeObserver
 
 process.env.NODE_ENV = 'test'
 
+process.env.STYLES = styles
+
 global.IDBKeyRange = FDBKeyRange
 global.indexedDB = new FDBFactory()
 
-// TODO: figure out how to get the styles into Jest. For now it doesn't really
-// matter because none of the tests rely on visibility checks etc.
-jest.mock('emoji-picker-element-styles', () => '', { virtual: true })
-
 beforeAll(() => {
   jest.spyOn(global.console, 'log').mockImplementation()
   jest.spyOn(global.console, 'warn').mockImplementation()

package.json

@@ -42,9 +42,9 @@
     "dev:server": "node ./test/adhoc/server.js",
     "lint": "standard && stylelint '**/*.scss'",
     "lint:fix": "standard --fix && stylelint --fix '**/*.scss'",
-    "test": "jest --runInBand",
+    "test": "node ./bin/buildStylesForJest.js && jest --runInBand",
     "test:adhoc": "node ./test/adhoc/server.js",
-    "cover": "jest --runInBand --coverage",
+    "cover": "node ./bin/buildStylesForJest.js && jest --runInBand --coverage",
     "docs": "node bin/processCustomEmoji.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "version": "run-s changelog docs && git add CHANGELOG.md docs"
@@ -76,7 +76,6 @@
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-strip": "^2.0.1",
-    "@rollup/plugin-virtual": "^2.0.3",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.1.9",

rollup.config.js

@@ -6,7 +6,6 @@ import svelte from 'rollup-plugin-svelte'
 import preprocess from 'svelte-preprocess'
 import analyze from 'rollup-plugin-analyzer'
 import { buildStyles } from './bin/buildStyles'
-import virtual from '@rollup/plugin-virtual'
 
 const { NODE_ENV, DEBUG } = process.env
 const dev = NODE_ENV !== 'production'
@@ -34,12 +33,10 @@ const baseConfig = {
   plugins: [
     resolve(),
     cjs(),
-    virtual({
-      'emoji-picker-element-styles': `export default ${JSON.stringify(buildStyles())}`
-    }),
     replace({
       'process.env.NODE_ENV': dev ? '"development"' : '"production"',
       'process.env.PERF': !!process.env.PERF,
+      'process.env.STYLES': JSON.stringify(buildStyles()),
       preventAssignment: true
     }),
     replace({

src/picker/PickerElement.js

@@ -2,7 +2,6 @@ import SveltePicker from './components/Picker/Picker.svelte'
 import { DEFAULT_DATA_SOURCE, DEFAULT_LOCALE } from '../database/constants'
 import { DEFAULT_CATEGORY_SORTING, DEFAULT_SKIN_TONE_EMOJI } from './constants'
 import enI18n from './i18n/en.js'
-import styles from 'emoji-picker-element-styles'
 import Database from './ImportedDatabase'
 
 const PROPS = [
@@ -21,7 +20,7 @@ export default class PickerElement extends HTMLElement {
     super()
     this.attachShadow({ mode: 'open' })
     const style = document.createElement('style')
-    style.textContent = styles
+    style.textContent = process.env.STYLES
     this.shadowRoot.appendChild(style)
     this._ctx = {
       // Set defaults

test/spec/picker/Picker.test.js

@@ -521,4 +521,9 @@ describe('Picker tests', () => {
     expect(container.querySelector('.category').textContent).toEqual('Ungulates')
     expect(container.querySelector('.category')).not.toHaveClass('gone')
   })
+
+  test('Styles are working in Jest', async () => {
+    const style = picker.shadowRoot.querySelector('style')
+    expect(style.textContent).not.toEqual('')
+  })
 })

yarn.lock

@@ -1217,11 +1217,6 @@
     estree-walker "^2.0.1"
     magic-string "^0.25.7"
 
-"@rollup/plugin-virtual@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-virtual/-/plugin-virtual-2.0.3.tgz#0afc88d75c1e1378ab290b8e9898d4edb5be0d74"
-  integrity sha512-pw6ziJcyjZtntQ//bkad9qXaBx665SgEL8C8KI5wO8G5iU5MPxvdWrQyVaAvjojGm9tJoS8M9Z/EEepbqieYmw==
-
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"