test coverage preview

.github/workflows/tests.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Tests
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install --force
+    - run: npm run test:ci
+    - run: npm run build --if-present

components/CardContent.tsx

@@ -3,7 +3,7 @@ import { decode } from "html-entities";
 import { useRouter } from "next/router";
 import { useRef } from "react";
 import { ITrack } from "types/spotify";
-import { SITE_URL } from "utils/constants";
+import { getSiteUrl } from "utils/enviroment";
 
 export enum CardType {
   PLAYLIST = "playlist",
@@ -39,6 +39,7 @@ export const CardContent: React.FC<CardContentProps> = ({
     <article>
       <div
         ref={handlerRef}
+        data-testid="cardContent-button"
         aria-hidden="true"
         className="handler"
         onClick={() => {
@@ -58,7 +59,7 @@ export const CardContent: React.FC<CardContentProps> = ({
           loading="lazy"
           src={
             images[0]?.url ??
-            (images[1]?.url || `${SITE_URL}/defaultSongCover.jpeg`)
+            (images[1]?.url || `${getSiteUrl()}/defaultSongCover.jpeg`)
           }
           alt={title}
         />

components/CardTrack.tsx

@@ -148,6 +148,7 @@ export default function CardTrack({
         }
       }}
       role="button"
+      data-testid="cardTrack-container"
       tabIndex={isVisible ? 0 : -1}
       aria-hidden={isVisible ? "false" : "true"}
       onMouseEnter={() => {
@@ -266,7 +267,7 @@ export default function CardTrack({
               height="48"
             />
           ) : (
-            <div className="img">{track?.album?.images?.[0].url}</div>
+            <div className="img"></div>
           )
         ) : null}
         <div className="trackArtistsContainer">

components/Heading.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import type { HeadingProps } from "types/heading";
 import { getHeadingStyles } from "utils/getHeadingStyles";
+import css from "styled-jsx/css";
 
 export default function Heading({
   number,
@@ -31,9 +32,32 @@ export default function Heading({
     multiline,
   });
 
+  const defaultStyles = css.resolve`
+    ${element} {
+      display: -webkit-box;
+      font-family: Lato, sans-serif;
+      letter-spacing: -0.04em;
+      line-break: anywhere;
+      max-width: 100%;
+      overflow: hidden;
+      position: relative;
+      text-overflow: ellipsis;
+      text-transform: none;
+      white-space: unset;
+      z-index: 999999;
+      -webkit-box-orient: vertical;
+      width: 100%;
+    }
+  `;
+
   return (
     <>
-      {createElement(element, { className, ...props }, children)}
+      {createElement(
+        element,
+        { className: `${className} ${defaultStyles.className}`, ...props },
+        children
+      )}
+      {defaultStyles.styles}
       {styles}
     </>
   );

components/PlaylistText.tsx

@@ -128,7 +128,6 @@ export default function PlaylistText({
         .playlistName {
           display: flex;
           align-items: center;
-          margin-bottom: 10px;
           justify-content: space-between;
         }
         .volume,
@@ -166,6 +165,7 @@ export default function PlaylistText({
           width: 100%;
           text-decoration: none;
           text-align: left;
+          padding-bottom: 10px;
         }
       `}</style>
     </div>

components/Seo.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { ReactElement } from "react";
-import { SITE_URL } from "../utils/constants";
+import { getSiteUrl } from "../utils/enviroment";
 
 export default function Seo(): ReactElement {
   const router = useRouter();
@@ -10,7 +10,7 @@ export default function Seo(): ReactElement {
   const des = `Ya sea si tienes un bot que añade tracks y te ha estado añadiendo
  repetidos, Rindu elimina esos tracks que están de más y deja solo uno.`;
   const description = des.replace(/\n/g, "");
-  const cover = `${SITE_URL}/logo.png`;
+  const cover = `${getSiteUrl()}/logo.png`;
 
   return (
     <Head key={1}>
@@ -24,15 +24,19 @@ export default function Seo(): ReactElement {
       <link
         rel="icon"
         type="image/png"
-        href={`${SITE_URL}/favicon-32x32.png`}
+        href={`${getSiteUrl()}/favicon-32x32.png`}
       />
-      <link rel="apple-touch-icon" href={`${SITE_URL}/favicon-32x32.png`} />
+      <link rel="apple-touch-icon" href={`${getSiteUrl()}/favicon-32x32.png`} />
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta property="og:title" content={title} />
       <link
         rel="canonical"
-        href={router.asPath === "/" ? SITE_URL : `${SITE_URL}/${router.asPath}`}
+        href={
+          router.asPath === "/"
+            ? getSiteUrl()
+            : `${getSiteUrl()}/${router.asPath}`
+        }
       />
       <meta property="og:locale" content="es-MX" />
       <meta name="robots" content="index,follow" />

components/VirtualizedList.tsx

@@ -10,7 +10,7 @@ import {
   WindowScroller,
 } from "react-virtualized";
 import { ITrack } from "types/spotify";
-import { __isServer__ } from "utils/constants";
+import { isServer } from "utils/enviroment";
 import { getTracksFromLibrary } from "utils/getTracksFromLibrary";
 import { mapPlaylistItems } from "utils/mapPlaylistItems";
 import { checkTracksInLibrary } from "utils/spotifyCalls/checkTracksInLibrary";
@@ -84,7 +84,7 @@ export default function VirtualizedList({
     [accessToken, addTracksToPlaylists, isLibrary, pageDetails?.id]
   );
 
-  const scrollElement = !__isServer__
+  const scrollElement = !isServer()
     ? document?.getElementsByClassName("app")?.[0]
     : undefined;
   return (

components/__tests__/BigPill.spec.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import BigPill from "components/BigPill";
+
+describe("billPill", () => {
+  it("renders", () => {
+    expect.assertions(1);
+    render(<BigPill title="test" subTitle="subtitle" href="re" img="img" />);
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+
+  it("should no have img", async () => {
+    expect.assertions(1);
+    render(<BigPill title="test" subTitle="subtitle" href="re" />);
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  });
+});

components/__tests__/BrowseCategories.spec.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import BrowseCategories from "components/BrowseCategories";
+import { IUtilsMocks } from "types/mocks";
+
+const { paginObject } = jest.requireActual<IUtilsMocks>(
+  "utils/__tests__/__mocks__/mocks.ts"
+);
+
+describe("browseCategories", () => {
+  const categories = {
+    ...paginObject,
+    items: [
+      {
+        name: "category1",
+        id: "testId",
+        href: "testHref",
+        icons: [{ url: "" }],
+      },
+      {
+        name: "category2",
+        id: "testId2",
+        href: "testHref",
+        icons: [{ url: "" }],
+      },
+    ],
+  } as SpotifyApi.PagingObject<SpotifyApi.CategoryObject>;
+
+  it("renders", () => {
+    expect.assertions(2);
+    render(<BrowseCategories categories={categories} />);
+    const titleValue = screen.getByText("category1");
+    const titleValue2 = screen.getByText("category2");
+    expect(titleValue).toHaveTextContent("category1");
+    expect(titleValue2).toHaveTextContent("category2");
+  });
+});

components/__tests__/CardContent.spec.tsx

@@ -0,0 +1,140 @@
+import { CardContent, CardType } from "components/CardContent";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { useRouter } from "next/router";
+import useOnScreen from "hooks/useOnScreen";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+jest.mock("hooks/useOnScreen");
+
+describe("cardContent", () => {
+  it("renders", () => {
+    expect.assertions(1);
+    render(
+      <CardContent id="id" subTitle={"subtitle"} title="title" type="track" />
+    );
+    const titleValue = screen.getByText("title");
+    expect(titleValue).toHaveTextContent("title");
+  });
+
+  it("should click", () => {
+    expect.assertions(1);
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementationOnce(() => ({
+      asPath: "/",
+      push,
+    }));
+
+    render(
+      <CardContent id="id" subTitle={"subtitle"} title="title" type="track" />
+    );
+    const mytest = screen.getByTestId("cardContent-button");
+    fireEvent.click(mytest);
+
+    expect(push).toHaveBeenCalledWith("/track/id");
+  });
+
+  it("should keydown enter", () => {
+    expect.assertions(1);
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementationOnce(() => ({
+      asPath: "/",
+      push,
+    }));
+
+    render(
+      <CardContent id="id" subTitle={"subtitle"} title="title" type="track" />
+    );
+    const mytest = screen.getByTestId("cardContent-button");
+    fireEvent.keyDown(mytest, { key: "Enter" });
+
+    expect(push).toHaveBeenCalledWith("/track/id");
+  });
+
+  it("should keydown enter is visible", () => {
+    expect.assertions(2);
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementationOnce(() => ({
+      asPath: "/",
+      push,
+    }));
+    (useOnScreen as jest.Mock).mockImplementationOnce(() => true);
+
+    render(
+      <CardContent
+        id="id"
+        subTitle={"subtitle"}
+        title="title"
+        type="track"
+        images={[{ url: "url" }]}
+      />
+    );
+    const mytest = screen.getByTestId("cardContent-button");
+    const img = screen.getByRole("img");
+    fireEvent.keyDown(mytest, { key: "Enter" });
+    expect(img).toBeInTheDocument();
+    expect(push).toHaveBeenCalledWith("/track/id");
+  });
+
+  it("should keydown enter is visible without url", () => {
+    expect.assertions(2);
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementationOnce(() => ({
+      asPath: "/",
+      push,
+    }));
+    (useOnScreen as jest.Mock).mockImplementationOnce(() => true);
+
+    render(
+      <CardContent
+        id="id"
+        subTitle={"subtitle"}
+        title="title"
+        type="track"
+        images={[{}] as SpotifyApi.ImageObject[]}
+      />
+    );
+    const mytest = screen.getByTestId("cardContent-button");
+    const img = screen.getByRole("img");
+    fireEvent.keyDown(mytest, { key: "Enter" });
+    expect(img).toBeInTheDocument();
+    expect(push).toHaveBeenCalledWith("/track/id");
+  });
+
+  it("should take a component in subtitle", () => {
+    expect.assertions(1);
+    (useOnScreen as jest.Mock).mockImplementationOnce(() => true);
+
+    render(
+      <CardContent
+        id="id"
+        subTitle={<span data-testId="subcomponent">Heey</span>}
+        title="title"
+        type="track"
+        images={[{}] as SpotifyApi.ImageObject[]}
+      />
+    );
+    const mytest = screen.getByTestId("subcomponent");
+    expect(mytest).toBeInTheDocument();
+  });
+
+  it("should have border radius 50% if type artist", () => {
+    expect.assertions(1);
+
+    render(
+      <CardContent
+        id="id"
+        subTitle={<span data-testId="subcomponent">Heey</span>}
+        title="title"
+        type={CardType.ARTIST}
+        images={[{ url: "eer" }] as SpotifyApi.ImageObject[]}
+      />
+    );
+
+    const mytest = screen.getByRole("img");
+    expect(mytest).toHaveStyle({
+      borderRadius: "50%",
+    });
+  });
+});