docs: ✏️ split test files into multiple files

Author: kaisermann

Diff for: .gitignore

@@ -1,2 +1,3 @@
 node_modules
-*.log
+*.log
+coverage

Diff for: package.json

@@ -25,6 +25,13 @@
     "prepublishOnly": "npm run format && npm run test",
     "postinstall": "node -e \"console.log('\\u001b[36m\\u001b[1m[svelte-preprocess] Don\\'t forget to install the preprocessors packages that will be used: \\u001b[22m\\u001b[39m\\u001b[34mnode-sass, stylus, less, postcss, coffesscript, pug, etc...\\u001b[0m')\""
   },
+  "jest": {
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "<rootDir>/src/**/*.js",
+      "!**/node_modules/**"
+    ]
+  },
   "devDependencies": {
     "auto-changelog": "^1.11.0",
     "autoprefixer": "^9.4.7",

Diff for: src/transformers/stylus.js

@@ -18,10 +18,7 @@ module.exports = ({ content, filename, options }) => {
     style.render((err, css) => {
       if (err) reject(err)
 
-      resolve({
-        code: css,
-        map: style.sourcemap,
-      })
+      resolve({ code: css, map: style.sourcemap })
     })
   })
 }

Diff for: test/autoProcess/autoProcess.test.js

@@ -0,0 +1,114 @@
+const getAutoPreprocess = require('../../src')
+const { getLanguage } = require('../../src/utils.js')
+
+const {
+  preprocess,
+  getFixtureContent,
+  doesCompileThrow,
+  CSS_PATTERN,
+} = require('../utils.js')
+
+describe('detect - mimetype', () => {
+  const MIMETYPES = [
+    { type: 'application/ld+json', parser: 'ld+json' },
+    { type: 'text/some-other', parser: 'some-other' },
+    { lang: 'stylus', parser: 'stylus' },
+    { src: '../foo.custom', lang: 'customLanguage', parser: 'customLanguage' },
+  ]
+
+  MIMETYPES.forEach(({ type, lang, src, parser }) => {
+    it(`should detect '${src || type || lang}' as '${parser}'`, async () => {
+      const language = getLanguage({ type, lang, src }, 'javascript')
+      expect(language).toEqual({ lang: parser, alias: parser })
+    })
+  })
+})
+
+describe('options', () => {
+  it('should accept custom method for a transformer', async () => {
+    const input = `<template lang="customTransformer">${getFixtureContent(
+      'template.custom',
+    )}</template>`
+    const opts = getAutoPreprocess({
+      transformers: {
+        customTransformer({ content, filename }) {
+          content = content
+            .replace('foo', 'bar')
+            .toString()
+            .trim()
+          return { code: content, map: null }
+        },
+      },
+    })
+    const preprocessed = await preprocess(input, opts)
+    expect(preprocessed.toString()).toBe('bar')
+  })
+
+  it('should accept an options object as transformer value', async () => {
+    const input = `<div></div><style src="./fixtures/style.scss"></style>`
+    const preprocessed = await preprocess(
+      input,
+      getAutoPreprocess({
+        transformers: {
+          scss: {
+            sourceMap: false,
+            includedPaths: ['node_modules'],
+          },
+        },
+      }),
+    )
+    expect(preprocessed.toString()).toMatch(CSS_PATTERN)
+  })
+
+  it('should execute a onBefore method before transforming markup', async () => {
+    const input = `UPPERCASE?`
+    const opts = getAutoPreprocess({
+      async onBefore({ content }) {
+        return content.toLowerCase()
+      },
+    })
+    const preprocessed = await preprocess(input, opts)
+    expect(preprocessed.toString()).toBe(input.toLowerCase())
+  })
+
+  it('should append aliases to the language alias dictionary', async () => {
+    const input = `<div></div><style lang="customLanguage"></style>`
+    const opts = getAutoPreprocess({
+      aliases: [['customLanguage', 'css']],
+    })
+    expect(await doesCompileThrow(input, opts)).toBe(false)
+  })
+
+  it('should NOT preprocess preserved languages', async () => {
+    const input = `<div></div><script type="application/ld+json">{"json":true}</script>`
+    const opts = getAutoPreprocess({
+      preserve: ['ld+json'],
+      aliases: [['ld+json', 'structuredData']],
+      transformers: {
+        structuredData() {
+          return { code: '', map: '' }
+        },
+      },
+    })
+    const preprocessed = await preprocess(input, opts)
+    expect(preprocessed.toString()).toContain(
+      `<script type="application/ld+json">{"json":true}</script>`,
+    )
+  })
+
+  it('should allow to pass specific options to alias', async () => {
+    const input = `<div></div><style lang="sass">${getFixtureContent(
+      'style.sass',
+    )}</style>`
+
+    const opts = getAutoPreprocess({
+      transformers: {
+        sass: {
+          indentedSyntax: false,
+        },
+      },
+    })
+
+    expect(await doesCompileThrow(input, opts)).toBe(true)
+  })
+})

Diff for: test/autoProcess/externalFiles.test.js

@@ -0,0 +1,58 @@
+const { resolve } = require('path')
+
+const getAutoPreprocess = require('../../src')
+const { preprocess, getFixtureContent, getFixturePath } = require('../utils.js')
+
+const {
+  markup: markupProcessor,
+  script: scriptProcessor,
+  style: styleProcessor,
+} = getAutoPreprocess()
+
+const getBaseObj = src => ({
+  content: `<template src="./fixtures/template.html"></template>
+  <style src="./fixtures/style.css"></style>
+  <script src="./fixtures/script.js"></script>`,
+  filename: resolve(__dirname, '..', 'App.svelte'),
+  attributes: { src: `./fixtures/${src}` },
+})
+
+let markup, script, style
+
+describe('external files', () => {
+  beforeAll(async () => {
+    ;[markup, script, style] = [
+      await markupProcessor(getBaseObj('template.html')),
+      await scriptProcessor(getBaseObj('script.js')),
+      await styleProcessor(getBaseObj('style.css')),
+    ]
+  })
+
+  it('should insert external file content', async () => {
+    expect(markup.code).toContain(getFixtureContent('template.html'))
+    expect(script.code).toContain(getFixtureContent('script.js'))
+    expect(style.code).toContain(getFixtureContent('style.css'))
+  })
+
+  it('should add a external file as a dependency', async () => {
+    expect(markup.dependencies).toContain(getFixturePath('template.html'))
+    expect(script.dependencies).toContain(getFixturePath('script.js'))
+    expect(style.dependencies).toContain(getFixturePath('style.css'))
+  })
+
+  const EXTERNALJS = [
+    'https://www.example.com/some/externally/delivered/content.js',
+    'http://www.example.com/some/externally/delivered/content.js',
+    '//www.example.com/some/externally/delivered/content.js',
+  ]
+
+  EXTERNALJS.forEach(url => {
+    it(`should not attempt to locally resolve ${url}`, async () => {
+      const input = `<div></div><script src="${url}"></script>`
+
+      const preprocessed = await preprocess(input, getAutoPreprocess())
+      expect(preprocessed.toString()).toContain(input)
+      expect(preprocessed.dependencies.length).toBe(0)
+    })
+  })
+})

Diff for: test/autoProcess/markup.test.js

@@ -0,0 +1,35 @@
+const getAutoPreprocess = require('../../src')
+const {
+  preprocess,
+  getFixtureContent,
+  doesCompileThrow,
+} = require('../utils.js')
+
+const EXPECTED_MARKUP = getFixtureContent('template.html')
+const MARKUP_LANGS = [['pug', 'pug']]
+
+it('should parse HTML between <template></template>', async () => {
+  const input = `<template><div>Hey</div></template>`
+  const preprocessed = await preprocess(input, getAutoPreprocess())
+  expect(preprocessed.toString()).toBe(EXPECTED_MARKUP)
+})
+
+MARKUP_LANGS.forEach(([lang, ext]) => {
+  describe(`markup - preprocessor - ${lang}`, () => {
+    const template = `<template lang="${lang}">${getFixtureContent(
+      `template.${ext}`,
+    )}</template>`
+
+    it(`should throw parsing ${lang} when { ${lang}: false }`, async () => {
+      const opts = getAutoPreprocess({ transformers: { pug: false } })
+      expect(await doesCompileThrow(template, opts)).toBe(true)
+    })
+
+    it(`should parse ${lang}`, async () => {
+      const preprocessed = (await preprocess(template, getAutoPreprocess()))
+        .toString()
+        .trim()
+      expect(preprocessed.toString()).toBe(EXPECTED_MARKUP)
+    })
+  })
+})

Diff for: test/autoProcess/script.test.js

@@ -0,0 +1,36 @@
+const getAutoPreprocess = require('../../src')
+const {
+  preprocess,
+  getFixtureContent,
+  doesCompileThrow,
+} = require('../utils.js')
+
+const SCRIPT_LANGS = [['coffeescript', 'coffee']]
+const EXPECTED_SCRIPT = getFixtureContent('script.js')
+
+SCRIPT_LANGS.forEach(([lang, ext, langOptions]) => {
+  describe(`script - preprocessor - ${lang}`, () => {
+    const template = `<div></div><script lang="${lang}">${getFixtureContent(
+      'script.' + ext,
+    )}</script>`
+
+    it(`should throw parsing ${lang} when { ${lang}: false }`, async () => {
+      const input = `
+        <div></div>
+        <script src="./fixtures/script.${ext}"></script>
+      `
+      const opts = getAutoPreprocess({
+        transformers: {
+          [lang]: false,
+        },
+      })
+      expect(await doesCompileThrow(input, opts)).toBe(true)
+    })
+
+    it(`should parse ${lang}`, async () => {
+      const opts = getAutoPreprocess()
+      const preprocessed = await preprocess(template, opts)
+      expect(preprocessed.toString()).toContain(EXPECTED_SCRIPT)
+    })
+  })
+})

Diff for: test/autoProcess/style.test.js

@@ -0,0 +1,101 @@
+const getAutoPreprocess = require('../../src')
+const {
+  preprocess,
+  getFixtureContent,
+  doesCompileThrow,
+  CSS_PATTERN,
+} = require('../utils.js')
+
+const STYLE_LANGS = [
+  ['sass', 'sass'],
+  ['less', 'less'],
+  ['scss', 'scss'],
+  ['stylus', 'styl'],
+]
+
+STYLE_LANGS.forEach(([lang, ext, langOptions]) => {
+  describe(`style - preprocessor - ${lang}`, () => {
+    const template = `<div></div><style lang="${lang}">${getFixtureContent(
+      'style.' + ext,
+    )}</style>`
+    const templateExternal = `<div></div><style src="./fixtures/style.${ext}"></style>`
+
+    it(`should throw parsing ${lang} when { ${lang}: false }`, async () => {
+      const opts = getAutoPreprocess({
+        transformers: {
+          [lang]: false,
+        },
+      })
+      expect(await doesCompileThrow(template, opts)).toBe(true)
+    })
+
+    it(`should parse ${lang}`, async () => {
+      const opts = getAutoPreprocess()
+      const preprocessed = await preprocess(template, opts)
+      expect(preprocessed.toString()).toMatch(CSS_PATTERN)
+    })
+
+    it(`should parse external ${lang}`, async () => {
+      const opts = getAutoPreprocess()
+      const preprocessed = await preprocess(templateExternal, opts)
+      expect(preprocessed.toString()).toMatch(CSS_PATTERN)
+    })
+  })
+})
+
+describe('style - postcss', () => {
+  const template = `<div></div><style>div{appearance:none;}</style>`
+  const templateSass = `<div></div><style lang="scss">div{appearance:none;}</style>`
+  const optsWithoutConfigFile = getAutoPreprocess({
+    transformers: {
+      postcss: {
+        plugins: [
+          require('autoprefixer')({
+            browsers: 'Safari >= 5.1',
+          }),
+        ],
+      },
+    },
+  })
+
+  it('should not transform plain css with postcss if { postcss: falsy }', async () => {
+    const preprocessed = await preprocess(template, getAutoPreprocess())
+    expect(preprocessed.toString()).not.toMatch(/-webkit-/)
+  })
+
+  it('should not transform plain css with postcss if { postcss: true } and no configuration file at cwd', async () => {
+    const preprocessed = await preprocess(
+      template,
+      getAutoPreprocess({
+        transformers: {
+          postcss: true,
+        },
+      }),
+    )
+    expect(preprocessed.toString()).not.toMatch(/-webkit-/)
+  })
+
+  it('should transform plain css with postcss if { postcss: { plugins... } }', async () => {
+    const preprocessed = await preprocess(template, optsWithoutConfigFile)
+    expect(preprocessed.toString()).toMatch(/-webkit-/)
+  })
+
+  it('should transform async preprocessed css with postcss if { postcss: { plugins... } }', async () => {
+    const preprocessed = await preprocess(templateSass, optsWithoutConfigFile)
+    expect(preprocessed.toString()).toMatch(/-webkit-/)
+  })
+
+  it('should transform plain css with postcss if { postcss: { configFilePath: ... } }', async () => {
+    const preprocessed = await preprocess(
+      template,
+      getAutoPreprocess({
+        transformers: {
+          postcss: {
+            configFilePath: './test/fixtures/',
+          },
+        },
+      }),
+    )
+    expect(preprocessed.toString()).toMatch(/-webkit-/)
+  })
+})