fix(19238): Fix the default cleanStart checkbox (#359)

* fix(19238): remove the faulty defaultChecked on checkboxes

* test(19238): fix ida

* test(19238): add tests

Author: vanch3d

hivemq-edge/src/frontend/src/modules/Bridges/components/panels/OptionsPanel.spec.cy.tsx

@@ -0,0 +1,59 @@
+/// <reference types="cypress" />
+
+import { FC } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { Bridge } from '@/api/__generated__'
+import { mockBridge } from '@/api/hooks/useGetBridges/__handlers__'
+import OptionsPanel from '@/modules/Bridges/components/panels/OptionsPanel.tsx'
+import { Button } from '@chakra-ui/react'
+
+interface TestingComponentProps {
+  onSubmit: (data: Bridge) => void
+  defaultValues: Bridge
+}
+
+const TestingComponent: FC<TestingComponentProps> = ({ onSubmit, defaultValues }) => {
+  const form = useForm<Bridge>({
+    mode: 'all',
+    criteriaMode: 'all',
+    defaultValues: defaultValues,
+  })
+
+  return (
+    <div>
+      <form id="bridge-form" onSubmit={form.handleSubmit(onSubmit)}>
+        <OptionsPanel form={form} />
+      </form>
+      <Button variant="primary" type="submit" form="bridge-form" data-testid="form-submit" mt={8}>
+        Submit
+      </Button>
+    </div>
+  )
+}
+
+describe('OptionsPanel', () => {
+  beforeEach(() => {
+    cy.viewport(800, 800)
+  })
+
+  it('should be accessible', () => {
+    cy.injectAxe()
+    cy.mountWithProviders(<TestingComponent onSubmit={cy.stub().as('submit')} defaultValues={mockBridge} />)
+
+    cy.get('#cleanStart').should('be.checked')
+    cy.get('#keepAlive').should('have.value', 0)
+    cy.get('#sessionExpiry').should('have.value', 0)
+    cy.get('#loopPreventionEnabled').should('not.be.checked')
+    cy.get('#loopPreventionHopCount').should('have.value', '')
+    cy.get('#clientId').should('have.value', 'my-client-id')
+
+    cy.get('#clientId').type('-test123')
+
+    cy.getByTestId('form-submit').click()
+    cy.get('@submit').should('have.been.calledWithMatch', { clientId: 'my-client-id-test123' })
+
+    cy.checkAccessibility()
+    cy.percySnapshot('Component: OptionsPanel')
+  })
+})

hivemq-edge/src/frontend/src/modules/Bridges/components/panels/OptionsPanel.tsx

@@ -28,7 +28,7 @@ const OptionsPanel: FC<BridgePanelType> = ({ form }) => {
   return (
     <FormControl variant="hivemq" flexGrow={1} display="flex" flexDirection="column" gap={4} as="fieldset">
       <FormControl isInvalid={!!errors.cleanStart}>
-        <Checkbox defaultChecked {...register('cleanStart')}>
+        <Checkbox id="cleanStart" {...register('cleanStart')}>
           {t('bridge.options.cleanStart.label')}
         </Checkbox>
         <FormHelperText> {t('bridge.options.cleanStart.helper')}</FormHelperText>
@@ -70,7 +70,7 @@ const OptionsPanel: FC<BridgePanelType> = ({ form }) => {
 
       <FormControl isInvalid={!!errors.loopPreventionEnabled} mt={3}>
         <Checkbox
-          defaultChecked
+          id="loopPreventionEnabled"
           {...register('loopPreventionEnabled', {
             ...getRulesForProperty($Bridge.properties.loopPreventionEnabled),
           })}