Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
71e2f36d
Commit
71e2f36d
authored
Jan 13, 2020
by
Nicolò Maria Mezzopera
Committed by
Natalia Tepluhina
Jan 13, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add store getters to enable default fallback
- getters file - index changes
parent
ac4ad52f
Changes
14
Show whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
282 additions
and
139 deletions
+282
-139
app/assets/javascripts/registry/settings/components/settings_form.vue
...avascripts/registry/settings/components/settings_form.vue
+52
-32
app/assets/javascripts/registry/settings/store/getters.js
app/assets/javascripts/registry/settings/store/getters.js
+8
-0
app/assets/javascripts/registry/settings/store/index.js
app/assets/javascripts/registry/settings/store/index.js
+2
-0
app/assets/javascripts/registry/settings/store/mutations.js
app/assets/javascripts/registry/settings/store/mutations.js
+5
-0
app/assets/javascripts/registry/settings/store/state.js
app/assets/javascripts/registry/settings/store/state.js
+4
-0
app/assets/javascripts/registry/settings/utils.js
app/assets/javascripts/registry/settings/utils.js
+6
-0
app/assets/javascripts/vuex_shared/bindings.js
app/assets/javascripts/vuex_shared/bindings.js
+23
-3
app/views/projects/registry/settings/_index.haml
app/views/projects/registry/settings/_index.haml
+4
-1
locale/gitlab.pot
locale/gitlab.pot
+3
-9
spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
...tings/components/__snapshots__/settings_form_spec.js.snap
+80
-54
spec/frontend/registry/settings/components/settings_form_spec.js
...ontend/registry/settings/components/settings_form_spec.js
+22
-11
spec/frontend/registry/settings/mock_data.js
spec/frontend/registry/settings/mock_data.js
+12
-0
spec/frontend/registry/settings/store/mutations_spec.js
spec/frontend/registry/settings/store/mutations_spec.js
+7
-3
spec/frontend/vuex_shared/bindings_spec.js
spec/frontend/vuex_shared/bindings_spec.js
+54
-26
No files found.
app/assets/javascripts/registry/settings/components/settings_form.vue
View file @
71e2f36d
<
script
>
import
{
mapActions
}
from
'
vuex
'
;
import
{
GlFormGroup
,
GlToggle
,
GlFormSelect
,
GlFormTextarea
,
GlButton
}
from
'
@gitlab/ui
'
;
import
{
mapActions
,
mapState
}
from
'
vuex
'
;
import
{
GlFormGroup
,
GlToggle
,
GlFormSelect
,
GlFormTextarea
,
GlButton
,
GlCard
}
from
'
@gitlab/ui
'
;
import
{
s__
,
__
,
sprintf
}
from
'
~/locale
'
;
import
{
NAME_REGEX_LENGTH
}
from
'
../constants
'
;
import
{
mapComputed
}
from
'
~/vuex_shared/bindings
'
;
...
...
@@ -12,19 +12,25 @@ export default {
GlFormSelect
,
GlFormTextarea
,
GlButton
,
GlCard
,
},
labelsConfig
:
{
cols
:
3
,
align
:
'
right
'
,
},
computed
:
{
...
mapComputed
(
'
settings
'
,
'
updateSettings
'
,
[
...
mapState
([
'
formOptions
'
]),
...
mapComputed
(
[
'
enabled
'
,
'
cadence
'
,
'
older_than
'
,
'
keep_n
'
,
{
key
:
'
cadence
'
,
getter
:
'
getCadence
'
}
,
{
key
:
'
older_than
'
,
getter
:
'
getOlderThan
'
}
,
{
key
:
'
keep_n
'
,
getter
:
'
getKeepN
'
}
,
'
name_regex
'
,
]),
],
'
updateSettings
'
,
'
settings
'
,
),
policyEnabledText
()
{
return
this
.
enabled
?
__
(
'
enabled
'
)
:
__
(
'
disabled
'
);
},
...
...
@@ -66,12 +72,12 @@ export default {
</
script
>
<
template
>
<div
class=
"card"
>
<form
ref=
"form-element"
@
submit.prevent=
"saveSettings"
@
reset.prevent=
"resetSettings"
>
<div
class=
"card-header"
>
<gl-card>
<template
#header
>
{{
s__
(
'
ContainerRegistry|Tag expiration policy
'
)
}}
</
div
>
<
div
class=
"card-body"
>
</
template
>
<
template
>
<gl-form-group
id=
"expiration-policy-toggle-group"
:label-cols=
"$options.labelsConfig.cols"
...
...
@@ -92,9 +98,10 @@ export default {
label-for=
"expiration-policy-interval"
:label=
"s__('ContainerRegistry|Expiration interval:')"
>
<gl-form-select
id=
"expiration-policy-interval"
v-model=
"older_than"
>
<option
value=
"1"
>
{{
__
(
'
Option 1
'
)
}}
</option>
<option
value=
"2"
>
{{
__
(
'
Option 2
'
)
}}
</option>
<gl-form-select
id=
"expiration-policy-interval"
v-model=
"older_than"
:disabled=
"!enabled"
>
<option
v-for=
"option in formOptions.olderThan"
:key=
"option.key"
:value=
"option.key"
>
{{
option
.
label
}}
</option>
</gl-form-select>
</gl-form-group>
...
...
@@ -105,9 +112,10 @@ export default {
label-for=
"expiration-policy-schedule"
:label=
"s__('ContainerRegistry|Expiration schedule:')"
>
<gl-form-select
id=
"expiration-policy-schedule"
v-model=
"cadence"
>
<option
value=
"1"
>
{{
__
(
'
Option 1
'
)
}}
</option>
<option
value=
"2"
>
{{
__
(
'
Option 2
'
)
}}
</option>
<gl-form-select
id=
"expiration-policy-schedule"
v-model=
"cadence"
:disabled=
"!enabled"
>
<option
v-for=
"option in formOptions.cadence"
:key=
"option.key"
:value=
"option.key"
>
{{
option
.
label
}}
</option>
</gl-form-select>
</gl-form-group>
...
...
@@ -118,9 +126,10 @@ export default {
label-for=
"expiration-policy-latest"
:label=
"s__('ContainerRegistry|Expiration latest:')"
>
<gl-form-select
id=
"expiration-policy-latest"
v-model=
"keep_n"
>
<option
value=
"1"
>
{{
__
(
'
Option 1
'
)
}}
</option>
<option
value=
"2"
>
{{
__
(
'
Option 2
'
)
}}
</option>
<gl-form-select
id=
"expiration-policy-latest"
v-model=
"keep_n"
:disabled=
"!enabled"
>
<option
v-for=
"option in formOptions.keepN"
:key=
"option.key"
:value=
"option.key"
>
{{
option
.
label
}}
</option>
</gl-form-select>
</gl-form-group>
...
...
@@ -140,19 +149,30 @@ export default {
v-model=
"name_regex"
:placeholder=
"nameRegexPlaceholder"
:state=
"nameRegexState"
:disabled=
"!enabled"
trim
/>
<template
#description
>
<span
ref=
"regex-description"
v-html=
"regexHelpText"
></span>
</
template
>
</gl-form-group>
</div>
<div
class=
"card-footer text-right"
>
<gl-button
ref=
"cancel-button"
type=
"reset"
>
{{ __('Cancel') }}
</gl-button>
<gl-button
ref=
"save-button"
type=
"submit"
:disabled=
"formIsValid"
variant=
"success"
>
{{ __('Save Expiration Policy') }}
</template>
<
template
#footer
>
<div
class=
"d-flex justify-content-end"
>
<gl-button
ref=
"cancel-button"
type=
"reset"
class=
"mr-2 d-block"
>
{{
__
(
'
Cancel
'
)
}}
</gl-button>
<gl-button
ref=
"save-button"
type=
"submit"
:disabled=
"formIsValid"
variant=
"success"
class=
"d-block"
>
{{
__
(
'
Save expiration policy
'
)
}}
</gl-button>
</div>
</
template
>
</gl-card>
</form>
</div>
</template>
app/assets/javascripts/registry/settings/store/getters.js
0 → 100644
View file @
71e2f36d
import
{
findDefaultOption
}
from
'
../utils
'
;
export
const
getCadence
=
state
=>
state
.
settings
.
cadence
||
findDefaultOption
(
state
.
formOptions
.
cadence
);
export
const
getKeepN
=
state
=>
state
.
settings
.
keep_n
||
findDefaultOption
(
state
.
formOptions
.
keepN
);
export
const
getOlderThan
=
state
=>
state
.
settings
.
older_than
||
findDefaultOption
(
state
.
formOptions
.
olderThan
);
app/assets/javascripts/registry/settings/store/index.js
View file @
71e2f36d
...
...
@@ -2,6 +2,7 @@ import Vue from 'vue';
import
Vuex
from
'
vuex
'
;
import
*
as
actions
from
'
./actions
'
;
import
mutations
from
'
./mutations
'
;
import
*
as
getters
from
'
./getters
'
;
import
state
from
'
./state
'
;
Vue
.
use
(
Vuex
);
...
...
@@ -11,6 +12,7 @@ export const createStore = () =>
state
,
actions
,
mutations
,
getters
,
});
export
default
createStore
();
app/assets/javascripts/registry/settings/store/mutations.js
View file @
71e2f36d
...
...
@@ -3,6 +3,11 @@ import * as types from './mutation_types';
export
default
{
[
types
.
SET_INITIAL_STATE
](
state
,
initialState
)
{
state
.
projectId
=
initialState
.
projectId
;
state
.
formOptions
=
{
cadence
:
JSON
.
parse
(
initialState
.
cadenceOptions
),
keepN
:
JSON
.
parse
(
initialState
.
keepNOptions
),
olderThan
:
JSON
.
parse
(
initialState
.
olderThanOptions
),
};
},
[
types
.
UPDATE_SETTINGS
](
state
,
settings
)
{
state
.
settings
=
{
...
state
.
settings
,
...
settings
};
...
...
app/assets/javascripts/registry/settings/store/state.js
View file @
71e2f36d
...
...
@@ -23,4 +23,8 @@ export default () => ({
* Same structure as settings, above but Frozen object and used only in case the user clicks 'cancel'
*/
original
:
{},
/*
* Contains the options used to populate the form selects
*/
formOptions
:
{},
});
app/assets/javascripts/registry/settings/utils.js
0 → 100644
View file @
71e2f36d
export
const
findDefaultOption
=
options
=>
{
const
item
=
options
.
find
(
o
=>
o
.
default
);
return
item
?
item
.
key
:
null
;
};
export
default
()
=>
{};
app/assets/javascripts/vuex_shared/bindings.js
View file @
71e2f36d
export
const
mapComputed
=
(
root
,
updateFn
,
list
)
=>
{
/**
* Returns computed properties two way bound to vuex
*
* @param {(string[]|Object[])} list - list of string matching state keys or list objects
* @param {string} list[].key - the key matching the key present in the vuex state
* @param {string} list[].getter - the name of the getter, leave it empty to not use a getter
* @param {string} list[].updateFn - the name of the action, leave it empty to use the default action
* @param {string} defaultUpdateFn - the default function to dispatch
* @param {string} root - the key of the state where to search fo they keys described in list
* @returns {Object} a dictionary with all the computed properties generated
*/
export
const
mapComputed
=
(
list
,
defaultUpdateFn
,
root
)
=>
{
const
result
=
{};
list
.
forEach
(
key
=>
{
list
.
forEach
(
item
=>
{
const
[
getter
,
key
,
updateFn
]
=
typeof
item
===
'
string
'
?
[
false
,
item
,
defaultUpdateFn
]
:
[
item
.
getter
,
item
.
key
,
item
.
updateFn
||
defaultUpdateFn
];
result
[
key
]
=
{
get
()
{
if
(
getter
)
{
return
this
.
$store
.
getters
[
getter
];
}
else
if
(
root
)
{
return
this
.
$store
.
state
[
root
][
key
];
}
return
this
.
$store
.
state
[
key
];
},
set
(
value
)
{
this
.
$store
.
dispatch
(
updateFn
,
{
[
key
]:
value
});
...
...
app/views/projects/registry/settings/_index.haml
View file @
71e2f36d
#js-registry-settings
{
data:
{
project_id:
@project
.
id
,
}
}
#js-registry-settings
{
data:
{
project_id:
@project
.
id
,
cadence_options:
cadence_options
.
to_json
,
keep_n_options:
keep_n_options
.
to_json
,
older_than_options:
older_than_options
.
to_json
}
}
locale/gitlab.pot
View file @
71e2f36d
...
...
@@ -12639,12 +12639,6 @@ msgstr ""
msgid "OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses."
msgstr ""
msgid "Option 1"
msgstr ""
msgid "Option 2"
msgstr ""
msgid "Optional"
msgstr ""
...
...
@@ -15784,9 +15778,6 @@ msgstr ""
msgid "Save Changes"
msgstr ""
msgid "Save Expiration Policy"
msgstr ""
msgid "Save anyway"
msgstr ""
...
...
@@ -15802,6 +15793,9 @@ msgstr ""
msgid "Save comment"
msgstr ""
msgid "Save expiration policy"
msgstr ""
msgid "Save password"
msgstr ""
...
...
spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
View file @
71e2f36d
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Settings Form renders 1`] = `
<div
<form>
<div
class="card"
>
<form
>
>
<!----
>
<div
class="card-header"
>
...
...
@@ -12,11 +13,13 @@ exports[`Settings Form renders 1`] = `
Tag expiration policy
</div>
<div
class="card-body"
>
<gl-form-group-stub
<!---->
<!---->
<glformgroup-stub
id="expiration-policy-toggle-group"
label="Expiration policy:"
label-align="right"
...
...
@@ -26,7 +29,7 @@ exports[`Settings Form renders 1`] = `
<div
class="d-flex align-items-start"
>
<gl
-
toggle-stub
<gltoggle-stub
id="expiration-policy-toggle"
labeloff="Toggle Status: OFF"
labelon="Toggle Status: ON"
...
...
@@ -41,81 +44,96 @@ exports[`Settings Form renders 1`] = `
</strong>
</span>
</div>
</gl
-form-
group-stub>
</gl
form
group-stub>
<gl
-form-
group-stub
<gl
form
group-stub
id="expiration-policy-interval-group"
label="Expiration interval:"
label-align="right"
label-cols="3"
label-for="expiration-policy-interval"
>
<gl-form-select-stub
<glformselect-stub
disabled="true"
id="expiration-policy-interval"
value="bar"
>
<option
value="
1
"
value="
foo
"
>
Option 1
</option>
Foo
</option>
<option
value="
2
"
value="
bar
"
>
Option 2
Bar
</option>
</gl
-form-
select-stub>
</gl
-form-
group-stub>
</gl
form
select-stub>
</gl
form
group-stub>
<gl
-form-
group-stub
<gl
form
group-stub
id="expiration-policy-schedule-group"
label="Expiration schedule:"
label-align="right"
label-cols="3"
label-for="expiration-policy-schedule"
>
<gl-form-select-stub
<glformselect-stub
disabled="true"
id="expiration-policy-schedule"
value="bar"
>
<option
value="
1
"
value="
foo
"
>
Option 1
</option>
Foo
</option>
<option
value="
2
"
value="
bar
"
>
Option 2
Bar
</option>
</gl
-form-
select-stub>
</gl
-form-
group-stub>
</gl
form
select-stub>
</gl
form
group-stub>
<gl
-form-
group-stub
<gl
form
group-stub
id="expiration-policy-latest-group"
label="Expiration latest:"
label-align="right"
label-cols="3"
label-for="expiration-policy-latest"
>
<gl-form-select-stub
<glformselect-stub
disabled="true"
id="expiration-policy-latest"
value="bar"
>
<option
value="
1
"
value="
foo
"
>
Option 1
</option>
Foo
</option>
<option
value="
2
"
value="
bar
"
>
Option 2
Bar
</option>
</gl
-form-
select-stub>
</gl
-form-
group-stub>
</gl
form
select-stub>
</gl
form
group-stub>
<gl
-form-
group-stub
<gl
form
group-stub
id="expiration-policy-name-matching-group"
invalid-feedback="The value of this input should be less than 255 characters"
label="Expire Docker tags with name matching:"
...
...
@@ -123,33 +141,41 @@ exports[`Settings Form renders 1`] = `
label-cols="3"
label-for="expiration-policy-name-matching"
>
<gl-form-textarea-stub
<glformtextarea-stub
disabled="true"
id="expiration-policy-name-matching"
placeholder=".*"
trim=""
value=""
/>
</gl-form-group-stub>
</div>
</glformgroup-stub>
</div>
<div
class="card-footer"
>
<div
class="card-footer text-right
"
class="d-flex justify-content-end
"
>
<gl-button-stub
<glbutton-stub
class="mr-2 d-block"
type="reset"
>
Cancel
</gl-
button-stub>
</gl
button-stub>
<gl-button-stub
<glbutton-stub
class="d-block"
type="submit"
variant="success"
>
Save Expiration P
olicy
Save expiration p
olicy
</gl-button-stub>
</glbutton-stub>
</div>
</div>
<!---->
</div>
</form>
</div>
</form>
`;
spec/frontend/registry/settings/components/settings_form_spec.js
View file @
71e2f36d
import
Vuex
from
'
vuex
'
;
import
{
shallowMount
,
createLocalVue
}
from
'
@vue/test-utils
'
;
import
{
mount
,
createLocalVue
}
from
'
@vue/test-utils
'
;
import
stubChildren
from
'
helpers/stub_children
'
;
import
component
from
'
~/registry/settings/components/settings_form.vue
'
;
import
{
createStore
}
from
'
~/registry/settings/store/
'
;
import
{
NAME_REGEX_LENGTH
}
from
'
~/registry/settings/constants
'
;
import
{
stringifiedFormOptions
}
from
'
../mock_data
'
;
const
localVue
=
createLocalVue
();
localVue
.
use
(
Vuex
);
...
...
@@ -13,7 +15,6 @@ describe('Settings Form', () => {
let
saveSpy
;
let
resetSpy
;
const
helpPagePath
=
'
foo
'
;
const
findFormGroup
=
name
=>
wrapper
.
find
(
`#expiration-policy-
${
name
}
-group`
);
const
findFormElements
=
(
name
,
father
=
wrapper
)
=>
father
.
find
(
`#expiration-policy-
${
name
}
`
);
const
findCancelButton
=
()
=>
wrapper
.
find
({
ref
:
'
cancel-button
'
});
...
...
@@ -23,7 +24,11 @@ describe('Settings Form', () => {
const
mountComponent
=
(
options
=
{})
=>
{
saveSpy
=
jest
.
fn
();
resetSpy
=
jest
.
fn
();
wrapper
=
shallowMount
(
component
,
{
wrapper
=
mount
(
component
,
{
stubs
:
{
...
stubChildren
(
component
),
GlCard
:
false
,
},
store
,
methods
:
{
saveSettings
:
saveSpy
,
...
...
@@ -35,7 +40,7 @@ describe('Settings Form', () => {
beforeEach
(()
=>
{
store
=
createStore
();
store
.
dispatch
(
'
setInitialState
'
,
{
helpPagePath
}
);
store
.
dispatch
(
'
setInitialState
'
,
stringifiedFormOptions
);
mountComponent
();
});
...
...
@@ -48,13 +53,13 @@ describe('Settings Form', () => {
});
describe
.
each
`
elementName | modelName | value
${
'
toggle
'
}
|
${
'
enabled
'
}
|
${
true
}
${
'
interval
'
}
|
${
'
older_than
'
}
|
${
'
foo
'
}
${
'
schedule
'
}
|
${
'
cadence
'
}
|
${
'
foo
'
}
${
'
latest
'
}
|
${
'
keep_n
'
}
|
${
'
foo
'
}
${
'
name-matching
'
}
|
${
'
name_regex
'
}
|
${
'
foo
'
}
`
(
'
%s form element
'
,
({
elementName
,
modelName
,
valu
e
})
=>
{
elementName | modelName | value
| disabledByToggle
${
'
toggle
'
}
|
${
'
enabled
'
}
|
${
true
}
|
${
'
not disabled
'
}
${
'
interval
'
}
|
${
'
older_than
'
}
|
${
'
foo
'
}
|
${
'
disabled
'
}
${
'
schedule
'
}
|
${
'
cadence
'
}
|
${
'
foo
'
}
|
${
'
disabled
'
}
${
'
latest
'
}
|
${
'
keep_n
'
}
|
${
'
foo
'
}
|
${
'
disabled
'
}
${
'
name-matching
'
}
|
${
'
name_regex
'
}
|
${
'
foo
'
}
|
${
'
disabled
'
}
`
(
'
$elementName form element
'
,
({
elementName
,
modelName
,
value
,
disabledByToggl
e
})
=>
{
let
formGroup
;
beforeEach
(()
=>
{
formGroup
=
findFormGroup
(
elementName
);
...
...
@@ -89,6 +94,12 @@ describe('Settings Form', () => {
expect
(
wrapper
.
vm
[
modelName
]).
toBe
(
value
);
});
});
it
(
`
${
elementName
}
is
${
disabledByToggle
}
by enabled set to false`
,
()
=>
{
store
.
dispatch
(
'
updateSettings
'
,
{
enabled
:
false
});
const
expectation
=
disabledByToggle
===
'
disabled
'
?
'
true
'
:
undefined
;
expect
(
findFormElements
(
elementName
,
formGroup
).
attributes
(
'
disabled
'
)).
toBe
(
expectation
);
});
});
describe
(
'
form actions
'
,
()
=>
{
...
...
spec/frontend/registry/settings/mock_data.js
0 → 100644
View file @
71e2f36d
export
const
options
=
[{
key
:
'
foo
'
,
label
:
'
Foo
'
},
{
key
:
'
bar
'
,
label
:
'
Bar
'
,
default
:
true
}];
export
const
stringifiedOptions
=
JSON
.
stringify
(
options
);
export
const
stringifiedFormOptions
=
{
cadenceOptions
:
stringifiedOptions
,
keepNOptions
:
stringifiedOptions
,
olderThanOptions
:
stringifiedOptions
,
};
export
const
formOptions
=
{
cadence
:
options
,
keepN
:
options
,
olderThan
:
options
,
};
spec/frontend/registry/settings/store/mutations_spec.js
View file @
71e2f36d
import
mutations
from
'
~/registry/settings/store/mutations
'
;
import
*
as
types
from
'
~/registry/settings/store/mutation_types
'
;
import
createState
from
'
~/registry/settings/store/state
'
;
import
{
formOptions
,
stringifiedFormOptions
}
from
'
../mock_data
'
;
describe
(
'
Mutations Registry Store
'
,
()
=>
{
let
mockState
;
...
...
@@ -11,11 +12,14 @@ describe('Mutations Registry Store', () => {
describe
(
'
SET_INITIAL_STATE
'
,
()
=>
{
it
(
'
should set the initial state
'
,
()
=>
{
const
payload
=
{
helpPagePath
:
'
foo
'
,
projectId
:
'
bar
'
};
const
expectedState
=
{
...
mockState
,
...
payload
};
mutations
[
types
.
SET_INITIAL_STATE
](
mockState
,
payload
);
const
expectedState
=
{
...
mockState
,
projectId
:
'
foo
'
,
formOptions
};
mutations
[
types
.
SET_INITIAL_STATE
](
mockState
,
{
projectId
:
'
foo
'
,
...
stringifiedFormOptions
,
});
expect
(
mockState
.
projectId
).
toEqual
(
expectedState
.
projectId
);
expect
(
mockState
.
formOptions
).
toEqual
(
expectedState
.
formOptions
);
});
});
...
...
spec/frontend/vuex_shared/bindings_spec.js
View file @
71e2f36d
...
...
@@ -3,49 +3,77 @@ import { mapComputed } from '~/vuex_shared/bindings';
describe
(
'
Binding utils
'
,
()
=>
{
describe
(
'
mapComputed
'
,
()
=>
{
const
dummyComponent
=
{
const
defaultArgs
=
[[
'
baz
'
],
'
bar
'
,
'
foo
'
];
const
createDummy
=
(
mapComputedArgs
=
defaultArgs
)
=>
({
computed
:
{
...
mapComputed
(
'
foo
'
,
'
bar
'
,
[
'
baz
'
]
),
...
mapComputed
(
...
mapComputedArgs
),
},
render
()
{
return
null
;
},
});
const
mocks
=
{
$store
:
{
state
:
{
baz
:
2
,
foo
:
{
baz
:
1
,
},
},
getters
:
{
getBaz
:
'
foo
'
,
},
dispatch
:
jest
.
fn
(),
},
};
it
(
'
returns an object with keys equal to the last fn parameter
'
,
()
=>
{
it
(
'
returns an object with keys equal to the first fn parameter
'
,
()
=>
{
const
keyList
=
[
'
foo1
'
,
'
foo2
'
];
const
result
=
mapComputed
(
'
foo
'
,
'
bar
'
,
keyList
);
const
result
=
mapComputed
(
keyList
,
'
foo
'
,
'
bar
'
);
expect
(
Object
.
keys
(
result
)).
toEqual
(
keyList
);
});
it
(
'
returned object has set and get function
'
,
()
=>
{
const
result
=
mapComputed
(
'
foo
'
,
'
bar
'
,
[
'
baz
'
]
);
const
result
=
mapComputed
(
[
'
baz
'
],
'
foo
'
,
'
bar
'
);
expect
(
result
.
baz
.
set
).
toBeDefined
();
expect
(
result
.
baz
.
get
).
toBeDefined
();
});
it
(
'
set function invokes $store.dispatch
'
,
()
=>
{
const
context
=
shallowMount
(
dummyComponent
,
{
mocks
:
{
$store
:
{
dispatch
:
jest
.
fn
(),
},
},
});
describe
(
'
set function
'
,
()
=>
{
it
(
'
invokes $store.dispatch
'
,
()
=>
{
const
context
=
shallowMount
(
createDummy
(),
{
mocks
});
context
.
vm
.
baz
=
'
a
'
;
expect
(
context
.
vm
.
$store
.
dispatch
).
toHaveBeenCalledWith
(
'
bar
'
,
{
baz
:
'
a
'
});
});
it
(
'
get function returns $store.state[root][key]
'
,
()
=>
{
const
context
=
shallowMount
(
dummyComponent
,
{
mocks
:
{
$store
:
{
state
:
{
foo
:
{
baz
:
1
,
},
},
},
},
it
(
'
uses updateFn in list object mode if updateFn exists
'
,
()
=>
{
const
context
=
shallowMount
(
createDummy
([[{
key
:
'
foo
'
,
updateFn
:
'
baz
'
}]]),
{
mocks
});
context
.
vm
.
foo
=
'
b
'
;
expect
(
context
.
vm
.
$store
.
dispatch
).
toHaveBeenCalledWith
(
'
baz
'
,
{
foo
:
'
b
'
});
});
it
(
'
in list object mode defaults to defaultUpdateFn if updateFn do not exists
'
,
()
=>
{
const
context
=
shallowMount
(
createDummy
([[{
key
:
'
foo
'
}],
'
defaultFn
'
]),
{
mocks
});
context
.
vm
.
foo
=
'
c
'
;
expect
(
context
.
vm
.
$store
.
dispatch
).
toHaveBeenCalledWith
(
'
defaultFn
'
,
{
foo
:
'
c
'
});
});
});
describe
(
'
get function
'
,
()
=>
{
it
(
'
if root is set returns $store.state[root][key]
'
,
()
=>
{
const
context
=
shallowMount
(
createDummy
(),
{
mocks
});
expect
(
context
.
vm
.
baz
).
toBe
(
mocks
.
$store
.
state
.
foo
.
baz
);
});
it
(
'
if root is not set returns $store.state[key]
'
,
()
=>
{
const
context
=
shallowMount
(
createDummy
([[
'
baz
'
],
'
bar
'
]),
{
mocks
});
expect
(
context
.
vm
.
baz
).
toBe
(
mocks
.
$store
.
state
.
baz
);
});
it
(
'
when using getters it invoke the appropriate getter
'
,
()
=>
{
const
context
=
shallowMount
(
createDummy
([[{
getter
:
'
getBaz
'
,
key
:
'
baz
'
}]]),
{
mocks
});
expect
(
context
.
vm
.
baz
).
toBe
(
mocks
.
$store
.
getters
.
getBaz
);
});
expect
(
context
.
vm
.
baz
).
toBe
(
1
);
});
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment