Skip to main content

Posts

Showing posts from February, 2020

jsPDF for VUE

http://raw.githack.com/MrRio/jsPDF/master/ /*  * Let's demonstrate string splitting with the first page of Shakespeare's Romeo and Juliet!  * We'll use a 8.5 x 11 inch sheet, measuring everything in inches.  */ var pageWidth = 8.5,   lineHeight = 1.2,   margin = 0.5,   maxLineWidth = pageWidth - margin * 2,   fontSize = 24,   ptsPerInch = 72,   oneLineHeight = (fontSize * lineHeight) / ptsPerInch,   text =     "Two households, both alike in dignity,\n" +     "In fair Verona, where we lay our scene,\n" +     "From ancient grudge break to new mutiny,\n" +     "Where civil blood makes civil hands unclean.\n" +     "From forth the fatal loins of these two foes\n" +     "A pair of star-cross'd lovers take their life;\n" +     "Whole misadventured piteous overthrows\n" +     "Do with their death bury their parents' strife.\n" +     "...

mock.onGet before dispatch

mock . onGet ( 'api/coaching/v1/currentUser' ) . reply ( 200 , { data: FIXTURE_CURRENT_USER }) . onAny () . reply ( config => { console . warn ( 'No mock match for ' + config . url , config ) return [ 200 , { uuid: 'no match' }] }) await wrapper . vm . $store . dispatch ( 'currentUser/getItem' ) ====================== test ( 'retrieve steps statuses from api when editable = true' , done => { expect ( store . state ). toHaveProperty ( 'stepStatuses' ) const wrapper = mount ( Component , { propsData: { uuid: '!=currentUser' , step: { status: { id: '1' , name: 'On hold' }, due_date: '12-31-2020' } }, localVue , ...

window.URL.createObjectURL is not (yet) available in jest-dom - testing scenario

Since  window.URL.createObjectURL  is not (yet) available in jest-dom, you need to provide a mock implementation for it. Don't forget to reset the mock implementation after each test. describe ( "your test suite" , () => { window . URL . createObjectURL = jest . fn (); afterEach (() => { window . URL . createObjectURL . mockReset (); }); it ( "your test case" , () => { expect ( true ). toBeTruthy (); }); });

vue test utils - setTimeout()

await wrapper . vm . $nextTick () /* timeout 2750, will trigger save after update and not cancel by user */ expect ( wrapper . vm . action ). toBe ( 'update' ) await wrapper . vm . $nextTick () setTimeout (() => { expect ( wrapper . vm . action ). toBe ( 'save' ) }, 2750 )

Semantic Versioning - why need yarn.lock

When you have a version such as  v1.2.3 , it’s broken into three parts: Major (1.x.x)  –  Changes that may cause user code to break Minor (x.2.x)  –  Changes that add new features (but should not break user code) Patch (x.x.3)  –  Changes that are fixing bugs in previous versions (but do not add new features and should not break user code) https://classic.yarnpkg.com/blog/2016/11/24/lockfiles-for-all/

vue test: func() = 0% html().toContain

need test default props  without passing any props test ( 'required props' , () => { const wrapper = mount ( Component ) expect ( wrapper . props (). backgroundColor ). toBeTruthy () expect ( wrapper . props (). step ). toBeTruthy () expect ( wrapper . props (). assignedTo ). toBeTruthy () expect ( wrapper . props (). meetWith ). toBeTruthy () expect ( wrapper . props (). statuses ). toBeTruthy () expect ( wrapper . props (). submittable ). toBeTruthy () expect ( wrapper . props (). editable ). toBeTruthy () expect ( wrapper . props (). description ). toBeTruthy () const instructions = wrapper . props (). instructions expect ( instructions ). toBeTruthy () instructions . forEach ( e => { expect ( e . title ). toBeTruthy () expect ( e . type ). toBeTruthy () }) expect ( wrapper . html ()). toContain ( '<v-treeview-stub active="uuid-4"' )

淡淡的清香

昨晚很特别,忙碌了一天,忙完了孩子们,哥哥陪我,过了一个温馨的夜晚。 原本打算去Orange的,临时起意,何必舍近求远呢?于是很随性的驾车出来,来到离家不远的海边小镇。和喜欢的人在一起,哪里都是最好的。一路上没有喧闹,夜色掩映下是南加州典型的民居场景,大家都在安安静静的享受周末,万家灯火因为散在各处,没有城市的喧嚣浮躁感,只有宁静和安逸。 偶尔侧脸看那张坚毅的面孔,心里很是甜蜜蜜的,平时为了孩子为了工作,尽心尽责地忙碌的他,在特别的日子里花时间陪我出来,我的心里别提有多温暖。 “这家小镇上有一座早期的Mission Church。一会儿指给你看。”  熟悉的磁性嗓音从旁边飘过来。很快我们就来到了小镇中心,如同其他的美国小镇一样,镇中心也不是很大,夜色下,可以看到7,8家餐馆还多少显出热闹的气氛,街上三三俩俩走着的人们,很多看得出来都是情侣,竟然有年轻的小姑娘很彪悍的穿着露膝裸肩的白色小裙子,替她冷了一下子,也许平常周末的夜晚就是这样吧,也或许是因为今晚是那个特别的日子。“就是那里!”顺着哥哥的手指,三岔路口那里座南朝北,是一套朴实的西班牙早期移民风格的建筑,正面印着Mission San Juan Capistrano 。夜色下可以看到这个教堂仿佛是中国的四合院,四平八稳的安座在城镇的一隅,脑海里浮现出当年移民们驾着大车,骑在马背上游牧的画面,哪天白天来一定好好的看看。 很快停好车,漫步在小镇的街头,早春的夜晚还是很凉的,哥哥牵着我来到一家很有特色的Starbucks,宽敞高挑的大厅里仿佛火车站的装饰,可以想象如果在早晨上班的时间,这里会是怎样的忙碌,也许会有很多去洛杉矶或是圣迪亚哥上班的人在这里买上热乎乎的咖啡,再跳上火车开始忙碌的一天吧。 很快我们两个手里拿上了哥哥点的热腾腾的拿铁,身上暖和起来,来吧,四处转转。 “视察了”一家看来很是热闹的电影院,跑到露天阳台上看到火车站不远有家餐厅看着炉火熊熊的好像很暖和热闹。跑过去一看,仿佛感觉有点儿像拍电影布景一样的,太多故弄玄虚的两两两两情侣造势。我知道哥哥他喜欢自在安静的地方,于是我们来到不远处的一家叫Rancho Capistrano Winery的地方,庭院里温暖的火炉旁,一位吉他手轻轻地吟唱。我们就在不远的地方坐下来,安安静静的地陪伴着彼此,在音乐声中享受着这份美好的时光。

link UI to project page

in UI folder: yarn link in arbor folder: yarn link "@freshinup/coaching-ui" yarn watch-poll in UI : create page, snapshot test bump version, change log in client : arbor, could write a test, another snapshot shallow mount only couching UI test page template - demo page UI test wiki - test smart component

formatter for vue+eslint

https://alligator.io/vuejs/eslint-vue-vetur/ using eslint as default formatter instead of prettier bed code: < script > /* ✗ BAD */ export default { computed : { fullName () { this . firstName = ' lorem ' // <- side effect return ` ${ this . firstName } ${ this . lastName } ` }, reversedArray () { return this . array . reverse () // <- side effect - orginal array is being mutated } } } </ script > should be this way: return [... this . array] . reverse ()

jest - run test on individual file - and what need test to Vue file - test vue - vue-test-utils.vuejs.org

test vue: https://vue-test-utils.vuejs.org/api/wrapper/#isempty yarn test --testPathPattern=".*UsersTree.test.js" snapshot: https://jestjs.io/docs/en/snapshot-testing For VUE: https://vue-test-utils.vuejs.org/guides/#getting-started 1. Visuals expect(wrapper.element).toMatchSnapshot() expect(wrapper.html()).toContain('primary--text') 2. Computed expect(wrapper.vm.items[0]).toHaveProperty('name', 'FreshinUp') 3. method const wrapper = shallowMount(Component, { propsData: { } }) wrapper.setData({ }) await wrapper.vm.$nextTick() expect(wrapper.html()).toContain('xxx') })

install Laravel Homestead - upgrade php - install ext-json

$ git clone git@github.com:fre*xxxxxx.git $ cd xxxx $ composer install $ php artisan arbor:install --dev composer install https://getcomposer.org/download/ https://www.hostinger.com/tutorials/how-to-install-composer https://github.com/settings/tokens Adding a new SSH key to your GitHub account https://help.github.com/en/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account https://github.com/settings/keys yarn global add @vue/cli echo 'export PATH="$(yarn global bin):$PATH"   ' >> ~/.bash_profile source ~/.bash_profile upgrade php: brew install php@7.3 echo 'export PATH="/usr/local/opt/php@7.3/bin:$PATH"' >> ~/.bash_profile echo 'export PATH="/usr/local/opt/php@7.3/sbin:$PATH"' >> ~/.bash_profile source ~/.bash_profile php -v https://laravel.com/docs/6.x/homestead Laravel Homestead is an official, pre-packaged Vagrant box that p...

material UI - responsive

< Hidden mdDown > < strong > Hi, { profile && profile . firstName } </ strong > </ Hidden > < Person className = { classes . icons } /> < Hidden mdUp implementation = 'css' > < p className = { classes . linkText } > { profile && profile . firstName } </ p > </ Hidden >

use hooks - useTheme in Material UI

contactPage.js import { useTheme } from '@material-ui/core/styles' const useStyles = makeStyles ( styles ) export default function ContactList () { const theme = useTheme () ... < TableCell > < strong style = { { color: theme . palette . primary . main } } > { name } </ strong > index.js import { ThemeProvider } from '@material-ui/styles' import { createMuiTheme } from '@material-ui/core/styles' import { green , orange , red , blue } from '@material-ui/core/colors' const theme = createMuiTheme ({ palette: { primary: blue , secondary: orange }, status: { danger: red } }) ... ReactDOM . render ( < ApolloProvider client = { client } > < StateProvider > < ThemeProvider theme = { theme } > < Router history = { hist } > < Sw...

SOLID Principles

SOLID is an acronym for 5 important design principles when doing OOP (Object Oriented Programming). S - Single responsibility principle every module or class should have responsibility over a single part of the functionality provided by the software. O — Open/closed principle software entities (classes, modules, functions, etc.) should be open for extensions, but closed for modification. L - Liskov substitution principle I - Interface segregation principle D - Dependency inversion principle