Added e2e tests for values dashboard

core/src/app/(public)/(with-toolbar)/indicator/[id]/page.tsx

@@ -73,6 +73,4 @@ async function IndicatorPage({ params }: IndicatorPageProps) {
 
 export const revalidate = "force-cache"
 
-export const dynamicParams = process.env.SSG === "false" ? true : false
-
 export default IndicatorPage

core/src/containers/forms/value-form/create-value-form/CreateValueForm.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react"
 import { useForm } from "react-hook-form"
 import { yupResolver } from "@hookform/resolvers/yup"
+import { useRouter } from "next/navigation"
 import Button from "@/ui/button/Button"
 import Input from "@/ui/input/Input"
 import Label from "@/ui/label/Label"
@@ -16,10 +17,15 @@ import { createValue } from "@/api/admin"
 import "@/containers/forms/value-form/styles.scss"
 
 const CreateValueForm: FC<CreateValueFormProps> = ({ onSuccess }) => {
+  const router = useRouter()
+
   const [data, mutate] = useMutation(createValue, {
     successMessage: "Value was created successffully",
     errorMessage: "Unexpected error occured",
-    onSuccess,
+    onSuccess: () => {
+      onSuccess()
+      router.refresh()
+    },
   })
 
   const {

core/src/containers/modals/value-modal/ValueModal.tsx

@@ -4,14 +4,14 @@ import { ValueModalProps } from "@/containers/modals/value-modal/types"
 import DataList from "@/components/data-list/DataList"
 import DataListItem from "@/components/data-list/components/data-list-item/DataListItem"
 import ModalContainer from "@/components/modal-container/ModalContainer"
-
-//import { useModal } from "@/providers/modal-provider/ModalProvider"
+import { useModal } from "@/providers/modal-provider/ModalProvider"
+import EditValueModal from "../edit-value-modal/EditValueModal"
 
 const ValueModal: FC<ValueModalProps> = ({ value }) => {
-  //const { openModal } = useModal()
+  const { openModal } = useModal()
 
   const handleEditValue = () => {
-    //openModal(<EditCountryModal country={country} />)
+    openModal(<EditValueModal value={value} />)
   }
 
   const createdAtDate = new Date(value.createdAt).toLocaleDateString()
@@ -20,15 +20,48 @@ const ValueModal: FC<ValueModalProps> = ({ value }) => {
   return (
     <ModalContainer title="Value Information" size="small">
       <DataList>
-        <DataListItem label="Value ID" data={value.id} />
-        <DataListItem label="Indicator ID" data={value.indicatorId} />
-        <DataListItem label="Country ID" data={value.countryId} />
-        <DataListItem label="Value" data={value.value} />
-        <DataListItem label="Year" data={value.year} />
-        <DataListItem label="Date of update" data={updatedAtDate} />
-        <DataListItem label="Date of creation" data={createdAtDate} />
+        <DataListItem
+          label="Value ID"
+          data-testid="value-modal-id"
+          data={value.id}
+        />
+        <DataListItem
+          label="Indicator ID"
+          data-testid="value-modal-indicator-id"
+          data={value.indicatorId}
+        />
+        <DataListItem
+          label="Country ID"
+          data-testid="value-modal-country-id"
+          data={value.countryId}
+        />
+        <DataListItem
+          label="Value"
+          data-testid="value-modal-country-value"
+          data={value.value}
+        />
+        <DataListItem
+          label="Year"
+          data-testid="value-modal-country-year"
+          data={value.year}
+        />
+        <DataListItem
+          label="Date of update"
+          data-testid="value-modal-updatedAt"
+          data={updatedAtDate}
+        />
+        <DataListItem
+          label="Date of creation"
+          data-testid="value-modal-createdAt"
+          data={createdAtDate}
+        />
       </DataList>
-      <Button color="dark" className="full-width" onClick={handleEditValue}>
+      <Button
+        color="dark"
+        className="full-width"
+        data-testid="value-modal-edit-button"
+        onClick={handleEditValue}
+      >
         Edit
       </Button>
     </ModalContainer>

core/src/containers/values-dashboard-header/ValuesDashboardHeader.tsx

@@ -19,20 +19,27 @@ const ValuesDashboardHeader = () => {
   const handleRefresh = () => router.refresh()
 
   return (
-    <div className="admin-dashboard-header">
+    <div
+      className="admin-dashboard-header"
+      data-testid="admin-dashboard-header"
+    >
       <DashboardHeading
         title="Data Entries Dashboard"
         subtitle="Manage data entries: review, update, and add values for indicators across countries and years."
       />
       <Button
         color="dark"
         className="admin-dashboard-header__create-button"
+        data-testid="admin-dashboard-add-button"
         startIcon={<PlusIcon />}
         onClick={handleCreateValueClick}
       >
         Create
       </Button>
-      <IconButton onClick={handleRefresh}>
+      <IconButton
+        onClick={handleRefresh}
+        data-testid="admin-dashboard-refresh-button"
+      >
         <RefreshIcon />
       </IconButton>
     </div>

core/src/containers/values-dashboard-table/ValuesDashboardTable.tsx

@@ -27,7 +27,7 @@ const ValuesDashboardTable: FC = () => {
   const ref = useInfiniteScroll(getAdminValues, merge, { initialPage: 1 })
 
   return (
-    <div ref={ref}>
+    <div ref={ref} data-testid="admin-dashboard-table">
       <VirtualizedTable
         rowHeight={46}
         rowCount={values.length}

core/src/containers/values-dashboard-table/components/values-dashboard-table-row/ValuesDashboardTableRow.tsx

@@ -38,7 +38,12 @@ const IndicatorsDashboardTableRow: FC<ValuesDashboardTableRowProps> = ({
         semantic={false}
         className="admin-dashboard-table__check-cell flex-5"
       >
-        <IconButton variant="text" color="dark" onClick={handleSelect}>
+        <IconButton
+          variant="text"
+          color="dark"
+          data-testid="select-button"
+          onClick={handleSelect}
+        >
           <SquareIcon />
         </IconButton>
       </TableCell>
@@ -79,6 +84,7 @@ const IndicatorsDashboardTableRow: FC<ValuesDashboardTableRowProps> = ({
         <IconButton
           variant="text"
           color="light"
+          data-testid="value-options-button"
           ref={moreButtonContainer}
           onClick={() => setIsOptionsDropdownOpened(true)}
         >

core/src/containers/values-dashboard-tools/ValuesDashboardTools.tsx

@@ -50,11 +50,10 @@ const ValueDashboardTools: FC<ValuesDashboardToolsProps> = ({
   const renderSortLabel = ({ label }: Option) =>
     `Sort by ${label.toLowerCase()}`
 
+  const nextSortDirection = sortDirection === "asc" ? "desc" : "asc"
+
   const handleSortDirectionChange = () => {
-    setSearchParams(
-      searchParamsKeys.sortDirection,
-      sortDirection === "asc" ? "desc" : "asc"
-    )
+    setSearchParams(searchParamsKeys.sortDirection, nextSortDirection)
   }
 
   const sortIcon =
@@ -72,19 +71,21 @@ const ValueDashboardTools: FC<ValuesDashboardToolsProps> = ({
   )
 
   return (
-    <div className="admin-dashboard-tools">
+    <div className="admin-dashboard-tools" data-testid="admin-dashboard-tools">
       <LoadableSelectWithSearch
         apiService={getIndicatorSelectAutocomplete}
         value={indicator}
         onChange={handleSelectChange(searchParamsKeys.indicator)}
         className="flex-grow"
+        data-testid="admin-dashboard-indicator-select"
         size="small"
       />
       <LoadableSelectWithSearch
         apiService={getCountrySelectAutocomplete}
         value={country}
         onChange={handleSelectChange(searchParamsKeys.country)}
         className="flex-30"
+        data-testid="admin-dashboard-country-select"
         size="small"
       />
       <Select
@@ -93,12 +94,16 @@ const ValueDashboardTools: FC<ValuesDashboardToolsProps> = ({
         onChange={handleSelectChange(searchParamsKeys.sort)}
         renderSelectedLabel={renderSortLabel}
         className="flex-22-5"
+        data-testid="admin-dashboard-sort-select"
         size="small"
       />
       <IconButton
         className="flex-static"
+        data-testid="admin-dashboard-sort-direction-button"
         color="light"
         onClick={handleSortDirectionChange}
+        data-current-direction={sortDirection}
+        data-next-direction={nextSortDirection}
       >
         {sortIcon}
       </IconButton>
@@ -108,6 +113,7 @@ const ValueDashboardTools: FC<ValuesDashboardToolsProps> = ({
         className="flex-static"
         color="light"
         aria-label="Clear filters"
+        data-testid="admin-dashboard-clear-filters"
         title="Clear filters"
       >
         <CloseIcon />

core/src/ui/input/Input.tsx

@@ -9,7 +9,14 @@ const Input: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
 ) => {
   const inputClassName = cn("input", className, isError && "error")
 
-  return <input ref={ref} className={inputClassName} {...props} />
+  return (
+    <input
+      ref={ref}
+      data-testid="input"
+      className={inputClassName}
+      {...props}
+    />
+  )
 }
 
 export default forwardRef(Input)

core/src/ui/select-with-search/SelectWithSearch.tsx

@@ -115,6 +115,7 @@ const SelectWithSearch: FC<SelectWithSearchProps> = ({
                   "select__container select-with-search",
                   containerProps?.className
                 )}
+                data-testid="select"
               >
                 <div className="select__input-container">
                   <Input

core/src/ui/select/components/select-item/SelectItem.tsx

@@ -18,6 +18,7 @@ const SelectItem: FC<SelectItemProps> = ({
         className,
         isSelected && "selected"
       )}
+      data-testid="option"
       role="option"
       {...props}
     />

e2e/cypress/support/index.ts

@@ -21,9 +21,7 @@ declare global {
 beforeEach(() => {
   cy.setCookie("client_id", "m0qqf9t91yatil3svh");
 
-  cy.task("clearTestDatabase").then(() => {
-    cy.task("populateTestDatabase");
-  });
+  cy.task("clearTestDatabase").then(() => cy.task("populateTestDatabase"));
 });
 
 afterEach(() => {

e2e/cypress/tests/common/common.steps.ts

@@ -9,6 +9,10 @@ When("I submit form", () => {
   cy.get('button[type="submit"]:visible').click();
 });
 
+When("I submit form inside of a modal", () => {
+  cy.getById("modal").get('button[type="submit"]').click();
+});
+
 Then("I should be navigated to {string} page", (urlSubstring: string) => {
   if (urlSubstring === "home") {
     cy.url().should("equal", "http://localhost:3000/");

e2e/cypress/tests/countries-dashboard/countries-dashboard.feature

@@ -69,14 +69,14 @@ Feature: Countries dashboard
   Scenario: New country can be created
     When I open new country form
     And I fill in needed country values
-    And I submit form
+    And I submit form inside of a modal
     Then I should see a new country in a table
 
   @feature
   Scenario: New country fields validation works as expected
     When I open new country form
     And I fill in only country name
-    And I submit form
+    And I submit form inside of a modal
     Then country id input should be highlighted indicating failed validation
 
   @feature
@@ -95,7 +95,7 @@ Feature: Countries dashboard
     When I open first country options dropdown
     And I open edit country modal
     And I fill in new country name
-    And I submit form
+    And I submit form inside of a modal
     Then I should see changed country
 
   @feature

e2e/cypress/tests/indicators-dashboard/indicators-dashboard.feature

@@ -68,14 +68,14 @@ Feature: Indicator dashboard
   Scenario: New indicator can be created
     When I open new indicator form
     And I fill in needed values
-    And I submit form
+    And I submit form inside of a modal
     Then I should see a new indicator in a table
 
   @feature
   Scenario: New indicator fields validation works as expected
     When I open new indicator form
     And I fill in only name
-    And I submit form
+    And I submit form inside of a modal
     Then input should be highlighted indicating failed validation
 
   @feature
@@ -94,7 +94,7 @@ Feature: Indicator dashboard
     When I open first indicator's options dropdown
     And I open edit indicator modal
     And I fill in new name
-    And I submit form
+    And I submit form inside of a modal
     Then I should see changed indicator
 
   @feature