add ChartView and subcomponent unit tests (#380)

dashboard/src/components/ChartView/ChartDeployButton.test.tsx

@@ -0,0 +1,44 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+import { Redirect } from "react-router";
+
+import { IChartVersion } from "../../shared/types";
+import ChartDeployButton from "./ChartDeployButton";
+
+const testChartVersion: IChartVersion = {
+  attributes: {
+    version: "1.2.3",
+  },
+  relationships: {
+    chart: {
+      data: {
+        name: "test",
+        repo: {
+          name: "testrepo",
+        },
+      },
+    },
+  },
+} as IChartVersion;
+
+it("renders a button to deploy the chart version", () => {
+  const wrapper = shallow(<ChartDeployButton version={testChartVersion} namespace="test" />);
+  const button = wrapper.find("button");
+  expect(button.exists()).toBe(true);
+  expect(button.text()).toBe("Deploy using Helm");
+});
+
+it("renders a redirect when the button is clicked", () => {
+  const wrapper = shallow(<ChartDeployButton version={testChartVersion} namespace="test" />);
+  const button = wrapper.find("button");
+  expect(button.exists()).toBe(true);
+  expect(wrapper.find(Redirect).exists()).toBe(false);
+
+  button.simulate("click");
+  const redirect = wrapper.find(Redirect);
+  expect(redirect.exists()).toBe(true);
+  expect(redirect.props()).toMatchObject({
+    push: true,
+    to: `/apps/ns/test/new/testrepo/test/versions/1.2.3`,
+  });
+});

dashboard/src/components/ChartView/ChartHeader.test.tsx

@@ -0,0 +1,35 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import ChartIcon from "../ChartIcon";
+import ChartHeader from "./ChartHeader";
+
+const testProps: any = {
+  description: "A Test Chart",
+  id: "testrepo/test",
+  repo: "testrepo",
+};
+
+it("renders a header for the chart", () => {
+  const wrapper = shallow(<ChartHeader {...testProps} />);
+  expect(wrapper.text()).toContain("testrepo/test");
+  expect(wrapper.text()).toContain("A Test Chart");
+  const repoLink = wrapper.find(Link);
+  expect(repoLink.exists()).toBe(true);
+  expect(repoLink.props()).toMatchObject({ to: `/charts/testrepo`, children: "testrepo" });
+  expect(wrapper.find(ChartIcon).exists()).toBe(true);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("displays the appVersion", () => {
+  const wrapper = shallow(<ChartHeader {...testProps} appVersion="1.2.3" />);
+  expect(wrapper.text()).toContain("1.2.3");
+});
+
+it("uses the icon", () => {
+  const wrapper = shallow(<ChartHeader {...testProps} icon="test.jpg" />);
+  const icon = wrapper.find(ChartIcon);
+  expect(icon.exists()).toBe(true);
+  expect(icon.props()).toMatchObject({ icon: "test.jpg" });
+});

dashboard/src/components/ChartView/ChartMaintainers.test.tsx

@@ -0,0 +1,47 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+
+import { IChartAttributes } from "../../shared/types";
+import ChartMaintainers from "./ChartMaintainers";
+
+const tests: Array<{
+  expectedLinks: Array<string | null>;
+  githubIDAsNames?: boolean;
+  maintainers: IChartAttributes["maintainers"];
+  name: string;
+}> = [
+  {
+    expectedLinks: [null],
+    maintainers: [{ name: "Test Author" }],
+    name: "with no email",
+  },
+  {
+    expectedLinks: [null, "mailto:test@example.com"],
+    maintainers: [{ name: "Test Author" }, { name: "Test Author 2", email: "test@example.com" }],
+    name: "with email",
+  },
+  {
+    expectedLinks: ["https://github.com/test1", "https://github.com/test2"],
+    githubIDAsNames: true,
+    maintainers: [{ name: "test1" }, { name: "test2", email: "test@example.com" }],
+    name: "with github ids",
+  },
+];
+
+for (const t of tests) {
+  it(`it renders the maintainers list ${t.name}`, () => {
+    const wrapper = shallow(
+      <ChartMaintainers maintainers={t.maintainers} githubIDAsNames={t.githubIDAsNames} />,
+    );
+    const list = wrapper.find("li");
+    expect(list).toHaveLength(t.maintainers.length);
+    list.forEach((li, i) => {
+      if (t.expectedLinks[i]) {
+        expect(li.find("a").props()).toMatchObject({ href: t.expectedLinks[i] });
+      } else {
+        expect(li.props().children).toBe(t.maintainers[i].name);
+      }
+      expect(li.text()).toBe(t.maintainers[i].name);
+    });
+  });
+}

dashboard/src/components/ChartView/ChartReadme.test.tsx

@@ -0,0 +1,52 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+import * as ReactMarkdown from "react-markdown";
+
+import ChartReadme from "./ChartReadme";
+
+it("renders a loading message if the readme is not present", () => {
+  const wrapper = shallow(
+    <ChartReadme getChartReadme={jest.fn()} hasError={false} version="1.2.3" />,
+  );
+  expect(wrapper.text()).toBe("Loading");
+});
+
+describe("getChartReadme", () => {
+  const spy = jest.fn();
+  const wrapper = shallow(<ChartReadme getChartReadme={spy} hasError={false} version="1.2.3" />);
+
+  it("gets triggered when mounting", () => {
+    expect(spy).toHaveBeenCalledWith("1.2.3");
+  });
+
+  it("gets triggered after changing version", () => {
+    wrapper.setProps({ version: "1.2.4" });
+    expect(spy).toHaveBeenCalledWith("1.2.4");
+  });
+
+  it("does not get triggered when version doesn't change", () => {
+    wrapper.setProps({ version: "1.2.4" });
+    wrapper.setProps({ hasError: true });
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});
+
+it("renders the ReactMarkdown content is readme is present", () => {
+  const wrapper = shallow(
+    <ChartReadme
+      getChartReadme={jest.fn()}
+      hasError={false}
+      version="1.2.3"
+      readme="# Markdown Readme"
+    />,
+  );
+  const component = wrapper.find(ReactMarkdown);
+  expect(component.props()).toMatchObject({ source: "# Markdown Readme" });
+});
+
+it("renders an error when hasError is set", () => {
+  const wrapper = shallow(
+    <ChartReadme getChartReadme={jest.fn()} hasError={true} version="1.2.3" />,
+  );
+  expect(wrapper.text()).toContain("No README found");
+});

dashboard/src/components/ChartView/ChartVersionsList.test.tsx

@@ -0,0 +1,117 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+
+import { Link } from "react-router-dom";
+import { IChartVersion } from "../../shared/types";
+import ChartVersionsList from "./ChartVersionsList";
+
+const testChart: IChartVersion["relationships"]["chart"] = {
+  data: {
+    name: "test",
+    repo: {
+      name: "testrepo",
+    },
+  },
+} as IChartVersion["relationships"]["chart"];
+
+const testVersions: IChartVersion[] = [
+  {
+    attributes: {
+      created: "2016-10-19T00:03:14.037Z",
+      version: "1.2.3",
+    },
+    id: "1",
+    relationships: { chart: testChart },
+  },
+  {
+    attributes: {
+      created: "2016-10-19T00:03:14.037Z",
+      version: "1.2.2",
+    },
+    id: "2",
+    relationships: { chart: testChart },
+  },
+  {
+    attributes: {
+      created: "2016-10-19T00:03:14.037Z",
+      version: "1.2.1",
+    },
+    id: "3",
+    relationships: { chart: testChart },
+  },
+  {
+    attributes: {
+      created: "2016-10-19T00:03:14.037Z",
+      version: "1.2.0",
+    },
+    id: "4",
+    relationships: { chart: testChart },
+  },
+] as IChartVersion[];
+
+const extendedVersions: IChartVersion[] = [
+  ...testVersions,
+  {
+    attributes: { created: "2016-10-19T00:03:14.037Z", version: "1.1.9" },
+    id: "5",
+    relationships: { chart: testChart },
+  },
+  {
+    attributes: { created: "2016-10-19T00:03:14.037Z", version: "1.1.8" },
+    id: "6",
+    relationships: { chart: testChart },
+  },
+  {
+    attributes: { created: "2016-10-19T00:03:14.037Z", version: "1.1.7" },
+    id: "7",
+    relationships: { chart: testChart },
+  },
+] as IChartVersion[];
+
+it("renders the list of versions", () => {
+  const wrapper = shallow(<ChartVersionsList versions={testVersions} selected={testVersions[1]} />);
+  const items = wrapper.find("li");
+  expect(items).toHaveLength(4);
+  expect(
+    items
+      .at(1)
+      .find(Link)
+      .props().className,
+  ).toBe("type-bold type-color-action");
+});
+
+it("does not render a the Show All link when there are 5 or less versions", () => {
+  const wrapper = shallow(<ChartVersionsList versions={testVersions} selected={testVersions[1]} />);
+  expect(wrapper.find("a").exists()).toBe(false);
+  wrapper.setProps({
+    versions: [
+      {
+        attributes: { created: "2016-10-19T00:03:14.037Z", version: "1.2.4" },
+        id: "0",
+        relationships: { chart: testChart },
+      },
+      ...testVersions,
+    ],
+  });
+  expect(wrapper.find("a").exists()).toBe(false);
+});
+
+it("renders a the Show All link when there are more than 5 versions", () => {
+  const wrapper = shallow(
+    <ChartVersionsList versions={extendedVersions} selected={extendedVersions[1]} />,
+  );
+  const showAllLink = wrapper.find("a");
+  expect(showAllLink.exists()).toBe(true);
+  expect(showAllLink.text()).toBe("Show all...");
+  const items = wrapper.find("li");
+  expect(items).toHaveLength(5);
+});
+
+it("shows all the versions when the Show All link is clicked", () => {
+  const wrapper = shallow(
+    <ChartVersionsList versions={extendedVersions} selected={extendedVersions[1]} />,
+  );
+  expect(wrapper.find("li")).toHaveLength(5);
+  wrapper.find("a").simulate("click");
+  expect(wrapper.find("li")).toHaveLength(7);
+});