test: added test & refactored files

tests/fetchRepo.test.js

@@ -0,0 +1,83 @@
+require("@testing-library/jest-dom");
+const axios = require("axios");
+const MockAdapter = require("axios-mock-adapter");
+const fetchRepo = require("../src/fetchRepo");
+
+const data_repo = {
+  repository: {
+    name: "convoychat",
+    stargazers: { totalCount: 38000 },
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    forkCount: 100,
+  },
+};
+
+const data_user = {
+  data: {
+    user: { repository: data_repo },
+    organization: null,
+  },
+};
+const data_org = {
+  data: {
+    user: null,
+    organization: { repository: data_repo },
+  },
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchRepo", () => {
+  it("should fetch correct user repo", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_user);
+
+    let repo = await fetchRepo("anuraghazra", "convoychat");
+    expect(repo).toStrictEqual(data_repo);
+  });
+
+  it("should fetch correct org repo", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data_org);
+
+    let repo = await fetchRepo("anuraghazra", "convoychat");
+    expect(repo).toStrictEqual(data_repo);
+  });
+
+  it("should throw error if user is found but repo is null", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: { repository: null }, organization: null } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "User Repository Not found"
+    );
+  });
+
+  it("should throw error if org is found but repo is null", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: { repository: null } } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "Organization Repository Not found"
+    );
+  });
+
+  it("should throw error if both user & org data not found", async () => {
+    mock
+      .onPost("https://api.github.com/graphql")
+      .reply(200, { data: { user: null, organization: null } });
+
+    await expect(fetchRepo("anuraghazra", "convoychat")).rejects.toThrow(
+      "Not found"
+    );
+  });
+});

tests/fetchStats.test.js

@@ -0,0 +1,66 @@
+require("@testing-library/jest-dom");
+const axios = require("axios");
+const MockAdapter = require("axios-mock-adapter");
+const fetchStats = require("../src/fetchStats");
+
+const data = {
+  data: {
+    user: {
+      name: "Anurag Hazra",
+      repositoriesContributedTo: { totalCount: 61 },
+      contributionsCollection: { totalCommitContributions: 100 },
+      pullRequests: { totalCount: 300 },
+      issues: { totalCount: 200 },
+      repositories: {
+        nodes: [
+          { stargazers: { totalCount: 100 } },
+          { stargazers: { totalCount: 100 } },
+          { stargazers: { totalCount: 100 } },
+          { stargazers: { totalCount: 50 } },
+          { stargazers: { totalCount: 50 } },
+        ],
+      },
+    },
+  },
+};
+
+const error = {
+  errors: [
+    {
+      type: "NOT_FOUND",
+      path: ["user"],
+      locations: [],
+      message: "Could not resolve to a User with the login of 'noname'.",
+    },
+  ],
+};
+
+const mock = new MockAdapter(axios);
+
+afterEach(() => {
+  mock.reset();
+});
+
+describe("Test fetchStats", () => {
+  it("should fetch correct stats", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+    let stats = await fetchStats("anuraghazra");
+    expect(stats).toStrictEqual({
+      contributedTo: 61,
+      name: "Anurag Hazra",
+      totalCommits: 100,
+      totalIssues: 200,
+      totalPRs: 300,
+      totalStars: 400,
+    });
+  });
+
+  it("should throw error", async () => {
+    mock.onPost("https://api.github.com/graphql").reply(200, error);
+
+    await expect(fetchStats("anuraghazra")).rejects.toThrow(
+      "Could not fetch user"
+    );
+  });
+});

tests/renderRepoCard.test.js

@@ -0,0 +1,91 @@
+require("@testing-library/jest-dom");
+const renderRepoCard = require("../src/renderRepoCard");
+
+const { queryByTestId } = require("@testing-library/dom");
+
+const data_repo = {
+  repository: {
+    name: "convoychat",
+    stargazers: { totalCount: 38000 },
+    description: "Help us take over the world! React + TS + GraphQL Chat App",
+    primaryLanguage: {
+      color: "#2b7489",
+      id: "MDg6TGFuZ3VhZ2UyODc=",
+      name: "TypeScript",
+    },
+    forkCount: 100,
+  },
+};
+
+describe("Test renderRepoCard", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository);
+
+    expect(document.getElementsByClassName("header")[0]).toHaveTextContent(
+      "convoychat"
+    );
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Help us take over the world! React + TS + GraphQL Chat .."
+    );
+    expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
+    expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
+    expect(queryByTestId(document.body, "lang")).toHaveTextContent(
+      "TypeScript"
+    );
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#2b7489"
+    );
+  });
+
+  it("should trim description", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description:
+        "Very long long long long long long long long text it should trim it",
+    });
+
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Very long long long long long long long long text it sh.."
+    );
+
+    // Should not trim
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: "Small text should not trim",
+    });
+
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small text should not trim"
+    );
+  });
+
+  it("should shift the text position depending on language length", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: {
+        ...data_repo.repository.primaryLanguage,
+        name: "Jupyter Notebook",
+      },
+    });
+
+    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+      "transform",
+      "translate(155, 100)"
+    );
+
+    // Small lang
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      primaryLanguage: {
+        ...data_repo.repository.primaryLanguage,
+        name: "Ruby",
+      },
+    });
+
+    expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
+      "transform",
+      "translate(125, 100)"
+    );
+  });
+});

tests/renderStatsCard.test.js

@@ -0,0 +1,54 @@
+require("@testing-library/jest-dom");
+const renderStatsCard = require("../src/renderStatsCard");
+
+const { getByTestId, queryByTestId } = require("@testing-library/dom");
+
+describe("Test renderStatsCard", () => {
+  const stats = {
+    name: "Anurag Hazra",
+    totalStars: 100,
+    totalCommits: 200,
+    totalIssues: 300,
+    totalPRs: 400,
+    contributedTo: 500,
+  };
+
+  it("should render correctly", () => {
+    document.body.innerHTML = renderStatsCard(stats);
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Anurag Hazra's GitHub Stats"
+    );
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height")
+    ).toBe("195");
+    expect(getByTestId(document.body, "stars").textContent).toBe("100");
+    expect(getByTestId(document.body, "commits").textContent).toBe("200");
+    expect(getByTestId(document.body, "issues").textContent).toBe("300");
+    expect(getByTestId(document.body, "prs").textContent).toBe("400");
+    expect(getByTestId(document.body, "contribs").textContent).toBe("500");
+    expect(queryByTestId(document.body, "card-border")).toBeInTheDocument();
+  });
+
+  it("should hide individual stats", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide: "['issues', 'prs', 'contribs']",
+    });
+
+    expect(
+      document.body.getElementsByTagName("svg")[0].getAttribute("height")
+    ).toBe("120");
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(queryByTestId(document.body, "commits")).toBeDefined();
+    expect(queryByTestId(document.body, "issues")).toBeNull();
+    expect(queryByTestId(document.body, "prs")).toBeNull();
+    expect(queryByTestId(document.body, "contribs")).toBeNull();
+  });
+
+  it("should hide_border", () => {
+    document.body.innerHTML = renderStatsCard(stats, { hide_border: true });
+
+    expect(queryByTestId(document.body, "card-border")).not.toBeInTheDocument();
+  });
+});

tests/utils.test.js

@@ -0,0 +1,26 @@
+const { kFormatter, encodeHTML, renderError } = require("../src/utils");
+
+describe("Test utils.js", () => {
+  it("should test kFormatter", () => {
+    expect(kFormatter(1)).toBe(1);
+    expect(kFormatter(-1)).toBe(-1);
+    expect(kFormatter(500)).toBe(500);
+    expect(kFormatter(1000)).toBe("1k");
+    expect(kFormatter(10000)).toBe("10k");
+    expect(kFormatter(12345)).toBe("12.3k");
+    expect(kFormatter(9900000)).toBe("9900k");
+  });
+
+  it("should test encodeHTML", () => {
+    expect(encodeHTML(`<html>hello world<,.#4^&^@%!))`)).toBe(
+      "&#60;html&#62;hello world&#60;,.#4^&#38;^@%!))"
+    );
+  });
+
+  it("should test renderError", () => {
+    document.body.innerHTML = renderError("Something went wrong");
+    expect(document.getElementById("message").textContent).toBe(
+      "Something went wrong"
+    );
+  });
+});