src/app/pages/ErrorPage/__snapshots__/index.test.jsx.snap from bbc/simorgh

src/app/pages/ErrorPage/__snapshots__/index.test.jsx.snap
Summary

Maintainability

Test Coverage

Issues
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ErrorPage should correctly render for 404 1`] = `
.emotion-1 {
  width: 100%;
  padding-bottom: 4rem;
}

@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(20, 1fr);
      grid-column-end: span 20;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@media (min-width: 80rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (max-width: 14.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-left: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-left: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-left: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-left: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-3 {
    margin-left: 16.666666666666668%;
  }
}

@media (min-width: 80rem) {
  .emotion-3 {
    margin-left: 33.333333333333336%;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(12, 1fr);
      grid-column-end: span 12;
      grid-column-start: 5;
    }
  }
}

.emotion-5 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #B80000;
  display: block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 600;
  padding: 2.5rem 0 0.5rem 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-5 {
    font-size: 1.375rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-5 {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

.emotion-7 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #3F3F42;
  margin-top: 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-7 {
    font-size: 2rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-7 {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

.emotion-9 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-top: 0.2rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

.emotion-19 {
  color: #222222;
  border-bottom: 1px solid #B80000;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-19:visited {
  color: #6E6E73;
  border-bottom: 1px solid #6E6E73;
}

.emotion-19:focus,
.emotion-19:hover {
  border-bottom: 2px solid #B80000;
  color: #B80000;
}

<div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="ltr"
    >
      <span
        class="emotion-5 emotion-6"
        data-e2e="status-code"
      >
        404
      </span>
      <h1
        class="emotion-7 emotion-8"
        id="content"
        tabindex="-1"
      >
        Page cannot be found
      </h1>
      <p
        class="emotion-9 emotion-10"
      >
        Sorry, we're unable to bring you the page you're looking for. Please try:
      </p>
      <ul>
        <li
          class="emotion-9 emotion-10"
        >
          Double checking the url
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          Hitting the refresh button in your browser
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          Searching for this page using the BBC search bar
        </li>
      </ul>
      <p
        class="emotion-9 emotion-10"
      >
        Alternatively, please visit the 
        <a
          class="focusIndicatorReducedWidth emotion-19 emotion-20"
          href="https://www.bbc.com/news"
        >
          BBC News homepage.
        </a>
      </p>
    </div>
  </main>
</div>
`;

exports[`ErrorPage should correctly render for 404 for persian 1`] = `
.emotion-1 {
  width: 100%;
  padding-bottom: 4rem;
}

@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(20, 1fr);
      grid-column-end: span 20;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@media (min-width: 80rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (max-width: 14.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-3 {
    margin-right: 16.666666666666668%;
  }
}

@media (min-width: 80rem) {
  .emotion-3 {
    margin-right: 33.333333333333336%;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(12, 1fr);
      grid-column-end: span 12;
      grid-column-start: 5;
    }
  }
}

.emotion-5 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #B80000;
  display: block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 600;
  padding: 2.5rem 0 0.5rem 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-5 {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-5 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}

.emotion-7 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #3F3F42;
  margin-top: 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-7 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-7 {
    font-size: 2.5rem;
    line-height: 3.375rem;
  }
}

.emotion-9 {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-top: 0.2rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.625rem;
  }
}

.emotion-19 {
  color: #222222;
  border-bottom: 1px solid #B80000;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-19:visited {
  color: #6E6E73;
  border-bottom: 1px solid #6E6E73;
}

.emotion-19:focus,
.emotion-19:hover {
  border-bottom: 2px solid #B80000;
  color: #B80000;
}

<div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="rtl"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="rtl"
    >
      <span
        class="emotion-5 emotion-6"
        data-e2e="status-code"
      >
        ۴۰۴
      </span>
      <h1
        class="emotion-7 emotion-8"
        id="content"
        tabindex="-1"
      >
        این صفحه پیدا نشد
      </h1>
      <p
        class="emotion-9 emotion-10"
      >
        متاسفانه صفحه مورد نظر شما را پیدا نمی‌کنیم. لطفا گزینه‌های زیر را امتحان کنید:
      </p>
      <ul>
        <li
          class="emotion-9 emotion-10"
        >
          آدرس صفحه مورد نظر را دوباره بررسی کنید
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          با مرورگر خود صفحه را ریفرش کنید
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          در نوار جستجوی بی‌بی‌سی دنبال اطلاعات مورد نظرتان بگردید
        </li>
      </ul>
      <p
        class="emotion-9 emotion-10"
      >
        برای یافتن اطلاعات مورد نظر به صفحه اصلی 
        <a
          class="focusIndicatorReducedWidth emotion-19 emotion-20"
          href="https://www.bbc.com/persian"
        >
          BBC News فارسی
        </a>
         بروید
      </p>
    </div>
  </main>
</div>
`;

exports[`ErrorPage should correctly render for 500 1`] = `
.emotion-1 {
  width: 100%;
  padding-bottom: 4rem;
}

@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(20, 1fr);
      grid-column-end: span 20;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@media (min-width: 80rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (max-width: 14.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-left: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-left: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-left: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-left: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-3 {
    margin-left: 16.666666666666668%;
  }
}

@media (min-width: 80rem) {
  .emotion-3 {
    margin-left: 33.333333333333336%;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(12, 1fr);
      grid-column-end: span 12;
      grid-column-start: 5;
    }
  }
}

.emotion-5 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #B80000;
  display: block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 600;
  padding: 2.5rem 0 0.5rem 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-5 {
    font-size: 1.375rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-5 {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

.emotion-7 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #3F3F42;
  margin-top: 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-7 {
    font-size: 2rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-7 {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

.emotion-9 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-top: 0.2rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

.emotion-17 {
  color: #222222;
  border-bottom: 1px solid #B80000;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-17:visited {
  color: #6E6E73;
  border-bottom: 1px solid #6E6E73;
}

.emotion-17:focus,
.emotion-17:hover {
  border-bottom: 2px solid #B80000;
  color: #B80000;
}

<div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="ltr"
    >
      <span
        class="emotion-5 emotion-6"
        data-e2e="status-code"
      >
        500
      </span>
      <h1
        class="emotion-7 emotion-8"
        id="content"
        tabindex="-1"
      >
        Internal server error
      </h1>
      <p
        class="emotion-9 emotion-10"
      >
        Sorry, we're currently unable to bring you the page you're looking for. Please try:
      </p>
      <ul>
        <li
          class="emotion-9 emotion-10"
        >
          Hitting the refresh button in your browser
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          Coming back again later
        </li>
      </ul>
      <p
        class="emotion-9 emotion-10"
      >
        Alternatively, please visit the 
        <a
          class="focusIndicatorReducedWidth emotion-17 emotion-18"
          href="https://www.bbc.com/news"
        >
          BBC News homepage.
        </a>
      </p>
    </div>
  </main>
</div>
`;

exports[`ErrorPage should correctly render for 500 for persian 1`] = `
.emotion-1 {
  width: 100%;
  padding-bottom: 4rem;
}

@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(20, 1fr);
      grid-column-end: span 20;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@media (min-width: 80rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (max-width: 14.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-3 {
    margin-right: 16.666666666666668%;
  }
}

@media (min-width: 80rem) {
  .emotion-3 {
    margin-right: 33.333333333333336%;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(12, 1fr);
      grid-column-end: span 12;
      grid-column-start: 5;
    }
  }
}

.emotion-5 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #B80000;
  display: block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 600;
  padding: 2.5rem 0 0.5rem 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-5 {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-5 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}

.emotion-7 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #3F3F42;
  margin-top: 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-7 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-7 {
    font-size: 2.5rem;
    line-height: 3.375rem;
  }
}

.emotion-9 {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-top: 0.2rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.625rem;
  }
}

.emotion-17 {
  color: #222222;
  border-bottom: 1px solid #B80000;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-17:visited {
  color: #6E6E73;
  border-bottom: 1px solid #6E6E73;
}

.emotion-17:focus,
.emotion-17:hover {
  border-bottom: 2px solid #B80000;
  color: #B80000;
}

<div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="rtl"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="rtl"
    >
      <span
        class="emotion-5 emotion-6"
        data-e2e="status-code"
      >
        ۵۰۰
      </span>
      <h1
        class="emotion-7 emotion-8"
        id="content"
        tabindex="-1"
      >
        خطا در سرور داخلی
      </h1>
      <p
        class="emotion-9 emotion-10"
      >
        متاسفانه صفحه مورد نظر شما در دسترس نیست. لطفا گزینه‌های زیر را امتحان کنید:
      </p>
      <ul>
        <li
          class="emotion-9 emotion-10"
        >
          با مرورگر خود صفحه را ریفرش کنید
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          بعدا دوباره امتحان کنید
        </li>
      </ul>
      <p
        class="emotion-9 emotion-10"
      >
        برای یافتن اطلاعات مورد نظر به صفحه اصلی 
        <a
          class="focusIndicatorReducedWidth emotion-17 emotion-18"
          href="https://www.bbc.com/persian"
        >
          BBC News فارسی
        </a>
         بروید
      </p>
    </div>
  </main>
</div>
`;

exports[`ErrorPage should correctly render for other status code 1`] = `
.emotion-1 {
  width: 100%;
  padding-bottom: 4rem;
}

@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(20, 1fr);
      grid-column-end: span 20;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@media (min-width: 80rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (max-width: 14.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-left: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-3 {
    padding: 0 0.5rem;
    margin-left: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-left: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-3 {
    padding: 0 1rem;
    margin-left: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-3 {
    margin-left: 16.666666666666668%;
  }
}

@media (min-width: 80rem) {
  .emotion-3 {
    margin-left: 33.333333333333336%;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 0.5rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      padding: 0 1rem;
      grid-column-start: 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(12, 1fr);
      grid-column-end: span 12;
      grid-column-start: 5;
    }
  }
}

.emotion-5 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #B80000;
  display: block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 600;
  padding: 2.5rem 0 0.5rem 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-5 {
    font-size: 1.375rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-5 {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

.emotion-7 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #3F3F42;
  margin-top: 0;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-7 {
    font-size: 2rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-7 {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

.emotion-9 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-top: 0.2rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-9 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

.emotion-17 {
  color: #222222;
  border-bottom: 1px solid #B80000;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-17:visited {
  color: #6E6E73;
  border-bottom: 1px solid #6E6E73;
}

.emotion-17:focus,
.emotion-17:hover {
  border-bottom: 2px solid #B80000;
  color: #B80000;
}

<div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="ltr"
    >
      <span
        class="emotion-5 emotion-6"
        data-e2e="status-code"
      >
        500
      </span>
      <h1
        class="emotion-7 emotion-8"
        id="content"
        tabindex="-1"
      >
        Internal server error
      </h1>
      <p
        class="emotion-9 emotion-10"
      >
        Sorry, we're currently unable to bring you the page you're looking for. Please try:
      </p>
      <ul>
        <li
          class="emotion-9 emotion-10"
        >
          Hitting the refresh button in your browser
        </li>
        <li
          class="emotion-9 emotion-10"
        >
          Coming back again later
        </li>
      </ul>
      <p
        class="emotion-9 emotion-10"
      >
        Alternatively, please visit the 
        <a
          class="focusIndicatorReducedWidth emotion-17 emotion-18"
          href="https://www.bbc.com/news"
        >
          BBC News homepage.
        </a>
      </p>
    </div>
  </main>
</div>
`;