From 9097fc3f191d8903a8695658a398647927b3dd10 Mon Sep 17 00:00:00 2001 From: Brittany Feenstra Date: Mon, 10 Aug 2020 14:59:09 -0700 Subject: [PATCH] clean up for PR and forgotten karma test for errors. --- .../editorSettings/googleAnalytics/index.js | 4 ++-- .../googleAnalytics/stories/index.js | 4 ++-- .../karma/editorSettings.karma.js | 24 ++++++++++++++++++- .../editorSettings/test/editorSettings.js | 8 +++---- .../test/validateGoogleAnalyticsIdFormat.js | 17 ++++--------- 5 files changed, 35 insertions(+), 22 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index e5c3f5c13727..45160e04a75e 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -45,6 +45,7 @@ export const TEXT = { SECTION_HEADING: __('Google Analytics Tracking ID', 'web-stories'), PLACEHOLDER: __('Enter your Google Analtyics Tracking ID', 'web-stories'), ARIA_LABEL: __('Enter your Google Analtyics Tracking ID', 'web-stories'), + INPUT_ERROR: __('Invalid ID format', 'web-stories'), }; function GoogleAnalyticsSettings({ @@ -61,12 +62,11 @@ function GoogleAnalyticsSettings({ const handleUpdateId = useCallback( (value) => { - // todo add validation to string format if (value.length === 0 || validateGoogleAnalyticsIdFormat(value)) { setInputError(''); return handleUpdateSettings({ newGoogleAnalyticsId: value }); } - return setInputError('Invalid ID format'); + return setInputError(TEXT.INPUT_ERROR); }, [handleUpdateSettings, setInputError] ); diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/stories/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/stories/index.js index 059afb8a665a..68cae6a30ca3 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/stories/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/stories/index.js @@ -34,7 +34,7 @@ export const _default = () => { return ( ); @@ -44,7 +44,7 @@ export const _CannotManageSettings = () => { return ( ); }; diff --git a/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js b/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js index cefbc8c2ca7b..2b374eedf52e 100644 --- a/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js +++ b/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js @@ -91,5 +91,27 @@ describe('Settings View', () => { expect(newInput.value).toBe(googleAnalyticsId); }); - // it("it should not allow an update of google analytics id when id format doesn't match required format", () => {}); + it("it should not allow an update of google analytics id when id format doesn't match required format", async () => { + const settingsView = await fixture.screen.getByTestId('editor-settings'); + + const input = within(settingsView).getByRole('textbox'); + + await fixture.events.hover(input); + + await fixture.events.click(input); + + const inputLength = input.value.length; + + for (let iter = 0; iter < inputLength; iter++) { + // disable eslint to prevent overlapping .act calls + // eslint-disable-next-line no-await-in-loop + await fixture.events.keyboard.press('Backspace'); + } + + await fixture.events.keyboard.type('Clearly not a valid id'); + await fixture.events.keyboard.press('Enter'); + + const errorMessage = await fixture.screen.getByText('Invalid ID format'); + expect(errorMessage).toBeTruthy(); + }); }); diff --git a/assets/src/dashboard/app/views/editorSettings/test/editorSettings.js b/assets/src/dashboard/app/views/editorSettings/test/editorSettings.js index a801ff26ce77..34a3c55d7f69 100644 --- a/assets/src/dashboard/app/views/editorSettings/test/editorSettings.js +++ b/assets/src/dashboard/app/views/editorSettings/test/editorSettings.js @@ -22,9 +22,10 @@ import PropTypes from 'prop-types'; * Internal dependencies */ import { renderWithTheme } from '../../../../testUtils'; -import EditorSettings from '../'; import { ApiContext } from '../../../api/apiProvider'; import { ConfigProvider } from '../../../config'; +import EditorSettings from '../'; +import { TEXT as GA_TEXT } from '../googleAnalytics'; const mockFetchSettings = jest.fn(); @@ -63,12 +64,9 @@ describe('Editor Settings: ', function () { ); - const googleAnalyticsHeading = getByText('Google Analytics Tracking ID'); + const googleAnalyticsHeading = getByText(GA_TEXT.SECTION_HEADING); expect(googleAnalyticsHeading).toBeInTheDocument(); - const publisherLogoHeading = getByText('Publisher Logo'); - expect(publisherLogoHeading).toBeInTheDocument(); - const input = getByRole('textbox'); expect(input).toBeDefined(); diff --git a/assets/src/dashboard/utils/test/validateGoogleAnalyticsIdFormat.js b/assets/src/dashboard/utils/test/validateGoogleAnalyticsIdFormat.js index 03c3902e06df..520f30d78e28 100644 --- a/assets/src/dashboard/utils/test/validateGoogleAnalyticsIdFormat.js +++ b/assets/src/dashboard/utils/test/validateGoogleAnalyticsIdFormat.js @@ -19,26 +19,19 @@ */ import { validateGoogleAnalyticsIdFormat } from '../'; -const validIdFormats = [ +const idsToValidate = [ ['UA-000000-56', true], ['ua-098765432-9875', true], -]; -const invalidIdFormats = [ ['78787878', false], ['ua--123448-0', false], ['clearly wrong', false], ]; describe('validateGoogleAnalyticsIdFormat', () => { - it.each(validIdFormats)('should return %s as true', (validId, expected) => { - const bool = validateGoogleAnalyticsIdFormat(validId); - expect(bool).toBe(expected); - }); - - it.each(invalidIdFormats)( - 'should return %s as false', - (invalidId, expected) => { - const bool = validateGoogleAnalyticsIdFormat(invalidId); + it.each(idsToValidate)( + 'should check if %s is valid %p %p', + (validId, expected) => { + const bool = validateGoogleAnalyticsIdFormat(validId); expect(bool).toBe(expected); } );