Skip to content

Instantly share code, notes, and snippets.

@EileenJuergens

EileenJuergens/kpi-card-content.test.js

Last active March 1, 2021 10:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EileenJuergens/3c7973eb5acb09441c824d8c9344ca8f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EileenJuergens/3c7973eb5acb09441c824d8c9344ca8f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. EileenJuergens renamed this gist Mar 1, 2021. 1 changed file with 0 additions and 0 deletions.
    0 kpi-card.test.js → kpi-card-content.test.js
    View file
    File renamed without changes.
  2. EileenJuergens revised this gist Mar 1, 2021. 1 changed file with 3 additions and 32 deletions.
    35 changes: 3 additions & 32 deletions kpi-card.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,3 @@
    import React from "react";
    import { Context as ResponsiveContext } from "react-responsive";
    import { mount } from "enzyme";
    import KPICard from "./kpi-card.js";
    import Icon from "./icon.js";
    import IncomeSolid from "./icome-soild.svg";


    const optionsMobile = {
    wrappingComponent: ResponsiveContext.Provider,
    wrappingComponentProps: { value: { width: 550 } }
    };
    const optionsWeb = {
    wrappingComponent: ResponsiveContext.Provider,
    wrappingComponentProps: { value: { width: 1550 } }
    };

    let mountedComponentMobile;
    let mountedComponentWeb;

    const mountComponentMobile = (props = {}) => mount(<KPICard {...props} />, optionsMobile);
    const mountComponentWeb = (props = {}) => mount(<KPICard {...props} />, optionsWeb);

    const mockedProps = {
    title: "Income",
    value: "103.82k £",
    icon: IncomeSolid
    };

    describe("<KPICard />", () => {
    beforeEach(() => {
    mountedComponentMobile = mountComponentMobile(mockedProps);
    @@ -54,12 +25,12 @@ describe("<KPICard />", () => {
    expect(mountedComponentWeb.find(".kpi-card__web__title").text()).toBe("Income");
    });

    it("should display the correctly formatted value", () => {
    it("should display the correctly value", () => {
    expect(mountedComponentMobile.find(".kpi-card__mobile__value").text()).toBe("103.82k £");
    expect(mountedComponentWeb.find(".kpi-card__web__value").first().text()).toBe("103.82k £");
    expect(mountedComponentWeb.find(".kpi-card__web__value").text()).toBe("103.82k £");
    });

    it("should render icon in web view when prop is passed", () => {
    it("should render icon in web view", () => {
    expect(mountedComponentMobile.find(Icon).length).toEqual(0);
    expect(mountedComponentWeb.find(Icon).length).toEqual(1);
    });
  3. EileenJuergens revised this gist Feb 26, 2021. 1 changed file with 10 additions and 25 deletions.
    35 changes: 10 additions & 25 deletions kpi-card.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,9 @@
    import React from "react";
    import { Context as ResponsiveContext } from "react-responsive";
    import { mount } from "enzyme";
    import formatters from "strands-ui-2/formatters";
    import KPICard from "./kpi-card";
    import {
    Icon,
    Text,
    Amount,
    ProgressBarWrapper,
    ProgressBar
    } from "strands-ui-2/components";
    import {
    IncomeSolid
    } from "strands-ui-2/icons";
    import { COLORS } from "strands-ui-2/utils/constants";
    import KPICard from "./kpi-card.js";
    import Icon from "./icon.js";
    import IncomeSolid from "./icome-soild.svg";


    const optionsMobile = {
    @@ -32,14 +22,9 @@ const mountComponentMobile = (props = {}) => mount(<KPICard {...props} />, optio
    const mountComponentWeb = (props = {}) => mount(<KPICard {...props} />, optionsWeb);

    const mockedProps = {
    title: "Paid",
    value: formatters.amount.formatShortWithLetter(96070, true, "GBP"),
    icon: IncomeSolid,
    showPg: {
    pgBarColors: [COLORS.PRIMARY_LIGHT, COLORS.PRIMARY_MEDIUM],
    pgCurrent: 75,
    pgMax: 100
    }
    title: "Income",
    value: "103.82k £",
    icon: IncomeSolid
    };

    describe("<KPICard />", () => {
    @@ -65,13 +50,13 @@ describe("<KPICard />", () => {
    });

    it("should display the correct title", () => {
    expect(mountedComponentMobile.find(Text).text()).toBe("Paid");
    expect(mountedComponentWeb.find(Text).text()).toBe("Paid");
    expect(mountedComponentMobile.find(".kpi-card__mobile__title").text()).toBe("Income");
    expect(mountedComponentWeb.find(".kpi-card__web__title").text()).toBe("Income");
    });

    it("should display the correctly formatted value", () => {
    expect(mountedComponentMobile.find(Amount).text()).toBe("96,07k £");
    expect(mountedComponentWeb.find(Amount).first().text()).toBe("96,07k £");
    expect(mountedComponentMobile.find(".kpi-card__mobile__value").text()).toBe("103.82k £");
    expect(mountedComponentWeb.find(".kpi-card__web__value").first().text()).toBe("103.82k £");
    });

    it("should render icon in web view when prop is passed", () => {
  4. EileenJuergens created this gist Feb 26, 2021.
    81 changes: 81 additions & 0 deletions kpi-card.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    import React from "react";
    import { Context as ResponsiveContext } from "react-responsive";
    import { mount } from "enzyme";
    import formatters from "strands-ui-2/formatters";
    import KPICard from "./kpi-card";
    import {
    Icon,
    Text,
    Amount,
    ProgressBarWrapper,
    ProgressBar
    } from "strands-ui-2/components";
    import {
    IncomeSolid
    } from "strands-ui-2/icons";
    import { COLORS } from "strands-ui-2/utils/constants";


    const optionsMobile = {
    wrappingComponent: ResponsiveContext.Provider,
    wrappingComponentProps: { value: { width: 550 } }
    };
    const optionsWeb = {
    wrappingComponent: ResponsiveContext.Provider,
    wrappingComponentProps: { value: { width: 1550 } }
    };

    let mountedComponentMobile;
    let mountedComponentWeb;

    const mountComponentMobile = (props = {}) => mount(<KPICard {...props} />, optionsMobile);
    const mountComponentWeb = (props = {}) => mount(<KPICard {...props} />, optionsWeb);

    const mockedProps = {
    title: "Paid",
    value: formatters.amount.formatShortWithLetter(96070, true, "GBP"),
    icon: IncomeSolid,
    showPg: {
    pgBarColors: [COLORS.PRIMARY_LIGHT, COLORS.PRIMARY_MEDIUM],
    pgCurrent: 75,
    pgMax: 100
    }
    };

    describe("<KPICard />", () => {
    beforeEach(() => {
    mountedComponentMobile = mountComponentMobile(mockedProps);
    mountedComponentWeb = mountComponentWeb(mockedProps);
    });

    it("should be defined", () => {
    expect(mountedComponentMobile).toBeDefined();
    expect(mountedComponentMobile.type()).toEqual(KPICard);
    expect(mountedComponentWeb).toBeDefined();
    expect(mountedComponentWeb.type()).toEqual(KPICard);
    });

    it("should properly render accepted props", () => {
    Object.keys(mockedProps).forEach((propName) => (
    expect(mountedComponentMobile.prop(propName)).toEqual(mockedProps[propName])
    ));
    Object.keys(mockedProps).forEach((propName) => (
    expect(mountedComponentWeb.prop(propName)).toEqual(mockedProps[propName])
    ));
    });

    it("should display the correct title", () => {
    expect(mountedComponentMobile.find(Text).text()).toBe("Paid");
    expect(mountedComponentWeb.find(Text).text()).toBe("Paid");
    });

    it("should display the correctly formatted value", () => {
    expect(mountedComponentMobile.find(Amount).text()).toBe("96,07k £");
    expect(mountedComponentWeb.find(Amount).first().text()).toBe("96,07k £");
    });

    it("should render icon in web view when prop is passed", () => {
    expect(mountedComponentMobile.find(Icon).length).toEqual(0);
    expect(mountedComponentWeb.find(Icon).length).toEqual(1);
    });
    });