Instantly share code, notes, and snippets.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', () => {}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.button { | |
color: #fff; | |
padding: 0.5rem 2rem; | |
border: 0; | |
border-radius: 0.25rem; | |
} | |
.button-primary { | |
background-color: #4747d0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { ReactNode } from 'react' | |
import './Button.css' | |
export type ButtonProps = { | |
onClick(): void | |
children: ReactNode | |
variant?: 'primary' | 'success' | |
isDisabled?: boolean | |
} |
NewerOlder