-
Notifications
You must be signed in to change notification settings - Fork 593
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test for traffic splitting and refactor
- Loading branch information
Showing
4 changed files
with
316 additions
and
21 deletions.
There are no files selected for viewing
22 changes: 22 additions & 0 deletions
22
frontend/packages/knative-plugin/src/components/traffic-splitting/Controller.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import * as React from 'react'; | ||
import { K8sResourceKind } from '@console/internal/module/k8s'; | ||
import { FirehoseResult } from '@console/internal/components/utils'; | ||
import { transformTrafficSplitingData } from '../../utils/traffic-splitting-utils'; | ||
import TrafficSplitting from './TrafficSplitting'; | ||
|
||
type ControllerProps = { | ||
loaded?: boolean; | ||
obj: K8sResourceKind; | ||
resources?: { | ||
configurations: FirehoseResult; | ||
revisions: FirehoseResult; | ||
}; | ||
}; | ||
|
||
const Controller: React.FC<ControllerProps> = (props) => { | ||
const { loaded, obj, resources } = props; | ||
const revisions = transformTrafficSplitingData(obj, resources); | ||
return loaded ? <TrafficSplitting {...props} service={obj} revisions={revisions} /> : null; | ||
}; | ||
|
||
export default Controller; |
24 changes: 3 additions & 21 deletions
24
...d/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingController.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
...kages/knative-plugin/src/components/traffic-splitting/__tests__/TrafficSplitting.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import * as React from 'react'; | ||
import * as Renderer from 'react-test-renderer'; | ||
import TrafficSplitting from '../TrafficSplitting'; | ||
import { | ||
mockRevisions, | ||
mockServiceData, | ||
} from '../../../utils/__mocks__/traffic-splitting-utils-mock'; | ||
|
||
describe('TrafficSplitting', () => { | ||
it('should match the previous traffic splitting snapshot', () => { | ||
const tree = Renderer.create( | ||
<TrafficSplitting service={mockServiceData} revisions={mockRevisions} />, | ||
).toJSON(); | ||
expect(tree).toMatchSnapshot(); | ||
}); | ||
}); |
275 changes: 275 additions & 0 deletions
275
...n/src/components/traffic-splitting/__tests__/__snapshots__/TrafficSplitting.spec.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,275 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`TrafficSplitting should match the previous traffic splitting snapshot 1`] = ` | ||
<form | ||
className="modal-content" | ||
onSubmit={[Function]} | ||
> | ||
<div | ||
className="modal-header" | ||
> | ||
<h1 | ||
className="pf-c-title pf-m-2xl" | ||
data-test-id="modal-title" | ||
> | ||
Set Traffic Distribution | ||
</h1> | ||
</div> | ||
<div | ||
className="modal-body" | ||
> | ||
<div | ||
className="modal-body-content" | ||
> | ||
<div | ||
className="modal-body-inner-shadow-covers" | ||
> | ||
<p> | ||
Set traffic distribution for the Revisions of the Knative Service | ||
</p> | ||
<div | ||
className="pf-c-form__group" | ||
> | ||
<div | ||
className="odc-multi-column-field__row" | ||
> | ||
<div | ||
className="odc-multi-column-field__col" | ||
> | ||
Split | ||
</div> | ||
<div | ||
className="odc-multi-column-field__col" | ||
> | ||
Tag | ||
</div> | ||
<div | ||
className="odc-multi-column-field__col" | ||
> | ||
Revision | ||
</div> | ||
<div | ||
className="odc-multi-column-field__col--button" | ||
/> | ||
</div> | ||
<div | ||
className="odc-multi-column-field__row" | ||
> | ||
<div | ||
className="odc-multi-column-field__col" | ||
> | ||
<div | ||
className="pf-c-form__group" | ||
> | ||
<input | ||
aria-describedby="form-input-trafficSplitting-0-percent-field-helper" | ||
aria-invalid={false} | ||
aria-label={null} | ||
className="pf-c-form-control" | ||
disabled={false} | ||
id="form-input-trafficSplitting-0-percent-field" | ||
name="trafficSplitting.0.percent" | ||
onBlur={[Function]} | ||
onChange={[Function]} | ||
placeholder="100" | ||
readOnly={false} | ||
required={true} | ||
style={ | ||
Object { | ||
"maxWidth": "100%", | ||
} | ||
} | ||
type="number" | ||
value={100} | ||
/> | ||
</div> | ||
</div> | ||
<div | ||
className="odc-multi-column-field__col" | ||
> | ||
<div | ||
className="pf-c-form__group" | ||
> | ||
<input | ||
aria-describedby="form-input-trafficSplitting-0-tag-field-helper" | ||
aria-invalid={false} | ||
aria-label={null} | ||
className="pf-c-form-control" | ||
disabled={false} | ||
id="form-input-trafficSplitting-0-tag-field" | ||
name="trafficSplitting.0.tag" | ||
onBlur={[Function]} | ||
onChange={[Function]} | ||
placeholder="Unique Tag" | ||
readOnly={false} | ||
required={true} | ||
type="text" | ||
value="" | ||
/> | ||
</div> | ||
</div> | ||
<div | ||
className="odc-multi-column-field__col" | ||
> | ||
<div | ||
className="pf-c-form__group" | ||
> | ||
<div | ||
className={undefined} | ||
style={undefined} | ||
> | ||
<div | ||
className="dropdown pf-c-dropdown dropdown--full-width" | ||
> | ||
<button | ||
aria-describedby={undefined} | ||
aria-expanded={false} | ||
aria-haspopup="true" | ||
className="pf-c-dropdown__toggle" | ||
data-test-id="dropdown-button" | ||
disabled={undefined} | ||
id="form-dropdown-trafficSplitting-0-revisionName-field" | ||
onClick={[Function]} | ||
onKeyDown={[Function]} | ||
type="button" | ||
> | ||
<span | ||
className="pf-c-dropdown__toggle-text" | ||
> | ||
overlayimage-fdqsf | ||
</span> | ||
<svg | ||
aria-hidden={true} | ||
aria-labelledby={null} | ||
className="pf-c-dropdown__toggle-icon" | ||
fill="currentColor" | ||
height="1em" | ||
role="img" | ||
style={ | ||
Object { | ||
"verticalAlign": "-0.125em", | ||
} | ||
} | ||
viewBox="0 0 320 512" | ||
width="1em" | ||
> | ||
<path | ||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" | ||
transform="" | ||
/> | ||
</svg> | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div | ||
className="odc-multi-column-field__col--button is-disabled" | ||
> | ||
<svg | ||
aria-hidden="true" | ||
aria-labelledby={null} | ||
fill="currentColor" | ||
height="1em" | ||
onClick={[Function]} | ||
role="img" | ||
style={ | ||
Object { | ||
"verticalAlign": "-0.125em", | ||
} | ||
} | ||
viewBox="0 0 512 512" | ||
width="1em" | ||
> | ||
<path | ||
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z" | ||
transform="" | ||
/> | ||
</svg> | ||
<span | ||
className="sr-only" | ||
> | ||
Delete | ||
</span> | ||
</div> | ||
</div> | ||
<button | ||
aria-disabled={null} | ||
aria-label={null} | ||
className="pf-c-button pf-m-link pf-m-inline" | ||
disabled={false} | ||
onClick={[Function]} | ||
tabIndex={null} | ||
type="button" | ||
> | ||
<span | ||
className="pf-c-button__icon" | ||
> | ||
<svg | ||
aria-hidden={true} | ||
aria-labelledby={null} | ||
fill="currentColor" | ||
height="1em" | ||
role="img" | ||
style={ | ||
Object { | ||
"verticalAlign": "-0.125em", | ||
} | ||
} | ||
viewBox="0 0 512 512" | ||
width="1em" | ||
> | ||
<path | ||
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" | ||
transform="" | ||
/> | ||
</svg> | ||
</span> | ||
Add Revision | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div | ||
className="modal-footer co-m-btn-bar" | ||
> | ||
<div | ||
className="pf-c-form__group pf-m-action pf-c-form pf-c-form__actions--right pf-c-form__group--no-top-margin" | ||
> | ||
<div | ||
className="pf-c-form__actions" | ||
> | ||
<button | ||
aria-disabled={null} | ||
aria-label={null} | ||
className="pf-c-button pf-m-secondary" | ||
data-test-id="modal-cancel-action" | ||
disabled={false} | ||
onClick={[Function]} | ||
tabIndex={null} | ||
type="button" | ||
> | ||
Cancel | ||
</button> | ||
<button | ||
aria-disabled={null} | ||
aria-label={null} | ||
className="pf-c-button pf-m-primary" | ||
disabled={false} | ||
id="confirm-action" | ||
tabIndex={null} | ||
type="submit" | ||
> | ||
Save | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
`; |