itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/components/studentViewSettingsLabelComponent.js

@@ -0,0 +1,28 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    studentViewSettingsLabel: () => cy.get('.student-view-settings-label')
+}
+
+const tests = {
+    verifyStudentViewSettingsLabelAndCSS: () => {
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(studentViewSettingsLabelComponent.studentViewSettingsLabel(), 'Student view settings');
+            utilities.verifyElementVisibilityState(studentViewSettingsLabelComponent.studentViewSettingsLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(studentViewSettingsLabelComponent.studentViewSettingsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+    }
+}
+
+export const studentViewSettingsLabelComponent = {
+    ...selectors,
+    tests
+}

package/cypress/pages/components/toolSettingsComponent.js

@@ -0,0 +1,94 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    toolSettingsPanel: () => cy.get('.tool-settings-customization-wrapper .ngie-accordion-summary'),
+    toolSettingsRegion: () => cy.get('.tool-settings-customization-wrapper [role="region"]'),
+    addToolsLabel: () => cy.get('[class*="AddToolsHeading"]'),
+    toolSettingsHelpText: () => cy.get('[class*="AddToolsInstructions"]'),
+    toolButton: () => cy.get('.icon-button-custom-format'),
+    toolTickIcon: () => cy.get('.icon-button-custom-format .tick-icon-wrapper'),
+    toolIcon: () => cy.get('[class*="DragItemstyles__IconWrapper"]'),
+    toolLabel: () => cy.get('[class*="DragItemstyles__ButtonLabel"]'),
+    toolDragHandleButton: () => cy.get('[class*="DragItemstyles__DragIconWrapper"]'),
+    toolEditIcon: () => cy.get('[class*="DragItemstyles__ItemContainer"] .icon-pencil'),
+}
+
+const steps = {
+    verifyToolSettingsAccordionIsCollapsed: () => {
+        toolSettingsComponent.toolSettingsPanel()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    expandToolSettingsAccordion: () => {
+        toolSettingsComponent.toolSettingsPanel()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+/**
+ * @param {number} toolIndex index of the tool
+ * @param {string} toolName name of the tool
+ * @description function verifies content and visibility of the tool
+ */
+    verifyToolButton: (toolIndex, toolName) => {
+        utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolButton(), toolIndex), 'visible');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolIcon(), toolIndex), 'visible');
+        utilities.verifyInnerText(utilities.getNthElement(toolSettingsComponent.toolLabel(), toolIndex), toolName);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolLabel(), toolIndex), 'visible');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolDragHandleButton(), toolIndex), 'visible');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolEditIcon(), toolIndex), 'visible');
+        steps.verifyToolUnselectedState(toolIndex);
+    },
+
+    /**
+     * @param {number} toolIndex index of the tool
+     * @description function verifies tool is in unselected state
+     */
+    verifyToolUnselectedState: (toolIndex) => {
+        utilities.getNthElement(toolSettingsComponent.toolTickIcon(), toolIndex)
+            .should('have.attr', 'data-aria-checked', 'false');
+    },
+
+    /**
+     * @param {number} toolIndex index of the tool
+     * @description function verifies tool is in selected state
+     */
+    verifyToolSelectedState: (toolIndex) => {
+        utilities.getNthElement(toolSettingsComponent.toolTickIcon(), toolIndex)
+            .should('have.attr', 'data-aria-checked', 'true');
+    },
+
+    /**
+     * @param {number} toolIndex index of the tool
+     * @description function selects the tool 
+     */
+    selectTool: (toolIndex) => {
+        utilities.getNthElement(toolSettingsComponent.toolButton(), toolIndex)
+            .click();
+        steps.verifyToolSelectedState(toolIndex);
+    },
+
+    /**
+     * @param {number} toolIndex index of the tool
+     * @description function unselects the tool 
+     */
+    unselectTool: (toolIndex) => {
+        utilities.getNthElement(toolSettingsComponent.toolButton(), toolIndex)
+            .click();
+        steps.verifyToolUnselectedState(toolIndex);
+    },
+
+    /**
+     * @param {number} toolIndex index of the tool
+     * @description function clicks on edit icon for the tool
+     */
+    clickOnToolEditIcon: (toolIndex) => {
+        utilities.getNthElement(toolSettingsComponent.toolEditIcon(), toolIndex)
+            .click();
+    }
+}
+
+export const toolSettingsComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/toolVisibilityComponent.js

@@ -0,0 +1,73 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    addShowHideButtonLabel: () => cy.get('[data-ngie-testid="add-show/hide-button-checkbox"] .MuiFormControlLabel-label'),
+    addShowHideButtonCheckbox: () => cy.get('[data-ngie-testid="add-show/hide-button-checkbox"] input'),
+    launchToolByDefaultLabel: () => cy.get('[data-ngie-testid*="launch-the-"] .MuiFormControlLabel-label'),
+    launchToolByDefaultCheckbox: () => cy.get('[data-ngie-testid*="launch-the-"] input'),
+}
+
+const steps = {
+    verifyAddShowHideButtonLabel: () => {
+        utilities.verifyInnerText(toolVisibilityComponent.addShowHideButtonLabel(), 'Add show/hide button');
+        utilities.verifyElementVisibilityState(toolVisibilityComponent.addShowHideButtonLabel(), 'visible');
+    },
+
+    /**
+     * @param {string} toolName name of the tool
+     * @description function verifies content and visibility of launch tool by default label and checkbox
+     */
+    verifyLaunchToolByDefaultLabel: (toolName) => {
+        utilities.verifyInnerText(toolVisibilityComponent.launchToolByDefaultLabel(), `Launch the ${toolName} by default`);
+        utilities.verifyElementVisibilityState(toolVisibilityComponent.launchToolByDefaultLabel(), 'visible');
+    },
+
+    verifyAddShowHideButtonCheckboxChecked: () => {
+        toolVisibilityComponent.addShowHideButtonCheckbox()
+            .should('be.checked');
+    },
+
+    verifyAddShowHideButtonCheckboxUnchecked: () => {
+        toolVisibilityComponent.addShowHideButtonCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkAddShowHideButtonCheckbox: () => {
+        toolVisibilityComponent.addShowHideButtonCheckbox()
+            .click();
+        steps.verifyAddShowHideButtonCheckboxChecked();
+    },
+
+    uncheckAddShowHideButtonCheckbox: () => {
+        toolVisibilityComponent.addShowHideButtonCheckbox()
+            .click();
+        steps.verifyAddShowHideButtonCheckboxUnchecked();
+    },
+
+    verifyLaunchToolByDefaultCheckboxChecked: () => {
+        toolVisibilityComponent.launchToolByDefaultCheckbox()
+            .should('be.checked');
+    },
+
+    verifyLaunchToolByDefaultCheckboxUnchecked: () => {
+        toolVisibilityComponent.launchToolByDefaultCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkLaunchToolByDefaultCheckbox: () => {
+        toolVisibilityComponent.launchToolByDefaultCheckbox()
+            .click();
+        steps.verifyLaunchToolByDefaultCheckboxChecked();
+    },
+
+    uncheckLaunchToolByDefaultCheckbox: () => {
+        toolVisibilityComponent.launchToolByDefaultCheckbox()
+            .click();
+        steps.verifyLaunchToolByDefaultCheckboxUnchecked();
+    }
+}
+
+export const toolVisibilityComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/uploadImageSectionComponent.js

@@ -44,8 +44,6 @@ const steps = {
     uploadFile: (file) => {
         uploadImageSectionComponent.inputTypeFile()
             .attachFile(`uploads/${file}`);
-        uploadImageSectionComponent.uploadImagePopup()
-            .should('exist');
     },
 
     /**

package/cypress/pages/createItemPage.js

@@ -1,7 +1,9 @@
 const css = Cypress.env('css');
+import { questionInstructionsComponent } from "./components";
+import utilities from "../support/helpers/utilities";
 
 const selectors = {
-    createQuestionPageQuestionTypeHeader: () => cy.get('div[class*="HeaderComponentstyles__BlockLabel"]'),
+    createQuestionPageQuestionTypeHeader: () => cy.get('[class*="HeaderComponentstyles__BlockLabel"]'),
     addQuestionButton: () => cy.get('.ngie-btn-contained').contains('add question'),
     addResourceAndToolsButton: () => cy.get('.ngie-btn-contained').contains('add resource and tool'),
     previewTab: () => cy.get('[data-ngie-testid="preview-tab"]'),
@@ -13,18 +15,57 @@ const selectors = {
     itemTitle: () => cy.get('.ItemLevel-Header'),
     tagsButton: () => cy.get('.ngie-button').contains('Tags'),
     tagsInputField: () => cy.get('.tags-chip-container'),
-    settingsBtn: () => cy.get('.ngie-btn-link').eq(3)
+    settingsBtn: () => cy.get('.ngie-btn-link').eq(3),
+    rowQuestionWrapper: () => cy.get('[class*="Widgetstyles__RowWrapper"]'),
+    columnQuestionWrapper: () => cy.get('[class*="ColumnComponentstyles__WidgetsWrapper"]'),
+    panelWrapper: () => cy.get('.column-tab-without-scroll'),
+    questionTitle: () => cy.get('.question-type-text'),
+    sectionsTitleWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"]'),
+    sectionsTitleBoxWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"] .ngie-tablist-box-wrapper'),
+    section1Label: () => createItemPage.sectionsTitleWrapper().find('.ngie-tablist-tab-button').eq(0),
+    section2Label: () => createItemPage.sectionsTitleWrapper().find('.ngie-tablist-tab-button').eq(1),
+    selectedSectionUnderline: () => cy.get('[class*="MuiTabs-indicator"]').eq(1),
+    sectionsNumber1Label: () => cy.get('.tablist-numbered-label').eq(0),
+    sectionsNumber2Label: () => cy.get('.tablist-numbered-label').eq(1),
 }
 
 const steps = {
-    clickOnAddQuestion: () => {
-        createItemPage.addQuestionButton()
-            .click();
+    /**
+     * @param {number} panel denotes panel number
+     * @description this function is used to click on add question button
+     */
+    clickOnAddQuestion: (panel = null) => {
+        if (panel != null) {
+            createItemPage.panelWrapper()
+                .eq(panel)
+                .within(() => {
+                    createItemPage.addQuestionButton()
+                        .click();
+                })
+        }
+        else {
+            createItemPage.addQuestionButton()
+                .click();
+        }
     },
 
-    clickOnAddResource: () => {
-        createItemPage.addResourceAndToolsButton()
-            .click();
+    /**
+         * @param {number} panel denotes panel number
+         * @description this function is used to click on add resource & tool button
+         */
+    clickOnAddResource: (panel = null) => {
+        if (panel != null) {
+            createItemPage.panelWrapper()
+                .eq(panel)
+                .within(() => {
+                    createItemPage.addResourceAndToolsButton()
+                        .click();
+                });
+        }
+        else {
+            createItemPage.addResourceAndToolsButton()
+                .click();
+        }
     },
 
     navigateToCreateItemPage: () => {
@@ -58,7 +99,347 @@ const steps = {
     clickOnSettingsButton: () => {
         createItemPage.settingsBtn()
             .click();
-    }
+    },
+
+    /**
+     * @param {number} panel denotes panel number
+     * @param {number} questionNumber denotes question number
+     * @param {string} questionTitle denotes question title
+     * @param {string} questionInstruction denotes question instruction
+     * @description verify question content 
+     */
+
+    verifyBasicQuestionContentsPreview: ({ questionIndex, questionTitle, questionInstructions, panel = 0 }) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
+                utilities.verifyInnerText(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), questionInstructions);
+                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'visible');
+            });
+    },
+
+    verifyQuestionsExistInLeftPanel: () => {
+        createItemPage.columnQuestionWrapper()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(createItemPage.rowQuestionWrapper(), '2');
+            });
+    },
+
+    verifyQuestionsDoNotExistInRightPanel: () => {
+        createItemPage.columnQuestionWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyElementCount(createItemPage.rowQuestionWrapper(), '0');
+            });
+    },
+
+    /**
+     * @param {string} style {("solid"|"dotted"|"dashed")}
+     * @description this function verifies border properties for questions when horizontal separator checkbox is checked
+     */
+    verifyHorizontalSeparatorVisible: (style) => {
+        createItemPage.panelWrapper()
+            .each(($panel) => {
+                cy.wrap($panel)
+                    .within(() => {
+                        createItemPage.rowQuestionWrapper()
+                            .its('length')
+                            .then((len) => {
+                                createItemPage.rowQuestionWrapper()
+                                    .each(($question, index) => {
+                                        if (index === len - 1) {
+                                            cy.wrap($question)
+                                                .should('have.css', 'border-bottom-width', '0px')
+                                                .should('have.css', 'border-bottom-style', 'none')
+                                        }
+                                        else {
+                                            cy.wrap($question)
+                                                .should('have.css', 'border-bottom-width', '1px')
+                                                .should('have.css', 'border-bottom-style', style)
+                                        }
+                                    });
+                            });
+                    });
+            })
+    },
+
+    /**
+     * @param {string} style {("solid"|"dotted"|"dashed")}
+     * @description this function verifies border properties for questions when horizontal separator checkbox is unchecked
+     */
+    verifyHorizontalSeparatorNotVisible: (style) => {
+        createItemPage.panelWrapper()
+            .each(($panel) => {
+                cy.wrap($panel)
+                    .within(() => {
+                        createItemPage.rowQuestionWrapper()
+                            .each(($question) => {
+                                cy.wrap($question)
+                                    .should('have.css', 'border-bottom-width', '0px')
+                                    .should('have.css', 'border-bottom-style', style)
+                            });
+                    });
+            })
+    },
+
+    /**
+     * @param {string} style {("solid"|"dotted"|"dashed")}
+     * @description verifies border properties for the selected separator style
+     */
+    verifyVerticalSeparatorVisible: (style) => {
+        utilities.verifyCSS(createItemPage.panelWrapper().eq(0), {
+            'border-right-width': '1px',
+            'border-right-style': style
+        });
+    },
+
+    /**
+     * @param {string} style {("solid"|"dotted"|"dashed")}
+     * @description verifies border properties for the selected separator style
+     */
+    verifyVerticalSeparatorNotVisible: (style) => {
+        utilities.verifyCSS(createItemPage.panelWrapper().eq(0), {
+            'border-right-width': '0px',
+            'border-right-style': style
+        });
+    },
+
+    /**
+     * @param {string} spacing {("default"| "double"|"triple")} 
+     * @param {boolean} isHorizontalCheckboxChecked {("true"| "false")}
+     * @description this function verifies spacing between questions
+     */
+    verifyQuestionRowWrapperSpacing: (spacing, isHorizontalCheckboxChecked) => {
+        const getSpacingValue = (type) => {
+            switch (type) {
+                case 'default':
+                    return 32;
+                case 'double':
+                    return 48;
+                case 'triple':
+                    return 64;
+                default:
+                    return 'incorrect spacing';
+            }
+        };
+
+        createItemPage.panelWrapper()
+            .each(($panel) => {
+                cy.wrap($panel)
+                    .within(() => {
+                        createItemPage.rowQuestionWrapper()
+                            .its('length')
+                            .then((len) => {
+                                createItemPage.rowQuestionWrapper()
+                                    .each(($el, index) => {
+                                        const lastQuestion = index === len - 1;
+                                        const expectedSpacing = lastQuestion ? 0 : getSpacingValue(spacing);
+                                        const spacingHalved = isHorizontalCheckboxChecked ? expectedSpacing / 2 : expectedSpacing
+                                        cy.wrap($el)
+                                            .should('have.css', 'margin-bottom', `${spacingHalved}px`);
+                                    });
+                            });
+                    });
+            })
+    },
+
+    /**
+     * @param {string} spacing {("default"| "double"|"triple")}
+     * @param {boolean} isHorizontalCheckboxChecked {("true"| "false")}
+     * @description this function verifies spacing between questions
+     */
+    verifyQuestionWrapperSpacing: (spacing, isHorizontalCheckboxChecked) => {
+        const getSpacingValue = (type) => {
+            switch (type) {
+                case 'default':
+                    return 16;
+                case 'double':
+                    return 24;
+                case 'triple':
+                    return 32;
+                default:
+                    return 'incorrect spacing';
+            }
+        };
+
+        createItemPage.panelWrapper()
+            .each(($panel) => {
+                cy.wrap($panel)
+                    .within(() => {
+                        createItemPage.rowQuestionWrapper()
+                            .its('length')
+                            .then((len) => {
+                                createItemPage.rowQuestionWrapper()
+                                    .each(($el) => {
+                                        let expectedSpacing = isHorizontalCheckboxChecked ? getSpacingValue(spacing) : 16
+                                        cy.wrap($el)
+                                            .find('.widget-form-container')
+                                            .should('have.css', 'margin-bottom', `${expectedSpacing}px`);
+                                    });
+                            });
+                    });
+            })
+    },
+
+    /**
+     * @param {number} count denotes panel count
+     * @description function verifies panel count
+     */
+    verifyPanelCount: (count) => {
+        createItemPage.panelWrapper()
+            .should('have.length', count);
+    },
+
+    /**
+     * @param {number} count is the count of the element
+     * @description this function is used to verify count of the elements
+     */
+    verifyQuestionsCount: (count) => {
+        utilities.verifyElementCount(createItemPage.rowQuestionWrapper(), count);
+    },
+
+    /**
+     * @param {number} panel denotes panel number
+     * @description verifies count and visibility of add question and add resource & tool button
+     */
+    verifyAddQuestionAndAddResourceButton: (panel = 0) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyElementCount(createItemPage.addQuestionButton(), 1);
+                utilities.verifyInnerText(createItemPage.addQuestionButton(), 'Add question');
+                utilities.verifyElementVisibilityState(createItemPage.addQuestionButton(), 'visible');
+                utilities.verifyElementCount(createItemPage.addResourceAndToolsButton(), 1);
+                utilities.verifyInnerText(createItemPage.addResourceAndToolsButton(), 'Add resource and tool');
+                utilities.verifyElementVisibilityState(createItemPage.addResourceAndToolsButton(), 'visible');
+            });
+    },
+
+    /**
+     * @param {number} panel denotes panel number
+     * @description this function is used to to navigate to section 1
+     */
+    navigateToSection1: (panel = 0) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                createItemPage.section1Label()
+                    .click();
+            })
+    },
+
+    /**
+    * @param {number} panel denotes panel number
+    * @description this function is used to navigate to section 2
+    */
+    navigateToSection2: (panel = 0) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                createItemPage.section2Label()
+                    .click();
+            })
+    },
+
+    verifyHorizontalNavigationOrientation: () => {
+        createItemPage.sectionsTitleBoxWrapper()
+            .should('have.class', 'tab-horizontal-orientation');
+    },
+
+    /**
+     * @param {number} height is the length for underline
+     * @description function verifies length of underline that appears below selected section label
+     */
+    verifyUnderlinedNavigationStyle: (height) => {
+        utilities.verifyCSS(createItemPage.selectedSectionUnderline(), {
+            'background-color': css.color.activeComponentBorder,
+            'height': `${height}px`
+        });
+    },
+
+    verifyLeftAlignedNavigationAlignment: () => {
+        createItemPage.sectionsTitleBoxWrapper()
+            .should('not.have.class', 'tab-right-aligned')
+            .should('not.have.class', 'tab-center-aligned');
+    },
+
+    verifyNumberedSectionNavigationStyle: () => {
+        utilities.verifyInnerText(createItemPage.sectionsNumber1Label(), '1');
+        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber1Label(), 'visible');
+        utilities.verifyInnerText(createItemPage.sectionsNumber2Label(), '2');
+        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber2Label(), 'visible');
+    },
+
+    /**
+     * @param {string} orientation {("horizontal"|"vertical")}
+     * @description this function verifies border-bottom property of active navigation style orientation
+     */
+    verifySeparatedUsingDividersNavigationStyle: (orientation) => {
+        switch (orientation) {
+            case 'horizontal':
+                createItemPage.section1Label()
+                    .within(($el) => {
+                        cy.window().then((win) => {
+                            const after = win.getComputedStyle($el[0], '::after');
+                            const separatorLine = after.getPropertyValue('border-right');
+                            expect(separatorLine).to.equal(`1px solid ${css.color.secondaryBtnBorder}`);
+                        });
+                    });
+                break;
+            case 'vertical':
+                utilities.verifyCSS(createItemPage.section1Label(), {
+                    'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`
+                });
+                break;
+            default:
+                throw new Error('Invalid orientation');
+        }
+    },
+
+    verifyCenterAlignedNavigationAlignment: () => {
+        createItemPage.sectionsTitleBoxWrapper()
+            .should('have.class', 'tab-center-aligned');
+    },
+
+    verifyRightAlignedNavigationAlignment: () => {
+        createItemPage.sectionsTitleBoxWrapper()
+            .should('have.class', 'tab-right-aligned');
+    },
+
+    verifyVerticalNavigationOrientation: () => {
+        createItemPage.sectionsTitleBoxWrapper()
+            .should('have.class', 'tab-vertical-orientation');
+    },
+
+    /**
+     * @param {number} panel denotes panel count
+     * @description verifies visibility of two sections
+     */
+    verifyTwoSectionsExist: (panel = 0) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyElementCount(createItemPage.section1Label(), '1');
+                utilities.verifyInnerText(createItemPage.section1Label(), 'Section 1');
+                utilities.verifyElementVisibilityState(createItemPage.section1Label(), 'visible');
+                utilities.verifyElementCount(createItemPage.section2Label(), '1');
+                utilities.verifyInnerText(createItemPage.section2Label(), 'Section 2');
+                utilities.verifyElementVisibilityState(createItemPage.section2Label(), 'visible');
+            });
+    },
+
+    verifySectionsLabelsNotExist: (panel = 0) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyElementVisibilityState(createItemPage.sectionsTitleWrapper(), 'notExist');
+            });
+    },
+
+
 }
 
 export const createItemPage = {