Update build node version and bump NextJS version in test app (#4486)

* pin pkgr/utils for now

a sub dep of eslint-config-next pulls in a execa version that isnt compatible with our node version in circleci. Until we upgrade the node version and fix the numberfield tests, this fixes the build

* update nextjs version and node version on circleci

also fixes tests to match browser behavior

* fix tests

* fix new batch of failing tests

---------

Co-authored-by: Robert Snow <[email protected]>

Author: LFDanLu

.circleci/config.yml

@@ -6,22 +6,22 @@ orbs:
 executors:
   rsp:
     docker:
-      - image: cimg/node:16.13.2
+      - image: cimg/node:16.20.0
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:16.13.2
+      - image: cimg/node:16.20.0
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:16.13.2
+      - image: cimg/node:16.20.0
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1

examples/rsp-next-ts/package.json

@@ -17,15 +17,15 @@
     "@react-spectrum/toast": "^3.0.0-alpha.0",
     "@spectrum-icons/illustrations": "^3.5.0",
     "@spectrum-icons/workflow": "^4.0.3",
-    "next": "13.2.4",
+    "next": "^13.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.8.2",
     "@types/react": "^18.0.21",
     "eslint": "^8.24.0",
-    "eslint-config-next": "13.2.4",
+    "eslint-config-next": "^13.4.1",
     "typescript": "^4.8.4"
   }
 }

packages/@react-spectrum/datepicker/test/DateRangePicker.test.js

@@ -1020,7 +1020,7 @@ describe('DateRangePicker', function () {
       expect(endField).not.toHaveAttribute('aria-describedby');
 
       let description = group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-      expect(description).toBe('Selected Range: February 3, 2020, 8:00 AM to February 10, 2020, 10:00 AM');
+      expect(description).toBe('Selected Range: February 3, 2020 at 8:00 AM to February 10, 2020 at 10:00 AM');
     });
 
     it('should handle selected range description when start and end dates are the same', function () {
@@ -1034,7 +1034,7 @@ describe('DateRangePicker', function () {
       expect(endField).not.toHaveAttribute('aria-describedby');
 
       let description = group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-      expect(description).toBe('Selected Range: February 3, 2020, 8:00 AM to February 3, 2020, 8:00 AM');
+      expect(description).toBe('Selected Range: February 3, 2020 at 8:00 AM to February 3, 2020 at 8:00 AM');
     });
 
     it('should support format help text', function () {

packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js

@@ -107,6 +107,7 @@ describe('LabeledValue', function () {
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
     expect(staticField).toHaveTextContent('Feb 3, 2020, 12:23:24 PM');
+
   });
 
   it('renders correctly with ZonedDateTime value', function () {
@@ -119,7 +120,8 @@ describe('LabeledValue', function () {
 
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
-    expect(staticField).toHaveTextContent('February 3, 2020, 12:00 AM PST');
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:00 AM PST');
+
   });
 
   it('renders correctly with ZonedDateTime value with user provided format options', function () {
@@ -190,7 +192,7 @@ describe('LabeledValue', function () {
 
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
-    expect(staticField).toHaveTextContent('July 5, 2019, 12:00 AM – July 10, 2019, 12:00 AM');
+    expect(staticField).toHaveTextContent('July 5, 2019 at 12:00 AM – July 10, 2019 at 12:00 AM');
   });
 
   it('renders correctly with RangeValue<Time>', function () {
@@ -217,7 +219,7 @@ describe('LabeledValue', function () {
 
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
-    expect(staticField).toHaveTextContent('February 3, 2020, 12:00 AM PST – March 3, 2020, 12:00 AM PST');
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:00 AM PST – March 3, 2020 at 12:00 AM PST');
   });
 
   it('renders correctly with RangeValue<CalendarDateTime>', function () {
@@ -230,7 +232,7 @@ describe('LabeledValue', function () {
 
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
-    expect(staticField).toHaveTextContent('February 3, 2020, 12:23 PM – March 3, 2020, 12:23 PM');
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:23 PM – March 3, 2020 at 12:23 PM');
   });
 
   it('renders correctly with RangeValue<CalendarDate>', function () {

packages/@react-spectrum/numberfield/test/NumberField.test.js

@@ -927,7 +927,7 @@ describe('NumberField', function () {
     userEvent.type(textField, '(10)');
     expect(textField).toHaveAttribute('value', '(10)');
     expect(announce).toHaveBeenCalledTimes(3);
-    expect(announce).toHaveBeenLastCalledWith('؜−١٠٫٠٠ US$', 'assertive');
+    expect(announce).toHaveBeenLastCalledWith('‎−US$ 10.00', 'assertive');
     act(() => {textField.blur();});
     expect(textField).toHaveAttribute('value', '(US$10.00)');
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
@@ -979,7 +979,7 @@ describe('NumberField', function () {
   it.each`
     Name              | props                                                    | locale     | expected
     ${'US Euros'}     | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'en-US'} | ${'€10.00'}
-    ${'Arabic Euros'} | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'ar-AE'} | ${'١٠٫٠٠ €'}
+    ${'Arabic Euros'} | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'ar-AE'} | ${'€ 10.00'}
     ${'French Euros'} | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'fr-FR'} | ${'10,00 €'}
     ${'US JPY'}       | ${{formatOptions: {style: 'currency', currency: 'JPY'}}} | ${'en-US'} | ${'¥10'}
   `('$Name keeps formatted value on focus', ({props, locale, expected}) => {
@@ -996,10 +996,10 @@ describe('NumberField', function () {
     Name                       | props                                                                       | locale     | expected
     ${'US Euros'}              | ${{defaultValue: 10, formatOptions: {style: 'currency', currency: 'EUR'}}}  | ${'en-US'} | ${['€10.00', '€11.00', '€9.00']}
     ${'French Euros'}          | ${{defaultValue: 10, formatOptions: {style: 'currency', currency: 'EUR'}}}  | ${'fr-FR'} | ${['10,00 €', '11,00 €', '9,00 €']}
-    ${'Arabic Euros'}          | ${{defaultValue: 10, formatOptions: {style: 'currency', currency: 'EUR'}}}  | ${'ar-AE'} | ${['١٠٫٠٠ €', '١١٫٠٠ €', '٩٫٠٠ €']}
+    ${'Arabic Euros'}          | ${{defaultValue: 10, formatOptions: {style: 'currency', currency: 'EUR'}}}  | ${'ar-AE'} | ${['€ 10.00', '€ 11.00', '€ 9.00']}
     ${'US Euros negative'}     | ${{defaultValue: -10, formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'en-US'} | ${['-€10.00', '-€9.00', '-€11.00']}
     ${'French Euros negative'} | ${{defaultValue: -10, formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'fr-FR'} | ${['-10,00 €', '-9,00 €', '-11,00 €']}
-    ${'Arabic Euros negative'} | ${{defaultValue: -10, formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'ar-AE'} | ${['\u061C-\u0661\u0660\u066B\u0660\u0660\xA0\u20AC', '\u061C-\u0669\u066B\u0660\u0660\xA0\u20AC', '\u061C-\u0661\u0661\u066B\u0660\u0660\xA0\u20AC']}
+    ${'Arabic Euros negative'} | ${{defaultValue: -10, formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'ar-AE'} | ${['‎-€ 10.00', '‎-€ 9.00', '‎-€ 11.00']}
   `('$Name pressing increment & decrement keeps formatting', ({props, locale, expected}) => {
     let {textField, incrementButton, decrementButton} = renderNumberField({minValue: -15, ...props}, {locale});
 
@@ -1015,7 +1015,7 @@ describe('NumberField', function () {
     Name              | props                                                    | locale     | expected
     ${'US Euros'}     | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'en-US'} | ${['€10.00', '€11.00', '€9.00', '€9.00']}
     ${'French Euros'} | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'fr-FR'} | ${['10,00 €', '11,00 €', '9,00 €', '9,00 €']}
-    ${'Arabic Euros'} | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'ar-AE'} | ${['١٠٫٠٠ €', '١١٫٠٠ €', '٩٫٠٠ €', '٩٫٠٠ €']}
+    ${'Arabic Euros'} | ${{formatOptions: {style: 'currency', currency: 'EUR'}}} | ${'ar-AE'} | ${['€ 10.00', '€ 11.00', '€ 9.00', '€ 9.00']}
   `('$Name pressing up arrow & down arrow keeps focus state formatting', ({props, locale, expected}) => {
     let {textField} = renderNumberField({defaultValue: 10, onKeyDown: onKeyDownSpy, onKeyUp: onKeyUpSpy, ...props}, {locale});