@mux/mux-player 0.1.0-canary.0-556dabf

package/test/template.test.js

@@ -0,0 +1,70 @@
+import { assert } from '@open-wc/testing';
+import { content } from '../src/template.ts';
+import { render } from '../src/html.ts';
+
+const minify = (html) => html.trim().replace(/>\s+</g, '><');
+
+describe('<mux-player> template render', () => {
+  const div = document.createElement('div');
+
+  it('default template without props', function () {
+    render(content({}), div);
+    assert.equal(
+      minify(div.innerHTML),
+      '<media-theme-mux class="size-" stream-type="" player-size="" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
+    );
+  });
+
+  it('template extra-small', function () {
+    render(
+      content({
+        playerSize: 'extra-small',
+        streamType: 'on-demand',
+        dialog: {
+          title: 'Errr',
+        },
+      }),
+      div
+    );
+    div.querySelectorAll('svg').forEach((svg) => svg.remove());
+    assert.equal(
+      minify(div.innerHTML),
+      '<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>'
+    );
+  });
+
+  it('template VodChromeLarge with captions', function () {
+    render(
+      content({
+        playerSize: 'large',
+        streamType: 'on-demand',
+        hasCaptions: true,
+      }),
+      div
+    );
+    div.querySelectorAll('svg').forEach((svg) => svg.remove());
+    assert.equal(
+      minify(div.innerHTML),
+      '<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
+    );
+  });
+
+  it('template VodChromeLarge without captions', function () {
+    render(
+      content({
+        playerSize: 'large',
+        streamType: 'on-demand',
+        hasCaptions: false,
+        dialog: {
+          title: 'Errr',
+        },
+      }),
+      div
+    );
+    div.querySelectorAll('svg').forEach((svg) => svg.remove());
+    assert.equal(
+      minify(div.innerHTML),
+      '<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>'
+    );
+  });
+});

package/test/utils.test.js

@@ -0,0 +1,21 @@
+import { assert } from '@open-wc/testing';
+import { stylePropsToString, uniqueId } from '../src/utils.ts';
+
+describe('utils', () => {
+  it('stylePropsToString', function () {
+    assert.equal(
+      stylePropsToString({
+        fontSize: '12px',
+        color: '#fff',
+      }),
+      'font-size: 12px; color: #fff;'
+    );
+  });
+
+  it('uniqueId', function () {
+    let id = uniqueId('uid');
+    assert.equal(id, 'uid1');
+
+    assert.notEqual(uniqueId('uid'), id);
+  });
+});

package/test/web-test-runner.config.mjs

@@ -0,0 +1,29 @@
+import { esbuildPlugin } from '@web/dev-server-esbuild';
+import { importMapsPlugin } from '@web/dev-server-import-maps';
+
+export default {
+  nodeResolve: true,
+  plugins: [
+    importMapsPlugin({
+      inject: {
+        importMap: {
+          imports: {
+            // see shared/test-esm-exports/README.md for more information on this configuration
+            '/test/': '/packages/mux-player/test/',
+            'hls.js': '/node_modules/@mux/test-esm-exports/dist/hls.js',
+            'mux-embed': '/node_modules/@mux/test-esm-exports/dist/mux-embed.js',
+          },
+        },
+      },
+    }),
+    esbuildPlugin({
+      ts: true,
+      json: true,
+      loaders: { '.css': 'text', '.svg': 'text' },
+    }),
+  ],
+  coverageConfig: {
+    report: true,
+    include: ['src/**/*'],
+  },
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "incremental": true,
+    "target": "ES2019",
+    "module": "es6",
+    "declaration": true,
+    "sourceMap": true,
+    "composite": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "moduleResolution": "Node",
+    "baseUrl": "./packages",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "typeRoots": ["node_modules/@types", "../../types"]
+  },
+  "include": ["src/**/*", "../../types"]
+}