alpavlove

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Button } from '../src/Button/Button';

describe('Button', () => {
  describe('Should be rendered correctly', () => {
    test('should be clickable', () => {
      const onClick = jest.fn();
      render(<Button onClick={onClick}>Click me</Button>);
      fireEvent.click(screen.getByText('Click me'));

alpavlove

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Button } from '../src/Button/Button';

describe('Button', () => {
  describe('Should be rendered correctly', () => {
    test('disabled', () => {
      const { asFragment } = render(
        <Button onClick={console.log} isDisabled={true}>
          Click me

alpavlove

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Button } from '../src/Button/Button';

describe('Button', () => {
  describe('Should be rendered correctly', () => {
    test('disabled', () => {
      const { asFragment } = render(
        <Button onClick={console.log} isDisabled={true}>
          Click me

alpavlove

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Button } from '../src/Button/Button';

describe('Button', () => {
  describe('Should be rendered correctly', () => {
    test('success', () => {
      const { container } = render(
        <Button onClick={console.log} variant="success">
          Click me

alpavlove

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Button } from '../src/Button/Button';

describe('Button', () => {
  describe('Should be rendered correctly', () => {
    test('default', () => {
      render(<Button onClick={console.log}>Click me</Button>);
      const button = screen.getByText('Click me');
      expect(button.classList.contains('button-primary')).toBeTruthy();

alpavlove

import React from 'react';

describe('Button', () => {
  describe('Should be rendered correctly', () => {
    test('default', () => {});
  //  test('success', () => {});
  //  test('disabled', () => {});
  //  test('should be clickable', () => {});
  //  test('should not be clickable if disabled', () => {});
    });

alpavlove

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({

alpavlove

import React from 'react'
import { Meta, Story } from '@storybook/react'
import { Button, ButtonProps } from '../src/Button/Button'

const meta: Meta = {
  title: 'Welcome',
  component: Button,
  argTypes: {
    children: {
      control: {

alpavlove

.button {
  color: #fff;
  padding: 0.5rem 2rem;
  border: 0;
  border-radius: 0.25rem;
}

.button-primary {
  background-color: #4747d0;
}

alpavlove

import React, { ReactNode } from 'react'
import './Button.css'

export type ButtonProps = {
  onClick(): void
  children: ReactNode
  variant?: 'primary' | 'success'
  isDisabled?: boolean
}