diff --git a/app/javascript/packs/admin/displayAds.jsx b/app/javascript/packs/admin/displayAds.jsx index 2ad29f35c..fb14d19b8 100644 --- a/app/javascript/packs/admin/displayAds.jsx +++ b/app/javascript/packs/admin/displayAds.jsx @@ -9,32 +9,89 @@ Document.prototype.ready = new Promise((resolve) => { return null; }); +/** + * A callback that sets the hidden 'js-tags-textfield' with the selection string that was chosen via the + * MultiSelectAutocomplete component. + * + * @param {String} selectionString The selected tags represented as a string (e.g. "webdev, git, career") + */ function saveTags(selectionString) { document.getElementsByClassName('js-tags-textfield')[0].value = selectionString; } -function loadTagsField() { - let defaultValue = ''; - const hiddenTagsField = - document.getElementsByClassName('js-tags-textfield')[0]; - - if (hiddenTagsField) { - defaultValue = hiddenTagsField.value.replaceAll(' ', ', '); - } - +/** + * Shows and Renders a Tags preact component for the Targeted Tag(s) field + */ +function showTagsField() { const displayAdsTargetedTags = document.getElementById( 'display-ad-targeted-tags', ); if (displayAdsTargetedTags) { + displayAdsTargetedTags.classList.remove('hidden'); render( - , + , displayAdsTargetedTags, ); } } +/** + * Hides the Targeted Tag(s) field + */ +function hideTagsField() { + const displayAdsTargetedTags = document.getElementById( + 'display-ad-targeted-tags', + ); + + displayAdsTargetedTags?.classList.add('hidden'); +} + +/** + * Clears the content (i.e. value) of the hidden tags textfield + */ +function clearTagList() { + const hiddenTagsField = + document.getElementsByClassName('js-tags-textfield')[0]; + + hiddenTagsField.value = ' '; +} + +/** + * Returns the value of the hidden text field to eventually pass as + * default values to the MultiSelectAutocomplete component. + */ +function defaultTagValues() { + let defaultValue = ''; + const hiddenTagsField = + document.getElementsByClassName('js-tags-textfield')[0]; + + if (hiddenTagsField) { + defaultValue = hiddenTagsField.value; + } + + return defaultValue; +} + +/** + * Shows and sets up the Targeted Tag(s) field if the placement area value is "post_comments". + * Listens for change events on the select placement area dropdown + * and shows and hides the Targeted Tag(s) appropriately. + */ document.ready.then(() => { - loadTagsField(); + const select = document.getElementsByClassName('js-placement-area')[0]; + + if (select.value === 'post_comments') { + showTagsField(); + } + + select.addEventListener('change', (event) => { + if (event.target.value === 'post_comments') { + showTagsField(); + } else { + hideTagsField(); + clearTagList(); + } + }); }); diff --git a/app/views/admin/display_ads/_form.html.erb b/app/views/admin/display_ads/_form.html.erb index 30bacc580..9d31aa4ff 100644 --- a/app/views/admin/display_ads/_form.html.erb +++ b/app/views/admin/display_ads/_form.html.erb @@ -17,18 +17,19 @@
<%= label_tag :placement_area, "Placement Area:", class: "crayons-field__label" %> - <%= select_tag :placement_area, options_for_select(display_ads_placement_area_options_array, selected: @display_ad.placement_area), include_blank: "Select...", class: "crayons-select" %> + <%= select_tag :placement_area, options_for_select(display_ads_placement_area_options_array, selected: @display_ad.placement_area), include_blank: "Select...", class: "crayons-select js-placement-area" %>
<% if FeatureFlag.enabled?(:display_ad_tags) %> -
-
-
- +
+
+
+ + <% end %>
diff --git a/cypress/e2e/seededFlows/adminFlows/displayAds/createDisplayAds.spec.js b/cypress/e2e/seededFlows/adminFlows/displayAds/createDisplayAds.spec.js new file mode 100644 index 000000000..4ff73674e --- /dev/null +++ b/cypress/e2e/seededFlows/adminFlows/displayAds/createDisplayAds.spec.js @@ -0,0 +1,37 @@ +// These assertions are currently skipped because we have the display_ad_tags Feature Flag in place right now. +// We've tried to incorporate feature flags in Cypress tests previously, but there isn't an easy way to do it via an API. +// Hence, for that reason and a couple of other db requirements we went with a separate db and script in the past. +// This is not feasible for every use case. + +// Since these feature flags are temporary, I'll skip these cypress tests for now and add the tests back and remove these comments +// once the feature flags have been removed. + +xdescribe('Create Display Ads', () => { + context('when creating a new display ad', () => { + beforeEach(() => { + cy.testSetup(); + cy.fixture('users/adminUser.json').as('user'); + + cy.get('@user').then((user) => { + cy.loginAndVisit(user, '/admin/customization/display_ads'); + cy.findByRole('link', { name: 'Make A New Display Ad' }).click({ + force: true, + }); + }); + }); + + it('should not show the tags field if the placement is not "Below the comment section"', () => { + cy.findByRole('combobox', { name: 'Placement Area:' }).select( + 'Sidebar Right', + ); + cy.findByRole('input', { name: 'Targeted Tag(s)' }).should('not.exist'); + }); + + it('should show the tags field if the placement is "Below the comment section"', () => { + cy.findByRole('combobox', { name: 'Placement Area:' }).select( + 'Below the comment section', + ); + cy.findByLabelText('Targeted Tag(s)').should('exist'); + }); + }); +}); diff --git a/cypress/e2e/seededFlows/adminFlows/displayAds/displayAds.spec.js b/cypress/e2e/seededFlows/adminFlows/displayAds/deleteDisplayAds.spec.js similarity index 98% rename from cypress/e2e/seededFlows/adminFlows/displayAds/displayAds.spec.js rename to cypress/e2e/seededFlows/adminFlows/displayAds/deleteDisplayAds.spec.js index 10824d922..ee75e10c2 100644 --- a/cypress/e2e/seededFlows/adminFlows/displayAds/displayAds.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/displayAds/deleteDisplayAds.spec.js @@ -1,4 +1,4 @@ -describe('Display Ads', () => { +describe('Delete Display Ads', () => { beforeEach(() => { cy.testSetup(); cy.fixture('users/adminUser.json').as('user');