Support for Functional Components by candyapplecorn · Pull Request #50 · vire/jest-vue-preprocessor

candyapplecorn · 2018-03-09T07:14:41Z

Please check if the PR fulfills these requirements

[x ] The commit message follows our guidelines: CONTRIBUTING.md
[ x] There are no linting errors and code is properly formatted (your run before push yarn lint)
[ x] Tests for the changes have been added (for bug fixes / features)
[ x] Docs have been added / updated (for bug fixes / features)

I wrote pretty descriptive comments so that should count as docs right?

What kind of change does this PR introduce? (check one with "x")

[ x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Other... Please describe:

What is the current behavior? (You can also link to an open issue here)
functional components aren't supported; jest-vue-preprocessor would throw an error. This would break any tests that involved a functional component. So automated build systems would reject any builds that have tests for code that has functional components, even though the functional components work just fine for every other use (like rendering them on a webpage).

What is the new behavior?
functional components are semi-supported. Error 'no script available to transform' is no longer thrown. HOWEVER, the return value of Vue.compile does NOT have an $el.querySelector. This is a big problem as it makes it very hard to actually test functional components.

I wrote a test in my company's codebase for a functional component and it involved recursively delving through its childrens' vNode lists and piecing their text keys together... It's nasty.

The test I've added for this PR specifically expects there to NOT be a querySelector on $el. Hopefully in the future this test will fail, which means functional components will have gained more support.

Does this PR introduce a breaking change? (check one with "x")

[ ] Yes
[x ] No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

If a component is functional and does not have a script tag, do not try to parse the non-existent script tag.

doesn't seem to be doing its job

so have to console.log json and then copy to local for testing...

don't edit in vim editor its bad mmkay

gimme back the last 4 minutes of my life

IT WAS AN OBJECT NOT A STRING

cuz the package I forked from seems to like that kinda style ;)

codecov-io · 2018-03-09T07:20:18Z

Codecov Report

Merging #50 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master    #50   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           2      2           
  Lines           4      4           
=====================================
  Hits            4      4

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1df50d7...3b09971. Read the comment docs.

vire · 2018-03-09T20:21:51Z

@candyapplecorn thank you for your contrib, I see it's a small change, but could you introduce a test pls for this particular code you've added?

Otherwise LGTM

candyapplecorn · 2018-03-10T19:51:22Z

Sure, I will add a test today.
just found out what LGTM means Neat, still will add a test though.

removed newlines no breaking changes

a test documenting Vue's inability to cope with functional components. throws a warning every time Vue tries to mount one. $el is not defined. breaking changes: none, but in the future $el should be defined, as it can't be used for testing if it's undefined

…reprocessor

candyapplecorn · 2018-03-11T00:04:38Z

Well, wow, what do you know. Stuff behaves differently on my local machine than on travis-ci.
This puts me in a conundrum.
Either I expect $el.querySelector not to be defined and my tests pass locally, or, I expect $el.querySelector to be defined and pass tests on codeship.

test behaves differently on travis-ci than on my local machine, so now there is a test to document that breaking changes none

tried to use typeof, decided to use casting no breaking changes

context is needed for mounting functional components but not as an option for a render function no breaking changes

was passing an expression not a function to onClick handler no breaking changes

@click

1. need to pass props in context object to Vue.compile 2. need '@click="props.onClick('stuff')" VS '@click="() => props.onClick('stuff')" No breaking changes

can't reproduce $el.querySelector being defined locally, yet on travis-ci it's defined. Without it being defined I can't debugger and figure out what the mock function isn't being called. Breaking changes: none; objeys all test criteria except for testing that mockFn was called

This reverts commit c0c0590.

vire · 2018-03-13T22:20:35Z

Sry for prematurely merging this PR, I haven't tried out on my local machine. I assumed that you're only trying to check if the component is a functional component, but there's something more going on...

pls don't use if-else without braces, it can produce side-effects and headache with debugging
with functional components the test was failing because you were accessing props which is kinda undefined in the template or I don't exactly know the API (haven't checked)

I'll try look into this again in couple of days

* Revert "chore(jest): Remove `mapCoverage` from jest settings (#56)" This reverts commit 06008e1. * Revert "ci(travis): Remove yarn installation on travis (#54)" This reverts commit df9d528. * Revert "chore(node): Update node engines in package.json to 8.9 (#53)" This reverts commit 75d5f37. * Revert "Support for Functional Components (#50)" This reverts commit c0c0590.

candyapplecorn added 11 commits March 8, 2018 21:10

Added a check for functional components

48f1535

If a component is functional and does not have a script tag, do not try to parse the non-existent script tag.

Update index.js

7d78108

updating isafunctionalcomponent

0ff1abb

doesn't seem to be doing its job

can't reproduce on local

bcd6776

so have to console.log json and then copy to local for testing...

syntax error

162e008

don't edit in vim editor its bad mmkay

object not Object

6b3aabe

gimme back the last 4 minutes of my life

boom goes the dynamite

d4a1ef3

IT WAS AN OBJECT NOT A STRING

sexy es6 arrow func

bd8ed32

cuz the package I forked from seems to like that kinda style ;)

sanity check

1ca3f6d

need sleep

e84b604

Update index.js

6b69b09

joseph burger added 3 commits March 10, 2018 12:38

style: newlines

be525bc

removed newlines no breaking changes

Merge branch 'master' of https://github.com/candyapplecorn/jest-vue-p…

680879a

…reprocessor

joseph burger added 6 commits March 10, 2018 16:07

fix(test): behaves differently locally

0f04377

test behaves differently on travis-ci than on my local machine, so now there is a test to document that breaking changes none

fix(test): typeof didn't work

92a69ad

tried to use typeof, decided to use casting no breaking changes

fix(testing): removed context

06de2cb

context is needed for mounting functional components but not as an option for a render function no breaking changes

fix(testing): iie -> function

f8e8ae4

was passing an expression not a function to onClick handler no breaking changes

fix(testing): properly call props.onClick

83b653a

1. need to pass props in context object to Vue.compile 2. need '@click="props.onClick('stuff')" VS '@click="() => props.onClick('stuff')" No breaking changes

vire merged commit c0c0590 into vire:master Mar 13, 2018

vire added a commit that referenced this pull request Mar 13, 2018

Revert "Support for Functional Components (#50)"

c2679f7

This reverts commit c0c0590.

vire mentioned this pull request Mar 13, 2018

Revert "Support for Functional Components" #57

Merged

dependabot-preview bot mentioned this pull request Mar 15, 2018

Bump jest-vue-preprocessor from 1.1.0 to 1.4.0 Kocal/jsdoc-vuejs#32

Closed

dependabot-preview bot mentioned this pull request Mar 20, 2018

Bump jest-vue-preprocessor from 1.3.1 to 1.4.0 Yproximite/better-vue-input-tag#35

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for Functional Components#50

Support for Functional Components#50
vire merged 20 commits intovire:masterfrom
candyapplecorn:master

candyapplecorn commented Mar 9, 2018 •

edited

Loading

Uh oh!

codecov-io commented Mar 9, 2018 •

edited

Loading

Uh oh!

vire commented Mar 9, 2018

Uh oh!

candyapplecorn commented Mar 10, 2018 •

edited

Loading

Uh oh!

candyapplecorn commented Mar 11, 2018

Uh oh!

vire commented Mar 13, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

candyapplecorn commented Mar 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-io commented Mar 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

vire commented Mar 9, 2018

Uh oh!

candyapplecorn commented Mar 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

candyapplecorn commented Mar 11, 2018

Uh oh!

vire commented Mar 13, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

candyapplecorn commented Mar 9, 2018 •

edited

Loading

codecov-io commented Mar 9, 2018 •

edited

Loading

candyapplecorn commented Mar 10, 2018 •

edited

Loading