test rtl

test_generer_programatiquement.js

  /* eslint-disable @typescript-eslint/no-require-imports */
  /* eslint-disable @typescript-eslint/no-unsafe-call */
  /* eslint-disable @typescript-eslint/no-unsafe-assignment */
  /* eslint-disable @typescript-eslint/no-unsafe-member-access */
  /* eslint-disable sonarjs/no-nested-template-literals */
  /* eslint-disable testing-library/no-node-access */
  /* eslint-disable no-plusplus */
  it.only('génération programatique d’un test d’affichage HTML', () => {
    const { container } = render()

    let ulId = 0
    let dlId = 0
    let trId = -1
    let selectId = 0
    let liCounter = 0
    let dtCounter = 0
    let trCounter = 0
    let result = `
    it.only('test', () => {
      // GIVEN
      // 1. Le test doit être vert sauf petites pétouilles à modifier
      // 2. Ajouter des "within()" et renommer les constantes
      // 3. Vérifier qu'il n'y a presque plus de screen à la fin
      // 4. Le texte dans une "div" est à rajouter manuellement

      // WHEN
      render()

      // THEN`
    selfGeneratedTest(container)
    console.log(`${result}})`)

    function selfGeneratedTest(element: HTMLElement): void {
      // eslint-disable-next-line complexity
      element.childNodes.forEach((childNode: HTMLElement) => {
        const contenuDeLaBalise = childNode.textContent
        const balise = childNode.nodeName
        const ariaRole = childNode.role

        if (contenuDeLaBalise === null) {
          return
        }

        if (childNode.nodeType !== Node.TEXT_NODE) {
          const id = require('crypto').randomBytes(8).toString('hex')

          if (balise === 'A') {
            const name = contenuDeLaBalise === '' ? childNode.getAttribute('title') : contenuDeLaBalise

            result += `
              const lien${id} = screen.getByRole('link', { name: '${name}' })
              expect(lien${id}).toHaveAttribute('href', '${childNode.getAttribute('href')}')`

            if (childNode.hasAttribute('title')) {
              result += `
                expect(lien${id}).toOpenInNewTab('${childNode.getAttribute('title')?.replace(' - nouvelle fenêtre', '')}')`
            }
          } else if (balise === 'ARTICLE') {
            result += `
              const article${id} = screen.getByRole('article', { name: '${childNode.getAttribute('aria-label')}' })`
          } else if (balise === 'ASIDE') {
            result += `
              const complement${id} = screen.getByRole('complementary')`
          } else if (balise === 'BUTTON') {
            if (ariaRole === 'tab') {
              let current = 'false'
              if (childNode.getAttribute('aria-current') === 'page') {
                current = "'page'"
              }

              result += `
                const tab${id} = screen.getByRole('tab', { current: ${current}, name: '${contenuDeLaBalise}' })
                expect(tab${id}).toBeInTheDocument()`
            } else {
              let description = ''
              let name = ''
              if (childNode.hasAttribute('title')) {
                description = `description: '${childNode.title}', `
              }
              if (contenuDeLaBalise !== '') {
                name = `name: '${contenuDeLaBalise}'`
              }

              result += `
                const bouton${id} = screen.getByRole('button', { ${description}${name} })
                expect(bouton${id}).toHaveAttribute('type', '${childNode.type}')`

              if (childNode.disabled === true) {
                result += `
                  expect(bouton${id}).toBeDisabled()`
              } else {
                result += `
                  expect(bouton${id}).toBeEnabled()`
              }

              if (childNode.hasAttribute('aria-controls')) {
                result += `
                  expect(bouton${id}).toHaveAttribute('aria-controls', '${childNode.getAttribute('aria-controls')}')`
              }
            }
          } else if (balise === 'DD') {
            result += `
              const definition${id} = within(definitions${dlId}[${dtCounter++}]).getByText('${contenuDeLaBalise}')
              expect(definition${id}).toBeInTheDocument()`
          } else if (balise === 'DIALOG') {
            result += `
              const drawer${id} = screen.getByRole('dialog', { hidden: false, name: '${childNode.querySelector('h1')?.textContent}' })
              expect(drawer${id}).toHaveAttribute('id', '${childNode.id}')`
          } else if (balise === 'DL') {
            dlId += 1
            dtCounter = 0
            result += `
              const liste${dlId} = screen.getByRole('list', { name: '${childNode.getAttribute('aria-label')}' })
              expect(liste${dlId}).toHaveLength(${childNode.querySelectorAll('dt').length})
              const termes${dlId} = within(dl${dlId}).getAllByRole('term')
              const definitions${dlId} = within(dl${dlId}).getAllByRole('definition')`
          } else if (balise === 'DT') {
            result += `
              const terme${id} = within(termes${dlId}[${dtCounter++}]).getByText('${contenuDeLaBalise}')
              expect(terme${id}).toBeInTheDocument()`
          } else if (balise === 'FIELDSET') {
            result += `
              const fieldset = within(formulaire).getByRole('group', { name: '${childNode.querySelector('legend')?.textContent}' })`
          } else if (balise === 'FORM') {
            result += `
              const formulaire = screen.getByRole('form', { name: '${childNode.getAttribute('aria-label')}' })
              // S'il est dans un drawer
              // expect(formulaire).toHaveAttribute('method', 'dialog')`
          } else if (balise === 'H1') {
            result += `
              const titre${id} = screen.getByRole('heading', { level: 1, name: '${contenuDeLaBalise}' })
              expect(titre${id}).toBeInTheDocument()`
          } else if (balise === 'H2') {
            result += `
              const titre${id} = screen.getByRole('heading', { level: 2, name: '${contenuDeLaBalise}' })
              expect(titre${id}).toBeInTheDocument()`
          } else if (balise === 'H3') {
            result += `
              const titre${id} = screen.getByRole('heading', { level: 3, name: '${contenuDeLaBalise}' })
              expect(titre${id}).toBeInTheDocument()`
          } else if (balise === 'HEADER') {
            result += `
              const enTete${id} = screen.getByRole('banner')`
          } else if (balise === 'LI') {
            result += `
              expect(menuItems${ulId}[${liCounter++}].textContent).toBe('${contenuDeLaBalise}')`
          } else if (balise === 'OPTION') {
            result += `
              const option${id} = within(select${selectId}).getByRole('option', { name: '${contenuDeLaBalise}', selected: ${childNode.selected} })
              expect(option${id}).toBeInTheDocument()`
          } else if (balise === 'P') {
            result += `
              const texte${id} = screen.getByText('${contenuDeLaBalise}', { selector: 'p' })
              expect(texte${id}).toBeInTheDocument()`
          } else if (balise === 'SECTION') {
            result += `
              const section${id} = screen.getByRole('region', { name: '${childNode.querySelector(`#${childNode.getAttribute('aria-labelledby')}`)?.textContent}' })`
          } else if (balise === 'SELECT') {
            selectId += 1
            result += `
              const select${selectId} = within(formulaire).getByRole('combobox', { name: '${childNode.labels[0].textContent}' })
              expect(select${selectId}).${childNode.required === true ? '' : 'not.'}toBeRequired()
              expect(select${selectId}).toHaveLength(${childNode.querySelectorAll('option').length})`
          } else if (balise === 'TABLE') {
            trId = -1
            result += `
              const table = screen.getByRole('table', { name: '${childNode.caption.textContent}' })
              const [head, body] = within(table).getAllByRole('rowgroup')
              const rowHead = within(head).getByRole('row')
              const columnsHead = within(rowHead).getAllByRole('columnheader')
              expect(columnsHead).toHaveLength(${childNode.querySelectorAll('th').length})
              const rowsBody = within(body).getAllByRole('row')`
          } else if (balise === 'TD') {
            result += `
              expect(columns${trId}Body[${trCounter++}].textContent).toBe('${contenuDeLaBalise}')`
          } else if (balise === 'TH') {
            result += `
              expect(columnsHead[${trCounter}].textContent).toBe('${contenuDeLaBalise}')
              expect(columnsHead[${trCounter++}]).toHaveAttribute('scope', 'col')`
          } else if (balise === 'TR') {
            trCounter = 0

            if (childNode.childNodes[0].nodeName === 'TD') {
              trId += 1
              result += `
                const columns${trId}Body = within(rowsBody[${trId}]).getAllByRole('cell')
                expect(columns${trId}Body).toHaveLength(${childNode.querySelectorAll('td').length})`
            }
          } else if (balise === 'UL') {
            ulId += 1
            liCounter = 0
            result += `
              const menu${ulId} = screen.getByRole('list')
              const menuItems${ulId} = within(menu${ulId}).getAllByRole('listitem')
              expect(menuItems${ulId}).toHaveLength(${childNode.querySelectorAll('li').length})`
          }

          selfGeneratedTest(childNode)
        }
      })
    }
  })