afontcu ( Adrià Fontcuberta )

commit sha 5233a9a605102e85d1d918f5b3b2d0036b718e9d

npm run format

push time in 4 hours

push eventtesting-library/vue-testing-library

commit sha 9e91ef1d98c75328a59750d3f5335c375d9e6679

Update deps

push time in 4 hours

commit sha 427fd51eb91a58ec2d3edaccdc03c0acc972af16

Update README.md

push time in 5 hours

push eventvuejs/vue-test-utils-next-docs

buffpojken

commit sha e89258f3a908b65945954b778a53be2f011cda25

added reference to vm-property in api-reference

buffpojken

commit sha 429f064c8dc58fb3100e296ab0b28e1f5127e5b6

Point link to proper V3 documentation Co-authored-by: Adrià Fontcuberta <[email protected]>

commit sha 7573839458427ce9c704107a2ee2578e38bb9e2b

Merge pull request #56 from buffpojken/master Added reference to vm-property in api-reference

Added reference to vm-property in api-reference

push time in 5 hours

PR merged vuejs/vue-test-utils-next-docs

Added reference to vm-property in api-reference

Here's a very small PR adding a section on wrapper properties (more specifically vm) as mentioned in https://github.com/vuejs/vue-test-utils-next/issues/211

+6 -0

2 commit in buffpojken/vue-test-utils-next-docs/tree/master vuejs/vue-test-utils-next-docs/tree/master

0 comment

1 changed file

buffpojken

pr closed time in 5 hours

PullRequestReviewEvent

Pull request review commentvuejs/vue-test-utils-next-docs

 test('unmount', () => {   wrapper.unmount() // removed from DOM }) ```++## Wrapper properties++### `vm`++This is the ```Vue``` instance. You can access all of the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with ```wrapper.vm```. This only exists on ```VueWrapper```.

This is the ```Vue``` instance. You can access all of the [instance methods and properties of a vm](https://v3.vuejs.org/api/instance-properties.html) with ```wrapper.vm```. This only exists on ```VueWrapper```.

buffpojken

comment created time in 6 hours

PullRequestReviewEvent

issue commenttesting-library/vue-testing-library

Feature: Can provide a similar reactRender hook test library for vue？

Hi! 👋

Oh, I see, that makes sense. I assume someone might want to test Composition API functions in isolation, but that's beyond the scope of Vue Testing Lib (similar to testing hooks, which is out of scope for React Testing Lib). For the time being, though, one can render a component and test its inputs/outputs no matter the paradigm.

I'll go ahead and close this issue as there isn't much to do here :)

xiaoping027

comment created time in 6 hours

issue closedtesting-library/vue-testing-library

Feature: Can provide a similar reactRender hook test library for vue？

Can provide a similar reactRender hook test library for vue？

closed time in 6 hours

xiaoping027

Pull request review commentvuejs/vue-test-utils-next

Add isVisible and stub transition/transition-group by default

+/*!+ * isElementVisible+ * Adapted from https://github.com/testing-library/jest-dom+ * Licensed under the MIT License.+ */++function isStyleVisible<T extends Element>(element: T) {+  if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {+    return false+  }++  const { display, visibility, opacity } = element.style++  return (+    display !== 'none' &&+    visibility !== 'hidden' &&+    visibility !== 'collapse' &&+    opacity !== '0'+  )+}++function isAttributeVisible<T extends Element>(element: T) {+  return (+    !element.hasAttribute('hidden') &&+    (element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true)+  )+}++export function isElementVisible<T extends Element>(element: T) {+  return (+    element.nodeName !== '#comment' &&+    isStyleVisible(element) &&+    isAttributeVisible(element) &&+    (!element.parentElement || isElementVisible(element.parentElement))

https://github.com/testing-library/jest-dom/blob/master/src/to-be-visible.js#L25

lmiller1990

comment created time in 2 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

Add MaStack + responsive plugin

 export {   MaRange,   MaSelect,   MaSidebar,+  MaStack,   MaText,   markdown,   markdownSSR, }  function install(Vue) {+  Vue.use(responsivePlugin)

Is there a better way to provide the responsivePlugin to margarita-consuming apps?

afontcu

comment created time in 3 days

push eventholaluz/margarita

commit sha 84c123ec3fdd235d4b4e5b157c78740a6d15a546

Update to tokens to match DS

push time in 3 days

push eventholaluz/margarita

commit sha e0f15871554f461c088534b6bde906006829bd87

fix: fix color CSS output (#279)

commit sha 33ddd864732a92547abe02e7a4755b3b5f27ad9b

Add Stack and proposal for spacing

commit sha aa117256933c196ca189c8f56137b80de46803c0

Mark space as required prop

commit sha 674e78977f334d7d17ae66401f1fc18fdee9ade5

Improve story on nested stacks

commit sha 03c986d0a8ad22b9a5949de6151fcaab540ab919

Remove debug

commit sha b7e0e04be022f1c51a54483ac69a6afe50d2626d

Remvoe s

commit sha 59dcc076bb4e83505ad7db318aa97be7174658ee

Handle responsive props

commit sha 0c3c63761be3b19ba92e84b8eb12650c214dd185

Default to null

commit sha 34094708b0652e03ede18e007199f424176a8f73

Cleanup structure

commit sha baa40866319292bdfd241091823b87930a9c433b

Use MatchMedia

commit sha a9e55d80453f5662f410807051b722912a2dac98

Handle tokens globally

commit sha ceb48435040982a0f5225caeb4b2d72184bc7f99

Remove pointless default value

commit sha 17286e241a8cb66443301545d2982b7d076a7dea

Fix align prop

commit sha 0347f4fa69b4b56ef78eb0dc6b8d04fe33caf566

Create plugins folder

commit sha 590698e1472411b54f515a5a969478601d6078b0

Set default value for SSR

commit sha 6458f4c367840069f86cbbf2b096acff7517e50b

Remove component prop

commit sha e38085cbeee2bdb49c5e56933c7270a76ac81df7

Add tests for default prop value

commit sha ea68d77f4052b4f73aad534bd297b156148e5bb7

Improve tests

commit sha 7f3f1f7b6d6c9828e3ef85daa539f0026351a81d

Fix naming on token

commit sha 11eb62eb898a412f74c0456697bc0de0b96a5690

Rename align props to left/center/right

Feature: Can provide a similar reactRender hook test library for vue？

push time in 3 days

issue commenttesting-library/vue-testing-library

Hi! I'm not sure what reactRender is (I don't think it is part of RTL's API). Can you elaborate, please? Maybe provide a valid use case where current Vue Testing Lib API is not able to solve :)

Thank you!

xiaoping027

comment created time in 3 days

issue commenttesting-library/vue-testing-library

Attempting to use vuex store fails with complaints about getters not being functions, even when they are

Hi @unikitty37, I have the same problem, may you elaborate how you solved this?

hi! looks like they provided a quite detailed solution for their problem. Would you like to share your snippets, so we can find what's wrong there?

It's just a tiny bit confusing that the example code for vuex doesn't even mention that callback, with its store parameter — I only found it when I looked at the router example.

That's true and worth adding!

unikitty37

comment created time in 3 days

push eventholaluz/margarita

commit sha e0f15871554f461c088534b6bde906006829bd87

fix: fix color CSS output (#279)

push time in 5 days

delete branch holaluz/margarita

delete branch : fix-colors

delete time in 5 days

PR merged holaluz/margarita

Fix: fix color CSS output Release: patch

This PR fixes an issue with the generated CSS (see the following thread in slack).

tl;dr: some sass loader was transforming white-base to #fff-base, thus breaking the :export statement. Since that statement was only meant to provide colors to the storybook story, I removed it from the CSS output and put it back inside storybook.

Also I took the liberty to improve the colors page a bit:

+199 -88

3 commit in holaluz/margarita/tree/fix-colors holaluz/margarita/tree/master

0 comment

5 changed files

afontcu

pr closed time in 5 days

Pull request review commentholaluz/margarita

 $colors: (     base: #e6007d,     dark: #b3005d,   ),-  white: (-    base: #ffffff,-  ),-  black: (-    base: #000000,-  ),-  gray: (-    light: #dcdcdc,-    base: #767676,-    dark: #4a4a4a,-    darker: #212121,-  ),   green: (     light: #e2f3ad,     base: #237b01,     dark: #1f6d4a,   ),-  blue: (-    light: #daf4fa,-    base: #296c89,-  ),-  turquoise: (-    base: #24b578,-  ),   yellow: (     light: #fdf6dd,     base: #f5d154,     dark: #ffba03,   ),+  blue: (+    light: #daf4fa,+    base: #296c89,+  ),   red: (     light: #ffdddc,     base: #cb1010,   ),-  orange: (-    base: #f06c17,-  ),   brown: (     light: #f9f8f3,     base: #c8c0ab,   ),+  orange: (+    base: #f06c17,+  ),+  turquoise: (+    base: #24b578,+  ),+  gray: (+    light: #dcdcdc,+    base: #767676,+    dark: #4a4a4a,+    darker: #212121,+  ),+  black: (+    base: #000000,+  ),+  white: (+    base: #ffffff,+  ), );  // Temporary. How do we handle shadows? $shadow-light: rgba(0, 0, 0, 0.027451); $shadow-medium: rgba(0, 0, 0, 0.0980392); $shadow-dark: rgba(0, 0, 0, 0.498);--:export {-  @each $name, $colorGroups in $colors {-    @each $tone, $value in $colorGroups {-      #{$name}-#{$tone}: $value;-    }-  }-}

great! Imma release the patch version then

afontcu

comment created time in 5 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

-import colors from '../scss/_margarita.scss'+import merge from 'lodash.merge'+import '../scss/_margarita.scss'

but I don't think you can import a scss

yeah, tried to do that by prepending the loaders within the import statement, extending the webpack config… without success. So I just import it manually and called it a day 🤷

afontcu

comment created time in 5 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

-import colors from '../scss/_margarita.scss'+import merge from 'lodash.merge'+import '../scss/_margarita.scss'

Otherwise, storybook loads Margarita components, but without the CSS. For instance, fonts and normalization was missing 😞 as far as I can tell, this is similar to https://github.com/holaluz/bonasera/blob/master/src/ui/nuxt.config.js#L27

afontcu

comment created time in 5 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

-import colors from '../scss/_margarita.scss'+import merge from 'lodash.merge'+import '../scss/_margarita.scss'

btw; this line loads Margarita for all stories. There's no easy way to load global SCSS in Storybook (and tbh I didn't want to spend much time on this). Feel free to pick it up and try to fix it :D

afontcu

comment created time in 5 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

 $colors: (     base: #e6007d,     dark: #b3005d,   ),-  white: (-    base: #ffffff,-  ),-  black: (-    base: #000000,-  ),-  gray: (-    light: #dcdcdc,-    base: #767676,-    dark: #4a4a4a,-    darker: #212121,-  ),   green: (     light: #e2f3ad,     base: #237b01,     dark: #1f6d4a,   ),-  blue: (-    light: #daf4fa,-    base: #296c89,-  ),-  turquoise: (-    base: #24b578,-  ),   yellow: (     light: #fdf6dd,     base: #f5d154,     dark: #ffba03,   ),+  blue: (+    light: #daf4fa,+    base: #296c89,+  ),   red: (     light: #ffdddc,     base: #cb1010,   ),-  orange: (-    base: #f06c17,-  ),   brown: (     light: #f9f8f3,     base: #c8c0ab,   ),+  orange: (+    base: #f06c17,+  ),+  turquoise: (+    base: #24b578,+  ),+  gray: (+    light: #dcdcdc,+    base: #767676,+    dark: #4a4a4a,+    darker: #212121,+  ),+  black: (+    base: #000000,+  ),+  white: (+    base: #ffffff,+  ), );  // Temporary. How do we handle shadows? $shadow-light: rgba(0, 0, 0, 0.027451); $shadow-medium: rgba(0, 0, 0, 0.0980392); $shadow-dark: rgba(0, 0, 0, 0.498);--:export {-  @each $name, $colorGroups in $colors {-    @each $tone, $value in $colorGroups {-      #{$name}-#{$tone}: $value;-    }-  }-}

These are the line changes that fix the build. @Samitier is there a way to test it out with kalimotxo?

afontcu

comment created time in 5 days

PullRequestReviewEvent

PR opened holaluz/margarita

Reviewers

Fix: fix color CSS output Release: patch

This PR fixes an issue with the generated CSS (see the following thread in slack).

tl;dr: some sass loader was transforming white-base to #fff-base, thus breaking the :export statement. Since that statement was only meant to provide colors to the storybook story, I removed it from the CSS output and put it back inside storybook.

Also I took the liberty to improve the colors page a bit:

+199 -88

3 commit in holaluz/margarita/tree/fix-colors holaluz/margarita/tree/master

0 comment

5 changed files

pr created time in 5 days

push eventholaluz/margarita

commit sha c307eaecd338b271c1c3b36699fb18791eb2705d

Improve color display

push time in 5 days

create barnchholaluz/margarita

branch : fix-colors

created branch time in 6 days

push eventholaluz/margarita

commit sha b6775a59b6286466a35fc9f3d91e17d735bee32c

Feat: Add Design System colors (#270) BREAKING CHANGE: Brand new colors (pun intended)! * `get-color()` now expects a valid color (not a string!) and a valid tone. If any of these are wrongly provided, it'll throw, thus crashing the build. This is good. * Shadows are now SCSS variables: `$shadow-light`, `$shadow-medium`, and `$shadow-dark`. * `$color-primary` is removed. Use `get-color(pink)` instead. * `get-darken-color()` and `get-lighten-color()` are removed. Please check out the merged PR (https://github.com/holaluz/margarita/pull/270) in order to find the equivalence between old and new colors.

commit sha 3ffa47fd78e1bcc2c478bde487461370551007cf

chore: Bump deps (Including Storybook v6!) (#277) * Bump safe deps * Bump to storybook v6 * Update stories to match storybook 6 * Move storybook config to proper folder * Further simplify folders * Add minimal explanations of storybook config files * Bump deps

commit sha 93d6e794ddf5cd51f74c20c5186d156a89dff16d

Add Stack and proposal for spacing

commit sha af955872b12eb8a19716b1c09b8071c45e0839f5

Mark space as required prop

commit sha 156b59396375efd6343383b3c74b738038a02c3b

Improve story on nested stacks

commit sha 6427cdf27cb229bbe7431204a11c4d3f99dd0f1d

Remove debug

commit sha fcc8e3270972ec0a8f053b947f791f301749c51d

Remvoe s

commit sha 00a13434064a6951795e1d017f398e5caffafbe6

Handle responsive props

commit sha 6f16357defd1787d71c6684023930df0c4313b76

Default to null

commit sha 064aa35286a66a8037bbdd822fc7f8ec1e497d8a

Cleanup structure

commit sha d68c3e64be353366d83755d11141c4b364c5c1b3

Use MatchMedia

commit sha b8bfd056fbc12f0b735fbc7df7ad4e0b2ddc2f51

Handle tokens globally

commit sha 11dd7b42cafd47e7cbd7dedba1c54e6992510c5d

Remove pointless default value

commit sha 4eba282bd1a8cb032b9b68d404b4ac033ac9354c

Fix align prop

commit sha 6283aa6c071dcbf7e6a859c71946f5e03b3bceda

Create plugins folder

commit sha f283b4577975da47d0d5c87eeb4c0e8a92434a94

Set default value for SSR

commit sha 8044be18394a80a6ebd4242c0e555d336f568583

Remove component prop

commit sha c1f9e3eec60a80274f8303b92ac2643be82830ec

Add tests for default prop value

commit sha a7a557b5bc9df96854a4b33037a4e387cf765830

Improve tests

commit sha 0c51b2bd7d84057cffae18b9a5882f4c7940dfd1

Fix naming on token

push time in 7 days

delete branch holaluz/margarita

delete branch : bump-deps

delete time in 7 days

push eventholaluz/margarita

commit sha 3ffa47fd78e1bcc2c478bde487461370551007cf

chore: Bump deps (Including Storybook v6!) (#277) * Bump safe deps * Bump to storybook v6 * Update stories to match storybook 6 * Move storybook config to proper folder * Further simplify folders * Add minimal explanations of storybook config files * Bump deps

Bump deps (Including Storybook v6!)

push time in 7 days

PR merged holaluz/margarita

Bump deps (Including Storybook v6!)

Latest versions of Storybook come with several changes, the biggest one being a new format to express stories (called CSF – more on that).

I've ran a couple of codemods to update our current stories, but they should be revisited once we update each component to match the Design System. Button is the one I tweaked a bit more, because it was kinda messy (it still is, to be honest 😂).

CSF comes with several benefits which I haven't explored here. For instance, we could share the same component instances between stories and tests (source), which is amazing.

Also, I believe Controls would make stories way more powerful/cool instead of relying on manual knobs. ~I'll leave this PR as a draft, and explore this path a bit.~ edit: too much to add in a single PR

Finally, now it is really easy to create sections :D

Captura de Pantalla 2020-09-08 a les 13 55 44

Other bumpings yielded nothing worth mentioning 👍

+14768 -19050

7 commit in holaluz/margarita/tree/bump-deps holaluz/margarita/tree/master

2 comments

25 changed files

afontcu

pr closed time in 7 days

pull request commentholaluz/margarita

The major of snarkdown doesn't break the script/hack we did in v-markdown, right? Cuz it was pretty hacky hahahh

Tests are passing, so I'll go ahead and merge this PR as a non-release! If anything breaks related to v-markdown in a near future, it's on me XD

afontcu

comment created time in 7 days

pull request commentholaluz/margarita

Bump deps (Including Storybook v6!)

The major of snarkdown doesn't break the script/hack we did in v-markdown, right? Cuz it was pretty hacky hahahh

Tests passed, so… 😬

afontcu

comment created time in 7 days

push eventholaluz/margarita

commit sha b6775a59b6286466a35fc9f3d91e17d735bee32c

Feat: Add Design System colors (#270) BREAKING CHANGE: Brand new colors (pun intended)! * `get-color()` now expects a valid color (not a string!) and a valid tone. If any of these are wrongly provided, it'll throw, thus crashing the build. This is good. * Shadows are now SCSS variables: `$shadow-light`, `$shadow-medium`, and `$shadow-dark`. * `$color-primary` is removed. Use `get-color(pink)` instead. * `get-darken-color()` and `get-lighten-color()` are removed. Please check out the merged PR (https://github.com/holaluz/margarita/pull/270) in order to find the equivalence between old and new colors.

commit sha b46fc65e66e5179b4fd37b5c6ee5585dd7448d18

Bump safe deps

commit sha b7cf1626e396f5314a73aa1864ddb27e8646f244

Bump to storybook v6

commit sha 9f4fe6d5972953daa558663d2d757b4383183e54

Update stories to match storybook 6

commit sha a700b4d60cf3281dbd7a4b541057cfe5f391dc01

Move storybook config to proper folder

commit sha 56a78bfdb574dd08184a66be721ebe3d55dd23d8

Further simplify folders

commit sha 54d0dda22ef523c9caf349675331e49b77cd8728

Add minimal explanations of storybook config files

commit sha e045da250289ade8537ee67e1ab6e8624fb14240

Bump deps

push time in 7 days

push eventholaluz/margarita

commit sha b6775a59b6286466a35fc9f3d91e17d735bee32c

Feat: Add Design System colors (#270) BREAKING CHANGE: Brand new colors (pun intended)! * `get-color()` now expects a valid color (not a string!) and a valid tone. If any of these are wrongly provided, it'll throw, thus crashing the build. This is good. * Shadows are now SCSS variables: `$shadow-light`, `$shadow-medium`, and `$shadow-dark`. * `$color-primary` is removed. Use `get-color(pink)` instead. * `get-darken-color()` and `get-lighten-color()` are removed. Please check out the merged PR (https://github.com/holaluz/margarita/pull/270) in order to find the equivalence between old and new colors.

Adapt Colors to the new Design System

push time in 7 days

delete branch holaluz/margarita

delete branch : colors

delete time in 7 days

PR merged holaluz/margarita

Reviewers

Update colors to match Design System Design System Release: major

Closes #254. This is obviously a huge breaking change 😄

The proposal here is to use color maps to rely on way less variable names. This will make color usage way more simple (no more "Is this primrose? tundora? pippin" but rather "this is pink dark").

To do so, we leverage Sass' maps (a.k.a. arrays 🤷) to handle hues and variations.

New colors map: https://github.com/holaluz/margarita/blob/colors/src/scss/variables/_colors.scss

New get-color function: https://github.com/holaluz/margarita/blob/colors/src/scss/functions/_colors.scss#L7

Result:

(disclaimer: color ordering in this storybook screenshot is soooo poor, but I didn't want to spend much time there. Since colors are properly organized in Figma, we can easily check them out there).

Out of Scope:

gradients
shadows
fixing icons with Hex colors
improving storybook's page on colors

[x] Implement colors from Figma (currently missing "100% verde" colors)
[x] Add new #F9F8F3 gray.
[x] (related to above) Should we merge ink/sky colors into some "gray" map?
[x] Agree on color naming. I kinda made up all names xD
[x] Make sure old-new color equivalences are OK

The current equivalence of old-new colors is:

old	new
dark-hot-pink	pink
classic-rose	pink light
pippin	red light
crimson	red
humming-bird	blue light
solitude	blue light
calypso	blue
picton-blue	blue
primrose	green light
japanese-laurel	green
peach-cream	yellow light
brown	yellow
school-bus-yellow	yellow dark
selective-yellow	yellow dark
tango	orange
buttercup	orange
mine-shaft	gray darker
tundora	gray dark
emperor	gray dark
boulder	gray
scorpion	gray
gray	gray
alto	gray light
concrete	brown light
wild-sand	brown ligth

+214 -195

16 commit in holaluz/margarita/tree/colors holaluz/margarita/tree/master

11 comments

23 changed files

afontcu

pr closed time in 7 days

issue closedholaluz/margarita

What

Refactor all Margarita's colors so that they comply with thew ones in the design system:

How (lets discuss it)

My proposal: just create a colors.scss variable file with the colors and gradients that appear in the design system. To use them, we will have to link margarita.scss in style resources and just do:

color: $hot-pink;

Other ideas: utility classes, same api as now (get-color), use the function of the color as color name ( main-primary instead of hot-pink), both utility classes and scss vars, etc.

Tasks

[ ] Decide the "how".
[ ] Implement new approach.
[ ] Implement figma color page in Storybook.
[ ] Fix breaking changes (see below).

Breaking changes

No matter how we do this, we will have to refactor hundreds of lines of code. I think they will all be "trivial" changes, until we find a color that it's not in the new Design System. In that case, I suggest creating it as a global scss variable in the project where it's being used.

closed time in 7 days

Samitier

issue commenttesting-library/react-testing-library

display wrong version of node and npm

Hi! Looks like your using sudo npm. Does it work without sudo? If not, is it possible that you have several versions of node installed in your machine?

You can check that out by running sudo node -v.

ChinmayDeyUI

comment created time in 14 days

issue commentvuejs/vue-test-utils

Throw errors when operating on destroyed wrapper

Hi! I understand why this would become useful when running enableAutoDestroy, feel free to submit the PR :)

xanf

comment created time in 14 days

issue commentvuejs/vue-test-utils

Stub custom event not executing handler.

Hi! I'm away from my laptop right now so I cannot give it a go, but I believe this should work:

import { mount } from "@vue/test-utils";
import TestContainer from "@/components/Test";

describe("test", () => {
  it("handlesEvent", () => {
    // this changed to track the component method, not its instance.
    const handler = jest.spyOn(TestContainer.methods, 'handler')

    const wrapper = mount(TestContainer, {
      stubs: ['test-component']
    });

    // this emits the event from the parent wrapper' vm, not the children'
    wrapper.vm.$children[0].$emit('custom-event');

    expect(handler).toBeCalled();
  });
})

However, I'd suggest mounting the "real" component tree using mount and interact with it to trigger the method, so that your test will be closer to what user does, and thus it'll provide better confidence.

Hope it helps!

dodgyKnee73

comment created time in 14 days

issue commentvuejs/vue-test-utils

Cannot access properties in scoped-slots with a Renderless component

Hi! Don't have the time to dig in right now, but using mount instead of shallowMount should fix the issue.

That being said, I agree VTU shouldn't fail that hard given that scenario, so this is something worth looking into.

sebj54

comment created time in 14 days

Pull request review commentvuejs/vue-test-utils-next-docs

Add "Write components that are easy to test"

+# Write components that are easy to test++Vue Test Utils helps you write tests for Vue components. However, there's only so much VTU can do.++Following is a list of suggestions to write code that is easier to test, and to write tests that are meaningful and easier to maintain.++The following list provide general guidance. It might come in handy in common scenarios.++## Do not test implementation details++Think in terms of inputs and outputs. Roughly, this is everything you should take into account when writing a test for a Vue component:++### Inputs++**Props**: the prop values provided.++**User inputs**: user interactions such as clicking, scrolling, typing…++**Data streams**: data incoming from API calls, data subscriptions…++### Outputs++**DOM elements**: anything the component renders to the DOM.++**events**: emitted (through `$emit`) events.++**side effects**: any other *observable* side effect, such as `console.log`, cookie creation, API calls…++## Everything else are implementation details++Notice how this list does not include elements such as internal methods, or intermediate states or data.++The rule of thumb is that **a test should not break on a refactor**, that is, when we change its internal implementation without changing its public API. If that happens, it might mean the test relies on implementation details.+++## Build smaller components++If a component does less, then it will be easier to test.+++### Extract API calls++:::tip+ Check out the [Making HTTP requests](../guide/http-requests.md) guide if you are unfamiliar with testing API calls.+:::++Usually, you will perform several HTTP requests throughout your application. From a testing perspective, HTTP requests provide inputs to the component, and a component can also send HTTP requests.+++### Extract complex methods++Sometimes a component might feature a complex method, with heavy calculations or several dependencies.++The suggestion here is to extract this method and import it to the component. This way, you can test the method in isolation (if necessary), and you can mock the import when testing your component.

sure!

afontcu

comment created time in 15 days

PullRequestReviewEvent

Pull request review commentvuejs/vue-test-utils-next-docs

Add "Write components that are easy to test"

+# Write components that are easy to test++Vue Test Utils helps you write tests for Vue components. However, there's only so much VTU can do.++Following is a list of suggestions to write code that is easier to test, and to write tests that are meaningful and easier to maintain.++The following list provide general guidance. It might come in handy in common scenarios.++## Do not test implementation details++Think in terms of inputs and outputs. Roughly, this is everything you should take into account when writing a test for a Vue component:++### Inputs++**Props**: the prop values provided.++**User inputs**: user interactions such as clicking, scrolling, typing…++**Data streams**: data incoming from API calls, data subscriptions…++### Outputs++**DOM elements**: anything the component renders to the DOM.++**events**: emitted (through `$emit`) events.++**side effects**: any other *observable* side effect, such as `console.log`, cookie creation, API calls…++## Everything else are implementation details++Notice how this list does not include elements such as internal methods, or intermediate states or data.++The rule of thumb is that **a test should not break on a refactor**, that is, when we change its internal implementation without changing its public API. If that happens, it might mean the test relies on implementation details.

great idea! I'll look into it to come up with a simple but meaningful example

afontcu

comment created time in 15 days

PullRequestReviewEvent

Pull request review commentvuejs/vue-test-utils-next-docs

Cleanup stubs section

 test('shallow with stubs', () => {  Since this behavior is global, not on a `mount` by `mount` basis, you need to remember to enable/disable it before and after each test. -:::: tip If you prefer this behavior, you can enable this globally by importing `config` in your test setup file, and setting `renderStubDefaultSlot` to `true`. Unfortunately, due to technical limitations, this behavior is not extended to slots other than the default slot.+::: tip

This was totally broken 😇

imatge

afontcu

comment created time in 16 days

PullRequestReviewEvent

PR opened vuejs/vue-test-utils-next-docs

Cleanup stubs section

Re-reading Stubs I found some small typos and design flaws, so I cleaned them up.

+42 -17

1 commit in vuejs/vue-test-utils-next-docs/tree/cleanup-stubs vuejs/vue-test-utils-next-docs/tree/master

0 comment

1 changed file

pr created time in 16 days

create barnchvuejs/vue-test-utils-next-docs

branch : cleanup-stubs

created branch time in 16 days

push eventtesting-library/testing-library-docs

satyam bansal

commit sha cb4a487ab9f65a627f2fd6d4930ef45668e03417

Fix typo mistake

commit sha 52582fa1a8ca0cf3c6617e83063f66181164edab

Merge pull request #613 from satyambnsal/fix-typo Fix typo mistake

push time in 16 days

PR merged testing-library/testing-library-docs

Fix typo mistake

+1 -1

1 commit in satyambnsal/testing-library-docs/tree/fix-typo testing-library/testing-library-docs/tree/master

1 comment

1 changed file

satyambnsal

pr closed time in 16 days

pull request commenttesting-library/testing-library-docs

Fix typo mistake

Thanks!

satyambnsal

comment created time in 16 days

PullRequestReviewEvent

PR opened vuejs/vue-test-utils-next-docs

Add "Write components that are easy to test"

Closes #34

This is still a draft, not ready to merge :) Just wanted to set up the PR so I could gather feedback when needed.

+67 -5

3 commit in vuejs/vue-test-utils-next-docs/tree/write-easy-to-test vuejs/vue-test-utils-next-docs/tree/master

0 comment

3 changed files

pr created time in 16 days

push eventvuejs/vue-test-utils-next-docs

commit sha 842367978872b86aa0a8ff88226ee44769335a00

Fix title

branch : write-easy-to-test

push time in 16 days

create barnchvuejs/vue-test-utils-next-docs

created branch time in 16 days

issue openedholaluz/margarita

Breaking change: Rename MaText

In previous conversations, the need for a "Text rendering" component has arisen – and it would make total sense to call it MaText. However, this name is currently taken by our "Text Input Field" component.

So, the proposal here is to rename our Text Input Field, and leave MaText for the new component.

Proposals:

MaTextField
MaTextInput

Bear in mind that we currently have MaOption, MaSelect, and MaRange as other form-related input-based components.

Suggestions? Other ideas?

created time in 18 days

PR closed testing-library/vue-testing-library

build(deps): bump elliptic from 6.5.2 to 6.5.3 dependencies

Bumps elliptic from 6.5.2 to 6.5.3. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/indutny/elliptic/commit/8647803dc3d90506aa03021737f7b061ba959ae1"><code>8647803</code></a> 6.5.3</li> <li><a href="https://github.com/indutny/elliptic/commit/856fe4d99fe7b6200556e6400b3bf585b1721bec"><code>856fe4d</code></a> signature: prevent malleability and overflows</li> <li>See full diff in <a href="https://github.com/indutny/elliptic/compare/v6.5.2...v6.5.3">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+6 -6

1 commit in testing-library/vue-testing-library/tree/dependabot/npm_and_yarn/elliptic-6.5.3 testing-library/vue-testing-library/tree/master

1 comment

1 changed file

dependabot[bot]

pr closed time in 18 days

PR opened testing-library/vue-testing-library

Reviewers

Update deps

@nickmccurdy just saw that #155 was failing on CI and noticed it was due to eslint rules. So I took a stab at it and fixed the errors – if you still think we should remove package-lock, I'll happily remove it in this PR, or merge this one and then yours should pass.

+6191 -7699

2 commit in testing-library/vue-testing-library/tree/update-deps testing-library/vue-testing-library/tree/master

0 comment

16 changed files

pr created time in 18 days

create barnchtesting-library/vue-testing-library

branch : update-deps

created branch time in 18 days

PullRequestReviewEvent

commit sha e7e765e003a1153a36dfde7c0e4f7a21bbf89095

Update README.md

Add gradients and shadows for the new Design System

push time in 18 days

Pull request review commentvuejs/vue-test-utils-next-docs

docs: slots

 # Slots -Mostly `slots`.\ No newline at end of file+Vue Test Utils provides some useful features for testing components using `slots`. ++## A Simple Example++You might have a generic `<layout>` component that uses a default slot to render some content. For example:++```js+const Layout = {+  template: `+    <div>+      <h1>Welcome!</h1>+      <main>+        <slot />+      </main>+      <footer>+        Thanks for visiting.+      </footer>+    </div>+  `+}+```++You might want to write a test to ensure the default slot content is rendered. VTU provides the `slots` mounting option for this purpose:++```js+test('layout default slot', () => {+  const wrapper = mount(Layout, {+    slots: {+      default: 'Main Content'+    }+  })++  expect(wrapper.html()).toContain('Main Content')+})+```++It passes! In this example, we are passing some text content to the default slot. If you want to be even more specific, and verify the default slot content is rendered inside `<main>`, you could change the assertion:++```js+test('layout default slot', () => {+  const wrapper = mount(Layout, {+    slots: {+      default: 'Main Content'+    }+  })++  expect(wrapper.find('main').text()).toContain('Main Content')+})+```++## Named Slots++You may have more complex `<layout>` component with some named slots. For example:++```js+const Layout = {+  template: `+    <div>+      <header>+        <slot name="header" />+      </header>++      <main>+        <slot name="main" />+      </main>+      <footer>+        <slot name="footer" />+      </footer>+    </div>+  `+}+```++VTU also supports this. You can write a test as follows. Note that in this example we are passing HTML instead of text content to the slots.++```js+test('layout full page layout', () => {+  const wrapper = mount(Layout, {+    slots: {+      header: '<div>Header</div>',+      main: '<div>Main Content</div>',+      footer: '<div>Footer</div>'+    }+  })++  expect(wrapper.html()).toContain('<div>Header</div>')+  expect(wrapper.html()).toContain('<div>Main Content</div>')+  expect(wrapper.html()).toContain('<div>Footer</div>')+})+```++## Advanced Usage++You can also pass a render function to a slot mounting option, or even an SFC imported from a `vue` file:++```js+import { h } from 'vue'+import Header from './Header.vue'++test('layout full page layout', () => {+  const wrapper = mount(Layout, {+    slots: {+      header: Header+      main: h('div', 'Main content')+      footer: '<div>Footer</div>'+    }+  })++  expect(wrapper.html()).toContain('<div>Header</div>')+  expect(wrapper.html()).toContain('<div>Main Content</div>')+  expect(wrapper.html()).toContain('<div>Footer</div>')+})+```++Note: passing a component using `{ template: '<div /> }` is not supported. Use a HTML string, render function, plain text, or an SFC.++## Scoped Slots++[Scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) and bindings are also supported.++```js+const ComponentWithSlots = {+  template: `+    <div class="scoped">+      <slot name="scoped" v-bind="{ msg }" />+    </div>+  `,+  data() {+    return {+      msg: 'world'+    }+  }+}++test('scoped slots', () => {+  const wrapper = mount(ComponentWithSlots, {+    slots: {+      scoped: `<template #scoped="params">+        Hello {{ params.msg }}+        </template>+      `+    }+  })++  expect(wrapper.html()).toContain('Hello world')+})+```++## Conclusion++- Use the `slots` mounting option to test components using `<slot>` are rendering content correctly.

- Use the `slots` mounting option to test components using `<slot>` are rendering content correctly.
- Content can either be a string, a render function or an imported SFC.

lmiller1990

comment created time in 18 days

PullRequestReviewEvent

issue commentholaluz/margarita

(Same thing goes with shadows!)

afontcu

comment created time in 18 days

issue commentholaluz/margarita

Add gradients and shadows for the new Design System

That really depends on needs, don't it? I mean, if design team defines only two gradients, we could easily have two SCSS/JS variables and call it a day.

afontcu

comment created time in 18 days

commit sha b0be29da51ece1f9e0963133efb5e1783adb063d

Update README.md

Update colors to match Design System

push time in 18 days

pull request commentholaluz/margarita

Added brown hue. Breaking changes from last beta:

get-color(gray, lighter) is now get-color(brown, light)

old	new
concrete	brown light
wild-sand	brown ligth

afontcu

comment created time in 19 days

push eventholaluz/margarita

commit sha 5170de23bef30875be58a9278ec80cc89973b197

Add brown hue

commit sha 23a79b1f7b7dc3c243ade556ac7b50a2441fb315

feat: add brown colors

push time in 19 days

push eventholaluz/margarita

commit sha 5170de23bef30875be58a9278ec80cc89973b197

Add brown hue

[RFC] Add Columns/Column component for vertical layout

push time in 19 days

issue commentholaluz/margarita

A codesandbox to see theory in action as u did for the Stack would help me a lot! ^^

Sure! Fancy to work on it? 😏

afontcu

comment created time in 19 days

issue commentholaluz/margarita

[RFC] Add Columns/Column component for vertical layout

for now I would just say to look for another name on ma-columns component, it's to similar to ma-column, but I'm not sure... container, wrapper, grid... something with 'horizontal' before?

hm, true, even though I strongly believe we should deprecate MaGrid* components, possibly by moving them to projects that are using them (Bonasera and… that's it??) instead of having them available in Margarita 😉

afontcu

comment created time in 19 days

commit sha 8d966535bc3506e85c07e2aade991fb016077d2b

Update README.md

push time in 20 days

issue commentvuejs/vue-test-utils

1.0.5 breaks data merge

Here's the diff between 1.0.4 and 1.0.5: https://github.com/vuejs/vue-test-utils/compare/v1.0.4...v1.0.5

Not sure how, but these are the only lines I could see as potentially related? https://github.com/vuejs/vue-test-utils/compare/v1.0.4...v1.0.5#diff-68ebb4dd9f4503e2b26a1b1ac98d4fa2R127-R132 (https://github.com/vuejs/vue-test-utils/pull/1661/files)

nicooprat

comment created time in 20 days

push eventholaluz/margarita

commit sha fd7d9d2cd26a96d4eb3792997396ce63940b1fcd

Further simplify folders

commit sha 47dd1a1d93bc9034b09a5a2fb6f49ee7d5df45f3

Add minimal explanations of storybook config files

push time in 20 days

push eventholaluz/margarita

commit sha 01d2d92b1836f0d8b46e0b906d1d87926d573025

Move storybook config to proper folder