1/**
2 * @jest-environment jsdom
3 */
4
5import { render, getByTestId } from '@testing-library/react';
6import React from 'react';
7
8import { LinearGradient } from '../LinearGradient';
9import { getLinearGradientBackgroundImage } from '../NativeLinearGradient.web';
10
11it(`renders`, () => {
12  const colors = ['cyan', '#ff00ff', 'rgba(0,0,0,0)', 'rgba(0,255,255,0.5)'];
13  const component = render(<LinearGradient colors={colors} testID="gradient" />);
14  const view = getByTestId(component.container, 'gradient');
15
16  expect(view).toMatchInlineSnapshot(`
17    <div
18      class="css-view-175oi2r"
19      data-testid="gradient"
20    />
21  `);
22});
23
24it(`computes the correct gradient background image for a simple set of props`, () => {
25  const colors = ['cyan', '#ff00ff', 'rgba(0,0,0,0)', 'rgba(0,255,255,0.5)'];
26  const backgroundImage = getLinearGradientBackgroundImage(colors);
27
28  // // Ensure the correct number of colors are present
29  expect((backgroundImage.match(/rgba/g) || []).length).toBe(colors.length);
30
31  // // Match colors
32  expect(backgroundImage).toMatchSnapshot();
33});
34
35it(`computes the correct gradient background image for a complex set of props`, () => {
36  const colors = ['red', 'rgba(0,255,255,0)'];
37  const startPoint: [number, number] = [0, 0];
38  const endPoint: [number, number] = [1, 1];
39  const locations = [0.5, 1];
40  const backgroundImage = getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint);
41
42  expect(backgroundImage).toMatchSnapshot();
43});
44