test(27113): add tests

hivemq-edge/src/frontend/src/components/PageContainer.spec.cy.tsx

@@ -1,23 +1,37 @@
 /// <reference types="cypress" />
 import PageContainer from './PageContainer.tsx'
+import { Button } from '@chakra-ui/react'
 
-const MOCK_STATUS_TEXT = 'This is a test'
+const MOCK_HEADER = 'This is a test'
+const MOCK_SUBHEADER = 'This is below the test'
 const MOCK_CONTENT = <div data-testid="the-test-id">This is a dummy component</div>
+const MOCK_CTA = <Button>Button</Button>
 
 describe('PageContainer', () => {
   beforeEach(() => {
-    // run these tests as if in a desktop
-    // browser with a 720p monitor
     cy.viewport(800, 250)
   })
-  it('should renders', () => {
-    cy.mountWithProviders(<PageContainer title={MOCK_STATUS_TEXT}>{MOCK_CONTENT}</PageContainer>)
-    // cy.get('.chakra-alert__title').should('contain.text', 'This is a test')
-    // cy.get('.chakra-alert__desc').should('contain.text', 'This is a title')
-    // cy.get("[role='alert']").should('have.attr', 'data-status', 'error')
+
+  it('should render properly', () => {
+    cy.mountWithProviders(
+      <PageContainer title={MOCK_HEADER} subtitle={MOCK_SUBHEADER} cta={MOCK_CTA}>
+        {MOCK_CONTENT}
+      </PageContainer>
+    )
+    cy.get('header h1').should('have.text', 'This is a test')
+    cy.get('header h1 + p').should('have.text', 'This is below the test')
+    cy.getByTestId('page-container-cta').find('button').should('have.text', 'Button')
+    cy.getByTestId('the-test-id').should('have.text', 'This is a dummy component')
   })
 
-  it('should also render', () => {
-    cy.mountWithProviders(<PageContainer>{MOCK_CONTENT}</PageContainer>)
+  it('should be accessible', () => {
+    cy.injectAxe()
+    cy.mountWithProviders(
+      <PageContainer title={MOCK_HEADER} subtitle={MOCK_SUBHEADER} cta={<Button>Button</Button>}>
+        {MOCK_CONTENT}
+      </PageContainer>
+    )
+
+    cy.checkAccessibility()
   })
 })

hivemq-edge/src/frontend/src/components/PageContainer.tsx

@@ -1,33 +1,22 @@
 import { FC, ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Box, Text, Flex, Heading, VisuallyHidden, chakra as Chakra } from '@chakra-ui/react'
+import { Box, Text, Flex, Heading, chakra as Chakra } from '@chakra-ui/react'
 
 interface PageContainerProps {
-  title?: string
+  title: string
   subtitle?: string
   children?: ReactNode
   cta?: ReactNode
 }
 
 const PageContainer: FC<PageContainerProps> = ({ title, subtitle, children, cta }) => {
-  const { t } = useTranslation()
-
   return (
     <Flex flexDirection="column" p={4} pt={6} flexGrow={1}>
       <Flex gap="50px">
-        <Chakra.header maxW="50vw" pb={6}>
-          <Heading as="h1">
-            {title ? (
-              title
-            ) : (
-              <VisuallyHidden>
-                <h1>{t('translation:navigation.mainPage')}</h1>
-              </VisuallyHidden>
-            )}
-          </Heading>
+        <Chakra.header maxW="50vw" pb={6} data-testid="page-container-header">
+          <Heading as="h1">{title}</Heading>
           {subtitle && <Text fontSize="md">{subtitle}</Text>}
         </Chakra.header>
-        <Box flexGrow={1} alignItems="flex-end">
+        <Box flexGrow={1} alignItems="flex-end" data-testid="page-container-cta">
           {cta}
         </Box>
       </Flex>