@watermarkinsights/ripple 5.11.0-1 → 5.11.0-11

package/dist/collection/components/wm-file/wm-file.js

@@ -146,15 +146,15 @@ export class File {
         return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "details uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", { class: "details" }, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", { class: "details" }, this.size)));
     }
     renderActionMenu() {
-        const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile() }, this.previewActionMessage));
-        const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile() }, this.downloadActionMessage));
-        const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile() }, this.deleteActionMessage));
+        const previewItem = (h("wm-menuitem", { icon: "#show", onClick: () => this.previewFile() }, this.previewActionMessage));
+        const downloadItem = (h("wm-menuitem", { icon: "#download", onClick: () => this.downloadFile() }, this.downloadActionMessage));
+        const deleteItem = (h("wm-menuitem", { icon: "#delete", onClick: () => this.deleteFile() }, this.deleteActionMessage));
         return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${this.name} ${this.actionMenuLabel}` }, this.fileActions.includes("preview") && previewItem, this.fileActions.includes("download") && downloadItem, this.fileActions.includes("delete") && deleteItem));
     }
     renderFileActionButtons() {
-        const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${this.name}`, icon: "f208", onClick: () => this.previewFile() }));
-        const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${this.name}`, icon: "f1da", onClick: () => this.downloadFile() }));
-        const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${this.name}`, icon: "f1c0", onClick: () => this.deleteFile() }));
+        const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${this.name}`, icon: "#show", onClick: () => this.previewFile() }));
+        const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${this.name}`, icon: "#download", onClick: () => this.downloadFile() }));
+        const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${this.name}`, icon: "#delete", onClick: () => this.deleteFile() }));
         return (h("div", { class: "file-controls" }, this.fileActions.includes("preview") && previewButton, this.fileActions.includes("download") && downloadButton, this.fileActions.includes("delete") && deleteButton));
     }
     renderFileInProgress() {
@@ -168,10 +168,10 @@ export class File {
         return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
     }
     renderFile() {
-        return (h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
+        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText)), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '4cfe7b5dc435556cdbd89ecf10c635cad42a55ba', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file/wm-file.spec.js

@@ -0,0 +1,194 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { File } from "./wm-file";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-file", () => {
+    let html, page;
+    async function createPageHelper() {
+        return await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      >
+      </wm-file>`,
+        });
+    }
+    it("renders green check alongside recently uploaded files", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions="download preview delete"
+    progress="100"
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const fileWrapperEl = page.root.shadowRoot.querySelector(".file-wrapper");
+        expect(fileWrapperEl).toHaveClass("checked");
+    });
+    it("renders file actions in the proper order", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions="download delete preview"
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const fileActionEls = page.root.shadowRoot.querySelectorAll("wm-button");
+        expect(fileActionEls[0]).toEqualAttribute("tooltip", "Preview");
+        expect(fileActionEls[1]).toEqualAttribute("tooltip", "Download");
+        expect(fileActionEls[2]).toEqualAttribute("tooltip", "Delete");
+    });
+    it("defaults available actions to download and delete", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
+        const downloadButton = page.root.shadowRoot.querySelector(".download-button");
+        const previewButton = page.root.shadowRoot.querySelector(".preview-button");
+        expect(deleteButton).toBeTruthy();
+        expect(downloadButton).toBeTruthy();
+        expect(previewButton).toBeFalsy();
+    });
+    it("displays no file actions when an empty string is passed", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions=""
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
+        const downloadButton = page.root.shadowRoot.querySelector(".download-button");
+        const previewButton = page.root.shadowRoot.querySelector(".preview-button");
+        expect(deleteButton).toBeFalsy();
+        expect(downloadButton).toBeFalsy();
+        expect(previewButton).toBeFalsy();
+    });
+    it("renders timestamp by default, size if specified, or none based on show-info prop", async () => {
+        page = await createPageHelper();
+        await page.waitForChanges();
+        let fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
+        page = await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      show-info="size"
+      >
+      </wm-file>`,
+        });
+        await page.waitForChanges();
+        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl.textContent).toBe("22 KB");
+        page = await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      show-info="time"
+      >
+      </wm-file>`,
+        });
+        await page.waitForChanges();
+        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
+        page = await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      show-info="none"
+      >
+      </wm-file>`,
+        });
+        await page.waitForChanges();
+        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl).toBeFalsy();
+    });
+    it("emits the appropriate events when user clicks the buttons", async () => {
+        const filePreviewedSpy = jest.fn();
+        const fileDownloadedSpy = jest.fn();
+        const fileDeletedSpy = jest.fn();
+        html = `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      >
+      </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        page.root.addEventListener("wmFilePreview", filePreviewedSpy);
+        page.root.addEventListener("wmFileDownload", fileDownloadedSpy);
+        page.root.addEventListener("wmFileDelete", fileDeletedSpy);
+        // wmFilePreview
+        page.root.shadowRoot.querySelector(".preview-button").click();
+        await page.waitForChanges();
+        expect(filePreviewedSpy.mock.calls[0][0].target.id).toBe("file1");
+        // wmFileDownload
+        page.root.shadowRoot.querySelector(".download-button").click();
+        await page.waitForChanges();
+        expect(fileDownloadedSpy.mock.calls[0][0].target.id).toBe("file1");
+        // wmFileDelete
+        page.root.shadowRoot.querySelector(".delete-button").click();
+        await page.waitForChanges();
+        expect(fileDeletedSpy.mock.calls[0][0].target.id).toBe("file1");
+        jest.restoreAllMocks();
+    });
+    it("renders with an error if one is passed", async () => {
+        html = `<wm-file
+      id="file1"
+      error-message="Example error message"
+      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "fileActions": "download preview delete"}'
+      ></wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const fileDiv = page.root.shadowRoot.querySelector(".file");
+        expect(fileDiv).toHaveClass("--error");
+        const errorText = page.root.shadowRoot.querySelector(".error-message");
+        expect(errorText.textContent).toBe("Example error message");
+    });
+});