moatorres

moatorres

⚡️

Member Since 3 years ago

Recife, Pernambuco, Brazil

Experience Points
7
follower
Lessons Completed
103
follow
Lessons Completed
227
stars
Best Reply Awards
20
repos

2495 contributions in the last year

Pinned
⚡ string representations of node.js built-in objects
⚡ css to javascript-object converter
Activity
Dec
23
4 weeks ago
Dec
22
1 month ago
push

moatorres push react-modular/ui

moatorres
moatorres

update(rollup): wrong repository address

commit sha: 6843dd60337489cab49f2b7912cc98bf74c740b3

push time in 4 weeks ago
push

moatorres push react-modular/ui

moatorres
moatorres

update(rollup): missing scripts

commit sha: 393497d5cf458998cd5174e138b8184fd52530ac

push time in 4 weeks ago
Activity icon
created branch

moatorres in react-modular/ui create branch main

createdAt 4 weeks ago
Activity icon
created repository
createdAt 4 weeks ago
Nov
21
2 months ago
started
started time in 2 months ago
started
started time in 2 months ago
Nov
18
2 months ago
started
started time in 2 months ago
Nov
5
2 months ago
Activity icon
issue

moatorres issue comment styled-components/jest-styled-components

moatorres
moatorres

v7.0.0 No Styles found on passed Component

I've just updated styled components to v5 and jest-styled-components to v7 and now any test that calls on toHaveStyleRule fails with the error No style rules found on passed Component.

Example test

  test("it renders correctly when disabled", () => {
    const { container } = render(<ControlButton disabled />);
    const button = container.querySelector("button");
    expect(button).toHaveStyleRule("opacity", "0.5");
  });

Tested component

const ControlButton = styled.button`
  background-color: white;
  border: none;
  font-size: 0;
  height: 20px;
  line-height: 0;
  margin: 0;
  padding: 0;
  user-select: none;
  width: 20px;

  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
      pointer-events: none;
    `}
`

This test passed using styled components v4.3.2 and jest-styled-components v6.3.3.

This is being tested with @testing-library/react v9.1.4

moatorres
moatorres

Just a heads-up: none of the above seems to work for me, either with enzyme's mount function or react-test-renderer's renderer.create.

By "none of the above" I mean any { ssr: false, displayName: false, namespace: "sc" } suggested solutions.

Versions:

"jest-styled-components": "7.0.5",
"styled-components": "5.3.3"
"react-test-renderer": "17.0.2"
"enzyme": "3.11.0",
"babel-plugin-styled-components": "1.13.3",

My current workaround (fairly big):

test-helpers.ts

import renderer, { ReactTestRendererJSON } from 'react-test-renderer'

export function render(component: React.ReactElement) {
  return (
    renderer
      .create(component)
      .toJSON() as ReactTestRendererJSON
  )
}

export function renderClasses(component: React.ReactElement): string[] {
  const {
    props: { className },
  } = render(component)
  return className ? className.trim().split(' ') : []
}

type ComputedStyles = Record<string, string | Record<string, string>>

export function getComputedStyles(className: string) {
  const div = document.createElement('div')
  div.className = className

  const computed: ComputedStyles = {}

  for (const sheet of document.styleSheets) {
    for (const rule of sheet.cssRules) {
      if (rule instanceof CSSMediaRule) readMedia(rule)
      else if (rule instanceof CSSStyleRule) readRule(rule, computed)
    }
  }

  return computed

  function matchesSafe(node: HTMLDivElement, selector: string) {
    if (!selector) return false

    try {
      return node.matches(selector)
    } catch (error) {
      return false
    }
  }

  function readRule(rule: CSSStyleRule, dest: ComputedStyles) {
    if (matchesSafe(div, rule.selectorText)) {
      const { style } = rule
      for (let i = 0; i < style.length; i++) {
        const prop = style[i]
        dest[prop] = style.getPropertyValue(prop)
      }
    }
  }

  function readMedia(mediaRule: CSSMediaRule) {
    const key = `@media ${mediaRule.media[0]}`
    const dest = {}
    for (const rule of mediaRule.cssRules) {
      if (rule instanceof CSSStyleRule) readRule(rule, dest)
    }

    if (Object.keys(dest).length > 0) computed[key] = dest
  }
}

/* Return styles from all classes applied merged into a single object. */
export function getStyles(comp: React.ReactElement) {
  return renderClasses(comp)
    .filter(c => !c.includes('sc'))
    .map(getComputedStyles)
    .reduce((result, current) => Object.assign(result, current), {})
}

Then we can use the getStyles function to check our styles directly with jest, like so:

import { getStyles } from './test-helpers'

test('extended components keep their styles', () => {
  const Box = styled.div`
    margin: 16px;
  `
  const Card = styled(Box)`
    color: tomato;
  `

  const styles = getStyles(<Card />)
  expect(styles).toEqual({ margin: '16px', color: 'tomato' })
})
Activity icon
issue

moatorres issue comment styled-components/jest-styled-components

moatorres
moatorres

v7.0.0 No Styles found on passed Component

I've just updated styled components to v5 and jest-styled-components to v7 and now any test that calls on toHaveStyleRule fails with the error No style rules found on passed Component.

Example test

  test("it renders correctly when disabled", () => {
    const { container } = render(<ControlButton disabled />);
    const button = container.querySelector("button");
    expect(button).toHaveStyleRule("opacity", "0.5");
  });

Tested component

const ControlButton = styled.button`
  background-color: white;
  border: none;
  font-size: 0;
  height: 20px;
  line-height: 0;
  margin: 0;
  padding: 0;
  user-select: none;
  width: 20px;

  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
      pointer-events: none;
    `}
`

This test passed using styled components v4.3.2 and jest-styled-components v6.3.3.

This is being tested with @testing-library/react v9.1.4

moatorres
moatorres

Just a heads-up: none of the above seems to work for me, either with enzyme's mount function or react-test-renderer's renderer.create.

By "none of the above" I mean any { ssr: false, displayName: false, namespace: "sc" } suggested solutions.

Config:

"jest-styled-components": "7.0.5",
"styled-components": "5.3.3"
"react-test-renderer": "17.0.2"
"enzyme": "3.11.0",
"babel-plugin-styled-components": "1.13.3",
Nov
3
2 months ago
started
started time in 2 months ago
Oct
26
2 months ago
pull request

moatorres pull request primer/react

moatorres
moatorres

Update `Button` styles

I don't think that @primer/primitives has either hoverText or hoverShadow defined in its primary button color schemes.

btn.danger and btn.outline do so, and they're currently the same. We can check that here.

// btn.outline.hoverText, btn.danger.hoverText
get('scale.white') 
// prints → #ffffff

// btn.outline.hoverText, btn.danger.hoverText
(theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`
// prints → '0 1px 0 rgba(27,31,36,0.1)'

Perhaps we should update @primer/primitives then update it here? We could also remove it altogether as it's probably not rendering anything.

I'm guessing that, if they're supposed to be the same, they could go up one level (btn.hoverText, btn.hoverShadow) and be shared across all buttons.

PS: Just found another "missing" style in <ButtonDanger />. Apparently there's no btn.danger.disabledBorder defined.

border-color: ${get('colors.btn.danger.disabledBorder')};

Let me know your thoughts. Happy to make any adjustments needed, either way.

  • No tests were affected
  • Added/updated documentation
Oct
22
3 months ago
Activity icon
issue

moatorres issue comment primer/react

moatorres
moatorres

Update `Button` styles

I don't think that @primer/primitives has either hoverText or hoverShadow defined in its primary button color schemes.

btn.danger and btn.outline do so, and they're currently the same. We can check that here.

// btn.outline.hoverText, btn.danger.hoverText
get('scale.white') 
// prints → #ffffff

// btn.outline.hoverText, btn.danger.hoverText
(theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`
// prints → '0 1px 0 rgba(27,31,36,0.1)'

Perhaps we should update @primer/primitives then update it here? We could also remove it altogether as it's probably not rendering anything.

I'm guessing that, if they're supposed to be the same, they could go up one level (btn.hoverText, btn.hoverShadow) and be shared across all buttons.

PS: Just found another "missing" style in <ButtonDanger />. Apparently there's no btn.danger.disabledBorder defined.

border-color: ${get('colors.btn.danger.disabledBorder')};

Let me know your thoughts. Happy to make any adjustments needed, either way.

  • No tests were affected
  • Added/updated documentation
moatorres
moatorres