Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Interactions updates : custom label on Dropdown, closeHandler on Notification, clickHandler on Tile#4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
nicholaslee119 merged 10 commits intoCarvueJS:masterfromValentinViennot:master
Jan 19, 2019
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 47 additions & 4 deletionscomponents/CaCodeSnippet/CaCodeSnippet.spec.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,57 @@
import { shallow } from 'vue-test-utils';
import CaCodeSnippet from './CaCodeSnippet.vue';

jest.useFakeTimers();

describe('CaCodeSnippet', () => {
let wrapper;

beforeEach(() => {
wrapper = shallow(CaCodeSnippet);
});

test('is a Vue instance', () => {
const wrapper = shallow(CaCodeSnippet);
expect(wrapper.isVueInstance()).toBeTruthy();
});

test('Mathes snapshot', () => {
const wrapper = shallow(CaCodeSnippet);
expect(wrapper.html()).toMatchSnapshot()
expect(wrapper.html()).toMatchSnapshot();
});

describe('when clicked on copy button', () => {
beforeEach(() => {
document.createRange = () => ({
selectNode: () => {},
});
window.getSelection = () => ({
addRange: () => {},
removeAllRanges: () => {},
});
});

describe('if copy succeeds', () => {
beforeEach(() => {
document.execCommand = jest.fn(() => true);
wrapper.find('button').trigger('click');
});

it('should call the copy api', () => {
expect(document.execCommand).toHaveBeenCalledWith('copy');
});

it('should show the feedback', () => {
expect(wrapper.vm.$data.showFeedback).toBe(true);
});

describe('after 2 seconds', () => {
beforeEach(() => {
jest.advanceTimersByTime(2000);
});

it('should hide the feedback', () => {
expect(wrapper.vm.$data.showFeedback).toBe(false);
});
});
});
});
})
});
41 changes: 37 additions & 4 deletionscomponents/CaCodeSnippet/CaCodeSnippet.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,21 +2,30 @@
<div class="bx--snippet" :class="dynamicClass">
<div class="bx--snippet-container">
<code>
<pre>
<pre class="code-snippet-code-content">
<slot>
</slot>
</pre>
</code>
</div>
<button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
<button
@click="copyCode()"
data-copy-btn
class="bx--snippet-button"
aria-label="Copy code"
tabindex="0"
>
<svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
<path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
<path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
</svg>
<div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
<div
:class="{'bx--btn--copy__feedback--displayed': showFeedback}"
class="bx--btn--copy__feedback"
data-feedback="Copied!"
></div>
</button>
</div>

</template>

<script>
Expand All@@ -28,6 +37,9 @@ export default {
default: 'code',
},
},
data: () => ({
showFeedback: false,
}),
computed: {
dynamicClass() {
return {
Expand All@@ -36,6 +48,27 @@ export default {
};
},
},
methods: {
copyCode() {
const emailLink = document.querySelector('.code-snippet-code-content');
const range = document.createRange();
range.selectNode(emailLink);
window.getSelection().addRange(range);

try {
// Now that we've selected the anchor text, execute the copy command
if (document.execCommand('copy')) {
this.$data.showFeedback = true;
setTimeout(() => {
this.$data.showFeedback = false;
}, 2000);
}
} catch (err) {
//
}
window.getSelection().removeAllRanges();
},
},
};
</script>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

exports[`CaCodeSnippet Mathes snapshot 1`] = `
<div class="bx--snippet bx--snippet--code">
<div class="bx--snippet-container"><code><pre>
<div class="bx--snippet-container"><code><pre class="code-snippet-code-content">

</pre></code></div>
<button data-copy-btn="" aria-label="Copy code" tabindex="0" class="bx--snippet-button">
Expand Down
11 changes: 9 additions & 2 deletionscomponents/CaDropdown/CaDropdown.spec.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,18 @@ import CaDropdownItem from './CaDropdownItem.vue';

describe('CaDropdown', () => {
test('is a Vue instance', () => {
const wrapper = shallow(CaDropdown, {
const wrapper = shallow(CaDropdown, {
slots: {
default: CaDropdownItem
}
});
expect(wrapper.isVueInstance()).toBeTruthy();
});
})

test('match snapshot with custom label', () => {
const wrapper = shallow(CaDropdown, {
defaultText: 'Hello World'
});
expect(wrapper).toMatchSnapshot();
});
});
6 changes: 5 additions & 1 deletioncomponents/CaDropdown/CaDropdown.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
<template>
<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">Dropdown label</li>
<li class="bx--dropdown-text">{{defaultText}}</li>
<svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
Expand All@@ -19,6 +19,10 @@ export default {
name: 'ca-dropdown',
props: {
value: null,
defaultText: {
type: String,
default: 'Dropdown label',
},
},
data() {
return {
Expand Down
Loading

[8]ページ先頭

©2009-2025 Movatter.jp