@unvt/charites 0.2.0 → 0.4.0

package/test/command.build.spec.ts

@@ -1,4 +1,5 @@
-import { assert } from 'chai'
+import chai from 'chai'
+import chaiAsPromised from 'chai-as-promised'
 import path from 'path'
 import fs from 'fs'
 import { copyFixturesFile, copyFixturesDir } from './util/copyFixtures'
@@ -7,11 +8,15 @@ import { makeTempDir } from './util/makeTempDir'
 import charites from './util/charitesCmd'
 
 let tmpdir = ''
+chai.use(chaiAsPromised)
+chai.should()
+const assert = chai.assert
 
 describe('Test for the `charites build`', () => {
   beforeEach(async function () {
     tmpdir = makeTempDir()
     copyFixturesFile('style.yml', tmpdir)
+    copyFixturesFile('error.yml', tmpdir)
     copyFixturesDir('layers', tmpdir)
     copyFixturesDir('icons', tmpdir)
   })
@@ -62,39 +67,42 @@ describe('Test for the `charites build`', () => {
     assert.isTrue(fs.existsSync(path.join(tmpdir, 'basic-white.json')))
   })
 
-  it('charites build style.yml style.json --sprite-url http://localhost:8080', async () => {
-    try {
-      // prettier-ignore
-      await exec(`${charites} build style.yml style.json --sprite-url http://localhost:8080`, tmpdir)
-    } catch (error) {
-      assert.deepEqual(error.stdout, '')
-      assert.deepEqual(error.stderr, 'Invalid sprite url format.\n')
-    }
+  it('charites build style.yml style.json --sprite-url http://localhost:8080', () => {
+    const promise = exec(
+      `${charites} build style.yml style.json --sprite-url http://localhost:8080`,
+      tmpdir,
+    )
+    return assert.isRejected(promise, /Invalid sprite url format.\n/)
   })
 
-  it('charites build style.yml style.json --sprite-input noExistDirname', async () => {
-    try {
-      // prettier-ignore
-      await exec(`${charites} build style.yml style.json --sprite-input noExistDirname`, tmpdir)
-    } catch (error) {
-      assert.deepEqual(error.stdout, '')
-      assert.deepEqual(
-        error.stderr,
-        'noExistDirname: No such directory. Please specify valid icon input directory. For more help run charites build --help\n',
-      )
-    }
+  it('charites build style.yml style.json --sprite-input noExistDirname', () => {
+    const promise = exec(
+      `${charites} build style.yml style.json --sprite-input noExistDirname`,
+      tmpdir,
+    )
+    return assert.isRejected(
+      promise,
+      /noExistDirname: No such directory. Please specify valid icon input directory. For more help run charites build --help\n/,
+    )
   })
 
-  it('charites build style.yml style.json --sprite-output noExistDirname', async () => {
-    try {
-      // prettier-ignore
-      await exec(`${charites} build style.yml style.json --sprite-output noExistDirname`, tmpdir)
-    } catch (error) {
-      assert.deepEqual(error.stdout, '')
-      assert.deepEqual(
-        error.stderr,
-        'noExistDirname: No such directory. Please specify valid icon output directory. For more help run charites build --help\n',
-      )
-    }
+  it('charites build style.yml style.json --sprite-output noExistDirname', (done) => {
+    const promise = exec(
+      `${charites} build style.yml style.json --sprite-output noExistDirname`,
+      tmpdir,
+    )
+    promise.should.be.rejected
+      .then(function () {
+        return assert.isRejected(
+          promise,
+          /noExistDirname: No such directory. Please specify valid icon output directory. For more help run charites build --help\n/,
+        )
+      })
+      .should.notify(done)
+  })
+
+  it('charites build print error message', () => {
+    const promise = exec(`${charites} build error.yml`, tmpdir)
+    return assert.isRejected(promise, /missing required property "sources"/)
   })
 })

package/test/command.serve.spec.ts

@@ -0,0 +1,103 @@
+import { expect } from 'chai'
+import { AbortController } from 'node-abort-controller'
+import axios from 'axios'
+import { abortableExecFile } from './util/execPromise'
+import { copyFixturesDir, copyFixturesFile } from './util/copyFixtures'
+import { makeTempDir } from './util/makeTempDir'
+import { charitesCliJs } from './util/charitesCmd'
+import { sleep } from './util'
+
+let tmpdir = ''
+
+describe('Test for `charites serve`', () => {
+  beforeEach(async function () {
+    tmpdir = makeTempDir()
+    copyFixturesFile('style.yml', tmpdir)
+    copyFixturesDir('layers', tmpdir)
+    copyFixturesDir('icons', tmpdir)
+  })
+
+  it('charites serve style.yml', async () => {
+    const abort = new AbortController()
+    const server = abortableExecFile(
+      process.execPath,
+      [charitesCliJs, 'serve', '--no-open', 'style.yml'],
+      abort.signal,
+      tmpdir,
+    )
+    try {
+      await sleep(500)
+      await Promise.all([
+        (async () => {
+          const res = await axios('http://127.0.0.1:8080/style.json', {})
+          expect(res.data.version).to.equal(8)
+        })(),
+        (async () => {
+          await axios('http://127.0.0.1:8080/sprite.json', {
+            validateStatus: (status) => status === 404,
+          })
+        })(),
+      ])
+    } finally {
+      abort.abort()
+    }
+    abort.abort()
+    const { stdout, stderr } = await server
+    expect(stderr).to.equal('')
+    expect(stdout).to.match(/^Your map is running on http:\/\/localhost:8080/m)
+  })
+
+  it('charites serve --sprite-input ./icons style.yml', async () => {
+    const abort = new AbortController()
+    const server = abortableExecFile(
+      process.execPath,
+      [
+        charitesCliJs,
+        'serve',
+        '--no-open',
+        '--sprite-input',
+        './icons',
+        'style.yml',
+      ],
+      abort.signal,
+      tmpdir,
+    )
+
+    try {
+      await sleep(500)
+      await Promise.all([
+        (async () => {
+          const res = await axios('http://127.0.0.1:8080/style.json', {})
+          expect(res.status).to.equal(200)
+          expect(res.data.version).to.equal(8)
+          expect(res.data.sprite).to.equal('http://127.0.0.1:8080/sprite')
+        })(),
+        (async () => {
+          const res = await axios('http://127.0.0.1:8080/sprite.json', {})
+          expect(res.status).to.equal(200)
+          expect(Object.entries(res.data).length).to.be.greaterThan(0)
+        })(),
+        (async () => {
+          const res = await axios('http://127.0.0.1:8080/sprite@2x.json', {})
+          expect(res.status).to.equal(200)
+          expect(Object.entries(res.data).length).to.be.greaterThan(0)
+        })(),
+        (async () => {
+          const res = await axios('http://127.0.0.1:8080/sprite.png', {})
+          expect(res.status).to.equal(200)
+          expect(res.data.length).to.be.greaterThan(0)
+        })(),
+        (async () => {
+          const res = await axios('http://127.0.0.1:8080/sprite@2x.png', {})
+          expect(res.status).to.equal(200)
+          expect(res.data.length).to.be.greaterThan(0)
+        })(),
+      ])
+    } finally {
+      abort.abort()
+    }
+    const { stdout, stderr } = await server
+    expect(stderr).to.equal('')
+    expect(stdout).to.match(/^Your map is running on http:\/\/localhost:8080/m)
+  })
+})

package/test/convert.spec.ts

@@ -4,14 +4,24 @@ import fs from 'fs'
 import os from 'os'
 
 import { convert } from '../src/commands/convert'
+import { build } from '../src/commands/build'
+
+let tmp: string
 
 describe('Test for the `convert.ts`.', () => {
-  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'charites-'))
   const jsonPath = path.join(__dirname, 'data/convert.json')
-  const yamlPath = path.join(tmp, 'convert.yml')
-  const layerPath = path.join(tmp, 'layers/background.yml')
 
-  it('Should convert `data/convert.json` to YAML.', () => {
+  beforeEach(async () => {
+    tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'charites-'))
+  })
+
+  afterEach(async () => {
+    fs.rmSync(tmp, { recursive: true })
+  })
+
+  it('Should convert `data/convert.json` to YAML and the YAML should be valid.', async () => {
+    const yamlPath = path.join(tmp, 'convert.yml')
+
     convert(jsonPath, yamlPath)
     const yml = fs.readFileSync(yamlPath, 'utf-8')
 
@@ -27,13 +37,23 @@ sprite: https://sprites.geolonia.com/basic-white
 glyphs: https://glyphs.geolonia.com/{fontstack}/{range}.pbf
 layers:
   - !!inc/file layers/background.yml
+  - !!inc/file >-
+    layers/background-with-very-long-name-background-with-very-long-name-background-with-very-long-name.yml
 id: example
 `,
       yml,
     )
+
+    const outJsonPath = path.join(tmp, 'converted-back.json')
+    // This will throw an error if the outputted YAML was invalid
+    await build(yamlPath, outJsonPath, { provider: 'default' })
+    assert.isTrue(fs.existsSync(outJsonPath))
   })
 
   it('Should create layers directory.', () => {
+    const yamlPath = path.join(tmp, 'convert.yml')
+    const layerPath = path.join(tmp, 'layers/background.yml')
+
     convert(jsonPath, yamlPath)
 
     const result = fs.existsSync(layerPath)

package/test/data/convert.json

@@ -17,6 +17,13 @@
       "paint": {
         "background-color": "rgba(19, 28, 54, 1)"
       }
+    },
+    {
+      "id": "background-with-very-long-name-background-with-very-long-name-background-with-very-long-name",
+      "type": "background",
+      "paint": {
+        "background-color": "rgba(19, 28, 54, 1)"
+      }
     }
   ],
   "id": "example"

package/test/data/style.json

@@ -14,8 +14,9 @@
     {
       "id": "background",
       "type": "background",
-      "paint": null,
-      "background-color": "rgba(19, 28, 54, 1)"
+      "paint": {
+        "background-color": "rgba(19, 28, 54, 1)"
+      }
     },
     {
       "id": "water",
@@ -30,4 +31,4 @@
       }
     }
   ]
-}
+}

package/test/init.spec.ts

@@ -84,11 +84,13 @@ describe('Test for the `init.ts`.', () => {
     assert.deepEqual(true, !!fs.statSync(styleYaml))
     // the file should be the same with init_tilejson.yml
     assert.deepEqual(
-      fs.readFileSync(styleYaml, 'utf8'),
-      fs.readFileSync(
-        path.join(__dirname, 'data/init/tilejson/init_decomposite.yml'),
-        'utf-8',
-      ),
+      fs.readFileSync(styleYaml, 'utf8').replace(/\r\n/gm, '\n'),
+      fs
+        .readFileSync(
+          path.join(__dirname, 'data/init/tilejson/init_decomposite.yml'),
+          'utf-8',
+        )
+        .replace(/\r\n/gm, '\n'),
     )
     assert.deepEqual(
       YAML.load(

package/test/playwright/provider/default/e2e.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Charites Live Preview with maplibre', async ({ page }) => {
+  // collect errors on the page
+  const pageErrors: Error[] = []
+  page.on('pageerror', (exception) => pageErrors.push(exception))
+
+  await page.goto('http://localhost:8080/', { waitUntil: 'networkidle' })
+  await page.waitForTimeout(1000)
+  const title = await page.title()
+  expect(title).toBe('Charites Live Preview')
+  expect(pageErrors).toMatchObject([])
+})

package/test/playwright/provider/geolonia/e2e.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Charites Live Preview with geolonia', async ({ page }) => {
+  // collect errors on the page
+  const pageErrors: Error[] = []
+  page.on('pageerror', (exception) => pageErrors.push(exception))
+
+  await page.goto('http://localhost:8088/', { waitUntil: 'networkidle' })
+  await page.waitForTimeout(1000)
+  const title = await page.title()
+  expect(title).toBe('Charites Live Preview')
+  expect(pageErrors).toMatchObject([])
+})

package/test/playwright/provider/mapbox/e2e.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Charites Live Preview with mapbox', async ({ page }) => {
+  // collect errors on the page
+  const pageErrors: Error[] = []
+  page.on('pageerror', (exception) => pageErrors.push(exception))
+
+  await page.goto('http://localhost:8888/', { waitUntil: 'networkidle' })
+  await page.waitForTimeout(1000)
+  const title = await page.title()
+  expect(title).toBe('Charites Live Preview')
+  expect(pageErrors).toMatchObject([])
+})

package/test/util/charitesCmd.ts

@@ -1,3 +1,5 @@
 import path from 'path'
 
-export default `node ${path.join(__dirname, '..', '..', 'dist', 'cli.js')}`
+export const charitesCliJs = path.join(__dirname, '..', '..', 'dist', 'cli.js')
+
+export default `"${process.execPath}" "${charitesCliJs}"`

package/test/util/execPromise.ts

@@ -1,9 +1,22 @@
 import child_process from 'child_process'
 import util from 'util'
+
+// MEMO: Remove node-abort-controller when requiring NodeJS >=16
+// NOTE: AbortController is available by default from NodeJS 15
+import { AbortSignal } from 'node-abort-controller'
 import { makeTempDir } from './makeTempDir'
 const execSync = util.promisify(child_process.exec)
 
-export const exec = async (cmd: string, cwd?: string) => {
+type ExecResult = {
+  stdout: string
+  stderr: string
+  cwd: string
+}
+
+export const exec: (cmd: string, cwd?: string) => Promise<ExecResult> = async (
+  cmd,
+  cwd,
+) => {
   const temp = cwd ? cwd : makeTempDir()
   const { stdout, stderr } = await execSync(cmd, {
     encoding: 'utf8',
@@ -12,3 +25,40 @@ export const exec = async (cmd: string, cwd?: string) => {
 
   return { stdout, stderr, cwd: temp }
 }
+
+// MEMO: This can be replaced with the native AbortSignal support in child_process.exec after
+// requiring NodeJS >= 16.4.0, see:
+// https://nodejs.org/docs/latest-v16.x/api/child_process.html#child_processexeccommand-options-callback
+export const abortableExecFile = (
+  file: string,
+  args: string[],
+  signal: AbortSignal,
+  cwd?: string,
+) =>
+  new Promise<ExecResult>((resolve, reject) => {
+    const temp = cwd ? cwd : makeTempDir()
+
+    // Because Windows can't catch the SIGINT signal (it doesn't have signals)
+    // we set a flag in the parent whether the command can die or not.
+    // If the command exits before we request it to exit, the error will be
+    // thrown, but if it exits after we request it to exit, it won't be an error.
+    let noErrorOnDie = false
+    const process = child_process.execFile(
+      file,
+      args,
+      {
+        encoding: 'utf8',
+        cwd: temp,
+      },
+      (error, stdout, stderr) => {
+        if (error && noErrorOnDie !== true) {
+          return reject(error)
+        }
+        resolve({ stdout, stderr, cwd: temp })
+      },
+    )
+    signal.addEventListener('abort', () => {
+      noErrorOnDie = true
+      process.kill('SIGINT')
+    })
+  })

package/test/util/index.ts

@@ -0,0 +1,3 @@
+import { promisify } from 'util'
+
+export const sleep = promisify(setTimeout)

package/test/validate-style.spec.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai'
-import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec/types'
+import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
 
 import { validateStyle } from '../src/lib/validate-style'
 

package/provider/geolonia/app.css

@@ -1,17 +0,0 @@
-html, body, #map
-{
-  width: 100vw;
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-}
-
-.overlay {
-  width: 200px;
-  position: absolute;
-  top: 10;
-  left: 10;
-  margin: 5px;
-  z-index: 90;
-  background-color: rgba(255, 255, 255, 0.6);
-}

package/provider/mapbox/app.css

@@ -1,17 +0,0 @@
-html, body, #map
-{
-  width: 100vw;
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-}
-
-.overlay {
-  width: 200px;
-  position: absolute;
-  top: 10;
-  left: 10;
-  margin: 5px;
-  z-index: 90;
-  background-color: rgba(255, 255, 255, 0.6);
-}