import { act, render, screen, waitFor } from "@testing-library/react"
import MatchMediaMock from "jest-matchmedia-mock"

import { createRemixStub, RemixStubProps } from "@remix-run/testing"
import App from "../root"
import React from "react"
import Index from "./_index"
let RemixStub: (props: RemixStubProps) => React.JSX.Element

describe("root", () => {
  beforeEach(() => {
    RemixStub = createRemixStub([
      {
        path: "/",
        meta: () => [],
        links: () => [],
        loader: () => ({ isSupported: true, isMobileSafari: true }),
        Component: Index,
      },
    ])
  })

  let matchMedia: MatchMediaMock

  beforeAll(() => {
    matchMedia = new MatchMediaMock()
  })

  afterEach(() => {
    matchMedia.clear()
  })

  describe("when user is on iOS", () => {
    describe("version 16.4 or higher", () => {
      describe("and tack up now is not already installed on their device", () => {
        test("they are instructed to install tack up now", async () => {
          render(<RemixStub />)

          await waitFor(
            () => screen.findByText<HTMLElement>(/Install Tack Up Now!/),
            {
              timeout: 2000,
            }
          )

          expect(true).toBe(true)
        })
      })
    })
  })
})