justusromijn

@mixin some-mixin() {
	@include button();
	text-decoration: none;

	&--primary {
	    color: blue;
		@extend %primary;
	}

justusromijn

@mixin some-mixin() {
	@include button();
	text-decoration: none;

	&--primary {
	   // color: red;
		@extend %primary;
	}

justusromijn

import { shallow } from 'enzyme';
import * as React from 'react';
import { ButtonBash } from './buttonBash';
import { Button } from './button';

describe('<ButtonBash />', () => {
  it('renders a button and a bash count', () => {
     let component = shallow(<ButtonBash />);
     expect(component.contains(<p>Bashes: 0</p>).toBeTruthy();
  });

justusromijn

import * as React, { useState } from 'react';
import { Button } from './button';

export const ButtonBash = () => {
  let [count, setCount] = useState(0);
  
  return (
    <>
      <p>Bashes: {count}</p>
      <Button onClick={setCount(count + 1)} label='foo' />

justusromijn

import { mount } from 'enzyme';
import * as React from 'react';
import { Button } from './button';

describe('<Button />', () => {
  describe('By default', () => {
    let component;
    beforeAll(() => {
      component = mount(<Button label="foo" />);
    });

justusromijn

import * as React from 'react';

// Simple Button Component (Dumb)
export const Button = ({ flavour = 'primary', onClick = () => {}, label }) => (
  <button onClick={onClick} className={flavour} value={label} />
);

justusromijn

<div class="ng-scope ng-invalid">
  <div class="date-picker">yes</div>
</div>