Skip to content

Instantly share code, notes, and snippets.

View johnsardine's full-sized avatar

João Sardinha johnsardine

View GitHub Profile
export function nodeTreePath(element) {
const path = [];
let currentEl = element;
while (currentEl) {
path.push(currentEl);
currentEl = currentEl.parentElement;
}
return path;
}
@johnsardine
johnsardine / setup-mocks.js
Last active November 16, 2017 23:47
9 - Mock file
jest.mock('@/Api', () => require('@/ApiMock'));
@johnsardine
johnsardine / ApiMock.js
Last active November 16, 2017 23:35
8 - Fetch mock sample
export default {
fetchData() {
return Promise.then({
message: 'This is a static value',
});
},
};
@johnsardine
johnsardine / Api.js
Created November 16, 2017 23:26
8 - Fetch sample
export default {
fetchData() {
return fetch('/application-data/');
.then(function() {
return response.json();
});
},
};
@johnsardine
johnsardine / jest.config.js
Created November 16, 2017 23:10
7 - Transforms example
module.exports = {
rootDir: './webapp',
moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'node'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>src/$1',
},
mapCoverage: true,
transform: {
'^.+\\.jsx?$': 'babel-jest',
'^.*\\.(vue)$': 'jest-vue',
@johnsardine
johnsardine / jest.config.js
Last active November 16, 2017 22:59
6 - Jest config sample
module.exports = {
rootDir: './webapp',
moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'node'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>src/$1',
},
mapCoverage: true,
};
@johnsardine
johnsardine / vue-application.js
Created November 16, 2017 21:56
5 - Sharing dependencies
// Import jQuery to be used on this file
import jQuery from 'jquery';
// Expose jQuery to window to be used by
// other external scripts such as your Angular application
window.jQuery = jQuery;
@johnsardine
johnsardine / HelloSubject.vue
Created November 16, 2017 21:53
4 - Single File component
<template>
<h1>Hello {{ subject }}!</h1>
</template>
<script>
export default {
name: 'hello-subject',
props: {
subject: {
type: String,
},
@johnsardine
johnsardine / component.html
Last active November 16, 2017 21:52
4 - Simple Vue component sample
<div id="HelloSubject">
<h1>Hello {{ subject }}!</h1>
</div>
@johnsardine
johnsardine / main-application.js
Last active November 16, 2017 21:30
3 - Vue component inside Angular
function SampleAngularController($scope, $element) {
// Create mounting point
const MountingPoint = document.createElement('div');
// Place mounting point in target location
$element.appendChild(MountingPoint);
// Create Vue component
const ComponentVM = new Component({
propsData: {