From c569706e22ae42d0389a936b1c515654879c1fc8 Mon Sep 17 00:00:00 2001 From: Dan Bjorge Date: Fri, 2 Dec 2022 13:53:15 -0500 Subject: [PATCH] chore(null): strict null checks for UI package and deps (#6226) #### Details Adds the UI package's impl directory + its dependants to the strict null check set. ##### Motivation #2869 ##### Context n/a #### Pull request checklist - [x] Addresses an existing issue: #2869 - [x] Ran `yarn null:autoadd` - [x] Ran `yarn fastpass` - [x] Added/updated relevant unit test(s) (and ran `yarn test`) - [x] Verified code coverage for the changes made. Check coverage report at: `/test-results/unit/coverage` - [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`. - [n/a] (UI changes only) Added screenshots/GIFs to description above - [n/a] (UI changes only) Verified usability with NVDA/JAWS --- .../cards/card-footer-instance-action-buttons.tsx | 2 +- .../cards/card-footer-menu-items-builder.ts | 7 ++++++- .../components/cards/collapsible-component-cards.tsx | 4 ++-- .../components/cards/instance-details-footer.tsx | 2 +- .../components/cards/instance-details-group.tsx | 2 +- src/common/components/cards/instance-details.tsx | 2 +- .../components/cards/result-section-content.tsx | 2 +- src/common/components/cards/rule-content.tsx | 2 +- src/common/components/cards/rules-with-instances.tsx | 2 +- .../accessibility-insights-ui/ui-factory.tsx | 12 ++++++++++-- .../combined-report-failed-section.tsx | 4 ++-- src/tests/unit/common/tab-store-data-builder.ts | 11 ++++++++++- .../__snapshots__/ui-factory.test.tsx.snap | 10 ++++++++-- .../combined-report-failed-section.test.tsx | 2 +- tsconfig.strictNullChecks.json | 3 +++ 15 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/common/components/cards/card-footer-instance-action-buttons.tsx b/src/common/components/cards/card-footer-instance-action-buttons.tsx index 27a00a5ca62..2b61787c9c1 100644 --- a/src/common/components/cards/card-footer-instance-action-buttons.tsx +++ b/src/common/components/cards/card-footer-instance-action-buttons.tsx @@ -32,7 +32,7 @@ export type CardFooterInstanceActionButtonsDeps = { export interface CardFooterInstanceActionButtonsProps { deps: CardFooterInstanceActionButtonsDeps; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; issueDetailsData: CreateIssueDetailsTextData; kebabMenuAriaLabel?: string; narrowModeStatus?: NarrowModeStatus; diff --git a/src/common/components/cards/card-footer-menu-items-builder.ts b/src/common/components/cards/card-footer-menu-items-builder.ts index 5fe9f83b560..e602a20f446 100644 --- a/src/common/components/cards/card-footer-menu-items-builder.ts +++ b/src/common/components/cards/card-footer-menu-items-builder.ts @@ -27,7 +27,7 @@ export type CardFooterMenuItemsProps = { fileIssueButtonRef: IRefObject & IRefObject; toastRef: React.RefObject; issueDetailsData: CreateIssueDetailsTextData; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; onIssueFilingSettingsDialogDismissed: () => void; deps: CardFooterMenuItemsDeps; }; @@ -90,6 +90,11 @@ export class CardFooterMenuItemsBuilder { cardsViewController, } = deps; + if (userConfigurationStoreData == null) { + // Intentionally no-op; store data is still in flight from initial load + return; + } + const selectedBugFilingService = issueFilingServiceProvider.forKey( userConfigurationStoreData.bugService, ); diff --git a/src/common/components/cards/collapsible-component-cards.tsx b/src/common/components/cards/collapsible-component-cards.tsx index b4c4b43d0bd..db55a829077 100644 --- a/src/common/components/cards/collapsible-component-cards.tsx +++ b/src/common/components/cards/collapsible-component-cards.tsx @@ -11,7 +11,7 @@ import styles from './collapsible-component-cards.scss'; export const collapsibleButtonAutomationId = 'collapsible-component-cards-button'; export type CollapsibleComponentCardsDeps = { - setFocusVisibility: SetFocusVisibility; + setFocusVisibility?: SetFocusVisibility; }; export interface CollapsibleComponentCardsProps { @@ -59,7 +59,7 @@ const CollapsibleComponentCards = NamedFC( } const onClick = (event: React.MouseEvent) => { - if (event.nativeEvent.detail === 0) { + if (event.nativeEvent.detail === 0 && deps.setFocusVisibility != null) { // 0 => keyboard event deps.setFocusVisibility(true); } diff --git a/src/common/components/cards/instance-details-footer.tsx b/src/common/components/cards/instance-details-footer.tsx index e7edd936245..8de85467f5f 100644 --- a/src/common/components/cards/instance-details-footer.tsx +++ b/src/common/components/cards/instance-details-footer.tsx @@ -30,7 +30,7 @@ export type InstanceDetailsFooterDeps = { export type InstanceDetailsFooterProps = { deps: InstanceDetailsFooterDeps; result: CardResult; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; targetAppInfo: TargetAppData; rule: UnifiedRule; narrowModeStatus?: NarrowModeStatus; diff --git a/src/common/components/cards/instance-details-group.tsx b/src/common/components/cards/instance-details-group.tsx index d84cb56efae..ea18ee0d680 100644 --- a/src/common/components/cards/instance-details-group.tsx +++ b/src/common/components/cards/instance-details-group.tsx @@ -25,7 +25,7 @@ export type InstanceDetailsGroupDeps = { export type InstanceDetailsGroupProps = { deps: InstanceDetailsGroupDeps; rule: CardRuleResult; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; targetAppInfo: TargetAppData; cardSelectionMessageCreator?: CardSelectionMessageCreator; narrowModeStatus?: NarrowModeStatus; diff --git a/src/common/components/cards/instance-details.tsx b/src/common/components/cards/instance-details.tsx index b8d092a3006..4ec5cf7f2a8 100644 --- a/src/common/components/cards/instance-details.tsx +++ b/src/common/components/cards/instance-details.tsx @@ -31,7 +31,7 @@ export type InstanceDetailsProps = { deps: InstanceDetailsDeps; result: CardResult; index: number; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; targetAppInfo: TargetAppData; rule: UnifiedRule; cardSelectionMessageCreator?: CardSelectionMessageCreator; diff --git a/src/common/components/cards/result-section-content.tsx b/src/common/components/cards/result-section-content.tsx index 28021d93f69..456655a3ccf 100644 --- a/src/common/components/cards/result-section-content.tsx +++ b/src/common/components/cards/result-section-content.tsx @@ -27,7 +27,7 @@ export type ResultSectionContentProps = { results: CardRuleResult[]; outcomeType: InstanceOutcomeType; fixInstructionProcessor?: FixInstructionProcessor; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; targetAppInfo: TargetAppData; visualHelperEnabled: boolean; allCardsCollapsed: boolean; diff --git a/src/common/components/cards/rule-content.tsx b/src/common/components/cards/rule-content.tsx index 370ecaf76f4..178be1ec068 100644 --- a/src/common/components/cards/rule-content.tsx +++ b/src/common/components/cards/rule-content.tsx @@ -16,7 +16,7 @@ export type RuleContentDeps = InstanceDetailsGroupDeps & RuleResourcesDeps; export type RuleContentProps = { deps: RuleContentDeps; rule: CardRuleResult; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; targetAppInfo: TargetAppData; cardSelectionMessageCreator?: CardSelectionMessageCreator; narrowModeStatus?: NarrowModeStatus; diff --git a/src/common/components/cards/rules-with-instances.tsx b/src/common/components/cards/rules-with-instances.tsx index 40d33aef536..87cb3fb6f6b 100644 --- a/src/common/components/cards/rules-with-instances.tsx +++ b/src/common/components/cards/rules-with-instances.tsx @@ -29,7 +29,7 @@ export type RulesWithInstancesProps = { deps: RulesWithInstancesDeps; rules: CardRuleResult[]; outcomeType: InstanceOutcomeType; - userConfigurationStoreData: UserConfigurationStoreData; + userConfigurationStoreData: UserConfigurationStoreData | null; targetAppInfo: TargetAppData; outcomeCounter: OutcomeCounter; headingLevel: number; diff --git a/src/packages/accessibility-insights-ui/ui-factory.tsx b/src/packages/accessibility-insights-ui/ui-factory.tsx index 3c0e8262a17..90d168234c6 100644 --- a/src/packages/accessibility-insights-ui/ui-factory.tsx +++ b/src/packages/accessibility-insights-ui/ui-factory.tsx @@ -9,6 +9,7 @@ import * as React from 'react'; import { ContentView, ContentViewDeps } from 'views/content/content-view'; import { GuidanceTitle } from 'views/content/guidance-title'; import { createMarkup, MarkupDeps } from 'views/content/markup'; +import { ClientStoresHub } from 'common/stores/client-stores-hub'; type UIOptions = { applicationTitle: string; @@ -17,6 +18,14 @@ type UIOptions = { }; const nullCreator = () => {}; +const nullStoresHub: ClientStoresHub = { + stores: [], + addChangedListenerToAllStores: () => {}, + removeChangedListenerFromAllStores: () => {}, + hasStores: () => false, + hasStoreData: () => false, + getAllStoreData: () => null, +}; export const contentViewFactory = ({ applicationTitle, getNarrowModeThresholds }: UIOptions) => { const contentViewDeps: ContentViewDeps = { @@ -26,8 +35,7 @@ export const contentViewFactory = ({ applicationTitle, getNarrowModeThresholds } storeActionMessageCreator: { getAllStates: nullCreator, }, - storesHub: null, - storesActionCreator: null, + storesHub: nullStoresHub, getNarrowModeThresholds, }; diff --git a/src/reports/components/report-sections/combined-report-failed-section.tsx b/src/reports/components/report-sections/combined-report-failed-section.tsx index d8134288eed..31c0f70536f 100644 --- a/src/reports/components/report-sections/combined-report-failed-section.tsx +++ b/src/reports/components/report-sections/combined-report-failed-section.tsx @@ -49,9 +49,9 @@ export const CombinedReportFailedSection = NamedFC ), - onExpandToggle: null, + onExpandToggle: () => {}, headingLevel: 3, - deps: null, + deps: {}, }); return
{CollapsibleContent}
; diff --git a/src/tests/unit/common/tab-store-data-builder.ts b/src/tests/unit/common/tab-store-data-builder.ts index c2fb0823a19..798a8642feb 100644 --- a/src/tests/unit/common/tab-store-data-builder.ts +++ b/src/tests/unit/common/tab-store-data-builder.ts @@ -7,6 +7,15 @@ import { BaseDataBuilder } from './base-data-builder'; export class TabStoreDataBuilder extends BaseDataBuilder { constructor() { super(); - this.data = new TabStore(null, null, null, null, null, null, null, null).getDefaultState(); + this.data = new TabStore( + null!, + null!, + null!, + null!, + null!, + null!, + null!, + null!, + ).getDefaultState(); } } diff --git a/src/tests/unit/tests/packages/accessibility-insights-ui/__snapshots__/ui-factory.test.tsx.snap b/src/tests/unit/tests/packages/accessibility-insights-ui/__snapshots__/ui-factory.test.tsx.snap index b0d6b255c82..61fac0371b4 100644 --- a/src/tests/unit/tests/packages/accessibility-insights-ui/__snapshots__/ui-factory.test.tsx.snap +++ b/src/tests/unit/tests/packages/accessibility-insights-ui/__snapshots__/ui-factory.test.tsx.snap @@ -8,8 +8,14 @@ exports[`UIFactory exports ContentView 1`] = ` "storeActionMessageCreator": { "getAllStates": [Function], }, - "storesActionCreator": null, - "storesHub": null, + "storesHub": { + "addChangedListenerToAllStores": [Function], + "getAllStoreData": [Function], + "hasStoreData": [Function], + "hasStores": [Function], + "removeChangedListenerFromAllStores": [Function], + "stores": [], + }, "textContent": { "applicationTitle": "THE_APPLICATION_TITLE", }, diff --git a/src/tests/unit/tests/reports/components/report-sections/combined-report-failed-section.test.tsx b/src/tests/unit/tests/reports/components/report-sections/combined-report-failed-section.test.tsx index 2dd15e02077..82bebbbbb8c 100644 --- a/src/tests/unit/tests/reports/components/report-sections/combined-report-failed-section.test.tsx +++ b/src/tests/unit/tests/reports/components/report-sections/combined-report-failed-section.test.tsx @@ -35,7 +35,7 @@ describe('CombinedReportFailedSection', () => { const expectedCollapsibleControlProps: Partial = { headingLevel: 3, - deps: null, + deps: {}, }; collapsibleControlMock diff --git a/tsconfig.strictNullChecks.json b/tsconfig.strictNullChecks.json index ef45e560796..1c299c4b5e7 100644 --- a/tsconfig.strictNullChecks.json +++ b/tsconfig.strictNullChecks.json @@ -445,6 +445,7 @@ "./src/reports/components/report-sections/body-section.tsx", "./src/reports/components/report-sections/collapsible-script-provider.tsx", "./src/reports/components/report-sections/collapsible-url-result-section.tsx", + "./src/reports/components/report-sections/combined-report-failed-section.tsx", "./src/reports/components/report-sections/content-container.tsx", "./src/reports/components/report-sections/failed-urls-section.tsx", "./src/reports/components/report-sections/fast-pass-results-title-section.tsx", @@ -529,6 +530,7 @@ "./src/tests/unit/common/simulated-browser-event.ts", "./src/tests/unit/common/simulated-window.ts", "./src/tests/unit/common/store-tester.ts", + "./src/tests/unit/common/tab-store-data-builder.ts", "./src/tests/unit/common/test-document-creator.ts", "./src/tests/unit/common/time-simulating-promise-factory.ts", "./src/tests/unit/common/typemoq-helper.ts", @@ -600,6 +602,7 @@ "src/injected/frameCommunicators/**/*", "src/injected/styles/**/*", "src/issue-filing/common/markup/**/*", + "src/packages/accessibility-insights-ui/**/*", "src/popup/Styles/**/*", "src/popup/actions/**/*", "src/report-export/**/*",