[WIP] [Tests - E2E] Utilisation de Playwright plutôt que Cypress

.github/workflows/main.yml

@@ -172,6 +172,14 @@ jobs:
           MAILER_DSN: ${{ secrets.MAILER_DSN_CI }}
           CRON_ENABLE: 1
           MAIL_ENABLE: 1
+          FEATURE_ASK_VISITE_ENABLE: 1
           MAINTENANCE_ENABLE: 0
           CLAMAV_STRATEGY: 'clamd_network'
           CLAMAV_HOST: 127.0.0.1
+          PLAYWRIGHT_TEST_BASE_URL: http://localhost:8080
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/playwright.yml

@@ -0,0 +1,106 @@
+name: Playwright Tests
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  playwright:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    services:
+      # https://docs.docker.com/samples/library/mysql/
+      mysql:
+        image: mysql:8.0
+        env:
+          MYSQL_ALLOW_EMPTY_PASSWORD: false
+          MYSQL_ROOT_PASSWORD: histologe
+          MYSQL_DATABASE: histologe_db
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+
+    strategy:
+      fail-fast: true
+      matrix:
+        php-versions: ['8.3']
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Setup PHP, extensions and composer with shivammathur/setup-php
+      uses: shivammathur/setup-php@v2
+      with:
+        php-version: ${{ matrix.php-versions }}
+        extensions: mbstring, xml, ctype, iconv, intl, pdo, pdo_mysql, dom, filter, gd, iconv, json, mbstring, sockets
+      env:
+        update: true
+
+    #- uses: actions/setup-node@v4
+    #  with:
+    #    node-version: lts/*
+
+    - name: Get composer cache directory
+      id: composer-cache
+      run: echo "::set-output name=dir::$(composer config cache-files-dir)"
+
+    - name: Cache composer dependencies
+      uses: actions/cache@v1
+      with:
+         path: ${{ steps.composer-cache.outputs.dir }}
+         key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
+         restore-keys: ${{ runner.os }}-composer-
+
+    - name: Cache playwright dependencies
+      uses: actions/cache@v3
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys:
+          ${{ runner.os }}-node-
+
+    - name: Init CI environment variables
+      # HACK: Symfony won't read from 'env: { DATABASE_URL: ... }', so we need to edit
+      # .env directly.
+      run: |
+        echo "DATABASE_URL=mysql://root:[email protected]:${{ job.services.mysql.ports['3306'] }}/histologe_db" >> .env
+
+    - name: Install Symfony CLI
+      run: |
+        curl -1sLf 'https://dl.cloudsmith.io/public/symfony/stable/setup.deb.sh' | sudo -E bash
+        sudo apt install symfony-cli
+
+    - name: Call Make
+      run: make test_e2e_ci BIN_CONSOLE="php bin/console" BIN_COMPOSER="composer"
+      env:
+        HISTOLOGE_URL: http://localhost:8080
+        DATABASE_URL: mysql://root:[email protected]:${{ job.services.mysql.ports['3306'] }}/histologe_db
+
+    #- name: Install dependencies
+    #  run: npm ci
+
+    #- name: Install Playwright Browsers
+    #  run: npx playwright install --with-deps
+
+    #- name: Run Playwright tests
+    #  run: npx playwright test
+    #  env:
+    #    APP_SECRET: ${{ secrets.APP_SECRET }}
+    #    PLAYWRIGHT_TEST_BASE_URL: http://localhost:8080
+    #    DATABASE_URL: mysql://root:[email protected]:${{ job.services.mysql.ports['3306'] }}/histologe_db
+    #    HISTOLOGE_URL: http://localhost:8080
+    #    SERVER_NAME: localhost:8080
+
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -40,4 +40,8 @@ tmp/*
 /scripts/local/
 src/DataFixtures/Images/sample-target.png
 /metabase-data/
-metabase-data/*
+metabase-data/*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

Makefile

@@ -10,6 +10,10 @@ PHPUNIT       = ./vendor/bin/phpunit
 SYMFONY       = php bin/console
 NPX           = npx
 NPM           = npm
+#CI tests
+DOCKER_EXEC_PHP = ${DOCKER_COMP} exec php
+BIN_CONSOLE = ${_DOCKER_EXEC_PHP} symfony console
+BIN_COMPOSER = ${_DOCKER_EXEC_PHP} symfony composer
 
 help:
 	@grep -E '(^[a-zA-Z0-9_-]+:.*?##.*$$)|(^##)' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}{printf "\033[32m%-30s\033[0m %s\n", $$1, $$2}' | sed -e 's/\[32m##/[33m/'
@@ -244,3 +248,25 @@ run-concurrency-request: ## Run concurrency request based postman collection
 
 .sleep:
 	@sleep 30
+
+test_e2e_ci:
+	make test_e2e_ci_install_deps
+	make test_e2e_ci_dbinstall
+	make test_e2e_ci_assets
+	make test_e2e_ci_test
+
+test_e2e_ci_install_deps:
+	$(BIN_COMPOSER) install -n --prefer-dist
+	${_DOCKER_EXEC_PHP} npm ci
+	${_DOCKER_EXEC_PHP} npx playwright install --with-deps firefox
+
+test_e2e_ci_assets:
+	${_DOCKER_EXEC_PHP} npm run build
+
+test_e2e_ci_dbinstall:
+	$(BIN_CONSOLE) doctrine:database:create --env=test --if-not-exists
+	$(BIN_CONSOLE) doctrine:migrations:migrate -n --all-or-nothing --env=test
+	$(BIN_CONSOLE) doctrine:fixtures:load --env=test -n
+
+test_e2e_ci_test:
+	${_DOCKER_EXEC_PHP} npx playwright test --project firefox

assets/scripts/vue/components/common/external/HistoDatePicker.vue

@@ -3,8 +3,8 @@
     <label class="fr-label fr-mb-2v" :for="id">
       <slot name="label"></slot>
     </label>
-    <Datepicker
-      v-model="dates"
+    <VueDatePicker
+      v-model="date"
       @update:modelValue="handleDate"
       locale="fr"
       range
@@ -23,39 +23,41 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import Datepicker from '@vuepic/vue-datepicker'
+import VueDatepicker from '@vuepic/vue-datepicker'
 
 export default defineComponent({
   name: 'HistoDatePicker',
-  components: { Datepicker },
-  expose: ['updateDate'],
+  components: { VueDatepicker },
+  // expose: ['updateDate'],
   props: {
     id: { type: String, default: null },
     modelValue: { type: Array },
     placeholder: { type: String, default: null }
   },
-  watch: {
+  /*watch: {
     modelValue (newValue: any) {
       this.dates = newValue
     }
-  },
-  data () {
+  },*/
+  data: function () {
     return {
-      dates: this.modelValue
+      //dates: this.modelValue
+      date: null
     }
   },
   emits: ['update:modelValue'],
   methods: {
-    updateDate: function (newDates: Array<Date>) {
+    /*updateDate: function (newDates: Array<Date>) {
       this.dates = newDates
-    },
+    },*/
     handleDate: function (modelData: any) {
       if (modelData !== null && modelData[1] === null) {
         modelData[1] = new Date()
       }
-      if (this.dates !== undefined && this.dates !== null) {
+      /* if (this.dates !== undefined && this.dates !== null) {
         this.dates = modelData
-      }
+      } */
+     console.log(modelData)
       this.$emit('update:modelValue', modelData)
     }
   }

assets/scripts/vue/components/signalement-list/components/SignalementListFilters.vue

@@ -147,15 +147,15 @@
                 </HistoMultiSelect>
               </div>
               <div class="fr-col-12 fr-col-lg-6 fr-col-xl-3 grey-background">
-                <HistoDatePicker
-                  id="filter-date-depot"
-                  ref="filter-date-depot"
-                  v-model="sharedState.input.filters.dateDepot"
-                  title="Rechercher par date de dépot"
-                  @update:modelValue="onChange(false)"
-                  >
-                  <template #label>Date de dépot</template>
-                </HistoDatePicker>
+<!--                <HistoDatePicker-->
+<!--                  id="filter-date-depot"-->
+<!--                  ref="filter-date-depot"-->
+<!--                  v-model="sharedState.input.filters.dateDepot"-->
+<!--                  title="Rechercher par date de dépot"-->
+<!--                  @update:modelValue="onChange(false)"-->
+<!--                  >-->
+<!--                  <template #label>Date de dépot</template>-->
+<!--                </HistoDatePicker>-->
               </div>
               <div class="fr-col-12 fr-col-lg-6 fr-col-xl-3 grey-background">
                 <HistoSelect
@@ -208,15 +208,15 @@
                 </HistoSelect>
               </div>
               <div class="fr-col-12 fr-col-lg-6 fr-col-xl-3 grey-background">
-                <HistoDatePicker
-                  id="filter-date-dernier-suivi"
-                  ref="filter-date-dernier-suivi"
-                  v-model="sharedState.input.filters.dateDernierSuivi"
-                  title="Rechercher par date de dernier suivi"
-                  @update:modelValue="onChange(false)"
-                  >
-                  <template #label>Date de dernier suivi</template>
-                </HistoDatePicker>
+<!--                <HistoDatePicker-->
+<!--                  id="filter-date-dernier-suivi"-->
+<!--                  ref="filter-date-dernier-suivi"-->
+<!--                  v-model="sharedState.input.filters.dateDernierSuivi"-->
+<!--                  title="Rechercher par date de dernier suivi"-->
+<!--                  @update:modelValue="onChange(false)"-->
+<!--                  >-->
+<!--                  <template #label>Date de dernier suivi</template>-->
+<!--                </HistoDatePicker>-->
               </div>
               <div v-if="sharedState.user.canSeeStatusAffectation" class="fr-col-12 fr-col-lg-4 fr-col-xl-3 grey-background">
                 <HistoSelect
@@ -342,7 +342,7 @@ import AppAutoComplete from '../../common/AppAutoComplete.vue'
 import AppNumber from '../../common/AppNumber.vue'
 import AppSearch from '../../common/AppSearch.vue'
 import HistoSelect from '../../common/HistoSelect.vue'
-import HistoDatePicker from '../../common/external/HistoDatePicker.vue'
+//import HistoDatePicker from '../../common/external/HistoDatePicker.vue'
 import HistoMultiSelect from '../../common/HistoMultiSelect.vue'
 import { store } from '../store'
 import { buildBadge } from '../services/badgeFilterLabelBuilder'
@@ -355,7 +355,7 @@ export default defineComponent({
     AppAutoComplete,
     AppSearch,
     HistoMultiSelect,
-    HistoDatePicker,
+    //HistoDatePicker,
     HistoSelect
   },
   props: {
@@ -367,8 +367,8 @@ export default defineComponent({
   },
   emits: ['changeTerritory', 'clickReset'],
   computed: {
-    filtersSanitized () {
-      const filters = Object.entries(this.sharedState.input.filters).filter(([key, value]) => {
+    filtersSanitized (): any {
+      const filters: any = Object.entries(this.sharedState.input.filters).filter(([key, value]) => {
         if (key === 'isImported' || key === 'showMyAffectationOnly' || key === 'showWithoutAffectationOnly') {
           return false
         }

assets/scripts/vue/components/stats/TheHistoStatsFilters.vue

@@ -52,14 +52,14 @@
           </HistoSelect>
         </div>
         <div class="fr-col-12 fr-col-lg-6 fr-col-xl-4">
-          <HistoDatePicker
-            id="histofiltersdatepicker"
-            ref="histofiltersdatepicker"
-            v-model="sharedState.filters.dateRange"
-            @update:modelValue="onChange(false)"
-            >
-            <template #label>Dates des signalements</template>
-          </HistoDatePicker>
+<!--          <HistoDatePicker-->
+<!--            id="histofiltersdatepicker"-->
+<!--            ref="histofiltersdatepicker"-->
+<!--            v-model="sharedState.filters.dateRange"-->
+<!--            @update:modelValue="onChange(false)"-->
+<!--            >-->
+<!--            <template #label>Dates des signalements</template>-->
+<!--          </HistoDatePicker>-->
         </div>
         <div class="fr-col-12 fr-col-lg-6 fr-col-xl-5">
           <div class="fr-mb-3v">
@@ -94,7 +94,7 @@ import { store } from './store'
 import HistoSelect from '../common/HistoSelect.vue'
 import HistoMultiSelect from '../common/HistoMultiSelect.vue'
 import HistoCheckbox from '../common/HistoCheckbox.vue'
-import HistoDatePicker from '../common/external/HistoDatePicker.vue'
+//import HistoDatePicker from '../common/external/HistoDatePicker.vue'
 
 export default defineComponent({
   name: 'TheHistoStatsFilters',
@@ -104,8 +104,8 @@ export default defineComponent({
   components: {
     HistoSelect,
     HistoMultiSelect,
-    HistoCheckbox,
-    HistoDatePicker
+    HistoCheckbox/*,
+    HistoDatePicker*/
   },
   data () {
     const etiquettes = new Array<string>()