Merge branch 'switching-tests-to-npm-package'

Author: Daniel Tonon

README.md

@@ -18,6 +18,10 @@ You can view a demo of the original plain javascript version here: https://dan50
 
 The component was built to work in [create-react-app](https://create-react-app.dev/docs/getting-started) projects. It should work ok in other React based frameworks though as well.
 
+> **`react-scripts` v5 is currently not supported.**
+>
+> This is related to React upgrading to Webpack v5. [This linked issue](https://github.com/facebook/create-react-app/issues/11865) is blocking my ability to support `react-scripts` v5.
+
 Install the polyfill component with npm:
 
 ```
@@ -96,19 +100,17 @@ You can also force-enable the polyfill so that it is active in modern browsers t
 import React from 'react'
 import { TimeInputPolyfill } from '@time-input-polyfill/react'
 
-export function TimeInput({ label, currentValue, onInputChange }) {
+export function TimeInput({ label, value, setValue }) {
     return (
         <label>
             <span>{label}</span>
             <TimeInputPolyfill
-                value={currentValue}
+                value={value}
+                setValue={setValue}
                 /* Force browsers that support input[type=time]
                    to use the polyfill.
                    (useful for testing and debugging) */
                 forcePolyfill={true}
-                onChange={({ value, element }) => {
-                    onInputChange(value)
-                }}
             />
         </label>
     )
@@ -192,8 +194,8 @@ Note: It is still possible to use `onChange`, however this is just an extension
 
 In version 1, you would import the polyfill utils from here:
 
-`@time-input-polyfill/react/dist/timePolyfillUtils.js`.
+`react-time-input-polyfill/dist/timePolyfillUtils.js`.
 
-That doesn't exist anymore, you need to import from here instead now:
+In version 2, you will need to import from here instead now:
 
 `@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js`

cypress/integration/button-tests.ts

@@ -0,0 +1,7 @@
+import { functionVsClassBased } from '../../support/functionVsClassBased'
+import { testSuite } from '../../support/testSuite'
+
+functionVsClassBased({
+	functionBased: testSuite.functionBased.tests.buttons.am,
+	classBased: testSuite.classBased.tests.buttons.am
+})

cypress/integration/button-tests/am-button-test.ts

@@ -0,0 +1,7 @@
+import { functionVsClassBased } from '../../support/functionVsClassBased'
+import { testSuite } from '../../support/testSuite'
+
+functionVsClassBased({
+	functionBased: testSuite.functionBased.tests.buttons.blank,
+	classBased: testSuite.classBased.tests.buttons.blank
+})

cypress/integration/button-tests/blank-button-test.ts

@@ -0,0 +1,7 @@
+import { functionVsClassBased } from '../../support/functionVsClassBased'
+import { testSuite } from '../../support/testSuite'
+
+functionVsClassBased({
+	functionBased: testSuite.functionBased.tests.buttons.pm,
+	classBased: testSuite.classBased.tests.buttons.pm
+})

cypress/integration/button-tests/pm-button-test.ts

@@ -0,0 +1,7 @@
+import { functionVsClassBased } from '../../support/functionVsClassBased'
+import { testSuite } from '../../support/testSuite'
+
+functionVsClassBased({
+	functionBased: testSuite.functionBased.tests.buttons.togglePolyfill,
+	classBased: testSuite.classBased.tests.buttons.togglePolyfill
+})

cypress/integration/button-tests/toggle-polyfill-button-tests.ts

@@ -0,0 +1,7 @@
+import { functionVsClassBased } from '../../support/functionVsClassBased'
+import { testSuite } from '../../support/testSuite'
+
+functionVsClassBased({
+	functionBased: testSuite.functionBased.tests.events.all,
+	classBased: testSuite.classBased.tests.events.all
+})

cypress/integration/event-tests.ts

@@ -0,0 +1,7 @@
+import { functionVsClassBased } from '../../support/functionVsClassBased'
+import { testSuite } from '../../support/testSuite'
+
+functionVsClassBased({
+	functionBased: testSuite.functionBased.tests.hours.hrs24Values,
+	classBased: testSuite.classBased.tests.hours.hrs24Values
+})