Continuing improve download files page layout

tests/frontend/filter_list_controller_test.js

@@ -15,23 +15,56 @@ const testFixtureHTMLShowing = `
 <p id="shown-and-total" data-filter-list-target="summary"></p>
 `;
 const testFixtureHTMLFilters = `
-<input id="filter-input" type="text" data-action="filter-list#filter" data-filter-list-target="filter" data-filtered-source="contentType">
-        <select id="filter-select"  data-action="filter-list#filter" data-filter-list-target="filter" data-filtered-source="myattr">
-          <option selected value="">My Attrs</option>
-          <option value="myattr1">myattr 1</option>
-          <option value="myattr2">myattr 2</option>
-          <option value="myattr3">myattr 3</option>
-        </select>
+<input id="filter-input" type="text" data-action="filter-list#filter" data-filter-list-target="filter" data-filtered-source="contentType" data-comparison-type="includes" data-auto-update-url-querystring="false">
+<select id="filter-select"  data-action="filter-list#filter" data-filter-list-target="filter" data-filtered-source="myattr" data-comparison-type="exact" data-auto-update-url-querystring="true">
+  <option selected value="">My Attrs</option>
+  <option value="myattr1">myattr 1</option>
+  <option value="myattr2">myattr 2</option>
+  <option value="myattr3">myattr 3</option>
+</select>
 `;
 const testFixtureHTMLItems = `
         <a id="url-update" href="https://example.com#testing" data-filter-list-target="url"></a>
-        <div id="item-1" data-filter-list-target="item" data-filtered-target-content-type='["contentType1","contentType1a"]' data-filtered-target-myattr='["myattr1"]'>Item 1</div>
-        <div id="item-2" data-filter-list-target="item" data-filtered-target-content-type='["contentType2","contentType2a"]' data-filtered-target-myattr='["myattr2"]'>Item 2</div>
-        <div id="item-3" data-filter-list-target="item" data-filtered-target-content-type='["contentType3","contentType3a"]' data-filtered-target-myattr='["myattr3"]'>Item 3</div>
+        <a id="filter-clear" href="#" data-action="filter-list#filterClear">Show all files</a>
+        <div id="item-1" class="my-item" data-filter-list-target="item" data-filtered-target-content-type='["contentType1","Content Type 1","contentType1a","Content Type 1a"]' data-filtered-target-myattr='["myattr1", "My Attr 1"]'>Item 1</div>
+        <div id="item-2" class="my-item" data-filter-list-target="item" data-filtered-target-content-type='["contentType2","Content Type 2","contentType2a","Content Type 2a"]' data-filtered-target-myattr='["myattr2", "My Attr 2"]'>Item 2</div>
+        <div id="item-3" class="my-item" data-filter-list-target="item" data-filtered-target-content-type='["contentType3","Content Type 3","contentType3a","Content Type 3a"]' data-filtered-target-myattr='["myattr3", "My Attr 3"]'>Item 3</div>
 `;
 
 
 describe("Filter list controller", () => {
+  const setFilterSelectValue = function(value) {
+    const elFilter = document.getElementById("filter-select");
+    const dispatchEventSpy = jest.spyOn(elFilter, "dispatchEvent");
+
+    elFilter.value = value;
+
+    // Manually trigger the 'input' event to get the MutationObserver that Stimulus uses to be updated.
+    // Also ensure the event has been dispatched.
+    const event = new Event("change");
+    elFilter.dispatchEvent(event);
+    expect(dispatchEventSpy).toHaveBeenCalledWith(event);
+    return elFilter;
+  };
+  const setFilterInputValue = function(value) {
+    const elFilter = document.getElementById("filter-input");
+    const dispatchEventSpy = jest.spyOn(elFilter, "dispatchEvent");
+
+    elFilter.value = value;
+
+    // Manually trigger the 'input' event to get the MutationObserver that Stimulus uses to be updated.
+    // Also ensure the event has been dispatched.
+    const event = new Event("input");
+    elFilter.dispatchEvent(event);
+    expect(dispatchEventSpy).toHaveBeenCalledWith(event);
+  };
+  const clearFilters = function() {
+    const elUrl = document.getElementById("filter-clear");
+    const dispatchEventSpy = jest.spyOn(elUrl, "dispatchEvent");
+    const event = new Event("click");
+    elUrl.dispatchEvent(event);
+    expect(dispatchEventSpy).toHaveBeenCalledWith(event);
+  };
   describe("is initialized as expected", () => {
     describe("makes expected elements visible", () => {
       let application;
@@ -93,16 +126,16 @@ describe("Filter list controller", () => {
 
         expect(Object.keys(controller.mappingItemFilterData)).toHaveLength(3);
         expect(controller.mappingItemFilterData["0"]).toEqual({
-          "contentType": ["contentType1", "contentType1a"],
-          "myattr": ["myattr1"],
+          "contentType": ["contentType1","Content Type 1", "contentType1a", "Content Type 1a"],
+          "myattr":["myattr1", "My Attr 1"],
         });
         expect(controller.mappingItemFilterData["1"]).toEqual({
-          "contentType": ["contentType2", "contentType2a"],
-          "myattr": ["myattr2"],
+          "contentType": ["contentType2", "Content Type 2", "contentType2a", "Content Type 2a"],
+          "myattr": ["myattr2", "My Attr 2"],
         });
         expect(controller.mappingItemFilterData["2"]).toEqual({
-          "contentType": ["contentType3", "contentType3a"],
-          "myattr": ["myattr3"],
+          "contentType": ["contentType3", "Content Type 3", "contentType3a", "Content Type 3a"],
+          "myattr": ["myattr3", "My Attr 3"],
         });
 
         const elP = document.getElementById("url-update");
@@ -133,16 +166,37 @@ describe("Filter list controller", () => {
     it("all items begin shown", () => {
       const elP = document.getElementById("shown-and-total");
       expect(elP.textContent).toEqual("Showing 3 of 3 files.");
+      expect(document.getElementsByClassName("my-item").length).toEqual(3);
+
+      const elUrl = document.getElementById("url-update");
+      expect(elUrl.href).toEqual("https://example.com/#testing");
+    });
+    it("shows message when all items are hidden", () => {
+      setFilterInputValue("lizards");
+
+      const elItem1 = document.getElementById("item-1");
+      expect(elItem1.classList).toContainEqual("hidden");
+
+      const elItem2 = document.getElementById("item-2");
+      expect(elItem2.classList).toContainEqual("hidden");
+
+      const elItem3 = document.getElementById("item-3");
+      expect(elItem3.classList).toContainEqual("hidden");
+
+      const elP = document.getElementById("shown-and-total");
+      expect(elP.textContent).toEqual("No files match the current filters. Showing 0 of 3 files.");
     });
   });
 
 
   describe("allows filtering", () => {
+
     describe("input text filters the items", () => {
       let application;
       beforeEach(() => {
         document.body.innerHTML = `
       <div id="controller" data-controller="filter-list">
+        ${testFixtureHTMLShowing}
         ${testFixtureHTMLFilters}
         ${testFixtureHTMLItems}
       </div>
@@ -157,17 +211,13 @@ describe("Filter list controller", () => {
       });
 
       it("the item classes are updated", () => {
+        // Set select to no filter
+        setFilterSelectValue("");
 
-        const elFilter = document.getElementById("filter-input");
-        const dispatchEventSpy = jest.spyOn(elFilter, "dispatchEvent");
-
-        elFilter.value = "2";
+        setFilterInputValue("2");
 
-        // Manually trigger the 'input' event to get the MutationObserver that Stimulus uses to be updated.
-        // Also ensure the event has been dispatched.
-        const event = new Event("input");
-        elFilter.dispatchEvent(event);
-        expect(dispatchEventSpy).toHaveBeenCalledWith(event);
+        const elP = document.getElementById("url-update");
+        expect(elP.textContent).toEqual("https://example.com/?contentType=2#testing");
 
         const elItem1 = document.getElementById("item-1");
         expect(elItem1.classList).toContainEqual("hidden");
@@ -177,9 +227,27 @@ describe("Filter list controller", () => {
 
         const elItem3 = document.getElementById("item-3");
         expect(elItem3.classList).toContainEqual("hidden");
+      });
+      it("shows all items after clearing the filters", () => {
+        setFilterInputValue("lizards");
 
-        const elP = document.getElementById("url-update");
-        expect(elP.textContent).toEqual("https://example.com/?contentType=2#testing");
+        const elItem1 = document.getElementById("item-1");
+        expect(elItem1.classList).toContainEqual("hidden");
+
+        const elItem2 = document.getElementById("item-2");
+        expect(elItem2.classList).toContainEqual("hidden");
+
+        const elItem3 = document.getElementById("item-3");
+        expect(elItem3.classList).toContainEqual("hidden");
+
+        clearFilters();
+
+        const elP = document.getElementById("shown-and-total");
+        expect(elP.textContent).toEqual("Showing 3 of 3 files.");
+
+        expect(elItem1.classList).not.toContainEqual("hidden");
+        expect(elItem2.classList).not.toContainEqual("hidden");
+        expect(elItem3.classList).not.toContainEqual("hidden");
       });
     });
 
@@ -202,16 +270,7 @@ describe("Filter list controller", () => {
       });
 
       it("the item classes are updated", () => {
-        const elFilter = document.getElementById("filter-select");
-        const dispatchEventSpy = jest.spyOn(elFilter, "dispatchEvent");
-
-        elFilter.value = "myattr3";
-
-        // Manually trigger the 'input' event to get the MutationObserver that Stimulus uses to be updated.
-        // Also ensure the event has been dispatched.
-        const event = new Event("change");
-        elFilter.dispatchEvent(event);
-        expect(dispatchEventSpy).toHaveBeenCalledWith(event);
+        setFilterSelectValue("myattr3");
 
         const elItem1 = document.getElementById("item-1");
         expect(elItem1.classList).toContainEqual("hidden");

tests/unit/packaging/test_views.py

@@ -215,12 +215,11 @@ def test_detail_rendered(self, db_request):
             "maintainers": sorted(users, key=lambda u: u.username.lower()),
             "license": None,
             "PEP740AttestationViewer": views.PEP740AttestationViewer,
-            "wheel_filters_all": {"interpreters": [], "abis": [], "platforms": []},
-            "wheel_filters_params": {
-                "filename": "",
-                "interpreters": "",
-                "abis": "",
-                "platforms": "",
+            "wheel_filters_all": {
+                "interpreter": {},
+                "abi": {},
+                "platform": {},
+                "other": {},
             },
         }
 
@@ -249,9 +248,24 @@ def test_detail_renders_files_natural_sort(self, db_request):
 
         assert result["files"] == sorted_files
         assert [file.wheel_filters for file in result["files"]] == [
-            {"interpreters": ["cp310"], "abis": ["none"], "platforms": ["any"]},
-            {"interpreters": ["cp39"], "abis": ["none"], "platforms": ["any"]},
-            {"interpreters": ["cp27"], "abis": ["none"], "platforms": ["any"]},
+            {
+                "interpreter": {"cp310": "CPython 3.10"},
+                "abi": {"none": "(none)"},
+                "platform": {"any": "(any)"},
+                "other": {},
+            },
+            {
+                "interpreter": {"cp39": "CPython 3.9"},
+                "abi": {"none": "(none)"},
+                "platform": {"any": "(any)"},
+                "other": {},
+            },
+            {
+                "interpreter": {"cp27": "CPython 2.7"},
+                "abi": {"none": "(none)"},
+                "platform": {"any": "(any)"},
+                "other": {},
+            },
         ]
 
     def test_license_from_classifier(self, db_request):