Walter/tag picker

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porkbellypro/crm-web",
-  "bin":{
+  "bin": {
     "web-build": "./build.mjs"
   },
   "scripts": {
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fluentui/react": "^8.28.2",
+    "@fluentui/react-hooks": "^8.3.2",
     "@porkbellypro/crm-shared": "file:shared",
     "@tsconfig/recommended": "^1.0.1",
     "@types/history": "^4.7.9",
@@ -19,6 +20,7 @@
     "@types/react-test-renderer": "^17.0.1",
     "argparse": "^2.0.1",
     "buffer": "^6.0.3",
+    "color-string": "^1.6.0",
     "history": "^5.0.1",
     "html-webpack-plugin": "^5.3.2",
     "jimp": "^0.16.1",
@@ -35,13 +37,13 @@
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint": "^7.32.0",
-    "ts-jest": "^27.0.5",
-    "jest": "^27.0.6"
+    "jest": "^27.0.6",
+    "ts-jest": "^27.0.5"
   }
 }

web/src/__tests__/components/TagEditor.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { TagEditor } from '../../components/tagSelector/TagEditor';
+import { ITag } from '../../controllers/Tag';
+
+import '../disable-icon-warnings.helpers';
+
+const demoTag: ITag = {
+  id: '1',
+  label: 'Big Boss',
+  color: '#BF7829',
+  commit() { throw new Error('Not implemented'); },
+  delete() { throw new Error('Not implemented'); },
+};
+
+const htmlId = 'TagAnchor';
+
+describe('TagEditor render tests', () => {
+  test('without closingFunction', () => {
+    const json = create(
+      <TagEditor anchor={htmlId} tag={demoTag} />,
+    ).toJSON();
+    expect(json).toMatchInlineSnapshot(`
+<span
+  className="ms-layer"
+/>
+`);
+  });
+
+  test('with closingFunction', () => {
+    const json = create(
+      <TagEditor
+        anchor={htmlId}
+        tag={demoTag}
+        closingFunction={() => { }}
+      />,
+    ).toJSON();
+    expect(json).toMatchInlineSnapshot(`
+<span
+  className="ms-layer"
+/>
+`);
+  });
+});

web/src/__tests__/components/TagPicker.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { AppProvider, IAppContext } from '../../AppContext';
+import { TagPicker } from '../../components/tagSelector/TagPicker';
+import { ICard } from '../../controllers/Card';
+import { ITag } from '../../controllers/Tag';
+
+import '../disable-icon-warnings.helpers';
+
+function notImplemented() {
+  return new Error('Not Implemented');
+}
+
+const demoCard: ICard = {
+  company: 'None',
+  tags: [],
+  email: 'noEmail@jmail.com',
+  favorite: false,
+  fields: [],
+  jobTitle: 'Unemployed',
+  name: 'no name',
+  phone: '0001',
+  update() { throw notImplemented(); },
+  commit() { throw notImplemented(); },
+  delete() { throw notImplemented(); },
+};
+
+const demoTag: ITag = {
+  id: '1',
+  label: 'Big Boss',
+  color: '#BF7829',
+  commit() { throw notImplemented(); },
+  delete() { throw notImplemented(); },
+};
+
+const demoApp: IAppContext = {
+  searchQuery: '',
+  tagQuery: [],
+  user: {
+    username: 'username',
+    settings: {},
+    cards: [demoCard],
+    tags: [demoTag],
+  },
+  update() { throw notImplemented(); },
+  showCardDetail() { throw notImplemented(); },
+  newCard() { throw notImplemented(); },
+  newTag() { throw notImplemented(); },
+  login() { return Promise.reject(notImplemented()); },
+  logout() { return Promise.reject(notImplemented()); },
+};
+
+describe('TagPicker render tests', () => {
+  test('TagPicker in editing mode', () => {
+    const json = create(
+      <AppProvider value={demoApp}>
+        <TagPicker targetCard={demoCard} editing />
+      </AppProvider>,
+    ).toJSON();
+    expect(json).toMatchInlineSnapshot(`
+<div
+  className="ms-Stack css-53"
+>
+  <div
+    className="ms-StackItem css-54"
+  >
+    Tags
+  </div>
+  <div
+    className="ms-StackItem css-54"
+  >
+    <div
+      className="ms-Stack css-53"
+    />
+  </div>
+  <button
+    className="ms-Button ms-Button--default root-55"
+    data-is-focusable={true}
+    id="picker-target0"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <span
+      className="ms-Button-flexContainer flexContainer-56"
+      data-automationid="splitbuttonprimary"
+    >
+      <span
+        className="ms-Button-textContainer textContainer-57"
+      >
+        <span
+          className="ms-Button-label label-59"
+          id="id__1"
+        >
+          Attach Tags
+        </span>
+      </span>
+    </span>
+  </button>
+</div>
+`);
+  });
+
+  test('TagPicker in read-only', () => {
+    const json = create(
+      <AppProvider value={demoApp}>
+        <TagPicker targetCard={demoCard} editing={false} />
+      </AppProvider>,
+    ).toJSON();
+    expect(json).toMatchInlineSnapshot(`
+<div
+  className="ms-Stack css-53"
+>
+  <div
+    className="ms-StackItem css-54"
+  >
+    Tags
+  </div>
+  <div
+    className="ms-StackItem css-54"
+  >
+    <div
+      className="ms-Stack css-53"
+    />
+  </div>
+</div>
+`);
+  });
+});