-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enable markdown for content, header and label in annotation point
* enable markdown formating for content in annotate point * add slot for header and label in annotation point * add documentation on using markdown in content label and header * add functional test * add test cases for annotation
- Loading branch information
1 parent
31d00dc
commit 58fbbd0
Showing
11 changed files
with
761 additions
and
41 deletions.
There are no files selected for viewing
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
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
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
2 changes: 1 addition & 1 deletion
2
packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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
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,80 @@ | ||
| import { mount } from '@vue/test-utils'; | ||
| import { Dropdown } from 'floating-vue'; | ||
| import Annotation from '../annotations/Annotate.vue'; | ||
| import AnnotationPoint from '../annotations/AnnotatePoint.vue'; | ||
|
|
||
| const DEFAULT_STUBS = { | ||
| 'a-point': AnnotationPoint, | ||
| 'v-popover': Dropdown, | ||
| }; | ||
|
|
||
| const ANNOTATION_POINTS = ` | ||
| <a-point x="25%" y="25%" content="25% from the left and 25% from the top" /> | ||
| <a-point x="50%" y="25%" content="50% from the left and 25% from the top" size="60"/> | ||
| <a-point x="75%" y="25%" content="75% from the left and 25% from the top" header="This has a header"/> | ||
| <a-point x="33%" y="50%" content="33% from the left and 50% from the top" color="red"/> | ||
| <a-point x="66%" y="50%" content="66% from the left and 50% from the top" opacity="0.7"/> | ||
| <a-point x="25%" y="75%" content="25% from the left and 75% from the top" label="1"/> | ||
| <a-point x="50%" y="75%" content="50% from the left and 75% from the top" | ||
| textColor="white" color="black" label="2" opacity="1"/> | ||
| <a-point x="75%" y="75%" content="75% from the left and 75% from the top" fontSize="30" label="3"/> | ||
| `; | ||
|
|
||
| const CUSTOMISED_ANNOTATION_POINTS = ` | ||
| <a-point x="25%" y="25%" content="25% from the left and 25% from the top"> | ||
| <div style="color:red">Hi</div> | ||
| </a-point> | ||
| <a-point x="75%" y="75%" content="75% from the left and 75% from the top"> | ||
| <span class="badge bg-primary">Primary</span> | ||
| </a-point> | ||
| `; | ||
|
|
||
| const MARKDOWN_ANNOTATION_POINTS = ` | ||
| <a-point x="25%" y="25%" content="[link](https://markbind.org/userGuide/gettingStarted.html)" /> | ||
| <a-point x="50%" y="50%" header="### Header" /> | ||
| <a-point x="75%" y="75%" label=":rocket:" /> | ||
| `; | ||
|
|
||
| describe('Annotation', () => { | ||
| test('with different visual annotation points', async () => { | ||
| const wrapper = mount(Annotation, { | ||
| propsData: { | ||
| src: './annotateSampleImage.png', | ||
| }, | ||
| slots: { | ||
| default: ANNOTATION_POINTS, | ||
| }, | ||
| stubs: DEFAULT_STUBS, | ||
| }); | ||
| await wrapper.vm.$nextTick(); | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('with customised annotation points', async () => { | ||
| const wrapper = mount(Annotation, { | ||
| propsData: { | ||
| src: './annotateSampleImage.png', | ||
| }, | ||
| slots: { | ||
| default: CUSTOMISED_ANNOTATION_POINTS, | ||
| }, | ||
| stubs: DEFAULT_STUBS, | ||
| }); | ||
| await wrapper.vm.$nextTick(); | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('with markdown in header, content and label', async () => { | ||
| const wrapper = mount(Annotation, { | ||
| propsData: { | ||
| src: './annotateSampleImage.png', | ||
| }, | ||
| slots: { | ||
| default: MARKDOWN_ANNOTATION_POINTS, | ||
| }, | ||
| stubs: DEFAULT_STUBS, | ||
| }); | ||
| await wrapper.vm.$nextTick(); | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.