added first actual unittest to test-ui-components

tests/test-ui-components/package.json

@@ -12,6 +12,7 @@
     "watch:src": "tsc -b --watch"
   },
   "dependencies": {
+    "@jupyterlab/testutils": "^2.0.0-beta.3",
     "@jupyterlab/ui-components": "^2.0.0-beta.3",
     "chai": "^4.2.0",
     "jest": "^24.9.0",

tests/test-ui-components/src/labicon.spec.ts

@@ -3,12 +3,34 @@
 
 import { expect } from 'chai';
 
-import { LabIcon } from '../../ui-components';
+import { LabIcon } from '@jupyterlab/ui-components';
 
-describe('@jupyterlab/nbformat', () => {
-  describe('validateIcons', () => {
-    it('should return true for a valid json object', () => {
-      // expect('application/json', { foo: 1 }).to.equal(true);
+import fooSvgstr from '../style/foo.svg';
+const fooIcon = new LabIcon({
+  name: 'test-ui-components:foo',
+  svgstr: fooSvgstr
+});
+
+describe('@jupyterlab/ui-components', () => {
+  describe('svg import', () => {
+    it('should hold a string with the raw contents of an svg', () => {
+      expect(fooSvgstr).to.be.string;
+      expect(
+        fooSvgstr.startsWith(`<svg width="24" height="24" viewBox="0 0 24 24">`)
+      ).to.be.true;
+    });
+  });
+
+  describe('LabIcon', () => {
+    describe('attribute .svgstr', () => {
+      it('should hold a string with the raw contents of an svg', () => {
+        expect(fooIcon.svgstr).to.be.string;
+        expect(
+          fooIcon.svgstr.startsWith(
+            `<svg width="24" height="24" viewBox="0 0 24 24">`
+          )
+        ).to.be.true;
+      });
     });
   });
 });

tests/test-ui-components/src/svg.d.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// including this file in a package allows for the use of import statements
+// with svg files. Example: `import xSvg from 'path/xSvg.svg'`
+
+// for use with raw-loader in Webpack.
+// The svg will be imported as a raw string
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+// for use with svg-react-loader in Webpack.
+// The svg will be imported as a ReactElement
+
+// declare module '*.svg' {
+//   import { HTMLAttributes } from 'react';
+//   const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+//   export default value;
+// }
+
+// as an alternative to importing svgs one at a time, you can do a glob import
+// using `context.requires`. This is a Webpack only extension. Implementation:
+
+// import { PathExt } from '@jupyterlab/coreutils';
+//
+// /**
+//  * Import all svgs from a directory. The input argument should be
+//  * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
+//  * <path> should be a string literal path, as this is needed by `require`.
+//  */
+// export function importSvgs(r: any, exclude: string[] = []): IModel[] {
+//   const excset = new Set(exclude);
+//
+//   return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
+//     const name = PathExt.stem(item);
+//     if (!excset.has(name)) {
+//       svgs.push({ name: name, svg: r(item).default });
+//     }
+//     return svgs;
+//   }, []);
+// }
+//
+// // create the array of default icon models
+// let icons: IModel[];
+// try {
+//   // require.context is supplied by Webpack, and doesn't play nice with jest
+//   icons = importSvgs(
+//     require.context('raw-loader!../../style/icons', true, /\.svg$/),
+//     ['bad', 'blank']
+//   );
+// } catch (e) {
+//   // fallback for jest tests
+//   icons = [];
+// }
+// export const defaultIcons: ReadonlyArray<IModel> = icons;

tests/test-ui-components/style/foo.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon0"
+        fill="#000"
+        d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"
+    />
+</svg>