| /* eslint-disable object-curly-spacing */ | |
| import { Command, flags } from '@oclif/command' | |
| const { prompt } = require("enquirer") | |
| const copy = require("copy-template-dir") | |
| const path = require("path") | |
| const fs = require("fs") | |
| const util = require("util") | |
| class Mycli extends Command { |
| import React from 'react'; | |
| import { useDropzone } from 'react-dropzone'; | |
| import { useUpload } from '../hooks/useCloudinary'; | |
| import { | |
| Text, | |
| Button, | |
| Input, | |
| InputGroup, | |
| InputRightElement, |
| import { useMutation } from 'react-query'; | |
| import fetch from 'isomorphic-unfetch'; | |
| export default function useSearch({ endpoint } = {}) { | |
| if (!endpoint) { | |
| throw new Error("Must provide an endpoint to search"); | |
| } | |
| let expressionConfig = ""; |
| function Image({ publicId, transformations, width, height, alt }) { | |
| const { generateUrl, url, status, error } = useImage({ cloudName: 'testing-hooks-upload' }); | |
| React.useEffect(() => { | |
| // Now instead of getImage, we call the `generateUrl` function, better describing the action we're taking internally and what to expect back | |
| generateUrl({ | |
| publicId, | |
| transformations: { | |
| // by supplying height and width seperately from the transformations object, | |
| // we can use the height and width to dictate the size of the element AND the transformations |
| it('updates data to an array on successful request', async () => { | |
| let server = new Server({ | |
| routes() { | |
| this.post("/example-endpoint", () => ({ | |
| resources: [ | |
| { id: 1, public_id: "image1" }, | |
| { id: 2, public_id: "image2" }, | |
| { id: 3, public_id: "image3" } | |
| ] | |
| })); |
| /** @jsx jsx */ | |
| import { css, jsx } from '@emotion/core'; | |
| import React from 'react'; | |
| import { useMutation, gql } from '@apollo/client'; | |
| import { useDropzone } from 'react-dropzone'; | |
| const UPLOAD_IMAGE_TO_CLOUDINARY = gql` | |
| mutation UploadImageToCloudinary($file: String! $uploadOptions: UploadOptionsInput){ | |
| uploadImage(file: $file uploadOptions: $uploadOptions) { | |
| public_id |
When unit testing, remember to think about the Component and what it does. It helps sometimes to take each component and write down it's job. What it renders and how are important. Follow your application as a user would and test it to match those interactions.
| import React, { Component } from 'react'; | |
| import './App.css'; | |
| const ShowingYourName = (props) => { | |
| return ( | |
| <p>{props.firstName}</p> | |
| ) | |
| } | |
| class App extends Component { |
