diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 4db7ebc..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/HatComponents/HatAbbrevs.js b/src/HatComponents/HatAbbrevs.js index 059b293..37c06ac 100644 --- a/src/HatComponents/HatAbbrevs.js +++ b/src/HatComponents/HatAbbrevs.js @@ -1,21 +1,21 @@ -import React from 'react'; +import React from "react"; -function HatAbbrevs(props) { - return ( -
-

Abbreviations

-

- CO = cast on
- rep = repeat
- Rnd = round
- k = knit
- p = purl
- k2tog = knit two together
- st(s) = stitch(es)
- Stockinette stitch = knit all stitches -

-
- ); +function HatAbbrevs() { + return ( +
+

Abbreviations

+ +
+ ); } -export default HatAbbrevs; \ No newline at end of file +export default HatAbbrevs; diff --git a/src/HatComponents/HatAbbrevs.test.js b/src/HatComponents/HatAbbrevs.test.js new file mode 100644 index 0000000..74bc7a5 --- /dev/null +++ b/src/HatComponents/HatAbbrevs.test.js @@ -0,0 +1,8 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import HatAbbrevs from "./HatAbbrevs"; + +test("", () => { + render(); + expect(screen.queryByRole("list")).toBeTruthy(); +}); diff --git a/src/HeaderImage.js b/src/HeaderImage.js index f384460..fd3fee2 100644 --- a/src/HeaderImage.js +++ b/src/HeaderImage.js @@ -1,13 +1,11 @@ -import React from 'react' +import React from "react"; -function HeaderImage(props) { - return ( -
- {props.alt} -
- ) +function HeaderImage({ colClass, url, alt }) { + return ( +
+ {alt} +
+ ); } -export default HeaderImage \ No newline at end of file +export default HeaderImage; diff --git a/src/SockComponents/CuffDownCuff.js b/src/SockComponents/CuffDownCuff.js index 8520d92..b140252 100644 --- a/src/SockComponents/CuffDownCuff.js +++ b/src/SockComponents/CuffDownCuff.js @@ -1,15 +1,23 @@ -import React from 'react'; +import React from "react"; function CuffDownCuff(props) { - return ( -
-

Cuff and Leg

-

Cast on {props.state.fullStCount} sts loosely or with a stretchy cast-on. Join to work in the rnd, being careful not to twist.

-

Rnd 1: *k2, p2; rep from * to end
- Rep rnd 1 until ribbing measures one inch, or until desired length.

-

Knit every rnd until work measures 6 inches, or until desired length.

-
- ) + return ( +
+

Cuff and Leg

+

+ Cast on {props.state.fullStCount} sts loosely or with a stretchy + cast-on. Join to work in the rnd, being careful not to twist. +

+

+ Rnd 1: *k2, p2; rep from * to end +
+ Rep rnd 1 until ribbing measures one inch, or until desired length. +

+

+ Knit every rnd until work measures 6 inches, or until desired length. +

+
+ ); } -export default CuffDownCuff; \ No newline at end of file +export default CuffDownCuff; diff --git a/src/SockComponents/CuffDownToe.js b/src/SockComponents/CuffDownToe.js index a5ca562..b56607d 100644 --- a/src/SockComponents/CuffDownToe.js +++ b/src/SockComponents/CuffDownToe.js @@ -1,18 +1,44 @@ -import React from 'react'; +import React from "react"; function CuffDownToe(props) { - return( -
-

Toe

-

Knit to the beginning of the instep sts, then begin the toe decreases as follows:

-

Rnd 1, instep/needle 1: k1, ssk, k to last 3 sts of instep, k2tog, k1
- Rnd 1, sole/needle 2: k1, ssk, k to last 3 sts of sole, k2tog, k1
- Rnd 2: k around

-

Rep rnds 1 and 2 until you have {props.state.fullStCount / 2} sts remaining. Then, rep rnd 1 twice more.

-

At the end of your decreases, you should have { (props.state.fullStCount / 2) - 8 } sts remaining, { props.getMultiple((((props.state.fullStCount / 2) - 8) / 2), 2) } on the instep and { props.getMultiple((((props.state.fullStCount / 2) - 8) / 2), 2) } on the sole.

-

Cut the yarn, leaving a tail long enough to graft the toe. Use the Kitchener stitch to graft the toe closed.

-
- ); + return ( +
+

Toe

+

+ Knit to the beginning of the instep sts, then begin the toe decreases as + follows: +

+

+ Rnd 1, instep/needle 1: k1, ssk, k to last 3 sts of instep, k2tog, k1 +
+ Rnd 1, sole/needle 2: k1, ssk, k to last 3 sts of sole, k2tog, k1 +
+ Rnd 2: k around +

+

+ Rep rnds 1 and 2 until you have {props.state.fullStCount / 2} sts + remaining. Then, rep rnd 1 twice more. +

+

+ At the end of your decreases, you should have{" "} + {props.state.fullStCount / 2 - 8} sts remaining,{" "} + {props.getMultiple((props.state.fullStCount / 2 - 8) / 2, 2)} on the + instep and {props.getMultiple((props.state.fullStCount / 2 - 8) / 2, 2)}{" "} + on the sole. +

+

+ Cut the yarn, leaving a tail long enough to graft the toe. Use the{" "} + + Kitchener stitch + {" "} + to graft the toe closed. +

+
+ ); } -export default CuffDownToe; \ No newline at end of file +export default CuffDownToe; diff --git a/src/SockComponents/ShortRowHeel.js b/src/SockComponents/ShortRowHeel.js index 9ac5283..8c7c1f2 100644 --- a/src/SockComponents/ShortRowHeel.js +++ b/src/SockComponents/ShortRowHeel.js @@ -1,26 +1,52 @@ -import React from 'react'; +import React from "react"; function ShortRowHeel(props) { - return ( -
-

Heel

-

The short row heel is worked flat over the next {props.state.fullStCount / 2} sts, which are half your total sts. References to the first and last sts in these instructions refer to the first of this half and the last of this half of your sts, i.e. the heel sts.

+ return ( +
+

Heel

+

+ The short row heel is worked flat over the next{" "} + {props.state.fullStCount / 2} sts, which are half your total sts. + References to the first and last sts in these instructions refer to the + first of this half and the last of this half of your sts, i.e. the heel + sts. +

-

First half of the heel

-

Row 1 (RS): k across to last st, w&t
- Row 2 (WS): p back to first st, w&t
- Row 3 (RS): k to st before wrapped st, w&t
- Row 4 (WS): p to st before wrapped st, w&t

+

First half of the heel

+

+ Row 1 (RS): k across to last st, w&t +
+ Row 2 (WS): p back to first st, w&t +
+ Row 3 (RS): k to st before wrapped st, w&t +
+ Row 4 (WS): p to st before wrapped st, w&t +

-

Rep rows 3 and 4 until {props.getMultiple((props.state.fullStCount / 6), 2)} sts are left unwrapped, ending after a WS row.

+

+ Rep rows 3 and 4 until{" "} + {props.getMultiple(props.state.fullStCount / 6, 2)} sts are left + unwrapped, ending after a WS row. +

-

Second half of the heel

-

Row 1 (RS): k to first wrapped st, k the wrapped st while picking up the wrap, turn
- Row 2 (WS): sl1 wyif, p to first/next wrapped st, p the wrapped st while picking up the wrap, turn
- Row 3 (RS): sl1 wyib, k to next wrapped st, k the wrapped st while picking up the wrap, turn

-

Rep rows 2 and 3 until all wraps have been picked up, ending with a RS row. You are now ready to continue in the rnd to work the rest of the sock.

-
- ); +

Second half of the heel

+

+ Row 1 (RS): k to first wrapped st, k the wrapped st while picking up the + wrap, turn +
+ Row 2 (WS): sl1 wyif, p to first/next wrapped st, p the wrapped st while + picking up the wrap, turn +
+ Row 3 (RS): sl1 wyib, k to next wrapped st, k the wrapped st while + picking up the wrap, turn +

+

+ Rep rows 2 and 3 until all wraps have been picked up, ending with a RS + row. You are now ready to continue in the rnd to work the rest of the + sock. +

+
+ ); } -export default ShortRowHeel; \ No newline at end of file +export default ShortRowHeel; diff --git a/src/SockComponents/SockAbbrevs.js b/src/SockComponents/SockAbbrevs.js index 075a1be..9e122b9 100644 --- a/src/SockComponents/SockAbbrevs.js +++ b/src/SockComponents/SockAbbrevs.js @@ -1,44 +1,56 @@ -import React from 'react'; +import React from "react"; -function SockAbbrevs(props) { - return ( -
-

These instructions are written for the magic loop or two circular needles methods, - as they reference the first needle and second needle. To adapt for dpns, - the first needle is dpn one and two and the second needle is dpn three and four.

-

Abbreviations

-

- BOR = beginning of round
- k = knit
- {props.direction === 'toeup' && - - kfb = k in front and back of same st
- - } - p = purl
- {props.heeltype === 'flap' && p2tog = p two together
} - Rep = repeat
- Rnd(s) = round(s)
- RS = right side
- sl = slip (purlwise unless otherwise specified)
- {props.direction === 'cuffdown' && - - ssk = - slip, slip, knit (left-leaning decrease) -
- - } - st(s) = stitch(es)
- WS = wrong side
- {props.heeltype === 'shortrow' && - w&t = wrap and turn
 } - wyib = with yarn in back
- wyif = with yarn in front -

-
- ); +function SockAbbrevs({ direction, heeltype }) { + return ( +
+

+ These instructions are written for the magic loop or two circular + needles methods, as they reference the first needle and second needle. + To adapt for dpns, the first needle is dpn one and two and the second + needle is dpn three and four. +

+

Abbreviations

+
    +
  • BOR = beginning of round
    • +
  • k = knit
    • + {direction === "toeup" &&
  • kfb = k in front and back of same st
    • } +
  • p = purl
    • + {heeltype === "flap" &&
  • p2tog = p two together
    • } +
  • Rep = repeat
    • +
  • Rnd(s) = round(s)
    • +
  • RS = right side
    • +
  • sl = slip (purlwise unless otherwise specified)
    • + {direction === "cuffdown" && ( +
  • + ssk ={" "} + + slip, slip, knit (left-leaning decrease) + +
    • + )} +
  • st(s) = stitch(es)
    • +
  • WS = wrong side
    • + {heeltype === "shortrow" && ( +
  • + w&t ={" "} + + wrap and turn + +
    • + )} +
  • wyib = with yarn in back
    • +
  • wyif = with yarn in front
    • +
+
+ ); } -export default SockAbbrevs; \ No newline at end of file +export default SockAbbrevs; diff --git a/src/SockComponents/ToeUpPattern.js b/src/SockComponents/ToeUpPattern.js index 5267022..e16b29d 100644 --- a/src/SockComponents/ToeUpPattern.js +++ b/src/SockComponents/ToeUpPattern.js @@ -1,18 +1,18 @@ -import React from 'react'; -import ToeUpToe from './ToeUpToe'; -import Foot from './Foot'; -import ShortRowHeel from './ShortRowHeel'; -import ToeUpCuff from './ToeUpCuff'; +import React from "react"; +import ToeUpToe from "./ToeUpToe"; +import Foot from "./Foot"; +import ShortRowHeel from "./ShortRowHeel"; +import ToeUpCuff from "./ToeUpCuff"; function ToeUpPattern(props) { - return( -
- - - - -
- ) + return ( +
+ + + + +
+ ); } -export default ToeUpPattern; \ No newline at end of file +export default ToeUpPattern; diff --git a/src/SockComponents/ToeUpToe.js b/src/SockComponents/ToeUpToe.js index 6b92f8d..fcdcebb 100644 --- a/src/SockComponents/ToeUpToe.js +++ b/src/SockComponents/ToeUpToe.js @@ -1,15 +1,40 @@ -import React from 'react'; +import React from "react"; -function ToeUpToe(props) { - return( -
-

Toe

-

Using Judy's Magic Cast On, cast on {(props.state.fullStCount / 2) - 8} sts.

-

Rnd 1: kfb, k to 2 sts before end of first needle, kfb, k1, kfb, k to 2 sts before end of second needle, kfb, k1
- Rnd 2: k around

-

Rep rnds 1 and 2 until you have {props.state.fullStCount} sts. For a slightly more rounded toe, try repeating the first rnd twice before starting to repeat both rnds.

-
- ) +function ToeUpToe({ fullStCount }) { + return ( +
+

Toe

+

+ Using{" "} + + Judy's Magic Cast On + + , cast on{" "} + + {fullStCount / 2 - 8 - ((fullStCount / 2 - 8) % 4)} + {" "} + sts. +

+

+ Rnd 1: kfb, k to 2 sts before end of first needle, kfb, k1, kfb, k to 2 + sts before end of second needle, kfb, k1 +
+ Rnd 2: k around +

+

+ Rep rnds 1 and 2 until you have{" "} + {fullStCount} sts.{" "} + + For a slightly more rounded toe, try repeating the first rnd twice + before starting to repeat both rnds. + +

+
+ ); } -export default ToeUpToe; \ No newline at end of file +export default ToeUpToe; diff --git a/src/tests/HeaderImage.test.js b/src/tests/HeaderImage.test.js new file mode 100644 index 0000000..2bf70d9 --- /dev/null +++ b/src/tests/HeaderImage.test.js @@ -0,0 +1,8 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import HeaderImage from "../HeaderImage"; + +test("HeaderImage renders an image with alt text", () => { + render(); + expect(screen.getByRole("img")).toHaveAttribute("alt", "test"); +}); diff --git a/src/tests/SockAbbrevs.test.js b/src/tests/SockAbbrevs.test.js new file mode 100644 index 0000000..d457b19 --- /dev/null +++ b/src/tests/SockAbbrevs.test.js @@ -0,0 +1,10 @@ +import React from "react"; +import { cleanup, render, screen } from "@testing-library/react"; +import SockAbbrevs from "../SockComponents/SockAbbrevs"; + +afterEach(cleanup); + +test("SockAbbrevs should contain a list", () => { + render(); + expect(screen.queryByRole("list")).toBeTruthy(); +}); diff --git a/src/tests/SockRecipeToeUp.test.js b/src/tests/SockRecipeToeUp.test.js new file mode 100644 index 0000000..ca6ff6a --- /dev/null +++ b/src/tests/SockRecipeToeUp.test.js @@ -0,0 +1,10 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import Recipe from "../SockComponents/Recipe"; + +test("Toe up recipe should render with short row heel", () => { + /* const { container } = render( + + ); + expect(container.firstChild).toMatchSnapshot(); */ +}); diff --git a/src/tests/ToeUpToe.test.js b/src/tests/ToeUpToe.test.js new file mode 100644 index 0000000..59a7b13 --- /dev/null +++ b/src/tests/ToeUpToe.test.js @@ -0,0 +1,30 @@ +import React from "react"; +import { render, screen, cleanup } from "@testing-library/react"; +import ToeUpToe from "../SockComponents/ToeUpToe"; + +afterEach(cleanup); + +test("Toe up toe should render correctly", () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); +}); + +test("Difference between toe up starting st count and final st count should be a multiple of 4", () => { + render(); + let startingStCount = Number( + screen.getByTestId("toeup-startingStCount").textContent + ); + let fullStCount = Number( + screen.getByTestId("toeup-finalStCount").textContent + ); + expect((fullStCount - startingStCount) % 4).toBe(0); + cleanup(); + + render(); + startingStCount = Number( + screen.getByTestId("toeup-startingStCount").textContent + ); + fullStCount = Number(screen.getByTestId("toeup-finalStCount").textContent); + expect((fullStCount - startingStCount) % 4).toBe(0); + cleanup(); +}); diff --git a/src/tests/__snapshots__/ToeUpToe.test.js.snap b/src/tests/__snapshots__/ToeUpToe.test.js.snap new file mode 100644 index 0000000..202dddb --- /dev/null +++ b/src/tests/__snapshots__/ToeUpToe.test.js.snap @@ -0,0 +1,48 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toe up toe should render correctly 1`] = ` +
+

+ Toe +

+

+ Using + + + Judy's Magic Cast On + + , cast on + + + 20 + + + sts. +

+

+ Rnd 1: kfb, k to 2 sts before end of first needle, kfb, k1, kfb, k to 2 sts before end of second needle, kfb, k1 +
+ Rnd 2: k around +

+

+ Rep rnds 1 and 2 until you have + + + 60 + + sts. + + + For a slightly more rounded toe, try repeating the first rnd twice before starting to repeat both rnds. + +

+
+`;