refactor(dev): várias mudanças foram realizadas para preparar o códig…

…o para implementação de testes - foram adicionados os novos arquivos babel.config.cjs e jest.config.cjs, ambos relacionados as configurações de suas respectivas tecnologias - os scripts em PHP para não serem inicializados em todas as páginas do site WP, e sim apenas na página onde o shortcode está localizado - script.js foi modificado para exportar as classes para testes unitários - a parte do código com HTML foi modificada para não incluir tags do tipo <script>, pois são redundantes (é necessário apenas o enfileiramento de scripts pelo WP)
ResidenciaTICBrisa · May 30, 2024 · e01477b · e01477b
1 parent 1532bd9
commit e01477b
Show file tree

Hide file tree

Showing 9 changed files with 8,374 additions and 2,453 deletions.
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+    presets: ['@babel/preset-env'],
+  };
+
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.js$': 'babel-jest',
+    },
+  };
diff --git a/lgbtq_connect/assets/index.html b/lgbtq_connect/assets/index.html
@@ -4,7 +4,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
-
 </head>
 <body>
     <div id="div_index">
@@ -72,10 +71,6 @@
         <button onclick="transicaoPagina('PaginaFormulario', 'div_form')" class="blue_button">Cadastrar um novo local</button>
         <button onclick= "transicaoPagina('PaginaComPopup', 'div_index')" class="voltar_exit">Voltar</button>
     </div>
-
-    <script src="js/script.js"></script>
-    <script src="js/formulario.js"></script>
-    <script src="js/funcionalidades.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </body>

diff --git a/lgbtq_connect/assets/js/script.js b/lgbtq_connect/assets/js/script.js
@@ -1,42 +1,23 @@
-var pagina = null;
-const mapas = {
-    "div_index" : "mapa_index",
-    "div_form" : "mapa_formulario",
-    "div_saida" : "mapa_saida"
-}
-
-        // FUNÇÕES AUXILIARES
-function conseguirLocalizacao(mapa) {
-    if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(function (position) {
-            var user_position = [];
-            user_position.push(position.coords.latitude); 
-            user_position.push(position.coords.longitude); 
-            mudarPosicao(mapa, user_position);
-        });
-    } else {
-        alert('Geolocalização não é suportada por este navegador.');
-    }
-    document.getElementById('latitude').value = '';
-    document.getElementById('longitude').value = '';
-}
+let pagina = null;
 
-function mudarPosicao(mapa, posicao) {
-    mapa.setView(posicao, 13);
-}
-
-        // CLASSES
+       // CLASSES
 class Mapa {
     container;
 
+    static MAPAS = {
+        "div_index" : "mapa_index",
+        "div_form" : "mapa_formulario",
+        "div_saida" : "mapa_saida"
+    }
+
     constructor(container) {
-        this.container = container;
-        this.mapa = L.map(container, { doubleClickZoom: false }).setView([-15.8267, -47.9218], 13);
+        this.container = Mapa.MAPAS[container];
+        this.mapa = L.map(this.container, { doubleClickZoom: false }).setView([-15.8267, -47.9218], 13);
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(this.mapa);
-
+        
         this.marcadores = [];
     }
 
@@ -49,10 +30,30 @@ class Mapa {
         this.mapa.setView(coordernadas, 13);
     }
 
+    conseguirLocalizacao() {
+        const self = this;
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(function (position) {
+                let user_position = [];
+                user_position.push(position.coords.latitude); 
+                user_position.push(position.coords.longitude); 
+                self.mudarLocalizacao(user_position);
+            });
+        } else {
+            alert('Geolocalização não é suportada por este navegador.');
+        }
+        document.getElementById('latitude').value = '';
+        document.getElementById('longitude').value = '';
+    }
+
     destruirMapa() {
         this.mapa.remove()
         this.mapa = null;
     }
+
+    static sum(a, b) {
+        return a+b;
+    }
 }
 
 class Pagina {
@@ -66,8 +67,8 @@ class Pagina {
 
     inicializar() {
         this.div.style.display = "block";
-        this.mapa = new Mapa(mapas[this.id]);
-        conseguirLocalizacao(this.mapa.mapa);
+        this.mapa = new Mapa(this.id);
+        this.mapa.conseguirLocalizacao();
     }
 
     destruir() {
@@ -150,24 +151,47 @@ class PaginaFormulario extends Pagina {
     }
 }
 
-const classes = new Map([
-    ['PaginaFormulario', PaginaFormulario],
-    ['PaginaComPopup', PaginaComPopup]
-  ]);
-
-function inicializarPlugin()
-{
-    pagina = new PaginaComPopup("div_index");
-    pagina.inicializar();
+// Padrão de projeto Factory Method
+class FabricaPagina {
+
+    // Map que relaciona strings com classes
+    static CLASSES = new Map([
+        ['PaginaFormulario', PaginaFormulario],
+        ['PaginaComPopup', PaginaComPopup]
+      ]);
+
+    // Método para criar uma nova página e retorná-la
+    static criar(tipo, id) {
+        if(!FabricaPagina.CLASSES.has(tipo))
+            throw new Error("Página inválida")
+
+        return new(FabricaPagina.CLASSES.get(tipo))(id);
+    }
 }
 
-function transicaoPagina(proxPagina, id)
+// Função que realiza a transição entre páginas
+// Chamada uma vez quando o plugin é inicializado e depois é chamada através de botões nas páginas
+function transicaoPagina(tipo, id)
 {
-    pagina.destruir();
-    pagina = new(classes.get(proxPagina))(id);
+    // Se o plugin já foi inicializado, deleta a página anterior
+    if(pagina !== null) {
+        pagina.destruir();
+    }
+
+    pagina = FabricaPagina.criar(tipo, id)
     pagina.inicializar();
 }
 
+// Inicializa o plugin
 window.onload = function () {
-    inicializarPlugin();
+    transicaoPagina("PaginaComPopup", "div_index");
+};
+
+// Exporta as classes
+module.exports = {
+    Mapa,
+    Pagina,
+    PaginaComPopup,
+    PaginaFormulario,
+    FabricaPagina
 };
diff --git a/lgbtq_connect/includes/admin/formulario-admin-page.php b/lgbtq_connect/includes/admin/formulario-admin-page.php
@@ -187,9 +187,6 @@ function excluir_formulario($id) {
                         </tr>
                 </thead>
                 <tbody>
-            <?php
-            echo '<script src="' . plugin_dir_url(__FILE__) . 'admin_script.js"></script>';
-            ?>
         </div>
     </div>
 

diff --git a/lgbtq_connect/index.php b/lgbtq_connect/index.php
@@ -33,7 +33,6 @@ function load_meu_plugin_html() {
 
 // Função para enfileirar o script.js
 function load_meu_plugin_scripts() {
-    wp_enqueue_script('meu-plugin-script', plugin_dir_url(__FILE__) . 'assets/js/script.js', array(), '1.0', true);
     wp_enqueue_script('formulario_script', plugin_dir_url(__FILE__) . 'assets/js/formulario.js', array(), '1.0', true);
     wp_enqueue_script('funcionalidades_script', plugin_dir_url(__FILE__) . 'assets/js/funcionalidades.js', array(), '1.0', true);
 }
@@ -46,11 +45,25 @@ function load_meu_plugin_styles() {
         array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
 }
 
+function enfileirar_scripts_admin() {
+    // Obtém os formulários aprovados
+    $formularios_aprovados = obter_formularios_aprovados();
+
+    // Obtém todos os formulários
+    $formularios = obter_formularios();
+
+    wp_enqueue_script('admin_script.js', plugin_dir_url(__FILE__) . 'includes/admin/admin_script.js', array('jquery'), '1.0', true);
+    // Passa os dados dos formulários aprovados para o script JavaScript
+    wp_localize_script('admin_script.js', 'formularios_aprovados', $formularios_aprovados);
+
+    // Passa os dados de todos os formulários para o script JavaScript
+    wp_localize_script('admin_script.js', 'formularios_todos', $formularios);
+}
+
 // Enfileira o script JavaScript e passa os dados dos formulários aprovados para ele
 function enfileirar_scripts() {
     // Enfileira o script JavaScript
-    wp_enqueue_script('script.js', 'assets/js/script.js', array('jquery'), '1.0', true);
-    wp_enqueue_script('admin_script.js', 'includes/admin/admin_script.js', array('jquery'), '1.0', true);
+    wp_enqueue_script('script.js', plugins_url('/assets/js/script.js', __FILE__), array('jquery'), '1.0', true);
 
     // Obtém os formulários aprovados
     $formularios_aprovados = obter_formularios_aprovados();
@@ -64,21 +77,16 @@ function enfileirar_scripts() {
     // Passa os dados de todos os formulários para o script JavaScript
     wp_localize_script('script.js', 'formularios_todos', $formularios);
 }
-add_action('wp_enqueue_scripts', 'enfileirar_scripts');
-add_action('admin_enqueue_scripts', 'enfileirar_scripts');
-
-// Adiciona um gancho para enfileirar os scripts
-add_action('wp_enqueue_scripts', 'load_meu_plugin_scripts');
-add_action('admin_enqueue_scripts', 'load_meu_plugin_scripts');
 
-// Adiciona um gancho para enfileirar os estilos
-add_action('wp_enqueue_scripts', 'load_meu_plugin_styles');
-add_action('admin_enqueue_scripts', 'load_meu_plugin_styles');
+add_action('admin_enqueue_scripts', 'enfileirar_scripts_admin');
 
 // Função para adicionar o shortcode
 function meu_plugin_shortcode() {
     // Obtém o conteúdo do arquivo HTML
     $html_content = load_meu_plugin_html();
+    enfileirar_scripts();
+    load_meu_plugin_scripts();
+    load_meu_plugin_styles();
 
     // Retorna o conteúdo do arquivo HTML
     return $html_content;
-Original file line number
+Diff line change
@@ Expand Up / @@ -187,9 +187,6 @@ function excluir_formulario($id) { @@
                             </tr>
                     </thead>
                     <tbody>
-                <?php
-                echo '<script src="' . plugin_dir_url(__FILE__) . 'admin_script.js"></script>';
-                ?>
             </div>
         </div>
@@ Expand Down @@