fix: move initialization boolean inside component

packages/components/src/ViewsCounter/ViewsCounter.tsx

@@ -7,6 +7,7 @@ export interface IProps {
 
 export const ViewsCounter = (props: IProps) => (
   <Flex
+    data-cy={'ViewsCounter'}
     px={2}
     py={1}
     mb={1}

packages/cypress/src/integration/howto/read.spec.ts

@@ -158,6 +158,12 @@ describe('[How To]', () => {
 
         cy.get(`[data-cy="comments-form"]`).should('not.exist')
       })
+
+      it('[Views only visible for beta-testers]', () => {
+        cy.visit(specificHowtoUrl)
+        cy.step(`ViewsCounter should not be visible`)
+        cy.get('[data-cy="ViewsCounter"]').should('not.exist')
+      })
     })
 
     describe('[By Authenticated]', () => {
@@ -200,6 +206,23 @@ describe('[How To]', () => {
       })
     })
 
+    describe('[By Beta-Tester]', () => {
+      it('[Views show on multiple howtos]', () => {
+        cy.login('demo_beta_tester@example.com', 'demo_beta_tester')
+
+        cy.step('Views show on first howto')
+        cy.visit(specificHowtoUrl)
+        cy.get('[data-cy="ViewsCounter"]').should('exist')
+
+        cy.step('Go back')
+        cy.get('[data-cy="go-back"]:eq(0)').as('topBackButton').click()
+
+        cy.step('Views show on second howto')
+        cy.visit('/how-to/make-glass-like-beams')
+        cy.get('[data-cy="ViewsCounter"]').should('exist')
+      })
+    })
+
     it('[By Owner]', () => {
       cy.step('Edit button is available to the owner')
       cy.visit(specificHowtoUrl)

packages/cypress/src/integration/research/read.spec.ts

@@ -1,9 +1,8 @@
 describe('[Research]', () => {
   const SKIP_TIMEOUT = { timeout: 300 }
-  const totalResearchCount = 1
+  const totalResearchCount = 2
 
   describe('[List research articles]', () => {
-    const researchArticleUrl = '/research/qwerty'
     beforeEach(() => {
       cy.visit('/research')
     })
@@ -14,24 +13,58 @@ describe('[Research]', () => {
       cy.get('[data-cy="ResearchListItem"]')
         .its('length')
         .should('be.eq', totalResearchCount)
+    })
+  })
+
+  describe('[Read a research article]', () => {
+    const researchArticleUrl = '/research/qwerty'
+    beforeEach(() => {
+      cy.visit('/research')
+    })
 
-      cy.step('Research cards has basic info')
-      cy.get(
-        `[data-cy="ResearchListItem"] a[href="${researchArticleUrl}"]`,
-      ).within(() => {
-        cy.contains('qwerty').should('be.exist')
-        cy.contains('event_reader').should('be.exist')
-        cy.get('[data-cy="ItemUpdateText"]').contains('1').should('be.exist')
+    describe('[By Everyone]', () => {
+      it('[See all info]', () => {
+        cy.step('Research cards has basic info')
+        cy.get(
+          `[data-cy="ResearchListItem"] a[href="${researchArticleUrl}"]`,
+        ).within(() => {
+          cy.contains('qwerty').should('be.exist')
+          cy.contains('event_reader').should('be.exist')
+          cy.get('[data-cy="ItemUpdateText"]').contains('1').should('be.exist')
+        })
+
+        cy.step(
+          `Open Research details when click on a Research ${researchArticleUrl}`,
+        )
+        cy.get(
+          `[data-cy="ResearchListItem"] a[href="${researchArticleUrl}"]`,
+          SKIP_TIMEOUT,
+        ).click()
+        cy.url().should('include', researchArticleUrl)
+      })
+
+      it('[Views only visible for beta-testers]', () => {
+        cy.step(`ViewsCounter should not be visible`)
+        cy.visit(researchArticleUrl)
+        cy.get('[data-cy="ViewsCounter"]').should('not.exist')
       })
+    })
 
-      cy.step(
-        `Open Research details when click on a Research ${researchArticleUrl}`,
-      )
-      cy.get(
-        `[data-cy="ResearchListItem"] a[href="${researchArticleUrl}"]`,
-        SKIP_TIMEOUT,
-      ).click()
-      cy.url().should('include', researchArticleUrl)
+    describe('[Beta-tester]', () => {
+      it('[Views show on multiple research articles]', () => {
+        cy.login('demo_beta_tester@example.com', 'demo_beta_tester')
+
+        cy.step('Views show on first research article')
+        cy.visit(researchArticleUrl)
+        cy.get('[data-cy="ViewsCounter"]').should('exist')
+
+        cy.step('Go back')
+        cy.get('[data-cy="go-back"]:eq(0)').as('topBackButton').click()
+
+        cy.step('Views show on second research article')
+        cy.visit('/research/A%20test%20research')
+        cy.get('[data-cy="ViewsCounter"]').should('exist')
+      })
     })
   })
 })

shared/mocks/data/research.ts

@@ -388,4 +388,19 @@ export const research = {
       },
     ],
   },
+  '0up6oJCTT3M9bDYx34Et': {
+    _created: '2023-02-27T22:08:25.999Z',
+    _createdBy: 'test user',
+    _deleted: false,
+    _id: '0up6oJCTT3M9bDYx34Et',
+    _modified: '2023-03-01T19:12:11.271Z',
+    creatorCountry: 'it',
+    description: 'A test!',
+    moderation: 'accepted',
+    slug: 'A test research',
+    tags: {
+      h1wCs0o9j60lkw3AYPB1: true,
+    },
+    title: 'A test research',
+  },
 }

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

@@ -53,12 +53,11 @@ interface IProps {
   onUsefulClick: () => void
 }
 
-let didInit = false
-
 const HowtoDescription = ({ howto, loggedInUser, ...props }: IProps) => {
   const [fileDownloadCount, setFileDownloadCount] = useState(
     howto.total_downloads,
   )
+  let didInit = false
   const [viewCount, setViewCount] = useState<number | undefined>()
   const { stores } = useCommonStores()
 

src/pages/Research/Content/ResearchDescription.tsx

@@ -33,8 +33,6 @@ interface IProps {
   onUsefulClick: () => void
 }
 
-let didInit = false
-
 const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
   const dateLastUpdateText = (research: IResearch.ItemDB): string => {
     const lastModifiedDate = format(new Date(research._modified), 'DD-MM-YYYY')
@@ -45,8 +43,8 @@ const ResearchDescription = ({ research, isEditable, ...props }: IProps) => {
       return ''
     }
   }
+  let didInit = false
   const store = useResearchStore()
-
   const [viewCount, setViewCount] = useState<number | undefined>()
 
   const incrementViewCount = async () => {