Skip to content
GitLab
Next
Menu
Why GitLab
Pricing
Contact Sales
Explore
Why GitLab
Pricing
Contact Sales
Explore
Sign in
Get free trial
Primary navigation
Search or go to…
Project
GitLab
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Iterations
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Privacy statement
Keyboard shortcuts
?
What's new
4
Snippets
Groups
Projects
Show more breadcrumbs
GitLab.org
GitLab
Commits
22647234
Commit
22647234
authored
1 year ago
by
Miguel Rincon
Browse files
Options
Downloads
Patches
Plain Diff
Remove some calls of setData in Vue tests
parent
08ae49de
No related branches found
No related tags found
2 merge requests
!144312
Change service start (cut-off) date for code suggestions to March 15th
,
!143348
Remove some calls of setData in Vue tests
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
spec/frontend/design_management/components/design_presentation_spec.js
+157
-170
157 additions, 170 deletions
.../design_management/components/design_presentation_spec.js
with
157 additions
and
170 deletions
spec/frontend/design_management/components/design_presentation_spec.js
+
157
−
170
View file @
22647234
...
...
@@ -2,52 +2,40 @@ import { shallowMount } from '@vue/test-utils';
import
{
nextTick
}
from
'
vue
'
;
import
DesignOverlay
from
'
~/design_management/components/design_overlay.vue
'
;
import
DesignPresentation
from
'
~/design_management/components/design_presentation.vue
'
;
import
DesignImage
from
'
~/design_management/components/image.vue
'
;
const
mockOverlayData
=
{
overlayDimensions
:
{
width
:
100
,
height
:
100
,
},
overlayPosition
:
{
top
:
'
0
'
,
left
:
'
0
'
,
},
const
mockOverlayDimensions
=
{
width
:
100
,
height
:
100
,
};
describe
(
'
Design management design presentation component
'
,
()
=>
{
let
wrapper
;
function
createComponent
(
{
image
,
imageName
,
discussions
=
[],
isAnnotating
=
false
,
resolvedDiscussionsExpanded
=
false
,
}
=
{},
data
=
{},
stubs
=
{},
)
{
const
findDesignImage
=
()
=>
wrapper
.
findComponent
(
DesignImage
);
const
findDesignOverlay
=
()
=>
wrapper
.
findComponent
(
DesignOverlay
);
const
findOverlayCommentButton
=
()
=>
wrapper
.
find
(
'
[data-testid="design-image-button"]
'
);
function
createComponent
(
props
=
{},
initialOverlayDimensions
=
mockOverlayDimensions
,
options
)
{
wrapper
=
shallowMount
(
DesignPresentation
,
{
propsData
:
{
image
,
imageName
,
discussions
,
isAnnotating
,
resolvedDiscussionsExpanded
,
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
resolvedDiscussionsExpanded
:
false
,
discussions
:
[],
isLoading
:
false
,
...
props
,
},
stub
s
,
...
option
s
,
});
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper
.
setData
(
data
);
if
(
initialOverlayDimensions
)
{
findDesignImage
().
vm
.
$emit
(
'
resize
'
,
initialOverlayDimensions
);
}
wrapper
.
element
.
scrollTo
=
jest
.
fn
();
}
const
findOverlayCommentButton
=
()
=>
wrapper
.
find
(
'
[data-testid="design-image-button"]
'
);
/**
* Spy on $refs and mock given values
* @param {Object} viewportDimensions {width, height}
...
...
@@ -114,141 +102,131 @@ describe('Design management design presentation component', () => {
});
it
(
'
renders image and overlay when image provided
'
,
async
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
await
nextTick
();
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
it
(
'
renders empty state when no image provided
'
,
async
()
=>
{
createComponent
();
createComponent
(
{
image
:
''
,
imageName
:
''
,
},
null
,
);
await
nextTick
();
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
it
(
'
openCommentForm event emits correct data
'
,
async
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
wrapper
.
vm
.
openCommentForm
({
x
:
1
,
y
:
1
});
await
nextTick
();
expect
(
wrapper
.
emitted
(
'
openCommentForm
'
)).
toEqual
([
[{
...
mockOverlayD
ata
.
overlayD
imensions
,
x
:
1
,
y
:
1
}],
[{
...
mockOverlayDimensions
,
x
:
1
,
y
:
1
}],
]);
});
describe
(
'
currentCommentForm
'
,
()
=>
{
it
(
'
is null when isAnnotating is false
'
,
async
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
await
nextTick
();
expect
(
wrapper
.
vm
.
currentCommentForm
).
toBeNull
();
expect
(
findDesignOverlay
().
props
(
'
currentCommentForm
'
)
).
toBeNull
();
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
it
(
'
is null when isAnnotating is true but annotation position is falsey
'
,
async
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
isAnnotating
:
true
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
isAnnotating
:
true
,
});
await
nextTick
();
expect
(
wrapper
.
vm
.
currentCommentForm
).
toBeNull
();
expect
(
findDesignOverlay
().
props
(
'
currentCommentForm
'
)
).
toBeNull
();
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
it
(
'
is equal to current annotation position when isAnnotating is true
'
,
async
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
isAnnotating
:
true
,
},
{
...
mockOverlayData
,
currentAnnotationPosition
:
{
x
:
1
,
y
:
1
,
width
:
100
,
height
:
100
,
},
},
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
isAnnotating
:
true
,
});
await
nextTick
();
findDesignOverlay
().
vm
.
$emit
(
'
openCommentForm
'
,
{
x
:
1
,
y
:
1
,
});
await
nextTick
();
expect
(
wrapper
.
vm
.
currentCommentForm
).
toEqual
({
expect
(
findDesignOverlay
().
props
(
'
currentCommentForm
'
)
).
toEqual
({
x
:
1
,
y
:
1
,
width
:
100
,
height
:
100
,
});
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
});
describe
(
'
setOverlayPosition
'
,
()
=>
{
beforeEach
(()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
});
it
(
'
sets overlay position correctly when overlay is smaller than viewport
'
,
()
=>
{
it
(
'
sets overlay position correctly when overlay is smaller than viewport
'
,
async
()
=>
{
jest
.
spyOn
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
'
offsetWidth
'
,
'
get
'
).
mockReturnValue
(
200
);
jest
.
spyOn
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
'
offsetHeight
'
,
'
get
'
).
mockReturnValue
(
200
);
wrapper
.
vm
.
setOverlayPosition
();
expect
(
wrapper
.
vm
.
overlayPosition
).
toEqual
({
left
:
`calc(50% -
${
mockOverlayData
.
overlayDimensions
.
width
/
2
}
px)`
,
top
:
`calc(50% -
${
mockOverlayData
.
overlayDimensions
.
height
/
2
}
px)`
,
await
nextTick
();
expect
(
findDesignOverlay
().
props
(
'
position
'
)).
toEqual
({
left
:
`calc(50% -
${
mockOverlayDimensions
.
width
/
2
}
px)`
,
top
:
`calc(50% -
${
mockOverlayDimensions
.
height
/
2
}
px)`
,
});
});
it
(
'
sets overlay position correctly when overlay width is larger than viewports
'
,
()
=>
{
it
(
'
sets overlay position correctly when overlay width is larger than viewports
'
,
async
()
=>
{
jest
.
spyOn
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
'
offsetWidth
'
,
'
get
'
).
mockReturnValue
(
50
);
jest
.
spyOn
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
'
offsetHeight
'
,
'
get
'
).
mockReturnValue
(
200
);
wrapper
.
vm
.
setOverlayPosition
();
expect
(
wrapper
.
vm
.
overlayPosition
).
toEqual
({
left
:
'
0
'
,
top
:
`calc(50% -
${
mockOverlayData
.
overlayDimensions
.
height
/
2
}
px)`
,
await
nextTick
();
expect
(
findDesignOverlay
().
props
(
'
position
'
)).
toEqual
({
left
:
`0`
,
top
:
`calc(50% -
${
mockOverlayDimensions
.
height
/
2
}
px)`
,
});
});
it
(
'
sets overlay position correctly when overlay height is larger than viewports
'
,
()
=>
{
it
(
'
sets overlay position correctly when overlay height is larger than viewports
'
,
async
()
=>
{
jest
.
spyOn
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
'
offsetWidth
'
,
'
get
'
).
mockReturnValue
(
200
);
jest
.
spyOn
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
'
offsetHeight
'
,
'
get
'
).
mockReturnValue
(
50
);
wrapper
.
vm
.
setOverlayPosition
();
expect
(
wrapper
.
vm
.
overlayPosition
).
toEqual
({
left
:
`calc(50% -
${
mockOverlayData
.
overlayDimensions
.
width
/
2
}
px)`
,
await
nextTick
();
expect
(
findDesignOverlay
().
props
(
'
position
'
)).
toEqual
({
left
:
`calc(50% -
${
mockOverlayDimensions
.
width
/
2
}
px)`
,
top
:
'
0
'
,
});
});
...
...
@@ -256,13 +234,10 @@ describe('Design management design presentation component', () => {
describe
(
'
getViewportCenter
'
,
()
=>
{
beforeEach
(()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
});
it
(
'
calculate center correctly with no scroll
'
,
()
=>
{
...
...
@@ -313,22 +288,21 @@ describe('Design management design presentation component', () => {
describe
(
'
scaleZoomFocalPoint
'
,
()
=>
{
it
(
'
scales focal point correctly when zooming in
'
,
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
{
...
mockOverlayData
,
zoomFocalPoint
:
{
x
:
5
,
y
:
5
,
width
:
50
,
height
:
50
,
},
},
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper
.
setData
({
zoomFocalPoint
:
{
x
:
5
,
y
:
5
,
width
:
50
,
height
:
50
,
},
});
wrapper
.
vm
.
scaleZoomFocalPoint
();
expect
(
wrapper
.
vm
.
zoomFocalPoint
).
toEqual
({
x
:
10
,
...
...
@@ -339,22 +313,21 @@ describe('Design management design presentation component', () => {
});
it
(
'
scales focal point correctly when zooming out
'
,
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
{
...
mockOverlayData
,
zoomFocalPoint
:
{
x
:
10
,
y
:
10
,
width
:
200
,
height
:
200
,
},
},
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper
.
setData
({
zoomFocalPoint
:
{
x
:
10
,
y
:
10
,
width
:
200
,
height
:
200
,
},
});
wrapper
.
vm
.
scaleZoomFocalPoint
();
expect
(
wrapper
.
vm
.
zoomFocalPoint
).
toEqual
({
x
:
5
,
...
...
@@ -367,13 +340,10 @@ describe('Design management design presentation component', () => {
describe
(
'
onImageResize
'
,
()
=>
{
beforeEach
(
async
()
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
jest
.
spyOn
(
wrapper
.
vm
,
'
shiftZoomFocalPoint
'
);
jest
.
spyOn
(
wrapper
.
vm
,
'
scaleZoomFocalPoint
'
);
...
...
@@ -402,7 +372,13 @@ describe('Design management design presentation component', () => {
${
'
height overflows
'
}
|
${
100
}
|
${
101
}
${
'
width and height overflows
'
}
|
${
200
}
|
${
200
}
`
(
'
sets lastDragPosition when design $scenario
'
,
({
width
,
height
})
=>
{
createComponent
();
createComponent
(
{
image
:
''
,
imageName
:
''
,
},
null
,
);
mockRefDimensions
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
{
width
:
100
,
height
:
100
},
...
...
@@ -410,7 +386,7 @@ describe('Design management design presentation component', () => {
);
const
newLastDragPosition
=
{
x
:
2
,
y
:
2
};
wrapper
.
vm
.
onPresentationM
ousedown
(
{
wrapper
.
trigger
(
'
m
ousedown
'
,
{
clientX
:
newLastDragPosition
.
x
,
clientY
:
newLastDragPosition
.
y
,
});
...
...
@@ -421,7 +397,18 @@ describe('Design management design presentation component', () => {
it
(
'
does not set lastDragPosition if design does not overflow
'
,
()
=>
{
const
lastDragPosition
=
{
x
:
1
,
y
:
1
};
createComponent
({},
{
lastDragPosition
});
createComponent
(
{
image
:
''
,
imageName
:
''
,
},
null
,
);
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper
.
setData
({
lastDragPosition
});
mockRefDimensions
(
wrapper
.
vm
.
$refs
.
presentationViewport
,
{
width
:
100
,
height
:
100
},
...
...
@@ -440,16 +427,21 @@ describe('Design management design presentation component', () => {
coordinates | overlayDimensions | position
${{
x
:
100
,
y
:
100
}
} |
${{
width
:
50
,
height
:
50
}
} |
${{
x
:
100
,
y
:
100
,
width
:
50
,
height
:
50
}
}
${{
x
:
100.2
,
y
:
100.5
}
} |
${{
width
:
50.6
,
height
:
50.0
}
} |
${{
x
:
100
,
y
:
101
,
width
:
51
,
height
:
50
}
}
`
(
'
returns correct annotation position
'
,
({
coordinates
,
overlayDimensions
,
position
})
=>
{
createComponent
(
undefined
,
{
overlayDimensions
:
{
width
:
overlayDimensions
.
width
,
height
:
overlayDimensions
.
height
,
},
});
`
(
'
returns correct annotation position
'
,
async
({
coordinates
,
overlayDimensions
,
position
})
=>
{
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
overlayDimensions
,
);
expect
(
wrapper
.
vm
.
getAnnotationPositon
(
coordinates
)).
toStrictEqual
(
position
);
});
await
nextTick
();
expect
(
wrapper
.
vm
.
getAnnotationPositon
(
coordinates
)).
toStrictEqual
(
position
);
},
);
});
describe
(
'
when design is overflowing
'
,
()
=>
{
...
...
@@ -459,9 +451,9 @@ describe('Design management design presentation component', () => {
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayD
ata
,
mockOverlayD
imensions
,
{
'
design-overlay
'
:
DesignOverlay
,
stubs
:
{
DesignOverlay
}
,
},
);
...
...
@@ -534,19 +526,14 @@ describe('Design management design presentation component', () => {
describe
(
'
when user is not logged in
'
,
()
=>
{
beforeEach
(()
=>
{
window
.
gon
=
{
current_user_id
:
null
};
createComponent
(
{
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
},
mockOverlayData
,
);
createComponent
({
image
:
'
test.jpg
'
,
imageName
:
'
test
'
,
});
});
it
(
'
disables commenting from design overlay
'
,
()
=>
{
expect
(
wrapper
.
findComponent
(
DesignOverlay
).
props
()).
toMatchObject
({
disableCommenting
:
true
,
});
expect
(
findDesignOverlay
().
props
(
'
disableCommenting
'
)).
toEqual
(
true
);
});
});
});
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment