const ConfirmModalView = ({ handleAccept, handleCancel, body, acceptText, cancelText, fadeOut, }: Props) => ( <Modal confirm fadeOut={fadeOut}> <Modal.Blur /> <Modal.Content> <p>{body}</p> </Modal.Content> <Modal.Footer> <Button onClick={handleAccept}> {acceptText} </Button> <Button flat onClick={handleCancel}> {cancelText} </Button> </Modal.Footer> </Modal> )
const FlushRight = () => { const Container = styled.div` display: flex; flex-flow: row nowrap; border: 1px solid red; margin-bottom: 20px; padding: 5px; `; const Item = styled.div`border: 1px solid blue;`; const FirstItem = Item.extend` margin-right: 10px; flex: 1 0 auto; `; return ( <Container> <FirstItem>Col 1</FirstItem> <Item>Col 2</Item> <Item>Col 3</Item> </Container> ); }
expect(wrapper.find(Modal.Blur)).toHaveLength(1); expect(wrapper.find(Modal.Content)).toHaveLength(1); expect(wrapper.find(Modal.Footer)).toHaveLength(1); }); expect(wrapper.find(Modal.Content).find('p')).toHaveLength(1); expect(wrapper.find(Modal.Content).find('p').text()).toBe('Confirmation text'); }); expect(wrapper.find(Modal.Footer).find(Button)).toHaveLength(2); expect(wrapper.find(Modal.Footer).find(Button).at(0).text()).toBe('Accept'); expect(wrapper.find(Modal.Footer).find(Button).at(1).text()).toBe('Cancel'); }); wrapper.find(Modal.Footer).find(Button).at(0).simulate('click'); wrapper.find(Modal.Footer).find(Button).at(1).simulate('click');
const ModalView = ({ handleModalCancel, handleModalSubmit, content, title, submitText, cancelText, submitDisabled, }: Props) => ( <Modal> <Modal.Blur /> <Modal.Header> <H1 secondary>{title}</H1> <button onClick={handleModalCancel}> <i className="fas fa-times" /> </button> </Modal.Header> <Modal.Content> {content} </Modal.Content> <Modal.Footer hidden={!submitText}> <Button disabled={submitDisabled} onClick={handleModalSubmit}> {submitText} </Button> <Button flat onClick={handleModalCancel}> {cancelText} </Button> </Modal.Footer> </Modal> )
expect(wrapper.find(Modal.Blur)).toHaveLength(1); expect(wrapper.find(Modal.Header)).toHaveLength(1); expect(wrapper.find(Modal.Content)).toHaveLength(1); expect(wrapper.find(Modal.Footer)).toHaveLength(1); }); expect(wrapper.find(Modal.Header).find(H1)).toHaveLength(1); expect(wrapper.find(Modal.Header).find(H1).text()).toBe('Modal Title'); }); expect(wrapper.find(Modal.Footer).find(Button)).toHaveLength(2); expect(wrapper.find(Modal.Footer).find(Button).at(0).text()).toBe('Submit'); expect(wrapper.find(Modal.Footer).find(Button).at(1).text()).toBe('Cancel'); }); expect(wrapper.find(Modal.Content).text()).toBe('Example content text.'); }); wrapper.find(Modal.Footer).find(Button).at(0).simulate('click'); wrapper.find(Modal.Footer).find(Button).at(1).simulate('click'); wrapper.find(Modal.Header).find('button').simulate('click');
const FlushRight = () => { const Container = styled.div` display: flex; flex-flow: row wrap; border: 1px solid red; margin-bottom: 20px; padding: 5px; `; const Item = styled.div` border: 1px solid blue; min-width: 100px; `; const FirstItem = Item.extend` margin-right: 10px; flex: 1 0 auto; `; return ( <Container> <FirstItem>Col 1</FirstItem> <Item>Col 2</Item> <Item>Col 3</Item> <Item>Col 4</Item> <Item>Col 5</Item> <Item>Col 6</Item> <Item>Col 7</Item> </Container> ); }