test: adds browser tests for registration example

test/browser/components/sys-form-button/colors.js

@@ -0,0 +1,14 @@
+import { Selector } from 'testcafe'
+
+import { assertScreenshot } from '../../../utility/browser'
+
+fixture`SysFormButton Colors`
+  .page`http://localhost:7684/iframe.html?id=high-level-components-button--colors&viewMode=story`
+
+const button = (i) => Selector(`#root button:nth-child(${i})`)
+
+test('screenshots', async (t) => {
+  await assertScreenshot(button(1), 'components/sys-form-button/colors-normal')
+  await assertScreenshot(button(2), 'components/sys-form-button/colors-primary')
+  await assertScreenshot(button(3), 'components/sys-form-button/colors-secondary')
+})

test/browser/sys-form/custom-submit.js → test/browser/components/sys-form/custom-submit.js

@@ -1,6 +1,6 @@
 import { Selector } from 'testcafe'
 
-import { assertScreenshot } from '../../utility/browser'
+import { assertScreenshot } from '../../../utility/browser'
 
 fixture`SysForm CustomSubmit`
   .page`http://localhost:7684/iframe.html?id=high-level-components-form--custom-submit&viewMode=story`
@@ -20,10 +20,10 @@ test('login button is reactive to form errors', async (t) => {
   await t.typeText(password, 'validpassword')
   await t.pressKey('tab')
   await t.expect(button.getAttribute('disabled')).eql(undefined)
-  await assertScreenshot(form, 'sys-form/reactive-enabled')
+  await assertScreenshot(form, 'components/sys-form/reactive-enabled')
   await t.typeText(email, 'nope', { replace: true })
   await t.typeText(password, 'nope', { replace: true })
   await t.pressKey('tab')
   await t.expect(button.getAttribute('disabled')).eql('disabled')
-  await assertScreenshot(form, 'sys-form/reactive-disabled')
+  await assertScreenshot(form, 'components/sys-form/reactive-disabled')
 })

test/browser/examples/registration.js

@@ -0,0 +1,38 @@
+import { Selector, t } from 'testcafe'
+
+fixture`SysForm CustomSubmit`
+  .page`http://localhost:7684/iframe.html?id=examples-register--normal&viewMode=story`
+
+const firstName = Selector('input#given_name')
+const lastName = Selector('input#family_name')
+const email = Selector('input#email')
+const phone = Selector('input#phone_number')
+const password = Selector('input#new_password')
+const confirmed = Selector('input#password_confirm')
+const button = Selector('button')
+
+async function fill (values) {
+  await t.typeText(firstName, values.firstName || 'first')
+  await t.typeText(lastName, values.lastName || 'last')
+  await t.typeText(email, values.email || '[email protected]')
+  await t.typeText(phone, values.phone || '1 234 567 8901')
+  await t.typeText(password, values.password || 'example')
+  await t.typeText(confirmed, values.confirmed || values.password || 'example')
+  await t.pressKey('tab')
+}
+
+test('allows spaces in first name', async (t) => {
+  await fill({ firstName: 'john joe bob son' })
+  await t.expect(button.getAttribute('disabled')).eql(undefined)
+})
+
+test('password confirmation', async (t) => {
+  await fill({
+    password: 'thisisapassword',
+    confirmed: 'incorrect password'
+  })
+
+  await t.expect(button.getAttribute('disabled')).eql('disabled')
+  await t.typeText(confirmed, 'thisisapassword', { replace: true })
+  await t.expect(button.getAttribute('disabled')).eql(undefined)
+})