aboutsummaryrefslogtreecommitdiffstats
path: root/gui-clamp/ui-react/src/components/dialogs/ControlLoop
diff options
context:
space:
mode:
authorbrunomilitzer <bruno.militzer@est.tech>2021-10-28 15:34:43 +0100
committerbrunomilitzer <bruno.militzer@est.tech>2021-10-28 15:34:53 +0100
commit53b46adf3359b37cd83fea036c1b87f8b55683db (patch)
tree97204bb7ea1eac046f5becd62197c75084b68554 /gui-clamp/ui-react/src/components/dialogs/ControlLoop
parenta8140d3db5264bbc9dfd513c51d78951b42c6c37 (diff)
Added JEST Unit Tests for Monitoring Functionality
Created Unit Tests to cover monitoring functionality Issue-ID: POLICY-3561 Change-Id: I48035f3960447c66d29005d5eba2e8332c55b591 Signed-off-by: brunomilitzer <bruno.militzer@est.tech>
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs/ControlLoop')
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js116
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js38
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js6
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js33
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js33
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js80
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js53
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js8
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js20
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap3
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap3
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap3
-rw-r--r--gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap26
13 files changed, 324 insertions, 98 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js
new file mode 100644
index 0000000..2997239
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js
@@ -0,0 +1,116 @@
+/*
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2021 Nordix Foundation.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import styled from "styled-components";
+import { Accordion, Button } from "react-bootstrap";
+import React, { useEffect, useState } from "react";
+
+const UninitialisedHeader = styled.div`
+ margin: 0;
+ padding: 0 0 1px 0;
+ border-bottom: 1px solid #7f7f7f;
+ background: #cccccc;
+ font-weight: normal;
+ border-radius: 0;
+`
+
+const PassiveHeader = styled.div`
+ margin: 0;
+ padding: 0 0 1px 0;
+ border-bottom: 1px solid #7f7f7f;
+ background: #ffe87c;
+ font-weight: normal;
+ border-radius: 0;
+`
+
+const RunningHeader = styled.div`
+ margin: 0;
+ padding: 0 0 1px 0;
+ border-bottom: 1px solid #7f7f7f;
+ background: #7ec699;
+ font-weight: normal;
+ border-radius: 0;
+`
+
+const ToggleButton = styled(Button)`
+ color: #000000;
+ text-decoration: none;
+
+ :hover, :active {
+ color: #000000;
+ text-decoration: none !important;
+ }
+`
+
+const AccordionHeader = (props) => {
+
+ const toggleState = () => {
+ switch (props.orderedState) {
+ case 'UNINITIALISED':
+ return renderUninitialisedOrderedState();
+ case 'PASSIVE':
+ return renderPassiveOrderedState();
+ case 'RUNNING':
+ return renderRunningOrderedState();
+ }
+ }
+
+ const renderUninitialisedOrderedState = () => {
+
+ return (
+ <UninitialisedHeader className="panel-header">
+ <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
+ { props.title }
+ </Accordion.Toggle>
+ </UninitialisedHeader>
+ )
+ }
+
+ const renderPassiveOrderedState = () => {
+ console.log("renderPassiveOrderedState called");
+
+ return (
+ <PassiveHeader className="panel-header">
+ <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
+ { props.title }
+ </Accordion.Toggle>
+ </PassiveHeader>
+ )
+ }
+
+ const renderRunningOrderedState = () => {
+ console.log("renderRunningOrderedState called");
+
+ return (
+ <RunningHeader className="panel-header">
+ <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
+ { props.title }
+ </Accordion.Toggle>
+ </RunningHeader>
+ )
+ }
+
+ return (
+ toggleState()
+ );
+}
+
+export default AccordionHeader; \ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js
new file mode 100644
index 0000000..7685340
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js
@@ -0,0 +1,38 @@
+/*
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2021 Nordix Foundation.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import { shallow } from "enzyme";
+import React from "react";
+import AccordionHeader from "./AccordionHeader";
+import toJson from "enzyme-to-json";
+
+describe('Verify AccordionHeader', () => {
+
+ const index = 0;
+ const title = "PMSH Instance";
+ const orderState = "UNINITIALISED";
+ const container = shallow(<AccordionHeader title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>);
+
+ it("renders correctly", () => {
+ expect(toJson(container)).toMatchSnapshot();
+ });
+
+}); \ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js
index 8ad855e..7a473e7 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js
@@ -235,9 +235,11 @@ const InstancePropertiesModal = (props) => {
}
const handleSave = async () => {
- console.log("handleSave called")
+ console.log("handleSave called");
- console.log("instanceName to be saved is: " + instanceName)
+ console.log("instanceName to be saved is: " + instanceName);
+
+ console.log(JSON.stringify(toscaFullTemplate));
updateTemplate(jsonEditor.getValue());
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js
new file mode 100644
index 0000000..136983a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js
@@ -0,0 +1,33 @@
+/*
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2021 Nordix Foundation.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+import React from "react";
+import InstantiationElementItem from "./InstantiationElementItem";
+
+describe('Verify InstantiationElementItem', () => {
+ const container = shallow(<InstantiationElementItem />);
+
+ it("renders correctly", () => {
+ expect(toJson(container)).toMatchSnapshot();
+ });
+}); \ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js
new file mode 100644
index 0000000..127a886
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js
@@ -0,0 +1,33 @@
+/*
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2021 Nordix Foundation.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import toJson from "enzyme-to-json";
+import { shallow } from "enzyme";
+import React from "react";
+import InstantiationElements from "./InstantiationElements";
+
+describe('Verify InstantiationElements', () => {
+ const container = shallow(<InstantiationElements />);
+
+ it("renders correctly", () => {
+ expect(toJson(container)).toMatchSnapshot();
+ });
+}); \ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
index a59770b..7b8e453 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
@@ -21,6 +21,7 @@ import React from "react";
import styled from 'styled-components';
import { Accordion, Button, Card } from "react-bootstrap";
+import AccordionHeader from "./AccordionHeader";
const AccordionBody = styled.div`
margin: 0;
@@ -34,89 +35,12 @@ const CardBody = styled(Card.Body)`
margin: 0;
`
-const UninitialisedHeader = styled.div`
- margin: 0;
- padding: 0 0 1px 0;
- border-bottom: 1px solid #7f7f7f;
- background: #cccccc;
- font-weight: normal;
- border-radius: 0;
-`
-
-const PassiveHeader = styled.div`
- margin: 0;
- padding: 0 0 1px 0;
- border-bottom: 1px solid #7f7f7f;
- background: #ffe87c;
- font-weight: normal;
- border-radius: 0;
-`
-
-const RunningHeader = styled.div`
- margin: 0;
- padding: 0 0 1px 0;
- border-bottom: 1px solid #7f7f7f;
- background: #7ec699;
- font-weight: normal;
- border-radius: 0;
-`
-
-const ToggleButton = styled(Button)`
- color: #000000;
- text-decoration: none;
-
- :hover, :active {
- color: #000000;
- text-decoration: none !important;
- }
-`
-
const InstantiationItem = (props) => {
- const toggleState = () => {
- switch (props.orderedState) {
- case 'UNINITIALISED':
- return renderUninitialisedOrderedState()
- case 'PASSIVE':
- return renderPassiveOrderedState();
- case 'RUNNING':
- return renderRunningOrderedState();
- }
- }
-
- const renderUninitialisedOrderedState = () => {
- return (
- <UninitialisedHeader className="panel-header">
- <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
- { props.title }
- </Accordion.Toggle>
- </UninitialisedHeader>
- )
- }
-
- const renderPassiveOrderedState = () => {
- return (
- <PassiveHeader className="panel-header">
- <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
- { props.title }
- </Accordion.Toggle>
- </PassiveHeader>
- )
- }
-
- const renderRunningOrderedState = () => {
- return (
- <RunningHeader className="panel-header">
- <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
- { props.title }
- </Accordion.Toggle>
- </RunningHeader>
- )
- }
return (
<Accordion>
<AccordionBody>
- { toggleState() }
+ <AccordionHeader title={ props.title } orderedState={ props.orderedState } index={ props.index } key={ props.index } />
<Accordion.Collapse eventKey={ props.index.toString() }>
<CardBody>{ props.children }</CardBody>
</Accordion.Collapse>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js
new file mode 100644
index 0000000..fe4aaf8
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js
@@ -0,0 +1,53 @@
+/*
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2021 Nordix Foundation.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import React from "react";
+import { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+
+import InstantiationItem from "./InstantiationItem";
+
+describe('Verify InstantiationItem', () => {
+
+ const index = 0;
+ const title = "PMSH Instance";
+ const orderState = "UNINITIALISED";
+ const container = shallow(<InstantiationItem title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>);
+
+ it("renders without crashing", () => {
+ shallow(<InstantiationItem title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>);
+ });
+
+ it("renders correctly", () => {
+ expect(toJson(container)).toMatchSnapshot();
+ });
+
+ it("should contain an Accordion", () => {
+ const accordion = container.find('Accordion');
+ expect(accordion).toHaveLength(1);
+ });
+
+ it("should contain an AccordionHeader", () => {
+ const accordion = container.find('AccordionHeader');
+ expect(accordion).toHaveLength(1);
+ });
+
+}); \ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
index dad4185..4186477 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
@@ -43,13 +43,13 @@ const MonitorInstantiation = (props) => {
const controlLoopInstantiation = await ControlLoopService.getControlLoopInstantiation()
.catch(error => error.message);
- const controlLoopInstantiationJson = await controlLoopInstantiation.json()
- console.log(controlLoopInstantiationJson)
+ const controlLoopInstantiationJson = await controlLoopInstantiation.json();
+
if (!controlLoopInstantiation.ok || controlLoopInstantiationJson['controlLoopList'].length === 0) {
setControlLoopInstantiationOk(false)
setControlLoopInstantiationError(controlLoopInstantiationJson)
} else {
- setControlLoopList(controlLoopInstantiationJson[['controlLoopList']])
+ setControlLoopList(controlLoopInstantiationJson['controlLoopList']);
}
}, [])
@@ -67,7 +67,7 @@ const MonitorInstantiation = (props) => {
<Modal.Body>
{
controlLoopList.map((clList, index) => (
- <InstantiationItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index }>
+ <InstantiationItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index } >
<InstantiationElements elements={ clList["elements"] } />
</InstantiationItem>
))
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js
index 5e30924..cce6225 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js
@@ -17,7 +17,7 @@
* ============LICENSE_END=========================================================
*/
-import { mount, shallow } from "enzyme";
+import { shallow } from "enzyme";
import toJson from "enzyme-to-json";
import { createMemoryHistory } from "history";
import React from "react";
@@ -25,39 +25,31 @@ import MonitorInstantiation from "./MonitorInstantiation";
import { act } from "react-dom/test-utils";
describe('Verify MonitoringInstantiation', () => {
-
- it("renders without crashing", () => {
- shallow(<MonitorInstantiation/>);
- });
+ const container = shallow(<MonitorInstantiation />);
+ const containerWithHistory = shallow(<MonitorInstantiation history={ createMemoryHistory() }/>);
it("renders correctly", () => {
- const tree = shallow(<MonitorInstantiation/>);
- expect(toJson(tree)).toMatchSnapshot();
+ expect(toJson(container)).toMatchSnapshot();
});
it('should have a Button element', () => {
- const container = shallow(<MonitorInstantiation/>)
expect(container.find('Button').length).toEqual(1);
});
it('handleClose called when bottom button clicked', () => {
- const history = createMemoryHistory();
- const component = mount(<MonitorInstantiation history={ history }/>)
const logSpy = jest.spyOn(console, 'log');
act(() => {
- component.find('[variant="secondary"]').simulate('click');
+ containerWithHistory.find('[variant="secondary"]').simulate('click');
expect(logSpy).toHaveBeenCalledWith('handleClose called');
});
});
it('handleClose called when top-right button clicked', () => {
- const history = createMemoryHistory();
- const component = mount(<MonitorInstantiation history={ history }/>)
const logSpy = jest.spyOn(console, 'log');
act(() => {
- component.find('[size="xl"]').get(0).props.onHide();
+ containerWithHistory.find('[size="xl"]').get(0).props.onHide();
expect(logSpy).toHaveBeenCalledWith('handleClose called');
});
});
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap
new file mode 100644
index 0000000..b4a707b
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify AccordionHeader renders correctly 1`] = `""`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap
new file mode 100644
index 0000000..2c5d298
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify InstantiationElementItem renders correctly 1`] = `<Fragment />`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap
new file mode 100644
index 0000000..8fa928e
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify InstantiationElements renders correctly 1`] = `<Fragment />`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap
new file mode 100644
index 0000000..a3a230a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify InstantiationItem renders correctly 1`] = `
+<Accordion>
+ <styled.div>
+ <AccordionHeader
+ index={
+ Object {
+ "index": 0,
+ }
+ }
+ key="[object Object]"
+ title={
+ Object {
+ "title": "PMSH Instance",
+ }
+ }
+ />
+ <AccordionCollapse
+ eventKey="[object Object]"
+ >
+ <Styled(CardBody) />
+ </AccordionCollapse>
+ </styled.div>
+</Accordion>
+`;