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" +
    "The fearful passage of their death-mark'd love,\n&q…

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' }] })
awaitwrapper.vm.$store.dispatch('currentUser/getItem')
======================
test('retrieve steps statuses from api when editable = true', done=> { expect(store.state).toHaveProperty('stepStatuses') constwrapper = mount(Component, { propsData: { uuid:'!=currentUser', step: { status: { id:'1', name:'On hold' }, due_date:'12-31-2020' } }, localVue, store }) constvalueOfOneOfStatuses = 'testing step statuses' mock .onGet('api/coaching/v1/step-statuses') .reply(200, { data: [ { id:1, name:'On hold' }, { id:2, name:'Get start' }, { id:4, name:valueOfOneOfS…

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.

vue test utils - setTimeout()

awaitwrapper.vm.$nextTick() /* timeout 2750, will trigger save after update and not cancel by user */ expect(wrapper.vm.action).toBe('update') awaitwrapper.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 breakMinor (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/

update client project after UI release

1. create new release 1.9 after PR has done

//under arbor project:
2. update package.json, composer.json with the new version of coaching-ui, coaching-ui-api 1.9

3. yarn install

//update individual package
4. composer update <name-of-the-package>

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

need test default props  without passing any props

test('required props', () => {
constwrapper = 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() constinstructions = 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"')

{ status: this.step.status, dueDate: this.step.due_date }

this does not work if you are using an arrow function for assigning your data:

data: () => ({ somevar: this.messageId // undefined }), Because this will not point to the component. Instead, use a plain function

data: function() { return { somevar: this.messageId } },or ES6:data() { return { somevar: this.messageId } }

淡淡的清香

昨晚很特别,忙碌了一天,忙完了孩子们,哥哥陪我,过了一个温馨的夜晚。

原本打算去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 */exportdefault { computed: {fullName () {this.firstName='lorem'// <- side effectreturn`${this.firstName}${this.lastName}` },reversedArray () {returnthis.array.reverse() // <- side effect - orginal array is being mutated } }}</script>should be this way:return [...this.array].reverse()

Atomic Design Methodology - BEM

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') })

nvm - to run different version of node

node 10 is good for snapshot testing, not node 12

https://github.com/nvm-sh/nvm

 yarn test --testPathPattern=".*UsersTree.test.js"

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 provides you a wonderful development environment without requiring you to install PHP…

material UI - responsive

<HiddenmdDown> <strong>Hi, {profile && profile.firstName}</strong> </Hidden> <PersonclassName={classes.icons}/> <HiddenmdUpimplementation='css'> <pclassName={classes.linkText}>{profile && profile.firstName}</p> </Hidden>

use hooks - useTheme in Material UI

contactPage.js
import { useTheme } from'@material-ui/core/styles' constuseStyles = makeStyles(styles)
exportdefaultfunctionContactList () { consttheme = useTheme() ... <TableCell> <strongstyle={{ 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'
consttheme = createMuiTheme({ palette: { primary:blue, secondary:orange }, status: { danger:red } }) ...
ReactDOM.render( <ApolloProviderclient={client}> <StateProvider> <ThemeProvidertheme={theme}> <Routerhistory={hist}> <Switch> <PublicRouteexactpath='/login'component={LoginPage}/> <PrivateRoutepath='/admin'component={Admin}/> <Redirectfrom='/'to='/admin/dashboard'/> </Switch> </Router> </ThemeProvider> </StateProvider> </ApolloP…

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 principleI - Interface segregation principleD - Dependency inversion principle

formik checkbox issue - array: ['yes'] or string 'yes'

We are using Formik for form entry on react web and mobile apps. Issue with Formik checkbox was
input-field.js
mycheck.js
product.dialog.js