feat: add discover customization (sct#3182)

cypress/e2e/settings/discover-customization.cy.ts

@@ -0,0 +1,151 @@
+describe('Discover Customization', () => {
+  beforeEach(() => {
+    cy.loginAsAdmin();
+    cy.intercept('/api/v1/settings/discover').as('getDiscoverSliders');
+  });
+
+  it('show the discover customization settings', () => {
+    cy.visit('/settings');
+
+    cy.get('[data-testid=discover-customization]')
+      .should('contain', 'Discover Customization')
+      .scrollIntoView();
+
+    // There should be some built in options
+    cy.get('[data-testid=discover-option]').should('contain', 'Recently Added');
+    cy.get('[data-testid=discover-option]').should(
+      'contain',
+      'Recent Requests'
+    );
+  });
+
+  it('can drag to re-order elements and save to persist the changes', () => {
+    let dataTransfer = new DataTransfer();
+    cy.visit('/settings');
+
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .trigger('dragstart', { dataTransfer });
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .trigger('drop', { dataTransfer });
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .trigger('dragend', { dataTransfer });
+
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .should('contain', 'Recently Added');
+
+    cy.get('[data-testid=discover-customize-submit').click();
+    cy.wait('@getDiscoverSliders');
+
+    cy.reload();
+
+    dataTransfer = new DataTransfer();
+
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .should('contain', 'Recently Added');
+
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .trigger('dragstart', { dataTransfer });
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .trigger('drop', { dataTransfer });
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .trigger('dragend', { dataTransfer });
+
+    cy.get('[data-testid=discover-option]')
+      .eq(1)
+      .should('contain', 'Recent Requests');
+
+    cy.get('[data-testid=discover-customize-submit').click();
+    cy.wait('@getDiscoverSliders');
+  });
+
+  it('can create a new discover option and remove it', () => {
+    cy.visit('/settings');
+    cy.intercept('/api/v1/settings/discover/*').as('discoverSlider');
+    cy.intercept('/api/v1/search/keyword*').as('searchKeyword');
+
+    const sliderTitle = 'Custom Keyword Slider';
+
+    cy.get('#sliderType').select('TMDB Movie Keyword');
+
+    cy.get('#title').type(sliderTitle);
+    // First confirm that an invalid keyword doesn't allow us to submit anything
+    cy.get('#data').type('invalidkeyword{enter}', { delay: 100 });
+    cy.wait('@searchKeyword');
+
+    cy.get('[data-testid=create-discover-option-form]')
+      .find('button')
+      .should('be.disabled');
+
+    cy.get('#data').clear();
+    cy.get('#data').type('time travel{enter}', { delay: 100 });
+
+    // Confirming we have some results
+    cy.contains('.slider-header', sliderTitle)
+      .next('[data-testid=media-slider]')
+      .find('[data-testid=title-card]');
+
+    cy.get('[data-testid=create-discover-option-form]').submit();
+
+    cy.wait('@discoverSlider');
+    cy.wait('@getDiscoverSliders');
+    cy.wait(1000);
+
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .should('contain', sliderTitle);
+
+    // Make sure its still there even if we reload
+    cy.reload();
+
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .should('contain', sliderTitle);
+
+    // Verify it's not rendering on our discover page (its still disabled!)
+    cy.visit('/');
+
+    cy.get('.slider-header').should('not.contain', sliderTitle);
+
+    cy.visit('/settings');
+
+    // Enable it, and check again
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .find('[role="checkbox"]')
+      .click();
+
+    cy.get('[data-testid=discover-customize-submit').click();
+    cy.wait('@getDiscoverSliders');
+
+    cy.visit('/');
+
+    cy.contains('.slider-header', sliderTitle)
+      .next('[data-testid=media-slider]')
+      .find('[data-testid=title-card]');
+
+    cy.visit('/settings');
+
+    // let's delete it and confirm its deleted.
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .find('button')
+      .should('contain', 'Remove')
+      .click();
+
+    cy.wait('@discoverSlider');
+    cy.wait('@getDiscoverSliders');
+    cy.wait(1000);
+
+    cy.get('[data-testid=discover-option]')
+      .first()
+      .should('not.contain', sliderTitle);
+  });
+});

cypress/e2e/settings/general-settings.cy.ts

@@ -16,7 +16,7 @@ describe('General Settings', () => {
     cy.visit('/settings');
 
     cy.get('#trustProxy').click();
-    cy.get('form').submit();
+    cy.get('[data-testid=settings-main-form]').submit();
     cy.get('[data-testid=modal-title]').should(
       'contain',
       'Server Restart Required'
@@ -26,7 +26,7 @@ describe('General Settings', () => {
     cy.get('[data-testid=modal-title]').should('not.exist');
 
     cy.get('[type=checkbox]#trustProxy').click();
-    cy.get('form').submit();
+    cy.get('[data-testid=settings-main-form]').submit();
     cy.get('[data-testid=modal-title]').should('not.exist');
   });
 });