fix: use array for single item valueRefs in conditional if test exists (

#9361)

## PR Description

In [this change to
conditional.ts](https://github.com/vega/vega-lite/pull/9342/files#diff-f26cb911cd80159bbd659afb430b97fa7227afb4cc15e43565f2ca74c3361d22R64),
we use object instead of array if there is a single value. But I found
that test must be in an array form otherwise Vega doesn't recognize it.

This PR is to fix this issue -- always use array form if test exists,
even if there is only a single item.

**Array**

![image](https://github.com/vega/vega-lite/assets/149440704/35280d69-95a0-48ac-b117-6da5f35ca0b8)

**Object**

![image](https://github.com/vega/vega-lite/assets/149440704/f9032a18-7f7f-47ba-b9af-5401439833d6)


## Checklist

- [x] This PR is atomic (i.e., it fixes one issue at a time).
- [x] The title is a concise [semantic commit
message](https://www.conventionalcommits.org/) (e.g. "fix: correctly
handle undefined properties").
- [x] `yarn test` runs successfully
- For new features:
  - [ ] Has unit tests.
  - [ ] Has documentation under `site/docs/` + examples.

Tips:

-
https://medium.com/@greenberg/writing-pull-requests-your-coworkers-might-enjoy-reading-9d0307e93da3
is a nice article about writing a nice PR.
- Use draft PR for work in progress PRs / when you want early feedback
(https://github.blog/2019-02-14-introducing-draft-pull-requests/).

---------

Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>

examples/compiled/bar_conditional_opacity.vg.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "background": "white",
+  "padding": 5,
+  "width": 400,
+  "height": 400,
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "values": [
+        {"Q1_Null": null, "C2": "a1"},
+        {"Q1_Null": null, "C2": "b1"},
+        {"Q1_Null": 82.3, "C2": "c1"},
+        {"Q1_Null": 41.1, "C2": "a2"},
+        {"Q1_Null": 31.1, "C2": "a2"}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
+      "transform": [
+        {
+          "type": "stack",
+          "groupby": ["C2"],
+          "field": "Q1_Null",
+          "sort": {"field": [], "order": []},
+          "as": ["Q1_Null_start", "Q1_Null_end"],
+          "offset": "zero"
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"Q1_Null\"]) && isFinite(+datum[\"Q1_Null\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "layer_0_marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "data_0"},
+      "encode": {
+        "update": {
+          "fill": {"value": "#4c78a8"},
+          "opacity": [{"test": "false", "value": 0.2}],
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"C2: \" + (isValid(datum[\"C2\"]) ? datum[\"C2\"] : \"\"+datum[\"C2\"]) + \"; Q1_Null: \" + (format(datum[\"Q1_Null\"], \"\"))"
+          },
+          "x": {"scale": "x", "field": "C2"},
+          "width": {"signal": "max(0.25, bandwidth('x'))"},
+          "y": {"scale": "y", "field": "Q1_Null_end"},
+          "y2": {"scale": "y", "field": "Q1_Null_start"}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "band",
+      "domain": {"data": "data_0", "field": "C2", "sort": true},
+      "range": [0, {"signal": "width"}],
+      "paddingInner": 0.1,
+      "paddingOuter": 0.05
+    },
+    {
+      "name": "y",
+      "type": "linear",
+      "domain": {"data": "data_0", "fields": ["Q1_Null_start", "Q1_Null_end"]},
+      "range": [{"signal": "height"}, 0],
+      "nice": true,
+      "zero": true
+    }
+  ],
+  "axes": [
+    {
+      "scale": "y",
+      "orient": "left",
+      "gridScale": "x",
+      "grid": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "domain": false,
+      "labels": false,
+      "aria": false,
+      "maxExtent": 0,
+      "minExtent": 0,
+      "ticks": false,
+      "zindex": 0
+    },
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "C2",
+      "labelAlign": "right",
+      "labelAngle": 270,
+      "labelBaseline": "middle",
+      "zindex": 0
+    },
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": false,
+      "title": "Q1_Null",
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "zindex": 0
+    }
+  ]
+}

examples/specs/bar_conditional_opacity.vl.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "width": 400,
+  "height": 400,
+  "layer": [
+      {
+          "mark": {
+              "type": "bar"
+          },
+          "encoding": {
+              "x": {
+                  "field": "C2",
+                  "type": "nominal"
+              },
+              "y": {
+                  "field": "Q1_Null",
+                  "type": "quantitative"
+              },
+              "opacity": {
+                  "condition": [
+                      {
+                          "test": "false",
+                          "value": 0.2
+                      }
+                  ]
+              }
+          }
+      }
+  ],
+  "data": {
+      "values": [
+          {
+              "Q1_Null": null,
+              "C2": "a1"
+          },
+          {
+              "Q1_Null": null,
+              "C2": "b1"
+          },
+          {
+              "Q1_Null": 82.3,
+              "C2": "c1"
+          },
+          {
+              "Q1_Null": 41.1,
+              "C2": "a2"
+          },
+          {
+              "Q1_Null": 31.1,
+              "C2": "a2"
+          }
+      ]
+  }
+}

src/compile/mark/encode/conditional.ts

@@ -58,7 +58,10 @@ export function wrapCondition<CD extends ChannelDef | GuideEncodingConditionalVa
     valueRefs.push(mainValueRef);
   }
 
-  if (valueRefs.length > 1) {
+  if (
+    valueRefs.length > 1 ||
+    (valueRefs.length === 1 && Boolean(valueRefs[0].test)) // We must use array form valueRefs if test exists, otherwise Vega won't execute the test.
+  ) {
     return {[vgChannel]: valueRefs};
   } else if (valueRefs.length === 1) {
     return {[vgChannel]: valueRefs[0]};