Add appointment to Claim Status summary #345

rocketnova · 2021-07-30T00:53:07Z

Ticket

Resolves #341

Changes

Create <Appointment> component (with story and tests)
Create <ClaimSummary> component (with story and tests)
Add business logic for when to display an appointment as part of Scenario 2
Add translation strings for appointments
Add missing Scenario 2 and Scenario 3 snapshot tests for <ClaimStatus> component
Add test helpers (broken out of getScenarioContent.test.tsx)
Fix bugs in formatDate
Fix bugs in timeSlot
Add a util file for handling Sentence case in strings

Context

This PR is big, but it is only actually handling one very narrow case: when to display the appointment date (pendingDetermination.scheduleDate) and time (pendingDetermination.timeSlotDesc) and how to format it.

Testing

yarn test

ALSO

While Installing pino-applicationinsights has broken storybook builds #299 is not resolved, comment out the following lines:

ui-claim-tracker/pages/index.tsx

Lines 95 to 98 in 32990f8

    
           if (isAzureEnv) { 
        
             const appInsightsStream = await appInsights.createWriteStream() 
        
             logger = pino(appInsightsStream) 
        
           }

Run yarn storybook
Navigate to Page > Default
Select scenario "Determination interview: scheduled"
Verify it looks right
Click the globe in the top menu bar and select "Español"
Verify it looks right
Navigate to Atoms > Appointment
Select a date (ignore the time picker) and verify in both English and Spanish
Enter a start and end time (must be between 1–12) and verify in both English and Spanish

Note: that some Spanish translation strings are still missing from main at the moment, but will be added with #329.

…lation team.

rocketnova · 2021-07-30T00:54:44Z

stories/Appointment.stories.tsx

+    timeSlot: {
+      table: {
+        disable: true,
+      },
+    },
+  },


Note: This hides the timeSlot argument from the Storybook Controls. Let me know if you disagree with this approach.

rocketnova · 2021-07-30T01:26:01Z

utils/formatDate.ts

+import enUS from 'date-fns/locale/en-US'
+import es from 'date-fns/locale/es'


Note: Locales are imported from https://github.com/date-fns/date-fns/tree/master/src/locale

…lures.

rocketnova · 2021-07-30T02:52:56Z

utils/formatDate.ts

 */
-export function getDateWithOffset(daysOffset = 1): Date {
+export function formatFromApiGateway(daysOffset = 1): string {


Note: I eliminated getDateWithOffset() as a standalone function because it tempted me into falling into the trap where running tests on different machines (with different server timezones) caused tests to fail. We should always be testing using the timezone-free datetime strings that the API gateway will give us.

lomky

Couple small questions!

lomky · 2021-07-30T12:42:52Z

components/Appointment.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from 'next-i18next'


:chef-kiss: component!

lomky · 2021-07-30T12:48:26Z

tests/components/Appointment.test.tsx

+const testCases = [
+  ['with no time slot, then match the snapshot', null, null],
+  ['with a morning time slot, then match the snapshot', 8, 10],
+  ['with an afternoon time slot, then match the snapshot', 1, 3],
+  ['with a time slot that starts in the morning and ends in the afternoon, then match the snapshot', 8, 3],
+  ['with a time slot that has a nonsense time range, then match the snapshot', 3, 9],
+]


I love this setup!

tests/components/Appointment.test.tsx

lomky · 2021-07-30T12:55:11Z

tests/components/Appointment.test.tsx

+  ['with a morning time slot, then match the snapshot', 8, 10],
+  ['with an afternoon time slot, then match the snapshot', 1, 3],
+  ['with a time slot that starts in the morning and ends in the afternoon, then match the snapshot', 8, 3],
+  ['with a time slot that has a nonsense time range, then match the snapshot', 3, 9],


we just wanna allow this? 👀

I think this is a good question. I'm not positive? I'll open a new ticket for this.

Ticket is #351

lomky · 2021-07-30T13:22:16Z

tests/testHelpers.ts

+/**
+ * Common test helpers to create shared mock data.
+ */


tests/utils/timeSlot.test.ts

lomky · 2021-07-30T13:56:11Z

tests/utils/getClaimStatus.test.tsx

+// Test buildAppointment()
+describe('An appointment is', () => {


really appreciate the nice layering of these tests to scope to each level's concerns

lomky · 2021-07-30T14:10:47Z

stories/Appointment.stories.tsx

+        min: 1,
+        max: 12,
+      },
+    },
+    end: {
+      name: 'end time',
+      table: {
+        type: {
+          summary: 'number',
+        },
+      },
+      control: {
+        type: 'number',
+        min: 1,
+        max: 12,


these don't seem to stop me:

Friday, July 30, 2021, between 12–15 p.m. Pacific time

Hmmmm. I'm going to go ahead and merge this without resolving it. I'll open a follow up (low priority) ticket.

Ticket is #350

rocketnova added 21 commits July 29, 2021 15:34

Add time slot utility to identify whether two times are both AM or PM.

efe89b7

Fix business hour handling.

0ef30dc

Add format for appointment dates.

30f4d55

Build an appointment object. Refactor test helpers.

d30bb8d

Pass appointment object through to Claim Status component.

e9f72ea

Add mockdate to getClaimStatus tests.

de6cf62

Add missing claim status snapshot tests for scenario 2 and 3.

eb26ae4

Display the appointment date in the Claim Status component.

bd7511e

Pass current language to date-fns for i18n.

5221a5b

Fix time zone mock bug.

7edecea

Correct Spanish language translation based on feedback from the trans…

338c3dc

…lation team.

Add Spanish language snapshots for appointment.

2b810d9

Refactor into separate Appointment component.

0420fea

Refactor into separate ClaimSummary component.

80178e3

Refactor appointment translation string using i18n interpolation.

ed665bb

Refactor types.

2814d22

Refactor type for Appointment component.

1d55769

Validate time slot times.

229d808

Customize Appointment story controls.

72ee757

Fix Claim Summary story nesting.

b9789e5

Refactor appointment component tests.

0f100b2

rocketnova commented Jul 30, 2021

View reviewed changes

rocketnova added 2 commits July 29, 2021 18:00

Add document-level comment for strings util.

5aaba29

Add key to all claim summary components.

7388dc4

rocketnova commented Jul 30, 2021

View reviewed changes

rocketnova added 3 commits July 29, 2021 18:28

Add another comment about act().

236a9c1

Remove use of unnecessary helper.

d22837f

Eliminate issue with differences in server time resulting in test fai…

838d2af

…lures.

rocketnova commented Jul 30, 2021

View reviewed changes

rocketnova mentioned this pull request Jul 30, 2021

Integrate Final Content into the Claim Tracker Application #348

Merged

4 tasks

lomky approved these changes Jul 30, 2021

View reviewed changes

rocketnova added 4 commits July 30, 2021 10:06

Merge branch 'main' into rocket/341-scenario-2-summary

ce47f62

Fix comment typo.

8247a16

Use integers in test instead of unnecessary consts.

67882ed

Update snapshots.

8b81264

This was referenced Jul 30, 2021

Investigate storybook min/max control options #350

Closed

Further restrict valid appointment time slot ranges #351

Open

rocketnova merged commit d848ffc into main Jul 30, 2021

rocketnova deleted the rocket/341-scenario-2-summary branch July 30, 2021 17:33

rocketnova mentioned this pull request Jul 30, 2021

Add additional Spanish translation strings. #352

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add appointment to Claim Status summary #345

Add appointment to Claim Status summary #345

rocketnova commented Jul 30, 2021

rocketnova Jul 30, 2021

rocketnova Jul 30, 2021

rocketnova Jul 30, 2021

lomky left a comment

lomky Jul 30, 2021

lomky Jul 30, 2021

lomky Jul 30, 2021

rocketnova Jul 30, 2021

rocketnova Jul 30, 2021

lomky Jul 30, 2021

lomky Jul 30, 2021

lomky Jul 30, 2021

rocketnova Jul 30, 2021

rocketnova Jul 30, 2021

	if (isAzureEnv) {
	const appInsightsStream = await appInsights.createWriteStream()
	logger = pino(appInsightsStream)
	}

		import enUS from 'date-fns/locale/en-US'
		import es from 'date-fns/locale/es'

		@@ -0,0 +1,49 @@
		import { useTranslation } from 'next-i18next'

		// Test buildAppointment()
		describe('An appointment is', () => {

Add appointment to Claim Status summary #345

Add appointment to Claim Status summary #345

Conversation

rocketnova commented Jul 30, 2021

Ticket

Changes

Context

Testing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lomky left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment