name: "next:script-for-ga:src-with-dangeroushtml"

query: |
  query {
    File {
      jsx_element {
        opening_element {
          name @filter(op: "=", value: ["$script"])

          span_: span {
            start @output
            end @output
          }

          attribute @fold @transform(op: "count") @filter(op: ">", value: ["$zero"]) {
            name @filter(op: "=", value: ["$dangerouslySetInnerHTML"])

            value_as_expression @fold @transform(op: "count") @filter(op: ">", value: ["$zero"]) {
              ... on ObjectLiteral {
                value(key: "__html") {
                  as_constant_string @filter(op: "regex", value: ["$g_analytics_urls_regex"])
                }
              }
            }
          }
        }
      }
    }
  }

args:
  zero: 0
  script: "script"
  dangerouslySetInnerHTML: "dangerouslySetInnerHTML"
  g_analytics_urls_regex: "(www\\.google-analytics\\.com\\/analytics\\.js)|(www\\.googletagmanager\\.com\\/gtm\\.js)"

summary: "Prefer `next/script` component when using the inline script for Google Analytics."
reason: "An inline script was used for Google analytics which might impact your webpage's performance."

tests:
  pass:
    - relative_path:
        - "index.tsx"
      code: |
        import Script from 'next/script'

        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <Script
                  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
                  strategy="lazyOnload"
                />
                <Script id="google-analytics">
                  {`
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){window.dataLayer.push(arguments);}
                    gtag('js', new Date());

                    gtag('config', 'GA_MEASUREMENT_ID');
                  `}
                </Script>
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        import Script from 'next/script'

        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <Script id="google-analytics">
                  {`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

                      ga('create', 'UA-XXXXX-Y', 'auto');
                      ga('send', 'pageview');
                  })`}
                </Script>
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        import Script from 'next/script'

        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <Script id="google-analytics">
                  {`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

                      ga('create', 'UA-XXXXX-Y', 'auto');
                      ga('send', 'pageview');
                  })`}
                </Script>
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <script dangerouslySetInnerHTML={{}} />
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <script async src='https://www.googletagmanager.com/gtag/js?id=$\{GA_TRACKING_ID}' />
                <script
                  dangerouslySetInnerHTML={{
                    __html: `
                      window.dataLayer = window.dataLayer || [];
                      function gtag(){dataLayer.push(arguments);}
                      gtag('js', new Date());
                      gtag('config', '\${GA_TRACKING_ID}', {
                        page_path: window.location.pathname,
                      });
                  `,
                }}/>
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <script dangerouslySetInnerHTML={{
                    __html: `
                        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
                        ga('create', 'UA-XXXXX-Y', 'auto');
                        ga('send', 'pageview');
                    `,
                  }}/>
                <script async src='https://www.google-analytics.com/analytics.js'></script>
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class Blah extends Head {
          createGoogleAnalyticsMarkup() {
            return {
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'UA-148481588-2');`,
            };
          }

          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <script dangerouslySetInnerHTML={this.createGoogleAnalyticsMarkup()} />
                <script async src='https://www.google-analytics.com/analytics.js'></script>
              </div>
            );
          }
        }
  fail:
    - relative_path:
        - "index.tsx"
      code: |
        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1> qqq
                {/* Google Tag Manager - Global base code */}
                <script
                dangerouslySetInnerHTML={{
                  __html: `
                    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                    })(window,document,'script','dataLayer', '\${GTM_ID}');
                  `,
                }}/>
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class Blah extends Head {
          render() {
            return (
              <div>
                <h1>Hello title</h1>
                <script dangerouslySetInnerHTML={{
                    __html: `
                      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

                        ga('create', 'UA-XXXXX-Y', 'auto');
                        ga('send', 'pageview');
                    `,
                  }}/>
              </div>
            );
          }
        }
