Fix QualityChooser (#6918)

* Remove waitFor from QualityChooser

Use `v-if`s instead

* [bundle]

* Convert QualityChooser test to async test

vuejs/vue-test-utils#1137

Author: sharkykh

Diff for: themes-default/slim/src/components/helpers/quality-chooser.vue

@@ -80,7 +80,7 @@
             <div v-else>Please select at least one allowed quality.</div>
         </div>
 
-        <div v-if="showSlug && (allowedQualities.length + preferredQualities.length) >= 1">
+        <div v-if="backloggedEpisodes">
             <h5 class="{ 'red-text': !backloggedEpisodes.status }" v-html="backloggedEpisodes.html" />
         </div>
 
@@ -106,7 +106,6 @@
 import { mapGetters, mapState } from 'vuex';
 
 import { api } from '../../api';
-import { waitFor } from '../../utils/core';
 import AppLink from './app-link';
 
 export default {
@@ -194,12 +193,12 @@ export default {
 
             // Skip if no showSlug, as that means we're on a addShow page
             if (!showSlug) {
-                return {};
+                return null;
             }
 
             // Skip if no qualities are selected
-            if (allowedQualities.length === 0 && preferredQualities.length === 0) {
-                return {};
+            if ((allowedQualities.length + preferredQualities.length) === 0) {
+                return null;
             }
 
             const url = `series/${showSlug}/legacy/backlogged`;
@@ -254,10 +253,7 @@ export default {
         isQualityPreset(quality) {
             return this.getQualityPreset({ value: quality }) !== undefined;
         },
-        async setInitialPreset(preset) {
-            // Wait for the store to get populated.
-            await waitFor(() => this.qualityValues.length > 0, 100, 3000);
-
+        setInitialPreset(preset) {
             const { isQualityPreset, keep } = this;
             const newPreset = keep === 'keep' ? 'keep' : (isQualityPreset(preset) ? preset : 0);
             this.selectedQualityPreset = [newPreset, preset];

Diff for: themes-default/slim/test/specs/quality-chooser.spec.js

@@ -23,11 +23,12 @@ describe('QualityChooser.test.js', () => {
         store.replaceState(state);
     });
 
-    it('renders', () => {
+    it('renders', async () => {
         const { state } = fixtures;
         const wrapper = shallowMount(QualityChooser, {
             localVue,
             store,
+            sync: false,
             propsData: {
                 overallQuality: undefined,
                 keep: 'show'
@@ -45,18 +46,21 @@ describe('QualityChooser.test.js', () => {
 
         // If `overallQuality` is provided, `initialQuality` should be that value
         wrapper.setProps({ overallQuality: 1000 }); // HD preset
+        await wrapper.vm.$nextTick();
         expect(wrapper.vm.initialQuality).toBe(1000);
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(false);
 
         // Choose a preset
         wrapper.setData({ selectedQualityPreset: 6 }); // SD preset
+        await wrapper.vm.$nextTick();
         // Custom quality elements should be hidden
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(false);
         expect(wrapper.vm.allowedQualities).toEqual([2, 4]);
         expect(wrapper.vm.preferredQualities).toEqual([]);
 
         // Choose custom
         wrapper.setData({ selectedQualityPreset: 0 });
+        await wrapper.vm.$nextTick();
         // Custom quality elements should now be visible
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(true);
         expect(wrapper.vm.allowedQualities).toEqual([2, 4]);
@@ -67,18 +71,21 @@ describe('QualityChooser.test.js', () => {
             selectedQualityPreset: 0,
             allowedQualities: []
         });
+        await wrapper.vm.$nextTick();
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(true);
         expect(wrapper.findAll('#customQualityWrapper select').at(1).is(':disabled')).toBe(true);
 
         // Choose keep
         wrapper.setData({ selectedQualityPreset: 'keep' });
+        await wrapper.vm.$nextTick();
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(false);
         // Underlying value should be equal to `initialQuality`
         expect(wrapper.vm.allowedQualities).toEqual([8, 32, 64, 128, 256, 512]); // HD preset
         expect(wrapper.vm.preferredQualities).toEqual([]);
 
         // And to custom again
         wrapper.setData({ selectedQualityPreset: 0 });
+        await wrapper.vm.$nextTick();
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(true);
         // Underlying value should be equal to `initialQuality`
         expect(wrapper.vm.allowedQualities).toEqual([8, 32, 64, 128, 256, 512]); // HD preset
@@ -88,6 +95,7 @@ describe('QualityChooser.test.js', () => {
         wrapper.setData({
             allowedQualities: [2, 4] // SD preset
         });
+        await wrapper.vm.$nextTick();
         expect(wrapper.find('#customQualityWrapper').isVisible()).toBe(true);
         expect(wrapper.vm.selectedQualityPreset).toEqual(0);
 
@@ -97,6 +105,7 @@ describe('QualityChooser.test.js', () => {
             preferredQualities: [32]
         });
         wrapper.setData({ allowedQualities: [] });
+        await wrapper.vm.$nextTick();
         expect(wrapper.findAll('#customQualityWrapper select').at(1).is(':disabled')).toBe(true);
         expect(wrapper.vm.allowedQualities).toEqual([]);
         expect(wrapper.vm.preferredQualities).toEqual([]);

Diff for: themes-default/slim/views/addShows_addExistingShow.mako

@@ -11,6 +11,8 @@
 <%block name="scripts">
 <script type="text/javascript" src="js/add-show-options.js?${sbPID}"></script>
 <script>
+const { mapState } = window.Vuex;
+
 window.app = {};
 window.app = new Vue({
     store,
@@ -38,7 +40,10 @@ window.app = new Vue({
             $.updateBlackWhiteList(undefined);
         }, 500);
     },
-    computed: {
+    // TODO: Replace with Object spread (`...mapState`)
+    computed: Object.assign(mapState([
+        'config' // Used by `inc_addShowOptions.mako`
+    ]), {
         selectedRootDirs() {
             return this.rootDirs.filter(rd => rd.selected);
         },
@@ -81,7 +86,7 @@ window.app = new Vue({
                 });
             }
         }
-    },
+    }),
     methods: {
         /**
          * Transform root dirs paths array, and select all the paths.

Diff for: themes-default/slim/views/addShows_recommended.mako

@@ -4,6 +4,8 @@
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif
 <script>
+const { mapState } = window.Vuex;
+
 window.app = {};
 window.app = new Vue({
     store,
@@ -13,7 +15,13 @@ window.app = new Vue({
         return {
             rootDirs: []
         };
-    }
+    },
+    // TODO: Replace with Object spread (`...mapState`)
+    computed: Object.assign(mapState([
+        'config' // Used by `inc_addShowOptions.mako`
+    ]), {
+
+    })
 });
 </script>
 </%block>

Diff for: themes-default/slim/views/addShows_trendingShows.mako

@@ -7,6 +7,8 @@
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif
 <script>
+const { mapState } = window.Vuex;
+
 window.app = {};
 window.app = new Vue({
     store,
@@ -16,7 +18,13 @@ window.app = new Vue({
         return {
             rootDirs: []
         };
-    }
+    },
+    // TODO: Replace with Object spread (`...mapState`)
+    computed: Object.assign(mapState([
+        'config' // Used by `inc_addShowOptions.mako`
+    ]), {
+
+    })
 });
 </script>
 </%block>

Diff for: themes-default/slim/views/inc_addShowOptions.mako

@@ -8,7 +8,7 @@
             <label for="customQuality" class="clearfix">
                 <span class="component-title">Quality</span>
                 <span class="component-desc">
-                    <quality-chooser></quality-chooser>
+                    <quality-chooser v-if="config.showDefaults.quality !== null"></quality-chooser>
                 </span>
             </label>
         </div>

Diff for: themes-default/slim/views/manage_massEdit.mako

@@ -8,11 +8,19 @@
 %>
 <%block name="scripts">
 <script>
+const { mapState } = window.Vuex;
+
 window.app = {};
 window.app = new Vue({
     store,
     router,
     el: '#vue-wrap',
+    // TODO: Replace with Object spread (`...mapState`)
+    computed: Object.assign(mapState([
+        'config'
+    ]), {
+
+    }),
     beforeMount() {
         $('#config-components').tabs();
     },
@@ -131,6 +139,7 @@ window.app = new Vue({
                                                     qc_overall_quality = int(quality_value)
                                             %>
                                             <quality-chooser
+                                                v-if="config.showDefaults.quality !== null"
                                                 keep="${qc_keep}"
                                                 :overall-quality="${qc_overall_quality}"
                                             ></quality-chooser>