@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

package/react/components/search/SearchResult.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/search/SearchResult.spec.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { ComponentResult, WorkspaceResult } from "./SearchResult.stories";
+import { accessibilityAssessor } from "../sdd/tests/a11y_helper";
+import sinon from "sinon";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+describe("<SearchResult/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it.skip("passess accessibility scans", async () => {
+        // Skipping because the icons don't have alt text, and that will need to be addressed
+        const wrapper = mount(React.createElement(ComponentResult, Object.assign({}, ComponentResult.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+    it("should display an icon if an icon URL is provided", () => {
+        const wrapper = mount(React.createElement(ComponentResult, Object.assign({}, ComponentResult.args)));
+        expect(wrapper.find("img").exists()).to.be.true;
+    });
+    it("should display a default icon if no icon URL is provided", () => {
+        const wrapper = mount(React.createElement(WorkspaceResult, Object.assign({}, WorkspaceResult.args)));
+        expect(wrapper.find(".icon-avatar-wrapper span").exists()).to.be.true;
+    });
+    it("clicking a search result should call invokeItemAction and resetSearch", () => {
+        var _a, _b;
+        const stub = sinon.stub(console, "log");
+        const resetSpy = sinon.spy(ComponentResult.args, "resetSearch");
+        const wrapper = mount(React.createElement(ComponentResult, Object.assign({}, ComponentResult.args)));
+        wrapper.find("[role='menuitem']").simulate("click");
+        expect(resetSpy.calledOnce, "resetSearch was called").to.be.true;
+        expect(stub.calledOnce, "invokeAction was invoked").to.be.true;
+        const parameters = stub.args[0][1];
+        expect(parameters[0], "First parameter is the component data").to.deep.equal((_a = ComponentResult.args) === null || _a === void 0 ? void 0 : _a.data);
+        expect(parameters[1], "Second parameter is the action data").to.deep.equal((_b = ComponentResult.args) === null || _b === void 0 ? void 0 : _b.data.actions[0]);
+    });
+});
+/*
+Outstanding test cases:
+    display extra item actions (WithProviderActions)
+    click extra item action
+ */
+//# sourceMappingURL=SearchResult.spec.js.map

package/react/components/search/SearchResult.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.spec.js","sourceRoot":"","sources":["../../../src/components/search/SearchResult.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { ComponentResult, WorkspaceResult } from \"./SearchResult.stories\";\nimport { SearchResultType } from \"./SearchResult\";\nimport { accessibilityAssessor } from \"../sdd/tests/a11y_helper\";\nimport sinon from \"sinon\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<SearchResult/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\tit.skip(\"passess accessibility scans\", async () => {\n\t\t// Skipping because the icons don't have alt text, and that will need to be addressed\n\t\tconst wrapper = mount(<ComponentResult {...(ComponentResult.args as SearchResultType)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\n\tit(\"should display an icon if an icon URL is provided\", () => {\n\t\tconst wrapper = mount(<ComponentResult {...(ComponentResult.args as SearchResultType)} />);\n\n\t\texpect(wrapper.find(\"img\").exists()).to.be.true;\n\t});\n\n\tit(\"should display a default icon if no icon URL is provided\", () => {\n\t\tconst wrapper = mount(<WorkspaceResult {...(WorkspaceResult.args as SearchResultType)} />);\n\n\t\texpect(wrapper.find(\".icon-avatar-wrapper span\").exists()).to.be.true;\n\t});\n\n\tit(\"clicking a search result should call invokeItemAction and resetSearch\", () => {\n\t\tconst stub = sinon.stub(console, \"log\");\n\t\tconst resetSpy = sinon.spy(ComponentResult.args as SearchResultType, \"resetSearch\");\n\t\tconst wrapper = mount(<ComponentResult {...(ComponentResult.args as SearchResultType)} />);\n\n\t\twrapper.find(\"[role='menuitem']\").simulate(\"click\");\n\n\t\texpect(resetSpy.calledOnce, \"resetSearch was called\").to.be.true;\n\t\texpect(stub.calledOnce, \"invokeAction was invoked\").to.be.true;\n\n\t\tconst parameters = stub.args[0][1];\n\t\texpect(parameters[0], \"First parameter is the component data\").to.deep.equal(ComponentResult.args?.data);\n\t\texpect(parameters[1], \"Second parameter is the action data\").to.deep.equal(ComponentResult.args?.data.actions[0]);\n\t});\n});\n\n/*\nOutstanding test cases:\n\tdisplay extra item actions (WithProviderActions)\n\tclick extra item action\n */\n"]}

package/react/components/search/SearchResult.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SearchResultType } from "./SearchResult";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/search.css";
+declare const _default: {
+    title: string;
+    component: (props: {
+        data: any;
+        searchQuery: import("@finsemble/finsemble-api/types/services/search/types").SearchQuery;
+        resetSearch: () => void;
+    }) => JSX.Element;
+};
+export default _default;
+export declare const ComponentResult: Story<SearchResultType>;
+export declare const WorkspaceResult: Story<SearchResultType>;
+export declare const WithProviderActions: Story<SearchResultType>;

package/react/components/search/SearchResult.stories.js

@@ -0,0 +1,113 @@
+import React from "react";
+import { SearchResult } from "./SearchResult";
+import "../../assets/css/search.css";
+import { action } from "@storybook/addon-actions";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { createStore } from "../../store";
+export default {
+    title: "Search/SearchResult",
+    component: SearchResult,
+};
+const Template = (args) => {
+    initFSBL(window);
+    FSBL.Clients.SearchClient.invokeItemAction = (...actionArgs) => {
+        console.log("invokeItemAction", actionArgs);
+    };
+    return (React.createElement(FinsembleProvider, { store: createStore() },
+        React.createElement("div", { role: "menu" },
+            React.createElement(SearchResult, Object.assign({}, args)))));
+};
+export const ComponentResult = Template.bind({});
+ComponentResult.args = {
+    data: {
+        actions: [{ name: "Spawn" }],
+        description: "",
+        displayName: "Take a Tour",
+        icon: {
+            imageType: "url",
+            path: "http://localhost:3375/build/components/tour/take-a-tour.svg",
+        },
+        matches: [
+            {
+                indices: [
+                    [0, 0],
+                    [7, 7],
+                ],
+                key: "component.displayName",
+                value: "Take a Tour",
+            },
+            {
+                indices: [[0, 0]],
+                key: "component.type",
+                value: "Tour",
+            },
+        ],
+        name: "Tour",
+        provider: "System Manager.Installed Components",
+        score: 0.000018578044550916993,
+        tags: [],
+        type: "Application",
+    },
+    searchQuery: "T",
+    resetSearch: action("resetSearch"),
+};
+export const WorkspaceResult = Template.bind({});
+WorkspaceResult.args = {
+    data: {
+        actions: [{ name: "Switch" }],
+        description: "",
+        matches: [
+            {
+                indices: [
+                    [2, 2],
+                    [7, 8],
+                ],
+                value: "auto_afterFeature",
+            },
+        ],
+        name: "auto_afterFeature",
+        provider: "workspaceService.Installed Workspaces",
+        score: 0.07,
+        tags: [],
+        type: "Workspace",
+    },
+    searchQuery: "Te",
+    resetSearch: action("resetSearch"),
+};
+export const WithProviderActions = Template.bind({});
+WithProviderActions.args = {
+    data: {
+        actions: [
+            {
+                name: "Launch",
+                colorName: "Red",
+                colorHex: "#FF0000",
+            },
+            {
+                name: "Set",
+                colorName: "Red",
+                colorHex: "#FF0000",
+            },
+        ],
+        description: "The color Red",
+        matches: [
+            {
+                indices: [[0, 3]],
+                value: "Red",
+            },
+        ],
+        name: "Red",
+        provider: "colorSearchProviderService.Colors",
+        score: 100,
+        tags: [],
+        type: "color",
+    },
+    searchQuery: "Red",
+    resetSearch: action("resetSearch"),
+};
+// with icon
+// without icon
+// with tags
+// with 0 actions
+//# sourceMappingURL=SearchResult.stories.js.map

package/react/components/search/SearchResult.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.stories.js","sourceRoot":"","sources":["../../../src/components/search/SearchResult.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { SearchResult, SearchResultType } from \"./SearchResult\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport \"../../assets/css/search.css\";\nimport { action } from \"@storybook/addon-actions\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { createStore } from \"../../store\";\n\nexport default {\n\ttitle: \"Search/SearchResult\",\n\tcomponent: SearchResult,\n};\n\nconst Template: Story<SearchResultType> = (args: SearchResultType) => {\n\tinitFSBL(window);\n\n\tFSBL.Clients.SearchClient.invokeItemAction = (...actionArgs) => {\n\t\tconsole.log(\"invokeItemAction\", actionArgs);\n\t};\n\n\treturn (\n\t\t<FinsembleProvider store={createStore()}>\n\t\t\t<div role=\"menu\">\n\t\t\t\t<SearchResult {...args} />\n\t\t\t</div>\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const ComponentResult = Template.bind({});\nComponentResult.args = {\n\tdata: {\n\t\tactions: [{ name: \"Spawn\" }],\n\t\tdescription: \"\",\n\t\tdisplayName: \"Take a Tour\",\n\t\ticon: {\n\t\t\timageType: \"url\",\n\t\t\tpath: \"http://localhost:3375/build/components/tour/take-a-tour.svg\",\n\t\t},\n\t\tmatches: [\n\t\t\t{\n\t\t\t\tindices: [\n\t\t\t\t\t[0, 0],\n\t\t\t\t\t[7, 7],\n\t\t\t\t],\n\t\t\t\tkey: \"component.displayName\",\n\t\t\t\tvalue: \"Take a Tour\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tindices: [[0, 0]],\n\t\t\t\tkey: \"component.type\",\n\t\t\t\tvalue: \"Tour\",\n\t\t\t},\n\t\t],\n\t\tname: \"Tour\",\n\t\tprovider: \"System Manager.Installed Components\",\n\t\tscore: 0.000018578044550916993,\n\t\ttags: [],\n\t\ttype: \"Application\",\n\t},\n\tsearchQuery: \"T\",\n\tresetSearch: action(\"resetSearch\"),\n};\n\nexport const WorkspaceResult = Template.bind({});\nWorkspaceResult.args = {\n\tdata: {\n\t\tactions: [{ name: \"Switch\" }],\n\t\tdescription: \"\",\n\t\tmatches: [\n\t\t\t{\n\t\t\t\tindices: [\n\t\t\t\t\t[2, 2],\n\t\t\t\t\t[7, 8],\n\t\t\t\t],\n\t\t\t\tvalue: \"auto_afterFeature\",\n\t\t\t},\n\t\t],\n\t\tname: \"auto_afterFeature\",\n\t\tprovider: \"workspaceService.Installed Workspaces\",\n\t\tscore: 0.07,\n\t\ttags: [],\n\t\ttype: \"Workspace\",\n\t},\n\tsearchQuery: \"Te\",\n\tresetSearch: action(\"resetSearch\"),\n};\n\nexport const WithProviderActions = Template.bind({});\nWithProviderActions.args = {\n\tdata: {\n\t\tactions: [\n\t\t\t{\n\t\t\t\tname: \"Launch\",\n\t\t\t\tcolorName: \"Red\",\n\t\t\t\tcolorHex: \"#FF0000\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Set\",\n\t\t\t\tcolorName: \"Red\",\n\t\t\t\tcolorHex: \"#FF0000\",\n\t\t\t},\n\t\t],\n\t\tdescription: \"The color Red\",\n\t\tmatches: [\n\t\t\t{\n\t\t\t\tindices: [[0, 3]],\n\t\t\t\tvalue: \"Red\",\n\t\t\t},\n\t\t],\n\t\tname: \"Red\",\n\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\tscore: 100,\n\t\ttags: [],\n\t\ttype: \"color\",\n\t},\n\tsearchQuery: \"Red\",\n\tresetSearch: action(\"resetSearch\"),\n};\n\n// with icon\n// without icon\n// with tags\n// with 0 actions\n"]}

package/react/components/search/SearchResults.js

@@ -5,10 +5,14 @@ import { useSearch } from "../../hooks/useSearch";
 import "../../assets/css/menus.css";
 export const SearchResults = () => {
     const { searchResults, searchQuery } = useSearch();
+    // If we had a response from the search client
     if (searchResults === null || searchResults === void 0 ? void 0 : searchResults.length) {
-        return (React.createElement("div", { className: "search-provider-results" },
+        return (
+        // pull out best match into its own component.
+        React.createElement("div", { className: "search-provider-results" },
             React.createElement(SearchBestMatch, null),
             searchResults.map((r, i) => (React.createElement(SearchProviderResults, { key: i, providerResponse: r })))));
+        // If we had no response, but we have a valid searchQuery
     }
     else {
         const message = searchQuery && searchQuery !== "" ? "No results" : "Results will display here";

package/react/components/search/SearchResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/search/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE;IAC1D,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAGnD,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,EAAE;QAC1B,OAAO,CAEN,6BAAK,SAAS,EAAC,yBAAyB;YACvC,oBAAC,eAAe,OAAG;YAClB,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,oBAAC,qBAAqB,IAAC,GAAG,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,GAAI,CACtD,CAAC,CACG,CACN,CAAC;KAEF;SAAM;QACN,MAAM,OAAO,GAAG,WAAW,IAAI,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC;QAE/F,OAAO,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC;KAC/E;AACF,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { SearchProviderResults } from \"./SearchProviderResults\";\nimport { SearchBestMatch } from \"./SearchBestMatch\";\nimport { useSearch } from \"../../hooks/useSearch\";\nimport \"../../assets/css/menus.css\";\n\nexport const SearchResults: React.FunctionComponent = () => {\n\tconst { searchResults, searchQuery } = useSearch();\n\n\t// If we had a response from the search client\n\tif (searchResults?.length) {\n\t\treturn (\n\t\t\t// pull out best match into its own component.\n\t\t\t<div className=\"search-provider-results\">\n\t\t\t\t<SearchBestMatch />\n\t\t\t\t{searchResults.map((r, i) => (\n\t\t\t\t\t<SearchProviderResults key={i} providerResponse={r} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\t\t// If we had no response, but we have a valid searchQuery\n\t} else {\n\t\tconst message = searchQuery && searchQuery !== \"\" ? \"No results\" : \"Results will display here\";\n\n\t\treturn <div className=\"menu-item no-hover informational-state\">{message}</div>;\n\t}\n};\n"]}
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/search/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE;IAC1D,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAEnD,8CAA8C;IAC9C,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,EAAE;QAC1B,OAAO;QACN,8CAA8C;QAC9C,6BAAK,SAAS,EAAC,yBAAyB;YACvC,oBAAC,eAAe,OAAG;YAClB,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,oBAAC,qBAAqB,IAAC,GAAG,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,GAAI,CACtD,CAAC,CACG,CACN,CAAC;QACF,yDAAyD;KACzD;SAAM;QACN,MAAM,OAAO,GAAG,WAAW,IAAI,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC;QAE/F,OAAO,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC;KAC/E;AACF,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { SearchProviderResults } from \"./SearchProviderResults\";\nimport { SearchBestMatch } from \"./SearchBestMatch\";\nimport { useSearch } from \"../../hooks/useSearch\";\nimport \"../../assets/css/menus.css\";\n\nexport const SearchResults: React.FunctionComponent = () => {\n\tconst { searchResults, searchQuery } = useSearch();\n\n\t// If we had a response from the search client\n\tif (searchResults?.length) {\n\t\treturn (\n\t\t\t// pull out best match into its own component.\n\t\t\t<div className=\"search-provider-results\">\n\t\t\t\t<SearchBestMatch />\n\t\t\t\t{searchResults.map((r, i) => (\n\t\t\t\t\t<SearchProviderResults key={i} providerResponse={r} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\t\t// If we had no response, but we have a valid searchQuery\n\t} else {\n\t\tconst message = searchQuery && searchQuery !== \"\" ? \"No results\" : \"Results will display here\";\n\n\t\treturn <div className=\"menu-item no-hover informational-state\">{message}</div>;\n\t}\n};\n"]}

package/react/components/search/SearchResults.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/search/SearchResults.spec.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { SomeResults, NoResults } from "./SearchResults.stories";
+import { accessibilityAssessor } from "../sdd/tests/a11y_helper";
+describe("<SearchResults/>", () => {
+    it.skip("should pass accessibility scans (with results)", async () => {
+        // <Icon> component needs to be updated to pass accessibility standards
+        const wrapper = mount(React.createElement(SomeResults, Object.assign({}, SomeResults.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+    it.skip("should pass accessibility scans (without results)", async () => {
+        const wrapper = mount(React.createElement(NoResults, Object.assign({}, NoResults.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+    it("displays titles and items correctly", () => {
+        const wrapper = mount(React.createElement(SomeResults, Object.assign({}, SomeResults.args)));
+        const container = wrapper.find(".search-provider-results");
+        // Confirm that "Take a Tour" is the "Best match"
+        expect(container.find("div .search-title").at(0).text(), "First field is Best Match").to.equal("Best Match");
+        expect(container.find("div[role='menuitem']").at(0).find("span").text()).to.equal("Take a Tour");
+        // TODO
+        // Confirm the contents of "Installed Workspaces" section
+        // Confirm the contents of "Installed Components" section
+        // Confirm that "Take a Tour" does not contain highlights
+    });
+    it("Confirm nothing appears for No Results", () => {
+        // <Icon> component needs to be updated to pass accessibility standards
+        const wrapper = mount(React.createElement(NoResults, Object.assign({}, NoResults.args)));
+        expect(wrapper.find("[role='menu'] div").length).to.equal(1);
+        expect(wrapper.find(".menu-item").text()).to.equal("No results");
+    });
+});
+//# sourceMappingURL=SearchResults.spec.js.map

package/react/components/search/SearchResults.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.spec.js","sourceRoot":"","sources":["../../../src/components/search/SearchResults.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,IAAI,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QACpE,uEAAuE;QACvE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,WAAW,oBAAK,WAAW,CAAC,IAAI,EAAI,CAAC,CAAC;QAE7D,MAAM,CAAC,MAAM,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzD,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,IAAI,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACvE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAK,SAAS,CAAC,IAAI,EAAI,CAAC,CAAC;QAEzD,MAAM,CAAC,MAAM,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,WAAW,oBAAK,WAAW,CAAC,IAAI,EAAI,CAAC,CAAC;QAE7D,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAE3D,iDAAiD;QACjD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,2BAA2B,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC7G,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAEjG,OAAO;QACP,yDAAyD;QACzD,yDAAyD;QACzD,yDAAyD;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QACjD,uEAAuE;QACvE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,SAAS,oBAAK,SAAS,CAAC,IAAI,EAAI,CAAC,CAAC;QAEzD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC7D,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { SomeResults, NoResults } from \"./SearchResults.stories\";\nimport { accessibilityAssessor } from \"../sdd/tests/a11y_helper\";\n\ndescribe(\"<SearchResults/>\", () => {\n\tit.skip(\"should pass accessibility scans (with results)\", async () => {\n\t\t// <Icon> component needs to be updated to pass accessibility standards\n\t\tconst wrapper = mount(<SomeResults {...SomeResults.args} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\tit.skip(\"should pass accessibility scans (without results)\", async () => {\n\t\tconst wrapper = mount(<NoResults {...NoResults.args} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\n\tit(\"displays titles and items correctly\", () => {\n\t\tconst wrapper = mount(<SomeResults {...SomeResults.args} />);\n\n\t\tconst container = wrapper.find(\".search-provider-results\");\n\n\t\t// Confirm that \"Take a Tour\" is the \"Best match\"\n\t\texpect(container.find(\"div .search-title\").at(0).text(), \"First field is Best Match\").to.equal(\"Best Match\");\n\t\texpect(container.find(\"div[role='menuitem']\").at(0).find(\"span\").text()).to.equal(\"Take a Tour\");\n\n\t\t// TODO\n\t\t// Confirm the contents of \"Installed Workspaces\" section\n\t\t// Confirm the contents of \"Installed Components\" section\n\t\t// Confirm that \"Take a Tour\" does not contain highlights\n\t});\n\n\tit(\"Confirm nothing appears for No Results\", () => {\n\t\t// <Icon> component needs to be updated to pass accessibility standards\n\t\tconst wrapper = mount(<NoResults {...NoResults.args} />);\n\n\t\texpect(wrapper.find(\"[role='menu'] div\").length).to.equal(1);\n\t\texpect(wrapper.find(\".menu-item\").text()).to.equal(\"No results\");\n\t});\n});\n"]}

package/react/components/search/SearchResults.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/search.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<{}>;
+};
+export default _default;
+export declare const SomeResults: Story<any>;
+export declare const NoResults: Story<any>;
+export declare const MultiProviderResults: Story<any>;