Add web tests

pkg/app/web/.scaffdog/module.md

@@ -29,7 +29,7 @@ export const {{ input | camel }}Slice = createSlice({
 import { {{ input | camel }}Slice } from "./{{ input }}";
 
 describe("{{ input | camel }}Slice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       {{ input | camel }}Slice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/__fixtures__/dummy-application.ts

@@ -1,10 +1,22 @@
 import { ApplicationKind } from "pipe/pkg/app/web/model/common_pb";
-import { ApplicationSyncStatus } from "../modules/applications";
+import {
+  Application,
+  ApplicationSyncStatus,
+  ApplicationSyncState,
+} from "../modules/applications";
 import { dummyEnv } from "./dummy-environment";
 import { dummyPiped } from "./dummy-piped";
 import { dummyRepo } from "./dummy-repo";
 
-export const dummyApplication = {
+export const dummyApplicationSyncState: ApplicationSyncState = {
+  headDeploymentId: "deployment-1",
+  reason: "",
+  shortReason: "",
+  status: ApplicationSyncStatus.SYNCED,
+  timestamp: 0,
+};
+
+export const dummyApplication: Application = {
   id: "application-1",
   cloudProvider: "kubernetes-default",
   createdAt: 0,
@@ -35,12 +47,7 @@ export const dummyApplication = {
     startedAt: 0,
     version: "v1",
   },
-  syncState: {
-    headDeploymentId: "deployment-1",
-    reason: "",
-    shortReason: "",
-    status: ApplicationSyncStatus.SYNCED,
-    timestamp: 0,
-  },
+  syncState: dummyApplicationSyncState,
   updatedAt: 0,
+  deleted: false,
 };

pkg/app/web/src/components/diff-view.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { render, screen } from "../../test-utils";
+import { DiffView } from "./diff-view";
+
+it("should render normal text", () => {
+  render(<DiffView content="normal text" />, {});
+
+  expect(screen.queryByTestId("added-line")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("deleted-line")).not.toBeInTheDocument();
+});
+
+it("should render line as added line if the line start with'+'", () => {
+  render(<DiffView content="+ added-line" />, {});
+
+  expect(screen.getByTestId("added-line")).toBeInTheDocument();
+  expect(screen.queryByTestId("deleted-line")).not.toBeInTheDocument();
+});
+
+it("should render line as deleted line if the line start with '-'", () => {
+  render(<DiffView content="- deleted line" />, {});
+
+  expect(screen.queryByTestId("added-line")).not.toBeInTheDocument();
+  expect(screen.getByTestId("deleted-line")).toBeInTheDocument();
+});

pkg/app/web/src/components/diff-view.tsx

@@ -1,5 +1,7 @@
-import React, { FC } from "react";
+import React, { FC, memo } from "react";
 import { makeStyles } from "@material-ui/core";
+import red from "@material-ui/core/colors/red";
+import green from "@material-ui/core/colors/green";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -8,12 +10,12 @@ const useStyles = makeStyles((theme) => ({
     whiteSpace: "pre-wrap",
   },
   add: {
-    color: "#22863a",
-    backgroundColor: "#f0fff4",
+    color: green[800],
+    backgroundColor: green[50],
   },
   del: {
-    color: "#b31d28",
-    backgroundColor: "#ffeef0",
+    color: red[800],
+    backgroundColor: red[50],
   },
   line: {
     minHeight: `${theme.typography.body2.lineHeight}em`,
@@ -24,23 +26,23 @@ interface Props {
   content: string;
 }
 
-export const DiffView: FC<Props> = ({ content }) => {
+export const DiffView: FC<Props> = memo(function DiffView({ content }) {
   const classes = useStyles();
   return (
     <div className={classes.root}>
       {content.split("\n").map((line, i) => {
         switch (line[0]) {
           case "+":
             return (
-              <div key={i} className={classes.line}>
+              <div key={i} className={classes.line} data-testid="added-line">
                 <span key={i} className={classes.add}>
                   {line}
                 </span>
               </div>
             );
           case "-":
             return (
-              <div key={i} className={classes.line}>
+              <div key={i} className={classes.line} data-testid="deleted-line">
                 <span className={classes.del}>{line}</span>
               </div>
             );
@@ -54,4 +56,4 @@ export const DiffView: FC<Props> = ({ content }) => {
       })}
     </div>
   );
-};
+});

pkg/app/web/src/modules/active-stage.test.ts

@@ -5,7 +5,7 @@ import {
 } from "./active-stage";
 
 describe("activeStageSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       activeStageSlice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/modules/api-keys.test.ts

@@ -19,7 +19,7 @@ const baseState = {
 };
 
 describe("apiKeysSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       apiKeysSlice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/modules/application-filter-options.test.ts

@@ -6,7 +6,7 @@ import {
 } from "./application-filter-options";
 
 describe("applicationFilterOptionsSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       applicationFilterOptionsSlice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/modules/applications-live-state.test.ts

@@ -1,17 +1,70 @@
-import { applicationLiveStateSlice } from "./applications-live-state";
+import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
+import {
+  applicationLiveStateSlice,
+  ApplicationLiveStateState,
+  fetchApplicationStateById,
+} from "./applications-live-state";
+
+const initialState: ApplicationLiveStateState = {
+  entities: {},
+  hasError: {},
+  ids: [],
+};
 
 describe("applicationLiveStateSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       applicationLiveStateSlice.reducer(undefined, {
         type: "TEST_ACTION",
       })
-    ).toMatchInlineSnapshot(`
-      Object {
-        "entities": Object {},
-        "hasError": Object {},
-        "ids": Array [],
-      }
-    `);
+    ).toEqual(initialState);
+  });
+
+  describe("fetchApplicationStateById", () => {
+    it(`should handle ${fetchApplicationStateById.pending.type}`, () => {
+      expect(
+        applicationLiveStateSlice.reducer(initialState, {
+          type: fetchApplicationStateById.pending.type,
+          meta: {
+            arg: "application-1",
+          },
+        })
+      ).toEqual({ ...initialState, hasError: { "application-1": false } });
+    });
+
+    it(`should handle ${fetchApplicationStateById.rejected.type}`, () => {
+      expect(
+        applicationLiveStateSlice.reducer(
+          { ...initialState, hasError: { "application-1": false } },
+          {
+            type: fetchApplicationStateById.rejected.type,
+            meta: {
+              arg: "application-1",
+            },
+          }
+        )
+      ).toEqual({ ...initialState, hasError: { "application-1": true } });
+    });
+
+    it(`should handle ${fetchApplicationStateById.fulfilled.type}`, () => {
+      expect(
+        applicationLiveStateSlice.reducer(
+          { ...initialState, hasError: { "application-1": false } },
+          {
+            type: fetchApplicationStateById.fulfilled.type,
+            meta: {
+              arg: "application-1",
+            },
+            payload: dummyApplicationLiveState,
+          }
+        )
+      ).toEqual({
+        entities: {
+          [dummyApplicationLiveState.applicationId]: dummyApplicationLiveState,
+        },
+        ids: [dummyApplicationLiveState.applicationId],
+        hasError: { "application-1": false },
+      });
+    });
   });
 });

pkg/app/web/src/modules/applications-live-state.ts

@@ -44,8 +44,10 @@ const initialState = applicationLiveStateAdapter.getInitialState<{
   hasError: {},
 });
 
+export type ApplicationLiveStateState = typeof initialState;
+
 export const selectHasError = (
-  state: typeof initialState,
+  state: ApplicationLiveStateState,
   applicationId: string
 ): boolean => {
   return state.hasError[applicationId] || false;

pkg/app/web/src/modules/applications.test.ts

@@ -1,4 +1,7 @@
-import { dummyApplication } from "../__fixtures__/dummy-application";
+import {
+  dummyApplication,
+  dummyApplicationSyncState,
+} from "../__fixtures__/dummy-application";
 import { createStore } from "../../test-utils";
 import {
   addApplication,
@@ -54,7 +57,7 @@ describe("fetchApplications", () => {
 });
 
 describe("applicationsSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       applicationsSlice.reducer(undefined, {
         type: "TEST_ACTION",
@@ -110,7 +113,7 @@ describe("applicationsSlice reducer", () => {
       const updatedApplication: Application = {
         ...dummyApplication,
         syncState: {
-          ...dummyApplication.syncState,
+          ...dummyApplicationSyncState,
           status: ApplicationSyncStatus.OUT_OF_SYNC,
         },
       };

pkg/app/web/src/modules/applications.ts

@@ -6,6 +6,7 @@ import {
 } from "@reduxjs/toolkit";
 import {
   Application as ApplicationModel,
+  ApplicationSyncState as ApplicationSyncStateModel,
   ApplicationSyncStatus,
 } from "pipe/pkg/app/web/model/application_pb";
 import * as applicationsAPI from "../api/applications";
@@ -20,6 +21,7 @@ import { AppState } from ".";
 export type Application = ApplicationModel.AsObject;
 export type ApplicationSyncStatusKey = keyof typeof ApplicationSyncStatus;
 export type ApplicationKindKey = keyof typeof ApplicationKind;
+export type ApplicationSyncState = ApplicationSyncStateModel.AsObject;
 
 export const applicationsAdapter = createEntityAdapter<Application>({
   selectId: (app) => app.id,

pkg/app/web/src/modules/commands.test.ts

@@ -38,7 +38,7 @@ describe("fetchCommand", () => {
 });
 
 describe("commandsSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       commandsSlice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/modules/deployment-filter-options.test.ts

@@ -14,7 +14,7 @@ const initialState = {
 };
 
 describe("deploymentFilterOptionsSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       deploymentFilterOptionsSlice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/modules/deployments.test.ts

@@ -48,7 +48,7 @@ test("isStageRunning", () => {
 });
 
 describe("deploymentsSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       deploymentsSlice.reducer(undefined, {
         type: "TEST_ACTION",

pkg/app/web/src/modules/environments.test.ts

@@ -2,7 +2,7 @@ import { dummyEnv } from "../__fixtures__/dummy-environment";
 import { environmentsSlice, fetchEnvironments } from "./environments";
 
 describe("environmentsSlice reducer", () => {
-  it("should handle initial state", () => {
+  it("should return the initial state", () => {
     expect(
       environmentsSlice.reducer(undefined, {
         type: "TEST_ACTION",