Skip to content

Commit

Permalink
Merge pull request #33 from splunk/fix/test-selectors-for-ui-elements
Browse files Browse the repository at this point in the history 
fix: add selectors for tests
  • Loading branch information
@wojtekzyla
wojtekzyla authored Jul 27, 2023
2 parents 4e668b1 + f025b9c commit c0245a4
Show file tree
Hide file tree
Showing 26 changed files with 192 additions and 239 deletions.
34 changes: 0 additions & 34 deletions frontend/packages/manager/src/components/ButtonsModal.jsx
View file

This file was deleted.

4 changes: 2 additions & 2 deletions frontend/packages/manager/src/components/DeleteModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ function DeleteModal(props) {
</Message>) : null}
</Modal.Body>
<Modal.Footer>
<Button appearance="secondary" elementRef={cancelButtonRef} onClick={handleRequestClose} label="Cancel" />
<Button appearance="primary" onClick={props.handleDelete} label="Delete" />
<Button data-test="sc4snmp:delete-modal:cancel-button" appearance="secondary" elementRef={cancelButtonRef} onClick={handleRequestClose} label="Cancel" />
<Button data-test="sc4snmp:delete-modal:delete-button" appearance="primary" onClick={props.handleDelete} label="Delete" />
</Modal.Footer>
</Modal>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/packages/manager/src/components/ErrorsModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function ErrorsModal() {
<P>{ErrCtx.message}</P>
</Modal.Body>
<Modal.Footer>
<Button appearance="secondary" onClick={handleRequestClose} label="Close" />
<Button data-test="sc4snmp:errors-modal:cancel-button" appearance="secondary" onClick={handleRequestClose} label="Close" />
</Modal.Footer>
</Modal>
</div>
Expand Down
34 changes: 17 additions & 17 deletions frontend/packages/manager/src/components/groups/AddDeviceModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,14 @@ function AddDeviceModal(){
<StyledModalBody>
<StyledControlGroup labelWidth={140} label="IP address">
<ValidationGroup>
<Text data-test='form:ip-input' value={GrCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
{((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
<Text data-test='sc4snmp:form:ip-input' value={GrCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
{((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el, i) => <P data-test={`sc4snmp:ip-error-${i}`} key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</ValidationGroup>
</StyledControlGroup>
<StyledControlGroup labelWidth={140} label="Port" >
<ValidationGroup>
<Text data-test="form:port-input" value={GrCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
{((ValCtx.portErrors) ? ValCtx.portErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
<Text data-test="sc4snmp:form:port-input" value={GrCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
{((ValCtx.portErrors) ? ValCtx.portErrors.map((el, i) => <P data-test={`sc4snmp:port-error-${i}`} key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</ValidationGroup>
</StyledControlGroup>

Expand All @@ -138,39 +138,39 @@ function AddDeviceModal(){
labelFor="customized-select-after"
labelWidth={140}
>
<Select defaultValue={GrCtx.version} inputId="customized-select-after" value={GrCtx.version} onChange={handleChangeVersion}>
<Select.Option label="From inventory" value=""/>
<Select.Option label="1" value="1"/>
<Select.Option label="2c" value="2c"/>
<Select.Option label="3" value="3"/>
<Select data-test="sc4snmp:form:select-version" defaultValue={GrCtx.version} inputId="customized-select-after" value={GrCtx.version} onChange={handleChangeVersion}>
<Select.Option data-test="sc4snmp:form:version-from-inventory" label="From inventory" value=""/>
<Select.Option data-test="sc4snmp:form:version-1" label="1" value="1"/>
<Select.Option data-test="sc4snmp:form:version-2c" label="2c" value="2c"/>
<Select.Option data-test="sc4snmp:form:version-3" label="3" value="3"/>
</Select>
</StyledControlGroup>

<StyledControlGroup labelWidth={140} label="Community">
<ValidationGroup>
<Text data-test="form:community-input" value={GrCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
{((ValCtx.communityErrors) ? ValCtx.communityErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
<Text data-test="sc4snmp:form:community-input" value={GrCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
{((ValCtx.communityErrors) ? ValCtx.communityErrors.map((el, i) => <P data-test={`sc4snmp:community-error-${i}`} key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</ValidationGroup>
</StyledControlGroup>

<StyledControlGroup labelWidth={140} label="Secret">
<ValidationGroup>
<Text value={GrCtx.secret} onChange={handleChangeSecret} error={((ValCtx.secretErrors) ? true : false)}/>
{((ValCtx.secretErrors) ? ValCtx.secretErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
<Text data-test="sc4snmp:form:secret-input" value={GrCtx.secret} onChange={handleChangeSecret} error={((ValCtx.secretErrors) ? true : false)}/>
{((ValCtx.secretErrors) ? ValCtx.secretErrors.map((el, i) => <P data-test={`sc4snmp:secret-error-${i}`} key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</ValidationGroup>
</StyledControlGroup>

<StyledControlGroup labelWidth={140} label="Security Engine">
<ValidationGroup>
<Text data-test="form:security-engine-input" value={GrCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
{((ValCtx.securityEngineErrors) ? ValCtx.securityEngineErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
<Text data-test="sc4snmp:form:security-engine-input" value={GrCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
{((ValCtx.securityEngineErrors) ? ValCtx.securityEngineErrors.map((el, i) => <P data-test={`sc4snmp:security-engine-error-${i}`} key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</ValidationGroup>
</StyledControlGroup>

</StyledModalBody>
<Modal.Footer>
<Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
<Button data-test="form:submit-form-button" appearance="primary" label="Submit" onClick={handleApply} />
<Button data-test="sc4snmp:form:cancel-button" appearance="secondary" onClick={handleRequestClose} label="Cancel" />
<Button data-test="sc4snmp:form:submit-form-button" appearance="primary" label="Submit" onClick={handleApply} />
</Modal.Footer>
</Modal>
</div>
Expand Down
8 changes: 4 additions & 4 deletions frontend/packages/manager/src/components/groups/AddGroupModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,14 @@ function AddGroupModal() {
<Modal.Body>
<ControlGroup label="Group Name">
<ValidationGroup>
<Text data-test="form:group-name-input" value={GrCtx.groupName} onChange={handleGroupNameChange} error={(!!(ValCtx.groupNameErrors))}/>
{((ValCtx.groupNameErrors) ? ValCtx.groupNameErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
<Text data-test="sc4snmp:form:group-name-input" value={GrCtx.groupName} onChange={handleGroupNameChange} error={(!!(ValCtx.groupNameErrors))}/>
{((ValCtx.groupNameErrors) ? ValCtx.groupNameErrors.map((el, i) => <P data-test={`sc4snmp:group-name-error-${i}`} key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</ValidationGroup>
</ControlGroup>
</Modal.Body>
<Modal.Footer>
<Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
<Button data-test="form:submit-form-button" appearance="primary" onClick={handleRequestSubmit} label="Submit" />
<Button data-test="sc4snmp:form:cancel-button" appearance="secondary" onClick={handleRequestClose} label="Cancel" />
<Button data-test="sc4snmp:form:submit-form-button" appearance="primary" onClick={handleRequestSubmit} label="Submit" />
</Modal.Footer>
</Modal>
</div>
Expand Down
19 changes: 9 additions & 10 deletions frontend/packages/manager/src/components/groups/GroupsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,16 +223,15 @@ function GroupsList() {
}
};

const groupsList = groups.map((group) => (
<SingleGroup onClick={(event) => (clickGroupHandler(event, group._id, group.groupName, 1))} style={{ backgroundColor: (selectedGroup[group._id]) ? "#E1E6EB" : "#FFFFF" }} key={createDOMID()}>
const groupsList = groups.map((group, i) => (
<SingleGroup data-test={`sc4snmp:group-${i}`} onClick={(event) => (clickGroupHandler(event, group._id, group.groupName, 1))} style={{ backgroundColor: (selectedGroup[group._id]) ? "#E1E6EB" : "#FFFFF" }} key={createDOMID()}>
<P>
{group.groupName}
</P>
<div>
<Button style={{ margin: "0" }} onClick={() => (newDevicenHandler(group._id, group.groupName))} appearance="pill" icon={<Plus />} />
<Button style={{ margin: "0" }} onClick={() => (editGroupHandler(group._id, group.groupName))} appearance="pill" icon={<Pencil />} />
<Button style={{ margin: "0" }} onClick={() => (groupDeleteHandler(group._id, group.groupName, group.groupInInventory))}
appearance="pill" icon={<Trash />} />
<Button data-test={`sc4snmp:group-${i}:new-device-button`} style={{ margin: "0" }} onClick={() => (newDevicenHandler(group._id, group.groupName))} appearance="pill" icon={<Plus />} />
<Button data-test={`sc4snmp:group-${i}:edit-group-button`} style={{ margin: "0" }} onClick={() => (editGroupHandler(group._id, group.groupName))} appearance="pill" icon={<Pencil />} />
<Button data-test={`sc4snmp:group-${i}:delete-group-button`} style={{ margin: "0" }} onClick={() => (groupDeleteHandler(group._id, group.groupName, group.groupInInventory))} appearance="pill" icon={<Trash />} />
</div>
</SingleGroup>
));
Expand Down Expand Up @@ -277,17 +276,17 @@ function GroupsList() {
</Table.Head>
<Table.Body>
{GrCtx.devices
.map((row) => (
<Table.Row key={createDOMID()} >
.map((row, i) => (
<Table.Row data-test={`sc4snmp:group-row-${i}`} key={createDOMID()} >
<Table.Cell>{row.address}</Table.Cell>
<Table.Cell>{(row.port === '') ? GrCtx.inventoryConfig.port : row.port}</Table.Cell>
<Table.Cell>{(row.version === '') ? GrCtx.inventoryConfig.version : row.version}</Table.Cell>
<Table.Cell>{(row.community === '') ? GrCtx.inventoryConfig.community : row.community}</Table.Cell>
<Table.Cell>{(row.secret === '') ? GrCtx.inventoryConfig.secret : row.secret}</Table.Cell>
<Table.Cell>{(row.securityEngine === '') ? GrCtx.inventoryConfig.securityEngine : row.securityEngine}</Table.Cell>
<Table.Cell>
<Button onClick={() => deviceEditHandler(JSON.parse(JSON.stringify(row)))} icon={<Pencil />} />
<Button onClick={() => deviceDeleteHandler(JSON.parse(JSON.stringify(row)))} icon={<Trash />} />
<Button data-test={`sc4snmp:group-row-edit-${i}`} onClick={() => deviceEditHandler(JSON.parse(JSON.stringify(row)))} icon={<Pencil />} />
<Button data-test={`sc4snmp:group-row-delete-${i}`} onClick={() => deviceDeleteHandler(JSON.parse(JSON.stringify(row)))} icon={<Trash />} />
</Table.Cell>
</Table.Row>
))}
Expand Down
Loading

0 comments on commit c0245a4

Please sign in to comment.