fix: unit test

Author: johnvente

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = createConfig('eslint', {
   rules: {
     'react/function-component-definition': 'off',
     'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
   },
   overrides: [
     {

src/components/PluggableComponent/__snapshots__/index.test.jsx.snap

@@ -3,22 +3,31 @@
 exports[`PluggableComponent renders correctly 1`] = `
 <div>
   <div
-    class="pgn__form-group"
+    class="pgn__form-group p-3 border border-success-300"
     data-testid="plugin-input"
   >
     <label
-      class="pgn__form-label"
+      class="pgn__form-label h3 text-primary-500"
       for="randomID"
     >
       Hello
     </label>
     <div
-      class="pgn__form-control-decorator-group"
+      class="row container-fluid"
     >
-      <input
-        class="form-control is-valid"
-        id="randomID"
-      />
+      <div
+        class="pgn__form-control-decorator-group col-3"
+      >
+        <input
+          class="form-control is-valid"
+          id="randomID"
+        />
+      </div>
+      <p
+        class="col-8"
+      >
+        @openedx-plugins/communications-app-input-form
+      </p>
     </div>
     <div
       class="pgn__form-control-description pgn__form-text pgn__form-text-valid"

src/components/PluggableComponent/index.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { render, waitFor, screen } from '@testing-library/react';
 import PluggableComponent from '.';
 

src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx

@@ -276,7 +276,8 @@ function BulkEmailForm(props) {
             id="checkbox-form"
             as="communications-app-check-box-form"
             label="checkbox label - @openedx-plugins/communications-app-check-box-form"
-            onChange={() => null}
+            isChecked
+            handleChange={() => null}
           >
             <h1>Checkbox -default</h1>
           </PluggableComponent>
@@ -292,7 +293,7 @@ function BulkEmailForm(props) {
             <h1>Input -default</h1>
           </PluggableComponent>
           {/* this will return default child if the plugin has not been installed  */}
-          <PluggableComponent id="input-form" as="communications-app-card">
+          <PluggableComponent id="card-form" as="communications-app-card">
             <Card className="my-4 p-3 col-6 border border-success-300 w-100">
               <Card.ImageCap
                 src="https://picsum.photos/360/200/"