add tests

Author: nathancahill

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                targets: {
+                    node: 'current',
+                },
+            },
+        ],
+    ],
+}

package.json

@@ -8,14 +8,21 @@
     "main": "dist/index.js",
     "license": "MIT",
     "devDependencies": {
+        "@babel/core": "^7.8.4",
+        "@babel/preset-env": "^7.8.4",
         "@rollup/plugin-node-resolve": "^7.1.1",
+        "@testing-library/jest-dom": "^5.1.1",
+        "babel-jest": "^25.1.0",
+        "dainte": "^0.1.2",
         "jest": "^25.1.0",
+        "jsdom": "^16.1.0",
         "prettier": "^1.19.1",
         "rollup": "^1.31.1",
         "rollup-plugin-svelte": "^5.1.1",
         "svelte": "^3.0.0"
     },
     "dependencies": {
+        "code-red": "^0.1.1",
         "lodash-es": "^4.0.0",
         "svelte": "^3.0.0"
     },

src/Sveltik.svelte

@@ -34,7 +34,7 @@
     let submitSuccessCount = 0
 
     $: isValid = isEmpty(pickBy($errors))
-    $: isDirty = isEqual($values, initialValues)
+    $: isDirty = !isEqual($values, initialValues)
 
     $: {
         if (enableReinitialize) {
@@ -72,7 +72,7 @@
     function setFieldTouched(field, isTouched, shouldValidate = validateOnBlur) {
         touched.update(_t => ({ ..._t, [field]: isTouched }))
 
-        if (shouldValidate) {
+        if (isTouched && shouldValidate) {
             handleValidate()
         }
     }
@@ -300,4 +300,42 @@
     {handleInput}
     {handleReset}
     {handleSubmit}
+
+    props={{
+        errors: $errors,
+        touched: $touched,
+        values: $values,
+        warnings: $warnings,
+
+        isDirty,
+        isSubmitting,
+        isValid,
+        isValidating,
+        status,
+        submitAttemptCount,
+        submitFailureCount,
+        submitSuccessCount,
+
+        resetForm,
+        setErrors,
+        setFieldError,
+        setFieldTouched,
+        setFieldValue,
+        setFieldWarning,
+        setStatus,
+        setSubmitting,
+        setTouched,
+        setValues,
+        setWarnings,
+        submitFailure,
+        submitForm,
+        submitSuccess,
+        validateField,
+        validateForm,
+
+        handleBlur,
+        handleInput,
+        handleReset,
+        handleSubmit,
+    }}
 ></slot>

tests/fixtures/hello-world.svelte

@@ -0,0 +1,11 @@
+<script>
+import { Sveltik } from '../../src'
+
+const initialValues = {
+    name: 'world'
+}
+</script>
+
+<Sveltik {initialValues} let:values>
+    <div>Hello {values.name}</div>
+</Sveltik>

tests/fixtures/input.svelte

@@ -0,0 +1,41 @@
+<script>
+import { Sveltik, Form, Field, ErrorMessage } from '../../src'
+
+let initialValues = {
+    email: '',
+    password: '',
+}
+
+let validate = values => {
+    const errors = {}
+    if (!values.email) {
+        errors.email = 'Required'
+    } else if (
+        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
+    ) {
+        errors.email = 'Invalid email address'
+    }
+    return errors
+}
+
+let onSubmit = (values) => new Promise((resolve, reject) => {
+    resolve()
+})
+</script>
+
+<Sveltik
+    {initialValues}
+    {validate}
+    {onSubmit}
+    let:isSubmitting
+>
+    <Form>
+        <Field type="email" name="email" />
+        <ErrorMessage name="email" component="div" />
+        <Field type="password" name="password" />
+        <ErrorMessage name="password" component="div" />
+        <button type="submit" disabled={isSubmitting}>
+            Submit
+        </button>
+    </Form>
+</Sveltik>

tests/fixtures/state.svelte

@@ -0,0 +1,17 @@
+<script>
+import { Sveltik } from '../../src'
+
+export let initialValues = {
+    email: '',
+    password: '',
+}
+</script>
+
+<Sveltik
+    {initialValues}
+    let:props
+>
+    <div id="__state">
+        {JSON.stringify(props)}
+    </div>
+</Sveltik>