Refactor streamlit chart e2e tests (streamlit#8946)

This PR refactors our e2e `st_builtin_chart.py` &
`st_builtin_chart_test.py` files for the benefit of future e2e test
changes for charts. These files have been broken up into separate test
files for each type of built-in chart.

e2e_playwright/st_area_chart.py

@@ -0,0 +1,71 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+from datetime import date
+
+import numpy as np
+import pandas as pd
+
+import streamlit as st
+
+np.random.seed(0)
+
+
+data = np.random.randn(20, 3)
+df = pd.DataFrame(data, columns=["a", "b", "c"])
+
+# st.area/bar/line_chart all use Altair/Vega-Lite under the hood.
+# By default, Vega-Lite displays time values in the browser's local
+# time zone, but data is sent down to the browser as UTC. This means
+# Times need to be set correctly to the users timezone.
+utc_df = pd.DataFrame(
+    {
+        "index": [
+            date(2019, 8, 9),
+            date(2019, 8, 10),
+            date(2019, 8, 11),
+            date(2019, 8, 12),
+        ],
+        "numbers": [10, 50, 30, 40],
+    }
+)
+
+utc_df.set_index("index", inplace=True)
+
+# Dataframe to test the color parameter support:
+N = 100
+
+color_df = pd.DataFrame(
+    {
+        # Using a negative range so certain kinds of bugs are more visible.
+        "a": -np.arange(N),
+        "b": np.random.rand(N) * 10,
+        "c": np.random.rand(N) * 10,
+        "d": np.random.randn(N) * 30,
+        "e": ["bird" if x % 2 else "airplane" for x in range(N)],
+    }
+)
+
+st.header("Area Chart")
+
+st.area_chart()
+st.area_chart(df)
+st.area_chart(df, x="a")
+st.area_chart(df, y="a")
+st.area_chart(df, y=["a", "b"])
+st.area_chart(df, x="a", y="b", height=500, width=300, use_container_width=False)
+st.area_chart(df, x="b", y="a")
+st.area_chart(df, x="a", y=["b", "c"])
+st.area_chart(utc_df)
+st.area_chart(color_df, x="a", y="b", color="e")
+st.area_chart(df, x_label="X Axis Label", y_label="Y Axis Label")

e2e_playwright/st_area_chart_test.py

@@ -0,0 +1,45 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, expect
+
+from e2e_playwright.conftest import ImageCompareFunction
+
+TOTAL_AREA_CHARTS = 11
+
+
+def test_area_chart_rendering(app: Page, assert_snapshot: ImageCompareFunction):
+    """Test that st.area_chart renders correctly via snapshot testing."""
+    area_chart_elements = app.get_by_test_id("stArrowVegaLiteChart")
+    expect(area_chart_elements).to_have_count(TOTAL_AREA_CHARTS)
+
+    # Also make sure that all canvas objects are rendered:
+    expect(area_chart_elements.locator("canvas")).to_have_count(TOTAL_AREA_CHARTS)
+
+    for i, element in enumerate(area_chart_elements.all()):
+        assert_snapshot(element, name=f"st_area_chart-{i}")
+
+
+def test_themed_area_chart_rendering(
+    themed_app: Page, assert_snapshot: ImageCompareFunction
+):
+    """Test that st.area_chart renders with different theming."""
+    area_chart_elements = themed_app.get_by_test_id("stArrowVegaLiteChart")
+    expect(area_chart_elements).to_have_count(TOTAL_AREA_CHARTS)
+
+    # Also make sure that all canvas objects are rendered:
+    expect(area_chart_elements.locator("canvas")).to_have_count(TOTAL_AREA_CHARTS)
+
+    # Only test a single chart per built-in chart type:
+    assert_snapshot(area_chart_elements.nth(1), name="st_area_chart_themed")

e2e_playwright/st_bar_chart.py

@@ -0,0 +1,73 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+from datetime import date
+
+import numpy as np
+import pandas as pd
+
+import streamlit as st
+
+np.random.seed(0)
+
+
+data = np.random.randn(20, 3)
+df = pd.DataFrame(data, columns=["a", "b", "c"])
+
+# st.area/bar/line_chart all use Altair/Vega-Lite under the hood.
+# By default, Vega-Lite displays time values in the browser's local
+# time zone, but data is sent down to the browser as UTC. This means
+# Times need to be set correctly to the users timezone.
+utc_df = pd.DataFrame(
+    {
+        "index": [
+            date(2019, 8, 9),
+            date(2019, 8, 10),
+            date(2019, 8, 11),
+            date(2019, 8, 12),
+        ],
+        "numbers": [10, 50, 30, 40],
+    }
+)
+
+utc_df.set_index("index", inplace=True)
+
+# Dataframe to test the color parameter support:
+N = 100
+
+color_df = pd.DataFrame(
+    {
+        # Using a negative range so certain kinds of bugs are more visible.
+        "a": -np.arange(N),
+        "b": np.random.rand(N) * 10,
+        "c": np.random.rand(N) * 10,
+        "d": np.random.randn(N) * 30,
+        "e": ["bird" if x % 2 else "airplane" for x in range(N)],
+    }
+)
+
+st.header("Bar Chart")
+
+st.bar_chart()
+st.bar_chart(df)
+st.bar_chart(df, x="a")
+st.bar_chart(df, y="a")
+st.bar_chart(df, y=["a", "b"])
+st.bar_chart(df, x="a", y="b", height=500, width=300, use_container_width=False)
+st.bar_chart(df, x="b", y="a")
+st.bar_chart(df, x="a", y=["b", "c"])
+st.bar_chart(utc_df)
+st.bar_chart(color_df, x="a", y="b", color="e")
+st.bar_chart(df, x_label="X Axis Label", y_label="Y Axis Label")
+st.bar_chart(df, horizontal=True)
+st.bar_chart(df, horizontal=True, x_label="X Label", y_label="Y Label")

e2e_playwright/st_bar_chart_test.py

@@ -0,0 +1,45 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, expect
+
+from e2e_playwright.conftest import ImageCompareFunction
+
+TOTAL_BAR_CHARTS = 13
+
+
+def test_bar_chart_rendering(app: Page, assert_snapshot: ImageCompareFunction):
+    """Test that st.bar_chart renders correctly via snapshot testing."""
+    bar_chart_elements = app.get_by_test_id("stArrowVegaLiteChart")
+    expect(bar_chart_elements).to_have_count(TOTAL_BAR_CHARTS)
+
+    # Also make sure that all canvas objects are rendered:
+    expect(bar_chart_elements.locator("canvas")).to_have_count(TOTAL_BAR_CHARTS)
+
+    for i, element in enumerate(bar_chart_elements.all()):
+        assert_snapshot(element, name=f"st_bar_chart-{i}")
+
+
+def test_themed_bar_chart_rendering(
+    themed_app: Page, assert_snapshot: ImageCompareFunction
+):
+    """Test that st.bar_chart renders with different theming."""
+    bar_chart_elements = themed_app.get_by_test_id("stArrowVegaLiteChart")
+    expect(bar_chart_elements).to_have_count(TOTAL_BAR_CHARTS)
+
+    # Also make sure that all canvas objects are rendered:
+    expect(bar_chart_elements.locator("canvas")).to_have_count(TOTAL_BAR_CHARTS)
+
+    # Only test a single chart per built-in chart type:
+    assert_snapshot(bar_chart_elements.nth(1), name="st_bar_chart_themed")

e2e_playwright/st_line_chart.py

@@ -0,0 +1,71 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+from datetime import date
+
+import numpy as np
+import pandas as pd
+
+import streamlit as st
+
+np.random.seed(0)
+
+
+data = np.random.randn(20, 3)
+df = pd.DataFrame(data, columns=["a", "b", "c"])
+
+# st.area/bar/line_chart all use Altair/Vega-Lite under the hood.
+# By default, Vega-Lite displays time values in the browser's local
+# time zone, but data is sent down to the browser as UTC. This means
+# Times need to be set correctly to the users timezone.
+utc_df = pd.DataFrame(
+    {
+        "index": [
+            date(2019, 8, 9),
+            date(2019, 8, 10),
+            date(2019, 8, 11),
+            date(2019, 8, 12),
+        ],
+        "numbers": [10, 50, 30, 40],
+    }
+)
+
+utc_df.set_index("index", inplace=True)
+
+# Dataframe to test the color parameter support:
+N = 100
+
+color_df = pd.DataFrame(
+    {
+        # Using a negative range so certain kinds of bugs are more visible.
+        "a": -np.arange(N),
+        "b": np.random.rand(N) * 10,
+        "c": np.random.rand(N) * 10,
+        "d": np.random.randn(N) * 30,
+        "e": ["bird" if x % 2 else "airplane" for x in range(N)],
+    }
+)
+
+st.header("Line Chart")
+
+st.line_chart()
+st.line_chart(df)
+st.line_chart(df, x="a")
+st.line_chart(df, y="a")
+st.line_chart(df, y=["a", "b"])
+st.line_chart(df, x="a", y="b", height=500, width=300, use_container_width=False)
+st.line_chart(df, x="b", y="a")
+st.line_chart(df, x="a", y=["b", "c"])
+st.line_chart(utc_df)
+st.line_chart(color_df, x="a", y="b", color="e")
+st.line_chart(df, x_label="X Axis Label", y_label="Y Axis Label")