Repository: Qiskit/qiskit

Issue:
plot_coupling_map() and plot_gate_map() needs snapshot testing
Now we have snapshot testing for other graphs besides circuits (thanks to #6672), it should be extended with other graphing functions, like `plot_coupling_map` and `plot_gate_map` (introduced in #6751).


Discussion:
Can I work on this one?
Sure, I'll assign it to you so others know you're working on it. Feel free to ask questions if you need help!
> Sure, I'll assign it to you so others know you're working on it. Feel free to ask questions if you need help!

Thanks. I'm very new to contributing. It would be better if you could give me some pointers. 
It depends a little on what you need to know.  If it's git basics, then GitHub have some good guides on all levels of it (https://guides.github.com/).  What they call the "GitHub Flow" is the same way you should make a pull request here.

If it's about Qiskit contributing specifically, we have [a Qiskit contributing guide](https://qiskit.org/documentation/contributing_to_qiskit.html) in the documentation.  That's quite long and detailed, so don't worry if you miss something or forget it - we'll spot it when we do the code review (nothing to worry about) when you make the pull request.

If it's about the problem, you'd need to ask a more specific question.  There's quite a lot of context in the two issues that Luciano linked up at the top, to get you started.
> It depends a little on what you need to know. If it's git basics, then GitHub have some good guides on all levels of it (https://guides.github.com/). What they call the "GitHub Flow" is the same way you should make a pull request here.
> 
> If it's about Qiskit contributing specifically, we have [a Qiskit contributing guide](https://qiskit.org/documentation/contributing_to_qiskit.html) in the documentation. That's quite long and detailed, so don't worry if you miss something or forget it - we'll spot it when we do the code review (nothing to worry about) when you make the pull request.
> 
> If it's about the problem, you'd need to ask a more specific question. There's quite a lot of context in the two issues that Luciano linked up at the top, to get you started.

Cool, got it!
Hi @Quant02 there are also some specific guidelines on snapshot testing in the terra `CONTRIBUTING.md` file that will be useful for this issue specifically: https://github.com/Qiskit/qiskit-terra/blob/main/CONTRIBUTING.md#snapshot-testing-for-visualizations

Resolving patch:
diff --git a/qiskit/visualization/gate_map.py b/qiskit/visualization/gate_map.py
--- a/qiskit/visualization/gate_map.py
+++ b/qiskit/visualization/gate_map.py
@@ -34,6 +34,7 @@ def plot_gate_map(
     line_color=None,
     font_color="w",
     ax=None,
+    filename=None,
 ):
     """Plots the gate map of a device.
 
@@ -51,6 +52,7 @@ def plot_gate_map(
         line_color (list): A list of colors for each line from coupling_map.
         font_color (str): The font color for the qubit labels.
         ax (Axes): A Matplotlib axes instance.
+        filename (str): file path to save image to.
 
     Returns:
         Figure: A Matplotlib figure instance.
@@ -363,6 +365,7 @@ def plot_gate_map(
         line_color,
         font_color,
         ax,
+        filename,
     )
 
 
@@ -381,6 +384,7 @@ def plot_coupling_map(
     line_color=None,
     font_color="w",
     ax=None,
+    filename=None,
 ):
     """Plots an arbitrary coupling map of qubits (embedded in a plane).
 
@@ -401,6 +405,7 @@ def plot_coupling_map(
         line_color (list): A list of colors for each line from coupling_map.
         font_color (str): The font color for the qubit labels.
         ax (Axes): A Matplotlib axes instance.
+        filename (str): file path to save image to.
 
     Returns:
         Figure: A Matplotlib figure instance.
@@ -464,6 +469,8 @@ def plot_coupling_map(
         if not input_axes:
             fig, ax = plt.subplots(figsize=(5, 5))
             ax.axis("off")
+            if filename:
+                fig.savefig(filename)
             return fig
 
     x_max = max(d[1] for d in grid_data)
@@ -571,8 +578,11 @@ def plot_coupling_map(
     ax.set_xlim([-1, x_max + 1])
     ax.set_ylim([-(y_max + 1), 1])
     ax.set_aspect("equal")
+
     if not input_axes:
         matplotlib_close_if_inline(fig)
+        if filename:
+            fig.savefig(filename)
         return fig
     return None
 


Test patch:
diff --git a/test/ipynb/mpl/graph/references/16_qubit_gate_map.png b/test/ipynb/mpl/graph/references/16_qubit_gate_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/16_qubit_gate_map.png differ
diff --git a/test/ipynb/mpl/graph/references/1_qubit_gate_map.png b/test/ipynb/mpl/graph/references/1_qubit_gate_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/1_qubit_gate_map.png differ
diff --git a/test/ipynb/mpl/graph/references/27_qubit_gate_map.png b/test/ipynb/mpl/graph/references/27_qubit_gate_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/27_qubit_gate_map.png differ
diff --git a/test/ipynb/mpl/graph/references/5_qubit_gate_map.png b/test/ipynb/mpl/graph/references/5_qubit_gate_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/5_qubit_gate_map.png differ
diff --git a/test/ipynb/mpl/graph/references/65_qubit_gate_map.png b/test/ipynb/mpl/graph/references/65_qubit_gate_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/65_qubit_gate_map.png differ
diff --git a/test/ipynb/mpl/graph/references/7_qubit_gate_map.png b/test/ipynb/mpl/graph/references/7_qubit_gate_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/7_qubit_gate_map.png differ
diff --git a/test/ipynb/mpl/graph/references/coupling_map.png b/test/ipynb/mpl/graph/references/coupling_map.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/coupling_map.png differ
diff --git a/test/ipynb/mpl/graph/references/figsize.png b/test/ipynb/mpl/graph/references/figsize.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/figsize.png differ
diff --git a/test/ipynb/mpl/graph/references/font_color.png b/test/ipynb/mpl/graph/references/font_color.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/font_color.png differ
diff --git a/test/ipynb/mpl/graph/references/line_color.png b/test/ipynb/mpl/graph/references/line_color.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/line_color.png differ
diff --git a/test/ipynb/mpl/graph/references/qubit_color.png b/test/ipynb/mpl/graph/references/qubit_color.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/qubit_color.png differ
diff --git a/test/ipynb/mpl/graph/references/qubit_labels.png b/test/ipynb/mpl/graph/references/qubit_labels.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/qubit_labels.png differ
diff --git a/test/ipynb/mpl/graph/references/qubit_size.png b/test/ipynb/mpl/graph/references/qubit_size.png
new file mode 100644
Binary files /dev/null and b/test/ipynb/mpl/graph/references/qubit_size.png differ
diff --git a/test/ipynb/mpl/graph/test_graph_matplotlib_drawer.py b/test/ipynb/mpl/graph/test_graph_matplotlib_drawer.py
--- a/test/ipynb/mpl/graph/test_graph_matplotlib_drawer.py
+++ b/test/ipynb/mpl/graph/test_graph_matplotlib_drawer.py
@@ -24,7 +24,15 @@
 from qiskit import QuantumCircuit
 from qiskit.tools.visualization import HAS_MATPLOTLIB
 from qiskit.visualization.counts_visualization import plot_histogram
-
+from qiskit.visualization.gate_map import plot_gate_map, plot_coupling_map
+from qiskit.test.mock.fake_provider import (
+    FakeArmonk,
+    FakeBelem,
+    FakeCasablanca,
+    FakeRueschlikon,
+    FakeMumbai,
+    FakeManhattan,
+)
 
 if HAS_MATPLOTLIB:
     from matplotlib.pyplot import close as mpl_close
@@ -55,6 +63,12 @@ def setUp(self):
         self.graph_count_drawer = TestGraphMatplotlibDrawer.save_data_wrap(
             plot_histogram, str(self)
         )
+        self.graph_plot_gate_map = TestGraphMatplotlibDrawer.save_data_wrap(
+            plot_gate_map, str(self)
+        )
+        self.graph_plot_coupling_map = TestGraphMatplotlibDrawer.save_data_wrap(
+            plot_coupling_map, str(self)
+        )
 
     def tearDown(self):
         super().tearDown()
@@ -78,12 +92,12 @@ def save_data(image_filename, testname):
         """Saves result data of a test"""
         datafilename = "result_test.json"
         if os.path.exists(datafilename):
-            with open(datafilename) as datafile:
+            with open(datafilename, encoding="UTF-8") as datafile:
                 data = json.load(datafile)
         else:
             data = {}
         data[image_filename] = {"testname": testname}
-        with open(datafilename, "w") as datafile:
+        with open(datafilename, "w", encoding="UTF-8") as datafile:
             json.dump(data, datafile)
 
     def test_plot_bloch_multivector(self):
@@ -157,6 +171,122 @@ def test_plot_histogram(self):
 
         self.graph_count_drawer(counts, filename="histogram.png")
 
+    def test_plot_1_qubit_gate_map(self):
+        """Test plot_gate_map using 1 qubit backend"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeArmonk()
+
+        self.graph_plot_gate_map(backend=backend, filename="1_qubit_gate_map.png")
+
+    def test_plot_5_qubit_gate_map(self):
+        """Test plot_gate_map using 5 qubit backend"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeBelem()
+
+        self.graph_plot_gate_map(backend=backend, filename="5_qubit_gate_map.png")
+
+    def test_plot_7_qubit_gate_map(self):
+        """Test plot_gate_map using 7 qubit backend"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeCasablanca()
+
+        self.graph_plot_gate_map(backend=backend, filename="7_qubit_gate_map.png")
+
+    def test_plot_16_qubit_gate_map(self):
+        """Test plot_gate_map using 16 qubit backend"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeRueschlikon()
+
+        self.graph_plot_gate_map(backend=backend, filename="16_qubit_gate_map.png")
+
+    def test_plot_27_qubit_gate_map(self):
+        """Test plot_gate_map using 27 qubit backend"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeMumbai()
+
+        self.graph_plot_gate_map(backend=backend, filename="27_qubit_gate_map.png")
+
+    def test_plot_65_qubit_gate_map(self):
+        """test for plot_gate_map using 65 qubit backend"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeManhattan()
+
+        self.graph_plot_gate_map(backend=backend, filename="65_qubit_gate_map.png")
+
+    def test_figsize(self):
+        """Test figsize parameter of plot_gate_map"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeBelem()
+
+        self.graph_plot_gate_map(backend=backend, figsize=(10, 10), filename="figsize.png")
+
+    def test_qubit_size(self):
+        """Test qubit_size parameter of plot_gate_map"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeBelem()
+
+        self.graph_plot_gate_map(backend=backend, qubit_size=38, filename="qubit_size.png")
+
+    def test_qubit_color(self):
+        """Test qubit_color parameter of plot_gate_map"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeCasablanca()
+
+        self.graph_plot_gate_map(
+            backend=backend, qubit_color=["#ff0000"] * 7, filename="qubit_color.png"
+        )
+
+    def test_qubit_labels(self):
+        """Test qubit_labels parameter of plot_gate_map"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeCasablanca()
+
+        self.graph_plot_gate_map(
+            backend=backend, qubit_labels=list(range(10, 17, 1)), filename="qubit_labels.png"
+        )
+
+    def test_line_color(self):
+        """Test line_color parameter of plot_gate_map"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeManhattan()
+
+        self.graph_plot_gate_map(
+            backend=backend, line_color=["#00ff00"] * 144, filename="line_color.png"
+        )
+
+    def test_font_color(self):
+        """Test font_color parameter of plot_gate_map"""
+        # getting the mock backend from FakeProvider
+
+        backend = FakeManhattan()
+
+        self.graph_plot_gate_map(backend=backend, font_color="#ff00ff", filename="font_color.png")
+
+    def test_plot_coupling_map(self):
+        """Test plot_coupling_map"""
+
+        num_qubits = 5
+        qubit_coordinates = [[1, 0], [0, 1], [1, 1], [1, 2], [2, 1]]
+        coupling_map = [[1, 0], [1, 2], [1, 3], [3, 4]]
+
+        self.graph_plot_coupling_map(
+            num_qubits=num_qubits,
+            qubit_coordinates=qubit_coordinates,
+            coupling_map=coupling_map,
+            filename="coupling_map.png",
+        )
+
 
 if __name__ == "__main__":
     unittest.main(verbosity=1)