Skip to content

Commit

Permalink
Cluster List Testing (2) (#231)
Browse files Browse the repository at this point in the history
* pagination

Signed-off-by: Aura6 <aura1391215@gmail.com>

* progress

Signed-off-by: Aura6 <aura1391215@gmail.com>

* progress

Signed-off-by: Aura6 <aura1391215@gmail.com>

* progress

Signed-off-by: Aura6 <aura1391215@gmail.com>

* 91% lines

Signed-off-by: Aura6 <aura1391215@gmail.com>

* comments

Signed-off-by: Aura6 <aura1391215@gmail.com>

* progress

Signed-off-by: Aura6 <aura1391215@gmail.com>

* ClusterCreate component testing + dynamic cluster adding to ClusterList

Signed-off-by: Aura6 <aura1391215@gmail.com>

* comments

Signed-off-by: Aura6 <aura1391215@gmail.com>

* key check

Signed-off-by: Aura6 <aura1391215@gmail.com>

* fixed typos

Signed-off-by: Aura6 <aura1391215@gmail.com>

* progress

Signed-off-by: Aura6 <aura1391215@gmail.com>

* update testing comp

Signed-off-by: Mohammed Abdi <mohammma@usc.edu>

---------

Signed-off-by: Aura6 <aura1391215@gmail.com>
Signed-off-by: Mohammed Abdi <mohammma@usc.edu>
Co-authored-by: Aura6 <aura1391215@gmail.com>
Co-authored-by: Mohammed Abdi <mohammma@usc.edu>
  • Loading branch information
3 people committed May 31, 2023
1 parent 451aa28 commit 0bc392d
Show file tree
Hide file tree
Showing 18 changed files with 718 additions and 457 deletions.
8 changes: 8 additions & 0 deletions .idea/.gitignore

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions .idea/tornjak.iml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions tornjak-frontend/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
testEnvironment: "jsdom",
}
563 changes: 287 additions & 276 deletions tornjak-frontend/package-lock.json

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions tornjak-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"start": "PORT=$PORT_FE react-scripts start --openssl-legacy-provider",
"build": "react-scripts build",
"build:staging": "env-cmd -f .env.staging npm run build",
"test": "react-scripts test",
"test": "react-scripts test -env=jsdom",
"coverage": "react-scripts test -env=jsdom --watchAll=false --coverage",
"eject": "react-scripts eject",
"dev": "concurrently -k -n COMPILER,NODEMON -c yellow,blue \"tsc -w\" \"nodemon -w dist -q dist/index.js\""
},
Expand Down Expand Up @@ -109,10 +110,12 @@
],
"collectCoverageFrom": [
"src/**/*.js",
"src/**/*.tsx",
"!src/index.js"
],
"coverageReporters": [
"text"
"text",
"html"
]
},
"babel": {
Expand Down
25 changes: 25 additions & 0 deletions tornjak-frontend/src/Utils/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import checkPropTypes from "check-prop-types";
import {applyMiddleware, createStore} from 'redux';
import allReducers from "../../src/redux/reducers"; //import all reducers
import { middlewares } from "../../src/redux/store"

// findByTestId takes in a component and it's testId
// returns compItem - the component
export const findByTestId = (comp, testId) => {
const compItem = comp.find(`[data-test='${testId}']`);
return compItem;
}

// checkProps takes in a component and expected props
// returns propsErr after checking the component with the expected props
export const checkProps = (comp, expectedProps) => {
const propsErr = checkPropTypes(comp.propTypes, expectedProps, 'props', comp.name);
return propsErr;
}

// testReduxStore takes in initail state
// returns test redux store for testing purposes
export const testReduxStore = (initialState) => {
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
return createStoreWithMiddleware(allReducers, initialState);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Cluster Create Component Should Render 1`] = `
<div>
<div
className="cluster-create"
data-test="cluster-create"
>
<div
className="create-create-title"
data-test="create-title"
>
<h3>
Create Cluster
</h3>
</div>
<form
data-test="create-cluster-form"
onSubmit={[Function]}
>
<br />
<br />
<div
className="entry-form"
>
<div
className="clustername-input-field"
data-test="clustername-input-field"
>
<TextInput
aria-required="true"
data-test="clustername-Text-input-field"
helperText="i.e. exampleabc"
id="clusterNameInputField"
invalidText="A valid value is required - refer to helper text below"
labelText="Cluster Name [*required]"
onChange={[Function]}
placeholder="Enter CLUSTER NAME"
required={true}
role="cluster-name"
/>
</div>
<div
className="clustertype-drop-down"
data-test="clustertype-drop-down"
>
<Dropdown
aria-required="true"
ariaLabel="clustertype-drop-down"
direction="bottom"
disabled={false}
helperText=""
id="clustertype-drop-down"
itemToElement={null}
itemToString={[Function]}
items={Array []}
label="Select Cluster Type"
light={false}
onChange={[Function]}
role="cluster-type"
titleText="Cluster Type [*required]"
type="default"
/>
<p
className="cluster-helper"
>
i.e. Kubernetes, VMs...
</p>
</div>
<div
className="cluster-domain-name-input-field"
data-test="cluster-domain-name-input-field"
>
<TextInput
helperText="i.e. example.org"
id="clusterDomainNameInputField"
invalidText="A valid value is required - refer to helper text below"
labelText="Cluster Domain Name/ URL"
onChange={[Function]}
placeholder="Enter CLUSTER DOMAIN NAME/ URL"
/>
</div>
<div
className="cluster-managed-by-input-field"
>
<TextInput
data-test="cluster-domain-name-input-text-field"
helperText="i.e. person-A"
id="clusterNameInputField"
invalidText="A valid value is required - refer to helper text below"
labelText="Cluster Managed By"
onChange={[Function]}
placeholder="Enter CLUSTER MANAGED BY"
/>
</div>
<div
className="agents-multiselect"
data-test="agents-multiselect"
>
<FilterableMultiSelect
ariaLabel="Choose an item"
compareItems={[Function]}
direction="bottom"
disabled={false}
filterItems={[Function]}
helperText="i.e. spiffe://example.org/agent/myagent1..."
id="selectors-multiselect"
initialSelectedItems={Array []}
itemToString={[Function]}
items={
Array [
Object {},
]
}
label="Select Agents"
light={false}
locale="en"
onChange={[Function]}
open={false}
placeholder="Select Agents"
selectionFeedback="top-after-reopen"
sortItems={[Function]}
titleText="Assign Agents To Cluster"
/>
</div>
<div
className="selectors-textArea"
data-test="selectors-textArea"
>
<TextArea
cols={50}
defaultValue=""
disabled={true}
enableCounter={false}
helperText="i.e. spiffe://example.org/agent/myagent1..."
id="selectors-textArea"
invalid={false}
invalidText="A valid value is required"
labelText="Assigned Agents"
light={false}
onChange={[Function]}
onClick={[Function]}
placeholder="Assigned agents will be populated here - Refer to Assign Agents To Cluster"
rows={8}
/>
</div>
<div
className="form-group"
data-test="create-cluster-button"
>
<input
className="btn btn-primary"
type="submit"
value="Create Cluster"
/>
</div>
<div
data-test="success-message"
/>
<div
className="alert-primary"
data-test="alert-primary"
role="alert"
>
<pre />
</div>
</div>
</form>
</div>
<ToastContainer
autoClose={5000}
className="carbon-toast"
closeButton={[Function]}
closeOnClick={true}
containerId="notifications"
draggable={false}
draggableDirection="x"
draggablePercent={80}
hideProgressBar={false}
newestOnTop={false}
pauseOnFocusLoss={true}
pauseOnHover={true}
position="top-right"
role="alert"
rtl={false}
theme="light"
transition={[Function]}
/>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Cluster List Component Should Render Properly Should Render 1`] = `
<div
data-test="cluster-list"
>
<h3>
Clusters List
</h3>
<div
className="alert-primary"
role="alert"
>
<pre>
Test String
</pre>
</div>
<br />
<br />
<div
className="indvidual-list-table"
>
<Connect(ClustersListTable)
data={Array []}
id="table-1"
/>
</div>
</div>
`;
44 changes: 16 additions & 28 deletions tornjak-frontend/src/components/__tests__/cluster-create.test.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { ClusterCreate } from "../../components/cluster-create"
import { configure } from "enzyme"
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
import { shallow, configure } from "enzyme"
import Adapter from "@wojtekmaj/enzyme-adapter-react-17"

configure({adapter: new Adapter()})
configure({ adapter: new Adapter() })

const props = {
serverInfoUpdateFunc: jest.fn(),
Expand All @@ -19,36 +18,25 @@ const props = {
}

describe("Cluster Create Component", () => {
const wrapper = shallow(<ClusterCreate {...props} />)

beforeEach(() => {
render(<ClusterCreate {...props} />)
it("Should Render", () => {
expect(wrapper).toMatchSnapshot()
})

describe("Cluster type cannot be empty.", () => {
it("Should Create Cluster", () => {
const instance = wrapper.instance()

/*
if ((this.state.clusterTypeManualEntry && this.state.clusterType === this.state.clusterTypeManualEntryOption) || !this.state.clusterType) {
displayError("Cluster type cannot be empty.")
return
}
*/
instance.onChangeClusterName({target: {value: "Name"}})
instance.onChangeManualClusterType({target: {value: "Type"}})
instance.onChangeClusterDomainName({target: {value: "Domain"}})
instance.onChangeClusterManagedBy({target: {value: "Managed By"}})

it("Manual", () => {
fireEvent.change(screen.getByRole("cluster-type"), {selectedItem: "----Select this option and Enter Custom Cluster Type Below----"})
})
wrapper.find("form").simulate("submit")

it("Not manual", () => {
fireEvent.change(screen.getByRole("cluster-type"), {selectedItem: ""})
})

afterEach(async () => {
fireEvent.click(screen.getByRole("create-cluster-button"))

await waitFor(() => {
const notification = screen.getByRole("error")
const [ caption ] = notification.getElementsByClassName("bx--toast-notification__caption")
expect(caption.textContent).toBe("Cluster type cannot be empty.")
})
})
expect(wrapper.state("clusterName")).toBe("Name")
expect(wrapper.state("clusterType")).toBe("Type")
expect(wrapper.state("clusterDomainName")).toBe("Domain")
expect(wrapper.state("clusterManagedBy")).toBe("Managed By")
})
})
Loading

0 comments on commit 0bc392d

Please sign in to comment.