@salesforcedevs/dx-components 0.26.2 → 0.26.3-alpha.1

package/src/modules/dx/cardExpanded/__tests__/cardExpanded.test.ts

@@ -1,193 +0,0 @@
-import CardTitle from "dx/cardTitle";
-import CardExpanded from "dx/cardExpanded";
-import FormattedDateTime from "dx/formattedDateTime";
-import ImageAndLabel from "dx/imageAndLabel";
-import Topics from "dx/topics";
-import TypeBadge from "dx/typeBadge";
-import { createMediaMock } from "utils-internal/jest";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps, { podcastMock } from "./mockProps";
-
-const MOBILE_QUERY = "(max-width: 640px)";
-const TAG = "dx-card-expanded";
-const render = createRenderComponent(TAG, CardExpanded);
-
-describe(TAG, () => {
-    describe("render", () => {
-        it("renders blog content type", () => {
-            const component = render(mockProps);
-
-            const container: HTMLElement =
-                component.shadowRoot.querySelector(".card-container");
-            expect(container).not.toBeNull();
-            expect(container.classList).toHaveLength(1);
-
-            const typeBadge: TypeBadge =
-                component.shadowRoot.querySelector("dx-type-badge");
-            expect(typeBadge).not.toBeNull();
-            expect(typeBadge.color).toBe("teal");
-            expect(typeBadge.value).toBe("Blog");
-            expect(typeBadge.size).toBe("default");
-
-            const title: CardTitle =
-                component.shadowRoot.querySelector("dx-card-title");
-            expect(title).not.toBeNull();
-            expect(title.href).toBe(mockProps.href);
-            expect(title.target).toBe("_self");
-
-            const imageAndLabel: ImageAndLabel =
-                component.shadowRoot.querySelector("dx-image-and-label");
-            expect(imageAndLabel).not.toBeNull();
-            expect(imageAndLabel.href).toBe(mockProps.authorHref);
-            expect(imageAndLabel.imgSrc).toBe(mockProps.authorImgSrc);
-            expect(imageAndLabel.label).toBe(mockProps.authorLabel);
-
-            expect(
-                component.shadowRoot.querySelector(".card-dot-separator")
-            ).not.toBeNull();
-
-            const formatedDate: FormattedDateTime =
-                component.shadowRoot.querySelector("dx-formatted-date-time");
-            expect(formatedDate).not.toBeNull();
-            expect(formatedDate.value).toBe("February 20, 2021");
-
-            const body: HTMLSpanElement = component.shadowRoot.querySelector(
-                ".card-container > span"
-            );
-            expect(body).not.toBeNull();
-            expect(body.textContent).toBe(mockProps.body);
-
-            const topics: Topics =
-                component.shadowRoot.querySelector("dx-topics");
-            expect(topics).not.toBeNull();
-            expect(topics.topics).toEqual(mockProps.topics);
-
-            expect(window.matchMedia).toBeCalledTimes(1);
-            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("renders with no props", () => {
-            const component = render();
-
-            const container: HTMLElement =
-                component.shadowRoot.querySelector(".card-container");
-            expect(container).not.toBeNull();
-            expect(container.classList).toHaveLength(1);
-
-            const typeBadge: TypeBadge =
-                component.shadowRoot.querySelector("dx-type-badge");
-            expect(typeBadge).not.toBeNull();
-            expect(typeBadge.color).toBe("teal");
-            expect(typeBadge.value).toBe("Blog");
-            expect(typeBadge.size).toBe("default");
-
-            expect(
-                component.shadowRoot.querySelector("dx-card-title")
-            ).toBeNull();
-            expect(
-                component.shadowRoot.querySelector("dx-image-and-label")
-            ).toBeNull();
-            expect(
-                component.shadowRoot.querySelector(".card-dot-separator")
-            ).toBeNull();
-            expect(
-                component.shadowRoot.querySelector("dx-formatted-date-time")
-            ).toBeNull();
-            expect(
-                component.shadowRoot.querySelector("span:last-of-type")
-            ).toBeNull();
-            expect(component.shadowRoot.querySelector("dx-topics")).toBeNull();
-
-            expect(window.matchMedia).toBeCalledTimes(1);
-            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
-        });
-
-        it("renders Podcast content type", () => {
-            const component = render(podcastMock);
-
-            const container: HTMLElement =
-                component.shadowRoot.querySelector(".card-container");
-            expect(container).not.toBeNull();
-            expect(container.classList).toHaveLength(1);
-
-            const typeBadge: TypeBadge =
-                component.shadowRoot.querySelector("dx-type-badge");
-            expect(typeBadge).not.toBeNull();
-            expect(typeBadge.color).toBe("blue");
-            expect(typeBadge.value).toBe("Podcast");
-            expect(typeBadge.size).toBe("default");
-
-            const title: CardTitle =
-                component.shadowRoot.querySelector("dx-card-title");
-            expect(title).not.toBeNull();
-            expect(title.href).toBe(podcastMock.href);
-            expect(title.target).toBe("_self");
-
-            expect(
-                component.shadowRoot.querySelector("dx-image-and-label")
-            ).toBeNull();
-
-            const lengthSpan: HTMLSpanElement =
-                component.shadowRoot.querySelector(".card-extra-info > span");
-            expect(lengthSpan).not.toBeNull();
-            expect(lengthSpan.textContent).toBe(podcastMock.length);
-
-            expect(
-                component.shadowRoot.querySelector(".card-dot-separator")
-            ).not.toBeNull();
-
-            const formatedDate: FormattedDateTime =
-                component.shadowRoot.querySelector("dx-formatted-date-time");
-            expect(formatedDate).not.toBeNull();
-            expect(formatedDate.value).toBe("February 20, 2021");
-
-            const body: HTMLSpanElement = component.shadowRoot.querySelector(
-                ".card-container > span"
-            );
-            expect(body).not.toBeNull();
-            expect(body.textContent).toBe(podcastMock.body);
-
-            const topics: Topics =
-                component.shadowRoot.querySelector("dx-topics");
-            expect(topics).not.toBeNull();
-            expect(topics.topics).toEqual(podcastMock.topics);
-
-            expect(window.matchMedia).toBeCalledTimes(1);
-            expect(window.matchMedia).toBeCalledWith(MOBILE_QUERY);
-
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    describe("mobile render", () => {
-        beforeAll(() => {
-            window.matchMedia = createMediaMock(true);
-        });
-
-        it("renders blog content type as mobile", () => {
-            const component = render(mockProps);
-
-            const container: HTMLElement =
-                component.shadowRoot.querySelector(".card-container");
-            expect(container).not.toBeNull();
-            expect(container.classList).toHaveLength(2);
-            expect(container.classList).toContain("card-mobile");
-
-            const typeBadge: TypeBadge =
-                component.shadowRoot.querySelector("dx-type-badge");
-            expect(typeBadge).not.toBeNull();
-            expect(typeBadge.size).toBe("small");
-
-            const imageAndLabel: ImageAndLabel =
-                component.shadowRoot.querySelector("dx-image-and-label");
-            expect(imageAndLabel).not.toBeNull();
-            expect(imageAndLabel.href).toBe(mockProps.authorHref);
-            expect(imageAndLabel.imgSrc).toBe("");
-            expect(imageAndLabel.label).toBe(mockProps.authorLabel);
-
-            return expect(component).toBeAccessible();
-        });
-    });
-});

package/src/modules/dx/cardExpanded/__tests__/mockProps.ts

@@ -1,21 +0,0 @@
-export default {
-    authorHref: "/",
-    authorImgSrc: "https://placekitten.com/300/300",
-    authorLabel: "Author Name",
-    contentType: "Blog",
-    href: "/awesome-blog-post",
-    date: "02/20/2021",
-    title: "Lightning Web Components for your Inbox",
-    body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nulla inventore, quis enim dignissimos culpa assumenda non sed corporis similique praesentium ex quasi, cumque quia sequi rerum ab asperiores fugiat!",
-    topics: ["mobile", "performance"]
-};
-
-export const podcastMock = {
-    body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nulla inventore, quis enim dignissimos culpa assumenda non sed corporis similique praesentium ex quasi, cumque quia sequi rerum ab asperiores fugiat!",
-    contentType: "Podcast",
-    date: "02/20/2021",
-    href: "/awesome-blog-post",
-    length: "40 min",
-    title: "Lightning Web Components for your Inbox",
-    topics: ["mobile", "performance"]
-};

package/src/modules/dx/cardExpanded/cardExpanded.stories.ts

@@ -1,59 +0,0 @@
-import { html } from "lit-html";
-import mockProps, { podcastMock } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-card-expanded",
-    component: "dx-card-expanded",
-    argTypes: {
-        contentType: {
-            control: {
-                options: ["Blog", "Podcast"],
-                type: "select"
-            }
-        }
-    }
-};
-
-const style = html`
-    <style>
-        dx-card-expanded {
-            width: clamp(400px, 80%, 800px);
-        }
-    </style>
-`;
-
-type CardExpandedProps = {
-    authorHref?: string;
-    authorImgSrc?: string;
-    authorLabel?: string;
-    body: string;
-    contentType: "Blog" | "Podcast";
-    date: string;
-    href: string;
-    title: string;
-    length?: string;
-    topics: Array<string>;
-};
-
-const Template = (args: CardExpandedProps) => html`
-    ${style}
-    <dx-card-expanded
-        author-href="${args.authorHref || ""}"
-        author-img-src="${args.authorImgSrc || ""}"
-        author-label="${args.authorLabel || ""}"
-        body="${args.body}"
-        content-type=${args.contentType || "Blog"}
-        date="${args.date}"
-        href="${args.href}"
-        length="${args.length || ""}"
-        title="${args.title}"
-        topics=${JSON.stringify(args.topics)}
-    ></dx-card>-expanded
-`;
-
-export const BlogPost = (args: CardExpandedProps) => Template(args);
-
-BlogPost.args = mockProps;
-
-export const PodcastPost = (args: CardExpandedProps) => Template(args);
-PodcastPost.args = podcastMock;